/* =====================================================================
   HermitMonster - responsive.css   (platform-wide responsive logic, last)
   ONE intelligent scaling system: a fluid root font-size makes every rem-
   based size track the viewport, container widens edge-to-edge to minimise
   negative space, and global wrap guards stop any clip. Tuned per persona
   and per breakpoint. Loaded last so it tunes without rewriting components.
   ===================================================================== */

/* fluid root: 16px @ 360 -> 19px @ 1600. Every rem scales with the screen. */
:root { font-size: clamp(16px, 0.85rem + 0.55vw, 19px); }

/* edge-to-edge: container fills the viewport (no extra centering inset);
   only gutter is the side padding (>=16px, capped tight so content runs wide).
   Applies to both hermit + monster. High cap keeps ultrawide from over-stretching. */
:root { --container: min(100%, 1880px); }
.container { padding-inline: clamp(16px, 2vw, 28px); }

/* never clip long words, but DON'T shrink min-content (which would collapse
   nav/flex layouts). break-word only breaks words that would actually overflow;
   excludes inline a/span so nav links + buttons never split mid-word. */
p, li, blockquote, .hero__title, .lead, .section-head h2, h1, h2, h3 { overflow-wrap: break-word; }
img,svg,video,iframe { max-width: 100%; height: auto; }

/* PERF: skip rendering offscreen sections (huge win on this tall page).
   The browser doesn't lay out / paint / animate a section until it nears the
   viewport. contain-intrinsic-size reserves height so the scrollbar stays
   stable. Hero is excluded (always on screen). Helps BOTH personas. */
.section:not(.hero):not(.hero--xl) {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* header CTA + nav links never shrink below their text (stops clipping/wrapping) */
.site-header .btn--primary { white-space: nowrap; flex: 0 0 auto; }
.nav a, nav a { white-space: nowrap; }

/* hero fits its column at every width (no last-word clip, no tiny collapse) */
.hero__title { font-size: clamp(2rem, 7.4vw, 5.6rem); line-height: .98; }
.hero__copy { min-width: 0; }
.hero__lead, .hero__copy .lead { font-size: clamp(1rem, 1.4vw, 1.22rem); }

/* TABLET (<=900): denser grids, fuller bleed (never below 16px gutters) */
@media (max-width: 900px) {
  .container { padding-inline: clamp(16px, 3vw, 1.4rem); }
  .hero__grid { gap: clamp(1rem, 3vw, 2rem); }
  /* collapse the hero to one column (beats future.css's unguarded 2-col rule) */
  .hero__grid, :root[data-mode="monster"] .hero__grid { grid-template-columns: 1fr; }
  .hero__emblem { order: -1; width: clamp(150px, 40vw, 240px); justify-self: center; }
  .hero__copy, :root[data-mode="monster"] .hero__copy { max-width: 100%; width: 100%; text-align: left; margin: 0; }
}

/* PHONE (<=640): single column, both personas, edge-to-edge, no clip */
@media (max-width: 640px) {
  .hero__title { font-size: clamp(1.9rem, 9.5vw, 3.1rem); }
  .section-head h2, .cta h2, .about h2 { font-size: clamp(1.7rem, 7.5vw, 2.4rem); }
  /* monster mirrors right on desktop; on phones recenter for legibility */
  :root[data-mode="monster"] .hero__copy { text-align: left; margin: 0; max-width: 100%; }
  :root[data-mode="monster"] .hero__copy .lead, :root[data-mode="monster"] .actions { text-align: left; justify-content: flex-start; }
  /* trim hero copy inset so text runs edge-to-edge */
  .hero__copy { padding-inline: 0; }
  .cap-grid, .stat-grid, .footer-grid, .work-card { grid-template-columns: 1fr; }
  section, .section { padding-block: clamp(2.4rem, 9vw, 4rem); }
}

/* SMALL PHONE (<=380): keep a comfortable 16px text gutter */
@media (max-width: 380px) { .container { padding-inline: 16px; } }