/*
 * Mobile layout corrections.
 *
 * Hand-maintained — NOT regenerated by tools/port-from-design.py, which emits
 * the <link> that loads this after src/styles.css so these rules win.
 *
 * The design source ships its own @media block; this layers on top of it and
 * fixes what that pass does not cover:
 *
 *   1. The hero carousel is positioned per-frame in JS: translate3d(o*200px,
 *      0, |o|*140px) with o spanning +-2.5, scale up to 1.5 and a 1500px
 *      perspective, so the five MOTIF cards sweep far wider than the viewport.
 *      Nothing in CSS can retarget those inline transforms, so the whole stage
 *      is scaled down instead. The card at the far end of the sweep measures
 *      700px from centre (measured, not derived), so each step below is
 *      (width/2 - 10) / 700 computed at the NARROWEST width that step covers.
 *      Sizing for the full sweep rather than only the opaque cards is what
 *      keeps all five letters on screen at once — at the tighter figure the
 *      wrapping card was still being sliced by the viewport edge.
 *   2. Portrait images (aspect-ratio 3/4, 4/5) become enormous once the grids
 *      collapse to one column — a 4/5 card at full width is 470px tall on a
 *      375px screen. They get height caps and crop instead.
 */

/* ---------- 1. HERO CAROUSEL ---------- */

/* The MOTIF wheel is positioned per-frame in JS at translate3d(o*200px, 0,
   |o|*140px), o sweeping +-2.5, through a 1500px perspective — far wider than a
   phone. Sizing to fit ALL five (including the cards fading out at the wrap)
   made the readable centre cards tiny (~40px). Instead each scale keeps the
   *opaque* cards (the letters actually being read) whole and as large as the
   width allows; the far wrapping cards are already near-zero opacity, and the
   fade below dissolves them so the soft-clip at the edge reads as intentional.
   Each scale = (narrowest width in the band / 2 - 12) / 540. */

@media (max-width: 1100px) {
  [data-carousel] {
    transform: scale(0.80);
    transform-origin: center center;
    height: 264px !important;
  }
  /* No mask: mask-image on [data-carousel] applies in the element's own
     pre-scale coordinate space, so its solid band never lines up with where
     the cards actually render — it erases the middle cards. The scale steps
     already keep every opaque card fully on screen; the near-zero-opacity
     wrapping cards are effectively invisible anyway. */
}
@media (max-width: 900px) {
  [data-carousel] { transform: scale(0.68); height: 226px !important; }
}
@media (max-width: 760px) {
  [data-carousel] { transform: scale(0.55); height: 184px !important; }
}
@media (max-width: 620px) {
  [data-carousel] { transform: scale(0.44); height: 150px !important; }
}
@media (max-width: 500px) {
  [data-carousel] { transform: scale(0.35); height: 120px !important; }
}
@media (max-width: 400px) {
  [data-carousel] { transform: scale(0.29); height: 100px !important; }
}
@media (max-width: 340px) {
  [data-carousel] { transform: scale(0.24); height: 84px !important; }
}

@media (max-width: 900px) {
  /* Tighten the hero so the scaled-down carousel is not marooned in padding. */
  #hero > div { padding: 96px 18px 64px !important; }
  #hero p:first-of-type { margin-bottom: 24px !important; letter-spacing: 0.22em !important; font-size: 10px !important; }
  #hero p:last-of-type { margin-top: 26px !important; letter-spacing: 0.22em !important; font-size: 10px !important; }
}

/* ---------- 2. IMAGE SIZING ---------- */

