/* ============================================================
   RESPONSIVE - Render House
   Consolidated, platform-tiered polish. Loaded LAST so it wins.

   Tiers
     Desktop  (default, ≥1025px) - base rules live in styles.css
     Tablet   (≤1024px)
     Phone    (≤640px)
     Small    (≤380px)

   Plus: iPhone safe-area (notch / home indicator), touch-target
   floors, and overflow guards. Shared by index / about / select-shots.
   ============================================================ */

/* ---- Global guards ----------------------------------------- */
html, body { -webkit-text-size-adjust: 100%; }           /* no auto-zoom resize */
#root { overflow-x: clip; }
img, svg, video, image-slot { max-width: 100%; }
.btn { touch-action: manipulation; }                     /* kill 300ms tap delay */

/* iPhone notch / home-indicator inset on the fixed chrome.
   Honoured only when viewport-fit=cover is set on the page. */
@supports (padding: max(0px)) {
  .nav-inner {
    padding-left:  max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
    padding-top:   max(1.1rem, env(safe-area-inset-top));
  }
  .mobile-menu {
    padding-left:   max(var(--gutter), env(safe-area-inset-left));
    padding-right:  max(var(--gutter), env(safe-area-inset-right));
    padding-top:    max(1.5rem, env(safe-area-inset-top));
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  }
}

/* ============================================================
   LARGE DESKTOP  (≥1600px) - let sections breathe wider
   The container scales up on big monitors so content fills more
   of the viewport instead of stranding wide empty gutters.
   ============================================================ */
@media (min-width: 1600px) {
  :root { --maxw: 1600px; --gutter: clamp(3rem, 5vw, 6rem); }
}
@media (min-width: 1920px) {
  :root { --maxw: 1760px; }
}
@media (min-width: 2400px) {
  :root { --maxw: 2000px; }
}

/* ============================================================
   TABLET  (≤1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .nav .brand-mark { font-size: 23px; }
}

/* Before/After: the copy column carries an inline fixed width/height
   (a desktop direct-edit). Once the layout stacks (≤880px) that fixed
   width would blow past narrow viewports - release it so the column
   flows to the available width and centers under the comparison. */
@media (max-width: 880px) {
  .ba-copy {
    width: auto !important;
    height: auto !important;
    max-width: 56ch;
  }
}

/* The full nav row collapses to a burger at ≤920px (styles.css).
   Between 921-1024 keep the links readable. */
@media (max-width: 1024px) and (min-width: 921px) {
  .nav-links { gap: 0.15rem; }
}

/* ============================================================
   PHONE  (≤640px)
   ============================================================ */
