/* =====================================================================
   Fifth Percent — Mobile / responsive overrides
   ---------------------------------------------------------------------
   Strategy:
   - Global safety rails (no horizontal overflow, media won't blow out)
   - Class-based overrides where source has hooks (.fp-*, .fn-*, .rm-*)
   - Targeted [style*=] selectors only for inline-styled grids/paddings
     (still pragmatic for a React-on-CDN site with inline styles)

   Breakpoints:
     1024px  — tablet / small laptop
     880px   — large phone / small tablet (nav becomes drawer here)
     640px   — mobile
     420px   — small phones
   ===================================================================== */

/* ──────────────────────── Global safety rails ──────────────────────── */
html, body { -webkit-text-size-adjust: 100%; }
img, video { max-width: 100%; height: auto; }
svg { max-width: 100%; }
.fn-figure__inner svg { width: 100%; height: auto; display: block; }
/* Anything inside a section should never push the viewport */
* { min-width: 0; }

/* ────────────────────────────────────────────────────────────────────────
   TABLET — ≤1024px
   Collapse most 2-col page layouts to single column gracefully.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* All the recurring "X fr Y fr" 2-col layouts → single column */
  [style*="grid-template-columns: 1.2fr 0.8fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 1.3fr 0.7fr"],
  [style*="grid-template-columns: 1.5fr 1fr"],
  [style*="grid-template-columns: 1.1fr 0.9fr"],
  [style*="grid-template-columns: 1.05fr 0.95fr"],
  [style*="grid-template-columns: 1.3fr 1fr"],
  [style*="grid-template-columns: 0.7fr 2fr"],
  [style*="grid-template-columns: 0.9fr 1.1fr"],
  [style*="grid-template-columns: 0.85fr 1.15fr"],
  [style*="grid-template-columns: 1fr 240px"],
  [style*="grid-template-columns: 1fr 280px"],
  [style*="grid-template-columns: minmax(0, 1fr) 220px"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  /* 3-col blog reader → 1 col main, hide rails (handled lower too) */
  [style*="grid-template-columns: 60px 1fr 240px"] {
    grid-template-columns: 1fr !important;
  }
  /* Tighten oversized gaps */
  [style*="gap: 80"] { gap: 48px !important; }
  [style*="gap: 96"] { gap: 56px !important; }
}

/* ────────────────────────────────────────────────────────────────────────
   NAV DRAWER — ≤880px
   (Drawer behaviour lives in Chrome.jsx via @media inside <style>; we just
   make sure the page below has room to breathe.)
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  /* Hero portrait images — let them shrink so they don't dominate */
  [style*="aspectRatio: '4/5'"],
  [style*="aspect-ratio: 4 / 5"],
  [style*="aspect-ratio: 4/5"] {
    aspect-ratio: 16 / 11 !important;
    max-height: 360px !important;
  }
  /* Catalogue jump rail — hide on tablet+mobile; month dividers still show */
  .fp-jumprail { display: none !important; }
  /* Catalogue layout collapses to single column */
  [style*="grid-template-columns: minmax(0, 1fr) 180px"] {
    grid-template-columns: 1fr !important;
  }
  /* Horizontal jump chips replace the vertical rail */
  .fp-jumpchips { display: block !important; }
}

