/* ───────────────────────────────────────────────────────────────────────
   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 ────────────────────────────────────────── */
  /* Most components use inline `gridTemplateColumns: '1fr 1fr'` or similar.
     Below 760px, collapse anything with multiple equal-ish columns to 1 col. */
  section [style*="grid-template-columns: 1fr 1fr"],
  section [style*="grid-template-columns:1fr 1fr"],
  section [style*="grid-template-columns: 1.2fr 1fr"],
  section [style*="grid-template-columns: 1.4fr 1fr"],
  section [style*="grid-template-columns: 1.1fr 1fr"],
  section [style*="grid-template-columns: 1fr 1.2fr"],
  section [style*="grid-template-columns: 100px 1fr 2fr"],
  section [style*="grid-template-columns: 100px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Repeating cards — keep them single-column for readability.
     Match both spaced and unspaced variants ("minmax(280px," with or without space). */
  section [style*="grid-template-columns: repeat(auto-fit, minmax(280px"],
  section [style*="grid-template-columns:repeat(auto-fit,minmax(280px"],
  section [style*="grid-template-columns: repeat(auto-fit, minmax(300px"],
  section [style*="grid-template-columns:repeat(auto-fit,minmax(300px"],
  section [style*="grid-template-columns: repeat(auto-fit, minmax(260px"],
  section [style*="grid-template-columns:repeat(auto-fit,minmax(260px"],
  section [style*="grid-template-columns: repeat(auto-fit, minmax(240px"],
  section [style*="grid-template-columns:repeat(auto-fit,minmax(240px"],
  section [style*="grid-template-columns: repeat(auto-fit, minmax(200px"],
  section [style*="grid-template-columns:repeat(auto-fit,minmax(200px"] {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* ── Services page · pillar layout (1fr 2fr) and service cards ─────── */
  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"] {
    grid-template-columns: 1fr !important;
    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"] {
    grid-template-columns: 1fr !important;
    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,
  section .ph[style*="aspect-ratio: 16/7"] > div {
    padding: 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 row (180px min) stays at 2 cols on mobile for visual rhythm */
  section [style*="grid-template-columns: repeat(auto-fit, minmax(180px"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !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; }
  .pin-wrap .ph > div { padding: 28px !important; }

  /* Case left col — challenge/approach/outcome/role labels stack above value */
  .pin-wrap .pin-sticky .container > div > div:first-child > div:last-child > div[style*="grid-template-columns: 100px"] {
    grid-template-columns: 1fr !important;
    gap: 6px !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;
  }

  /* Team pillars (100px 1fr 2fr) → single column with readable hierarchy */
  section [style*="grid-template-columns: 100px 1fr 2fr"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 26px 0 !important;
  }
  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.html"].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 grids inside Shared.jsx use auto-fit; default rule above handles them.
     Ensure footer columns have breathing room when stacked. */
  footer ul, footer .reveal-stagger { gap: 0 !important; }

  /* ── 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; }
}

/* ───────────────────────────────────────────────────────────────────────
   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;
  }
}