/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  mechoulam · SHARED responsive foundation                              ║
   ║  Loaded on BOTH studienlage bodies (body.reg = register landing,       ║
   ║  body.studienlage = detail pages), BEFORE each scoped sheet so the      ║
   ║  scoped sheets can still override.                                      ║
   ║                                                                         ║
   ║  Every rule is scoped to those two body classes — there is NO unscoped  ║
   ║  `body`/element rule here, so this file can never collide with          ║
   ║  site.css (whose unscoped `body` rule is the reason the studienlage      ║
   ║  sheets were isolated in the first place).                              ║
   ║                                                                         ║
   ║  Purpose: make mobile correct-by-construction instead of patched.       ║
   ║   1. Overflow-invariant guards (no element may exceed the viewport).    ║
   ║   2. Fluid type-scale tokens (each clamp MAX = today's fixed px, so     ║
   ║      desktop is unchanged; text only scales DOWN on small screens).     ║
   ║   3. A single canonical breakpoint ladder (see comment below).          ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ─── Canonical breakpoint ladder ──────────────────────────────────────
   CSS custom properties can't be used inside @media conditions, so this is
   the documented single source of truth. Migrate ad-hoc breakpoints onto it:
       --bp-lap    : 1024px   laptop → sidebar/rail reflow      (was 980/900/860)
       --bp-tab    :  768px   tablet → drawer / single column   (was 767)
       --bp-phone  :  600px   phone  → multi-col collapses       (was 680/640/620)
       --bp-narrow :  400px   tight  → last-resort single col    (was 560/500/480)
   ──────────────────────────────────────────────────────────────────── */

/* 2. Fluid type-scale tokens — defined on both bodies. Each MAX equals the
      value already hard-coded in the scoped sheets, so desktop is identical. */
body.reg,
body.studienlage {
  --fs-body:     clamp(14px,   13px + 0.3vw,  15px);
  --fs-meta:     clamp(11.5px, 10.5px + 0.4vw, 13.5px);
  --fs-label:    clamp(9.5px,   9px + 0.2vw,  10.5px);
  --fs-label-sm: clamp(8.5px,   8px + 0.2vw,   10px);
}

/* 1. Overflow-invariant guards.
   `min-width: 0` is the single highest-leverage rule: by default flex AND grid
   items have min-width:auto, which refuses to shrink below their content and is
   the root cause of subgrid / flex / long-text blowout. Letting them shrink to
   0 means a too-wide child reflows instead of pushing the page past the screen. */
body.reg *,
body.reg *::before,
body.reg *::after,
body.studienlage *,
body.studienlage *::before,
body.studienlage *::after {
  min-width: 0;
}

/* media + tables never exceed their container */
body.reg img,  body.reg svg,  body.reg video,  body.reg table,
body.studienlage img, body.studienlage svg, body.studienlage video, body.studienlage table {
  max-width: 100%;
}

/* long unbreakable tokens (DOIs, URLs, long compound words, journal names)
   may break rather than overflow */
body.reg p, body.reg li, body.reg td,
body.studienlage p, body.studienlage li, body.studienlage td {
  overflow-wrap: anywhere;
}

/* headings carry long hyphenated compounds ("Evidenz-Spektrum",
   "Cannabis-Studien") that must break rather than clip when their grid cell is
   narrow. `break-word` (not `anywhere`) so they only break when there's no
   other option — desktop wrapping is unaffected. */
body.reg h1, body.reg h2, body.reg h3,
body.studienlage h1, body.studienlage h2, body.studienlage h3 {
  overflow-wrap: break-word;
}