/* ────────────────────────────────────────────────────────────────────────
   MOBILE — ≤640px
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Universal: kill x-overflow */
  html, body { overflow-x: hidden; }

  /* Every inline grid → single column, sane gap */
  [style*="grid-template-columns:"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Section padding: 40px → 18px horizontal */
  section[style*="padding: 88px 40px"],
  section[style*="padding: 96px 40px"],
  section[style*="padding: 110px 40px"],
  section[style*="padding: 120px 40px"],
  section[style*="padding: 64px 40px"],
  section[style*="padding: 72px 40px"],
  section[style*="padding: 80px 40px"],
  section[style*="padding: 100px 40px"],
  section[style*="padding: 140px 40px"],
  section[style*="padding: 56px 40px"],
  section[style*="padding: 48px 40px"],
  section[style*="padding: 60px 40px"],
  section[style*="padding: 0 40px"],
  header[style*="40px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Vertical padding tightens */
  section[style*="padding: 120px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  section[style*="padding: 140px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  section[style*="padding: 110px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  section[style*="padding: 96px"]  { padding-top: 48px !important; padding-bottom: 48px !important; }
  section[style*="padding: 88px"]  { padding-top: 48px !important; padding-bottom: 48px !important; }

  /* Footer: 5-col → stack */
  footer [style*="grid-template-columns:"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  footer { padding: 48px 20px 24px !important; }

  /* Sticky asides unstick */
  aside[style*="sticky"], aside[style*="position: sticky"] {
    position: static !important;
    top: auto !important;
    padding-top: 0 !important;
  }

  /* Blog marginalia rails hide entirely */
  .fn-reader__margin,
  .fn-margin,
  .fn-reader__margin-inner {
    display: none !important;
  }

  /* Stat strips — wrap to 2 cols */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }

  /* Workshop catalogue: collapse 3-col card grid; tighten cards */
  [style*="grid-template-columns: 0.7fr 1.6fr 0.8fr"] {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  /* The right meta rail inside each catalogue card */
  [style*="border-left: 1px solid #DCDFE3"][style*="padding-left: 28"] {
    border-left: none !important;
    border-top: 1px solid #DCDFE3 !important;
    padding-left: 0 !important;
    padding-top: 18px !important;
  }
  /* Workshop catalogue sticky filter strip — unstick + wrap */
  section[style*="position: sticky"][style*="top: 65"] {
    position: static !important;
    padding: 14px 18px !important;
  }
  section[style*="position: sticky"][style*="top: 65"] [style*="flex-wrap"] {
    flex-wrap: wrap !important;
  }

  /* Roster modal full-width sheet */
  .rm-panel {
    width: 100vw !important;
    max-height: 92vh !important;
    border-radius: 12px 12px 0 0 !important;
  }
  .rm-panel [style*="padding: 48px"] { padding: 28px 18px 36px !important; }
  .rm-panel [style*="column-count: 2"] { column-count: 1 !important; }

  /* Field notes figures — edge to edge */
  .fn-figure {
    margin: 28px -18px !important;
    padding: 18px 14px 14px !important;
  }
  .fn-prose .fn-h2 { font-size: 26px !important; margin: 44px 0 14px !important; }
  .fn-prose .fn-h2::before { left: -22px !important; font-size: 18px !important; }
  .fn-prose .fn-h3 { font-size: 20px !important; }
  .fn-prose { font-size: 16.5px !important; line-height: 1.65 !important; }
  .fn-prose .fn-p:first-of-type::first-letter { font-size: 2.6em !important; padding-right: 8px !important; }

  /* Field notes index rows — re-stack */
  .fn-row {
    padding: 22px 0 !important;
  }
  .fn-row [style*="text-align: right"] {
    text-align: left !important;
    margin-top: 8px;
  }

  /* CTAs — thumb-friendly */
  a[style*="padding: 14px"], button[style*="padding: 14px"],
  a[style*="padding: 12px"], button[style*="padding: 12px"] {
    min-height: 44px;
  }

  /* Hero artwork capping */
  [style*="aspectRatio: '4/5'"],
  [style*="aspect-ratio: 4 / 5"] {
    max-height: 280px !important;
    aspect-ratio: 16 / 10 !important;
  }

  /* Headlines — clamp won't shrink below its min, so re-clamp */
  h1[style*="clamp(48px"] { font-size: clamp(34px, 8.5vw, 52px) !important; }
  h1[style*="clamp(54px"] { font-size: clamp(36px, 9vw, 58px) !important; }
  h1[style*="clamp(56px"] { font-size: clamp(38px, 9.5vw, 60px) !important; }
  h2[style*="clamp(44px"] { font-size: clamp(30px, 7.5vw, 44px) !important; }
  h2[style*="clamp(48px"] { font-size: clamp(30px, 7.5vw, 46px) !important; }
  h2[style*="clamp(40px"] { font-size: clamp(28px, 7vw, 40px) !important; }
  h2[style*="clamp(36px"] { font-size: clamp(26px, 6.5vw, 36px) !important; }

  /* Don't allow nowrap on flex children to break layouts */
  [style*="flex-wrap: nowrap"] { flex-wrap: wrap !important; }

  /* Stats numbers smaller */
  [data-fp-countup] { font-size: clamp(40px, 11vw, 60px) !important; }

  /* Discord preview panel — let messages breathe */
  [data-fp-countup] + * { line-height: 1.5; }
}

/* ────────────────────────────────────────────────────────────────────────
   SMALL PHONES — ≤420px
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 420px) {
  section[style*="padding"] {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  footer { padding-left: 14px !important; padding-right: 14px !important; }

  .fn-figure { margin-left: -14px !important; margin-right: -14px !important; }

  /* 404 dial-down */
  .fp404-num { font-size: 100px !important; letter-spacing: -4px !important; }
  .fp404-mark-wrap { width: 220px !important; height: 220px !important; }
  .fp404-h1 { font-size: clamp(40px, 12vw, 56px) !important; }

  /* Two-col stat strips → single column */
  [style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Field notes — even tighter */
  .fn-prose { font-size: 16px !important; }
  .fn-prose .fn-h2 { font-size: 24px !important; }
}

/* Careers page mobile accordions */
@media (max-width: 640px) {
  details > section[style*="padding"] {
    padding-top: 18px !important;
    padding-bottom: 28px !important;
  }
}