/**
 * Lumina Photography — Responsive Stylesheet
 * Mobile-first breakpoint system.
 *
 * Breakpoints:
 *  xs  < 480px   (small phones)
 *  sm  < 640px   (phones)
 *  md  < 768px   (large phones / small tablets)
 *  lg  < 1024px  (tablets / small laptops)
 *  xl  < 1280px  (laptops)
 *  2xl > 1536px  (large screens)
 *
 * @package LuminaPhotography
 */

/* ============================================================
   LARGE SCREENS (1536px+)
   ============================================================ */
@media (min-width: 1536px) {
  :root { --container-lg: 1440px; }

  .masonry-grid       { columns: 5; }
  .instagram-grid     { grid-template-columns: repeat(8, 1fr); }
  .services-grid      { grid-template-columns: repeat(4, 1fr); }
  .blog-grid          { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   XL — LAPTOPS (max 1280px)
   ============================================================ */
@media (max-width: 1280px) {
  .masonry-grid           { columns: 3; }
  .footer-top             { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
  .pricing-grid           { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .pricing-card.featured  { transform: scale(1); }
  .stats-grid             { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2)::after { display: none; }
  .video-grid             { grid-template-columns: 1.5fr 1fr; }
}

/* ============================================================
   LG — TABLETS (max 1024px)
   ============================================================ */
@media (max-width: 1024px) {

  /* About */
  .about-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .about-image-wrapper {
    max-width: 500px;
    margin-inline: auto;
  }
  .about-image-accent { right: 0.5rem; bottom: -0.5rem; }
  .about-badge        { left: -1rem; }

  /* Booking / Contact */
  .booking-grid   { grid-template-columns: 1fr; gap: var(--space-xl); }
  .contact-grid   { grid-template-columns: 1fr; gap: var(--space-xl); }

  /* Contact map */
  .contact-map    { min-height: 350px; }
  .contact-map iframe { min-height: 350px; }

  /* Video */
  .video-grid                        { grid-template-columns: 1fr; grid-template-rows: auto; }
  .video-item:first-child            { grid-row: span 1; }
  .video-item:first-child .video-thumbnail { aspect-ratio: 16/9; min-height: auto; }

  /* Instagram */
  .instagram-grid { grid-template-columns: repeat(4, 1fr); }

  /* Blog */
  .blog-grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer */
  .footer-top   { grid-template-columns: 1fr 1fr; }

  /* Post navigation */
  .post-navigation .container { grid-template-columns: 1fr; }

  /* Awards */
  .awards-grid { grid-template-columns: repeat(3, 1fr); }

  /* Pricing (already handled at 1280 but ensure correct) */
  .pricing-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   MD — TABLETS (max 768px)
   ============================================================ */
@media (max-width: 768px) {
  :root { --space-section: 4rem; }

  /* Header: hide desktop nav */
  .main-nav         { display: none; }
  .header-cta .btn  { display: none; }
  .menu-toggle      { display: flex; }
  .mobile-nav       { display: flex; }

  /* Hero */
  .hero-name    { font-size: clamp(3rem, 15vw, 5rem); }
  .hero-actions { gap: 0.75rem; }

  /* Masonry → 2 columns */
  .masonry-grid   { columns: 2; }

  /* Instagram → 3 columns */
  .instagram-grid { grid-template-columns: repeat(3, 1fr); }

  /* Stats */
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2)::after { display: none; }

  /* Blog → 1 column */
  .blog-grid { grid-template-columns: 1fr; }

  /* Grids */
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }

  /* Forms */
  .form-row { grid-template-columns: 1fr; }

  /* About stats */
  .about-stats { grid-template-columns: repeat(2, 1fr); }

  /* Footer */
  .footer-top   { grid-template-columns: 1fr; gap: var(--space-xl); }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
  .footer-bottom-links { justify-content: center; }

  /* Testimonials */
  .testimonials-nav { display: none; }
  .testimonial-quote { font-size: var(--fs-xl); }

  /* Services: 2 columns */
  .services-grid { grid-template-columns: repeat(2, 1fr); }

  /* Pricing */
  .pricing-grid { max-width: 380px; }

  /* Awards */
  .awards-grid { grid-template-columns: repeat(2, 1fr); }

  /* Lightbox nav */
  .lightbox-prev { left: -2rem; }
  .lightbox-next { right: -2rem; }

  /* Section header */
  .section-title { font-size: var(--fs-3xl); }

  /* About image wrapper */
  .about-image-wrapper::before { display: none; }

  /* Page hero */
  .page-hero        { height: 45vh; min-height: 280px; }
  .page-title       { font-size: var(--fs-3xl); }

  /* Scroll top: reposition so doesn't overlap WhatsApp */
  .scroll-top { bottom: 5.5rem; }

  /* WhatsApp tooltip */
  .whatsapp-float::before { display: none; }
}

/* ============================================================
   SM — LARGE PHONES (max 640px)
   ============================================================ */
@media (max-width: 640px) {

  /* Hero CTA stack */
  .hero-actions { flex-direction: column; align-items: center; width: 100%; }
  .hero-actions .btn { width: 100%; max-width: 300px; justify-content: center; }

  /* Services: 1 column */
  .services-grid { grid-template-columns: 1fr; }
  .service-card  { aspect-ratio: 4/3; }

  /* Portfolio filters: scrollable */
  .portfolio-filters {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .portfolio-filters::-webkit-scrollbar { display: none; }

  /* Instagram */
  .instagram-grid { grid-template-columns: repeat(2, 1fr); }

  /* About stats: 1 column */
  .about-stats { grid-template-columns: 1fr; text-align: left; }

  /* Footer newsletter */
  .footer-newsletter-input { flex-direction: column; }
  .footer-newsletter-input input { width: 100%; }
  .footer-newsletter-input button { width: 100%; padding: 0.9em; }

  /* Awards: 1 column on very small */
  .awards-grid { grid-template-columns: repeat(2, 1fr); }

  /* Blog card no image */
  .blog-card-image { aspect-ratio: 16/9; }

  /* Pricing card padding */
  .pricing-card { padding: var(--space-lg); }

  /* Testimonial */
  .testimonial-card { padding: var(--space-lg) var(--space-sm); }

  /* Author box */
  .author-box { flex-direction: column; }

  /* Form row always stacked */
  .form-row { grid-template-columns: 1fr; }

  /* Masonry */
  .masonry-grid { columns: 2; column-gap: 8px; }
  .masonry-item { margin-bottom: 8px; }
}

/* ============================================================
   XS — SMALL PHONES (max 480px)
   ============================================================ */
@media (max-width: 480px) {
  :root { --space-section: 3rem; }

  /* Masonry single col on smallest */
  .masonry-grid   { columns: 1; }

  /* Instagram 2 col */
  .instagram-grid { grid-template-columns: repeat(2, 1fr); }

  /* Stats */
  .stats-grid { grid-template-columns: 1fr; }
  .stat-item::after { display: none !important; }

  /* Awards */
  .awards-grid { grid-template-columns: 1fr; }

  /* Container padding */
  .container { padding-inline: 1.25rem; }

  /* Hero name smaller */
  .hero-name { font-size: clamp(2.5rem, 18vw, 4rem); }

  /* Section title */
  .section-title { font-size: var(--fs-2xl); }

  /* Page title */
  .page-title { font-size: var(--fs-2xl); }

  /* Blog grid */
  .blog-grid { grid-template-columns: 1fr; }

  /* Lightbox nav — fullscreen */
  .lightbox-prev { left: 0.5rem; }
  .lightbox-next { right: 0.5rem; }

  /* Booking form */
  .booking-form { padding: var(--space-lg); }

  /* Pricing */
  .pricing-card  { padding: var(--space-md); }
  .pricing-grid  { max-width: 100%; }
  .pricing-amount { font-size: var(--fs-4xl); }

  /* Video play btn */
  .video-play-btn { width: 52px; height: 52px; }

  /* WhatsApp float */
  .whatsapp-float { width: 48px; height: 48px; bottom: 1.25rem; right: 1.25rem; }
  .scroll-top     { bottom: 4.5rem; right: 1.25rem; }

  /* Modal close btn */
  .lightbox-close { top: -2.5rem; }

  /* Footer social */
  .footer-social { flex-wrap: wrap; gap: 0.5rem; }

  /* Mobile nav font */
  .mobile-nav .nav-link { font-size: clamp(1.5rem, 7vw, 2rem); }
}

/* ============================================================
   UTILITY: ADMIN BAR OFFSET
   ============================================================ */
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

@media screen and (min-width: 783px) {
  body.admin-bar .site-header { top: 32px; }
}

/* ============================================================
   UTILITY: DARK/LIGHT MODE TRANSITIONS
   NOTE: system prefers-color-scheme is intentionally NOT used
   here because the theme defaults to dark and the user can
   switch via the header toggle (saved in localStorage). A
   prefers-color-scheme block would silently override the saved
   preference for anyone whose OS is in light mode, making
   Light→Dark switching fail for those visitors.
   ============================================================ */

/* ============================================================
   PRINT (supplementary to main.css print block)
   ============================================================ */
@media print {
  .portfolio-filters,
  .masonry-item-overlay,
  .video-play-btn,
  .testimonials-nav,
  .testimonials-dots,
  .portfolio-load-more,
  .hero-scroll,
  .hero-marquee,
  .booking-form,
  .contact-social,
  .contact-map { display: none !important; }

  .masonry-grid { columns: 2; }
  .blog-grid    { grid-template-columns: repeat(2, 1fr); }
}