@media (max-width: 900px) {
  /* Never let a single image eat more than about half the screen. */
  #manifesto img,
  #about .ab-card img,
  [data-screen-label="Quote"] img {
    max-height: 52vh;
    object-fit: cover;
    display: block;
    width: 100%;
  }

  /* :has(img) matters — data-mdepth is also on the text blocks and the stats
     grid, and forcing an aspect-ratio on those would crop the copy. */
  #manifesto > div > div[data-mdepth]:has(img) {
    aspect-ratio: 4 / 3 !important;   /* portrait 3/4 panels are far too tall stacked */
    max-height: 46vh;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #about .ab-card {
    /* wireAboutParallax() scales each card up to ~1.07 and nudges it a few px
       as it crosses the viewport centre. Side by side on a wide grid that
       reads as depth; in the tight mobile layout it just misaligns the cards.
       !important beats the per-frame inline transform. */
    transform: none !important;
  }

  /* The "collective of strategists / designers / film-makers / engineers"
     grid. The design collapses it to one full-width column, which floats each
     discipline word away from its photo (the designers/engineers images even
     land before their labels). The eight children are already DOM-adjacent as
     label+image pairs, so a 2-column grid re-pairs them into a zigzag: each
     word sits beside its own image, images kept small. */
  #about > div > div:nth-child(2) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 16px !important;
    align-items: center !important;
    font-size: clamp(19px, 5.4vw, 34px) !important;
    padding-top: 34px !important;
  }
  #about > div > div:nth-child(2) > * {
    grid-column: auto !important;
    width: auto !important;
    margin: 0 !important;
    text-align: left !important;
  }
  #about > div > div:nth-child(2) .ab-card {
    aspect-ratio: 4 / 3 !important;
    max-height: none !important;
    width: 100% !important;
  }
  /* The first label is display:flex inline, which fights a narrow column —
     let every text cell wrap as a normal block. */
  #about > div > div:nth-child(2) > div:not(.ab-card) {
    display: block !important;
    line-height: 1.05 !important;
  }

  /* The hero collage panels are absolutely positioned inside a fixed-height
     box; scale the box rather than each panel. */
  #top > div:last-child { height: 56vh !important; min-height: 320px !important; }

  [data-screen-label="Quote"] img { max-height: 44vh; }
}

/* ---------- 3. WORK / RANGE WALL ---------- */

@media (max-width: 900px) {
  #range { padding: 84px 0 24px !important; }
  #range h2 { font-size: clamp(30px, 8.5vw, 56px) !important; }
  .wallcard { width: 216px !important; height: 140px !important; }
  /* The edge fades are 120px wide — far too heavy on a narrow screen. */
  #range > div[style*="linear-gradient"] { width: 52px !important; }
}

@media (max-width: 560px) {
  .wallcard { width: 178px !important; height: 116px !important; }
}

/* ---------- 4. TYPE AND RHYTHM ---------- */

@media (max-width: 900px) {
  #manifesto h2 { font-size: clamp(34px, 9vw, 62px) !important; }
  #about [data-about-marquee] { font-size: clamp(24px, 7.5vw, 44px) !important; }
  /* The big pull-quote under the about grid. */
  #about > div > p { font-size: clamp(20px, 6vw, 34px) !important; margin-top: 48px !important; }
  [data-screen-label="Quote"] p:nth-of-type(2) { font-size: clamp(21px, 5.6vw, 32px) !important; }
  /* Principle / services intro slabs. */
  [data-screen-label="Principle"] p:last-child,
  [data-screen-label="Services Intro"] p:nth-of-type(2) {
    font-size: clamp(21px, 5.6vw, 34px) !important;
  }
  [data-screen-label="Principle"],
  [data-screen-label="Services Intro"] { padding: 84px 22px !important; }
}

@media (max-width: 560px) {
  #manifesto [data-mdepth] p { font-size: 16px !important; }
  #about > div > div:first-child p { font-size: 16px !important; }
}

/* ---------- 5. CONTACT ---------- */

@media (max-width: 900px) {
  /* Lift LET'S TALK and the stacked contact info toward the top instead of
     leaving it mid-screen with dead space below. */
  #contact { padding: 78px 22px 60px !important; }
  #contact [data-contact-block] { line-height: 1.8 !important; }
  #contact [data-chargrid] { opacity: 0.5; }
}

/* ---------- 6. MANIFESTO PARALLAX ---------- */

@media (max-width: 900px) {
  /* wireManifestoParallax()/wireGrid nudge each block by up to ~45px vertically
     as it scrolls. Side by side that reads as depth; stacked in one column it
     just makes the blocks sit at uneven, random-looking offsets. Pin them. */
  #manifesto [data-mdepth] { transform: none !important; }
}

/* ---------- 7. NO HOVER EFFECTS ON TOUCH ---------- */

/* (hover: none) targets touch devices of any size and leaves desktop (and
   hybrid trackpad laptops) untouched — so this cannot affect the PC web. On a
   touch screen :hover states get stuck after a tap, so neutralise them. */
@media (hover: none) {
  a:hover { color: inherit; }

  /* Keep the about cards at their resting grade instead of un-graying on a
     tap that then sticks. */
  .ab-card:hover img {
    filter: grayscale(1) contrast(1.04) brightness(1.04) sepia(.12) !important;
    mix-blend-mode: multiply !important;
  }

  /* The reel video's hover-to-colour, from film-reel-video.js. */
  [data-film-reel] { filter: grayscale(1) contrast(1.06) brightness(1.02) !important; }

  /* Service rows colour their title on hover; the tap-to-open state already
     colours it, so suppress the hover-only shift. */
  .svc-head:hover .svc-title { color: #14110f; }
}