/* ───────────────────────────────────────────────────────────────────────
   CraftFrame · Mobile overrides
   ───────────────────────────────────────────────────────────────────────
   This stylesheet patches the inline-style grids and oversized typography
   on small screens WITHOUT modifying component code. Loads AFTER shared.css
   on every page that needs it. All overrides are scoped to ≤ 760px so the
   desktop experience is untouched.
   ─────────────────────────────────────────────────────────────────────── */

@media (max-width: 760px) {

  /* ── DEFENSIVE: force scroll on mobile ──────────────────────────────────
     iOS Safari can latch onto body{overflow:hidden} from the mobile drawer
     if anchor navigation happens before React's effect cleanup runs.
     Force scroll back on for any element that ISN'T the open drawer. */
  html { height: auto !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
  body { height: auto !important; min-height: 100vh; -webkit-overflow-scrolling: touch; }
  /* Only allow body overflow:hidden when drawer is actually rendered open */
  body:has(.mobile-drawer.open) { overflow: hidden !important; }
  body:not(:has(.mobile-drawer.open)) { overflow-y: auto !important; overflow-x: hidden !important; }

  /* ── SPLIT hero variant · CraftMark visual too large on phone ─────────
     The visual is aspect-ratio 4/5 which becomes ~487px tall on a 390px
     phone — combined with the 4-line headline, the hero spans 1100px+ and
     the user thinks they can't scroll. Cap it at a viewport-friendly size. */
  [data-hero="split"] > div {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  [data-hero="split"] .reveal[style*="aspect-ratio"] {
    aspect-ratio: 1 / 1 !important;
    max-width: 280px !important;
    max-height: 280px !important;
    margin: 0 auto !important;
  }
  /* SPLIT headline · scale down so it doesn't dominate */
  [data-hero="split"] h1.display { font-size: clamp(40px, 9vw, 56px) !important; line-height: 1.04 !important; }

  /* ── Global rhythm ──────────────────────────────────────────────────── */
  /* Section paddings are typed as inline 140px which is too tall on mobile */
  section { padding-top: 72px !important; padding-bottom: 72px !important; }
  section#top { padding-top: 110px !important; padding-bottom: 40px !important; }

  /* Container — already 22px on small screens, but enforce safe min */
  .container { padding-left: 20px !important; padding-right: 20px !important; }

  /* ── Hide native cursor effects on touch (already done, reinforce) ──── */
  .cursor-dot, .cursor-ring { display: none !important; }

  /* ── Typography max-size guard ──────────────────────────────────────── */
  /* clamp() max values are still too large on phones — cap them */
  .display { line-height: 1.0 !important; }
  h1.display { font-size: clamp(44px, 11vw, 64px) !important; }
  h2.display { font-size: clamp(36px, 9.5vw, 52px) !important; }
  h3.display { font-size: clamp(28px, 8vw, 44px) !important; }

  /* Kinetic word — keep on its own line, no overflow */
  .kw { display: inline-flex; max-width: 100%; flex-wrap: wrap; }

  /* Eyebrows shrink slightly so they don't break onto 2 lines on most phones */
  .eyebrow { font-size: 10.5px !important; letter-spacing: .16em !important; }

  /* ── Universal grid collapse ──────────────────────────────────────────
     Every multi-column grid in the site is authored as an INLINE style, and
     the static prerenderer emits those without a space after the colon
     (`grid-template-columns:100px 1fr 2fr`). Matching individual values was
     fragile — one blanket collapse, then re-open the few grids that should
     genuinely stay multi-column below. */
  section [style*="grid-template-columns"],
  footer [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Lists laid out as grids (footer columns, legal contents) keep their own
     rhythm \u2014 the 44px link targets already provide the spacing */
  section ul[style*="grid"], footer ul[style*="grid"] { gap: 0 !important; }
  section ul[style*="grid"] li, footer ul[style*="grid"] li { margin-bottom: 0 !important; }
  section ul[style*="grid"] li > a { display: flex; align-items: center; min-height: 44px; }

  /* Repeating card decks read better tight */
  section [style*="minmax(240px"],
  section [style*="minmax(260px"],
  section [style*="minmax(280px"],
  section [style*="minmax(300px"],
  section [style*="minmax(320px"] { gap: 14px !important; }

  /* Label / value rows (100px 1fr, 100px 1fr 2fr) — label sits above value */
  section [style*="grid-template-columns:100px"],
  section [style*="grid-template-columns: 100px"] {
    gap: 10px !important;
    padding-top: 26px !important;
    padding-bottom: 26px !important;
  }
  section [style*="grid-template-columns:1fr 3fr"],
  section [style*="grid-template-columns: 1fr 3fr"] { gap: 12px !important; }

  /* ── Services page · pillar layout ─────────────────────────────────── */
  section [style*="grid-template-columns:1fr 2fr"],
  section [style*="grid-template-columns: 1fr 2fr"],
  section [style*="grid-template-columns:1fr 1.3fr"],
  section [style*="grid-template-columns: 1fr 1.3fr"] {
    gap: 28px !important;
    margin-bottom: 24px !important;
  }
  /* Service card · 60px num + content + arrow → stack arrow under content */
  section [style*="grid-template-columns:60px 1fr auto"],
  section [style*="grid-template-columns: 60px 1fr auto"] {
    gap: 8px !important;
    padding: 22px !important;
  }
  section [style*="grid-template-columns:60px 1fr auto"] .num,
  section [style*="grid-template-columns: 60px 1fr auto"] .num { margin-bottom: 4px; }
  /* Hide the trailing arrow on the service cards on small screens — looks orphan */
  section [style*="grid-template-columns:60px 1fr auto"] > svg:last-child,
  section [style*="grid-template-columns: 60px 1fr auto"] > svg:last-child {
    display: none !important;
  }
  /* Pillar title (Strategy. / Craft. / Systems.) — cap at viewport-safe size */
  section h2.display[style*="clamp(56px"] { font-size: 56px !important; line-height: 1 !important; }

  /* ── Case-study page specific ──────────────────────────────────────── */
  /* H1 with clamp 9vw can still be 160px+ — cap it */
  section h1.display[style*="clamp(56px, 9vw"],
  section h1.display[style*="clamp(56px,9vw"] { font-size: 52px !important; }
  /* Hero metric strip — was 16/7 aspect, way too wide on mobile */
  section .ph[style*="aspect-ratio:16/7"],
  section .ph[style*="aspect-ratio: 16/7"] {
    aspect-ratio: 4/3 !important;
  }
  section .ph[style*="aspect-ratio:16/7"] > div:last-child,
  section .ph[style*="aspect-ratio: 16/7"] > div:last-child {
    padding: 64px 28px 28px !important;
  }
  section .ph[style*="aspect-ratio:16/7"] > div:first-child,
  section .ph[style*="aspect-ratio: 16/7"] > div:first-child {
    top: 20px !important; padding: 10px 28px !important;
  }
  section .ph .display[style*="clamp(120px"] { font-size: 96px !important; line-height: 0.9 !important; }
  /* Pullquote on case-study */
  blockquote p.display[style*="clamp(36px"] { font-size: 28px !important; line-height: 1.2 !important; }
  /* "Next case" CTA — already flex-wrap; ensure the SVG icon shrinks */
  section a[href*="#cases"] svg[width="80"] { width: 48px !important; height: 48px !important; }

  /* Top meta row on case-study (← All case studies · Case 03/04) */
  section .reveal[style*="justify-content: space-between"][style*="flex-wrap"] {
    gap: 10px !important;
  }
  section .reveal[style*="justify-content: space-between"][style*="flex-wrap"] .mono {
    font-size: 11px !important;
  }

  /* Stats rows stay at 2 cols on mobile for visual rhythm */
  section [style*="minmax(180px"],
  section [style*="minmax(200px"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 26px 20px !important;
  }

  /* ── Hero specific ──────────────────────────────────────────────────── */
  /* Subline two-column grid → stack */
  #top .reveal[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 32px !important; }
  #top .reveal > p { font-size: 17px !important; line-height: 1.45 !important; }
  /* Button row: full-width buttons, even gap */
  #top .reveal > div[style*="justify-self"] { justify-self: stretch !important; }
  #top .btn { flex: 1; justify-content: center; min-height: 50px; padding: .9rem 1rem !important; }
  /* Asterisk mark — shrink on mobile so it doesn't overhang */
  #top h1.display .spin svg { width: 36px !important; height: 36px !important; }
  #top h1.display .spin { margin-left: 6px !important; }

  /* Hero top meta row — left-align both, smaller gap */
  #top .container > .reveal:first-of-type { margin-bottom: 32px !important; gap: 8px !important; }
  #top .container > .reveal:first-of-type .mono { font-size: 10.5px !important; }

  /* Marquee — slow it slightly, shrink the giant stars */
  #top + * .marquee-track, section .marquee-track {
    animation-duration: 28s !important;
  }
  section .display.ital { letter-spacing: -0.03em !important; }
  #top section + div .display.ital,
  #top .marquee-track .display.ital { font-size: 56px !important; }
  .marquee-track .serif[style*="font-size: 64px"] { font-size: 36px !important; }

  /* ── Cases · pinned sticky scroller (the biggest mobile pain) ───────── */
  /* Disable the sticky pin layout — let cases stack and scroll normally */
  .pin-wrap .pin-sticky {
    position: static !important;
    height: auto !important;
    min-height: auto !important;
    padding: 28px 0 !important;
    border-bottom: 1px solid var(--line);
  }
  .pin-wrap .pin-sticky:last-child { border-bottom: none; }
  .pin-wrap .pin-sticky .container > div {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    padding: 0 !important;
  }
  /* Case visual block — shrink the giant percentage so it fits */
  .pin-wrap .ph .display[style*="font-size"] {
    font-size: 88px !important;
    line-height: 0.9 !important;
  }
  .pin-wrap .ph { aspect-ratio: 5/4 !important; padding: 0 !important; }
  /* content sits below the disclosure band; the band itself keeps its own padding */
  .pin-wrap .ph > div:last-child { padding: 64px 28px 28px !important; }
  .pin-wrap .ph > div:first-child { top: 20px !important; padding: 10px 28px !important; }

  /* Case left col — challenge/approach/outcome/role labels stack above value */
  .pin-wrap [style*="grid-template-columns:100px"],
  .pin-wrap [style*="grid-template-columns: 100px"] {
    gap: 6px !important;
    padding-top: 0 !important;
    padding-bottom: 18px !important;
  }

  /* ── Services / Method / Team — collapse borders into stacked cards ─── */
  /* Method 4-column step grid: remove the right/bottom border madness */
  #method .reveal-stagger > div {
    border-right: none !important;
    padding: 28px 0 !important;
  }
  #method .reveal-stagger > div:last-child { border-bottom: none !important; }

  /* Team 3-pillar row */
  section .reveal-stagger > div[style*="border-right"] {
    border-right: none !important;
    padding: 28px 4px !important;
  }
  /* Track-record 6-card grid: same treatment */
  #cases .reveal-stagger > div[style*="border-top"] {
    padding: 28px 0 !important;
    border-right: none !important;
  }

  section [style*="grid-template-columns:100px 1fr 2fr"] h3,
  section [style*="grid-template-columns: 100px 1fr 2fr"] h3 { font-size: 24px !important; }

  /* Founder portrait — already aspect-ratio, but ensure it doesn't blow up */
  section img[alt="Gustavo Morale"] { object-position: center 15% !important; }

  /* The "founder LinkedIn" row was flex-row; let it wrap nicely */
  section .btn[href*="linkedin"] { margin-left: 0 !important; }

  /* ── Background marquee in #method (18vw display words) ─────────────── */
  #method [class*="marquee-track"] .display { font-size: 28vw !important; }
  #method > div[style*="opacity: 0.04"] { opacity: 0.025 !important; }

  /* ── Card paddings — bring inward ───────────────────────────────────── */
  .card { padding: 24px !important; }
  .card h3.serif { font-size: 22px !important; }

  /* ── Sectors pill list — single column, taller hit targets ──────────── */
  #sectors .reveal-stagger > div {
    padding: 18px 22px !important;
    border-radius: 14px !important;
  }
  #sectors .reveal-stagger > div .serif { font-size: 18px !important; }

  /* "Ideal Partner Profile" card body text */
  #sectors .reveal.card p.serif { font-size: 18px !important; line-height: 1.45 !important; }

  /* ── Contact / brief CTA section ────────────────────────────────────── */
  /* Long URL email button can overflow — wrap it */
  section a[href^="mailto:"].btn,
  section a[href$="/brief"].btn { word-break: break-word; text-align: center; }

  /* ── Mobile drawer polish ───────────────────────────────────────────── */
  .mobile-drawer { padding: 100px 24px 32px !important; }
  .mobile-drawer a.menu-link {
    font-size: 32px !important;
    padding: 18px 0 !important;
    min-height: 48px;
  }
  .mobile-drawer .menu-meta { font-size: 10.5px !important; }
  /* Generous tap target on the hamburger toggle */
  .menu-toggle { width: 48px !important; height: 48px !important; }
  /* Brief CTA inside drawer */
  .mobile-drawer .menu-cta .btn { min-height: 52px; font-size: 16px !important; }

  /* ── Footer / shared layout ─────────────────────────────────────────── */
  footer ul, footer .reveal-stagger { gap: 0 !important; }
  /* Tap targets: footer link lists were 17px tall rows */
  footer li { margin-bottom: 0 !important; }
  footer li > a { display: flex !important; align-items: center; min-height: 44px; }
  footer a[href^="mailto:"] { min-height: 44px; display: inline-flex; align-items: center; }
  /* Link columns run 2-up instead of one tall stack (969px → ~560px) */
  footer [style*="minmax(180px"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px 24px !important;
    margin-bottom: 44px !important;
  }
  footer [style*="minmax(180px"] > div:first-child { grid-column: 1 / -1; }
  /* Legal bar — wraps, each link a real target */
  footer a[href="/privacy"], footer a[href="/terms"], footer a[href="/cookies"],
  footer button, footer a[data-cf-cookie-open] {
    min-height: 44px; display: inline-flex; align-items: center;
  }

  /* ── Tap targets · quiet inline links and legal contents chips ───────── */
  section a.link-u, section a.quiet { display: inline-flex; align-items: center; min-height: 44px; }
  .prose a, blockquote a { min-height: 0; }
  nav.top a { min-height: 44px; display: inline-flex; align-items: center; }

  /* ── Forms (brief form is its own file, but legal/contact forms here) ── */
  .field input, .field textarea, .field select { font-size: 20px !important; }
  .field textarea { font-size: 17px !important; }
  .field .opt { font-size: 13px !important; padding: 8px 14px !important; }

  /* ── Prose (legal pages) ────────────────────────────────────────────── */
  .prose h2 { font-size: 24px !important; margin-top: 28px !important; }
  .prose h3 { font-size: 18px !important; }
  .prose p, .prose li { font-size: 15px !important; }

  /* ── Tweaks panel — hide on mobile (it's a desktop dev affordance) ──── */
  .tweaks { display: none !important; }

  /* ── Cookie banner — already responsive in cookie-banner.css ────────── */

  /* Prevent any rogue element from causing horizontal scroll */
  body, #root, section, .container { overflow-x: hidden; }

  /* Reduce excessive marquee horizontal spacing on small screens */
  .marquee-track > div { gap: 24px !important; padding-right: 24px !important; }
}