@media (max-width: 640px) {
  /* --- Nav: trim the bar so nothing clips off the right edge --- */
  .nav-inner { padding-block: 0.6rem; gap: 0.75rem; }
  .nav .brand { transform: none; }          /* drop desktop optical nudge so it centers in the bar */
  .brand { gap: 0.5rem; }
  .nav .brand-mark { font-size: 21px; }      /* better proportioned on phone */

  /* --- Collections: BIG project pictures on phone ---
     The 3-across desktop contact sheet shrinks each shot to a thumbnail on a
     narrow screen. Re-flow the three featured shots into an editorial set: a
     full-width lead image, then the next two side-by-side. Each reads large. */
  .col-featured {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.85rem !important;
  }
  .col-featured .col-shot:first-child {
    grid-column: 1 / -1;
    padding-bottom: 72%;            /* wide, generous lead shot */
    border-radius: var(--r-lg);
  }
  .col-featured .col-shot { padding-bottom: 124%; border-radius: var(--r-md); }
  /* extra + gallery thumbnails: keep a denser contact-sheet feel */
  .col-extra { grid-template-columns: repeat(3, 1fr) !important; }
  .col-gallery { grid-template-columns: repeat(2, 1fr) !important; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }
  /* CTA in the bar would overflow alongside mark + wordmark + burger -
     the burger menu and the sticky bar both carry "Start a project". */
  .nav-cta .nav-order { display: none; }
  .nav-burger { padding: 0.55rem; margin-right: -0.3rem; }   /* ≥44px hit area */

  /* --- Mobile menu: comfortable, tappable --- */
  .mobile-links { margin-top: 2.2rem; }
  .mobile-links a { font-size: 1.7rem; padding: 0.6rem 0; }

  /* --- Hero: let the line wrap instead of overflowing tiny screens --- */
  .hero-editorial { padding-top: 6rem; padding-bottom: 4.5rem; }
  .hero-editorial .hero-serif em { white-space: normal; }
  .hero-card { gap: 0.95rem; }
  .hero-card-lead { font-size: 1.02rem; }
  .hero-card-actions { width: 100%; }
  .hero-card-actions .btn { width: 100%; }
  /* the long uppercase eyebrow runs off a phone at desktop size - shrink it,
     tighten the tracking, and let it wrap cleanly under its own rule */
  .hero-eyebrow-mini {
    font-size: 0.72rem; letter-spacing: 0.13em;
    white-space: normal; flex-wrap: wrap; justify-content: center;
    gap: 0.55rem; max-width: 30ch; line-height: 1.5;
  }
  .scroll-cue { display: none; }                 /* nothing to "scroll-cue" on a thumb-scroll device */

  /* --- Section rhythm: tighten generous desktop air ---
     Desktop sets a big margin-top: 3.5rem between each section head and
     its grid. On a phone that strands a lot of dead space, so pull the
     head/grid gap in and let sections sit closer together. --- */
  .sec-head { gap: 0.7rem; }
  .svc-grid,
  .steps,
  .test-grid,
  .shot-layout { margin-top: 2rem; }
  .price-grid { margin-top: 1.4rem; }
  .about-stats { margin-top: 1.9rem; padding-top: 1.7rem; gap: 1rem; }
  .process-rail { margin-top: 1.9rem; }

  /* --- Cards: trim desktop padding so content reads denser --- */
  .step { padding: 1.5rem 1.4rem; }
  .test-card { padding: 1.5rem; gap: 1rem; }
  .price-card { padding: 1.4rem 1.2rem; }
  .svc-card { padding: 1.5rem; min-height: 0; }
  .svc-card .svc-arrow { top: 1.5rem; right: 1.5rem; }
  .svc-icon { margin-bottom: 1.1rem; }

  /* --- About stats: keep all three across but shrink the numerals
         so they never collide in a narrow row --- */
  .about-stat .n { font-size: 1.85rem; }

  /* --- Collections: tighten the contact-sheet block --- */
  .collection { padding-block: 2.4rem; gap: 1.4rem; }
  .col-shots-label { margin-bottom: 0.8rem; }
  .col-name { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .col-desc { max-width: none; font-size: 0.92rem; }
  /* touch devices have no hover - reveal the caption on the big lead shot */
  .col-featured .col-shot:first-child .col-shot-meta { opacity: 1; transform: none; }

  /* --- Marquee: slightly smaller wordmarks --- */
  .marquee-track { gap: 3rem; }
  .marquee-item { font-size: 1.15rem; }

  /* --- Touch-target floors for inline controls --- */
  .nav-link,
  .port-filter,
  .price-toggle button,
  .ss-tab { min-height: 44px; }
  .price-toggle button { display: inline-flex; align-items: center; }

  /* --- Before/After: smaller knob, still grabbable --- */
  .ba-knob { width: 40px; height: 40px; }

  /* --- FAQ: question text sized for narrow column --- */
  .faq-q { font-size: 1.1rem; padding-block: 1.15rem; gap: 1rem; }

  /* --- Order modal → bottom sheet --- */
  .order-overlay { padding: 0; align-items: flex-end; }
  .order-modal {
    width: 100%; max-height: 94vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-bottom: 0;
  }
  .order-head { padding: 1.1rem 1.25rem; }
  .order-body { padding: 1.4rem 1.25rem; }
  .order-foot {
    padding: 1rem 1.25rem max(1rem, env(safe-area-inset-bottom));
    flex-direction: column; align-items: stretch; gap: 0.8rem;
  }
  .order-foot .summary { text-align: center; }
  .order-actions { width: 100%; }
  .order-actions .btn { flex: 1; }
  .opt-grid { grid-template-columns: repeat(2, 1fr); }

  /* --- Lightbox: stack, full-width card --- */
  .lightbox { padding: 0; align-items: flex-end; }
  .lightbox-card {
    width: 100%; max-height: 92vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    grid-template-rows: minmax(220px, 38vh) auto;
  }
  .lightbox-visual { min-height: 220px; }
  .lightbox-body { padding: 1.6rem 1.3rem max(1.6rem, env(safe-area-inset-bottom)); }
}

/* ============================================================
   SMALL PHONE  (≤380px) - iPhone SE / Mini
   ============================================================ */
@media (max-width: 380px) {
  .nav .brand-mark { font-size: 19px; }
  .hero-editorial .hero-serif { font-size: clamp(1.95rem, 9vw, 2.4rem); }
  .hero-card-lead { font-size: 0.98rem; }
  .marquee-item { font-size: 1.05rem; }
}

/* ============================================================
   LANDSCAPE PHONE - short viewports
   ============================================================ */
@media (max-height: 480px) and (orientation: landscape) {
  .hero-editorial { min-height: auto; padding-top: 5.5rem; padding-bottom: 3rem; }
  .scroll-cue { display: none; }
}

/* ============================================================
   MOTION COMFORT - respect OS "reduce motion"
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-row-track,
  .hero-row-track.reverse,
  .marquee-track { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}