/* ───────────────────────────────────────────────────────────────────────
   Smaller phones (iPhone SE class, 380px and below)
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 380px) {
  .container { padding-left: 16px !important; padding-right: 16px !important; }
  h1.display { font-size: 42px !important; }
  h2.display { font-size: 34px !important; }
  .card { padding: 20px !important; }
  #top .btn { font-size: 14px !important; }
  .pin-wrap .ph .display[style*="font-size"] { font-size: 72px !important; }
}

/* ── Cases · un-pin the sticky scroller wherever a case cannot fit ──────────
   The pin only works when the two-column case layout fits inside one viewport.
   Below ~1100px wide (where the grid stacks) or under 760px tall, the 100vh +
   overflow:hidden box crops the case — including the "Full case study →" link.
   Unstick and let the cases flow instead. */
@media (max-width: 1100px), (max-height: 760px) {
  .pin-wrap .pin-sticky {
    position: static !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
    border-bottom: 1px solid var(--line);
  }
  .pin-wrap .pin-sticky:last-child { border-bottom: none; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .pin-wrap .pin-sticky .container > div {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .pin-wrap .ph { aspect-ratio: 5/4 !important; }
  .pin-wrap .ph .display[style*="font-size"] { font-size: 120px !important; line-height: 0.9 !important; }
}

/* ───────────────────────────────────────────────────────────────────────
   Tablet (760–960px) — keep most desktop layout but soften paddings
   ─────────────────────────────────────────────────────────────────────── */
@media (min-width: 761px) and (max-width: 960px) {
  section { padding-top: 100px !important; padding-bottom: 100px !important; }
  section [style*="grid-template-columns: 1.1fr 1fr"],
  section [style*="grid-template-columns: 1.4fr 1fr"],
  section [style*="grid-template-columns: 100px 1fr 2fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}