/* ───────────────────────────────────────────────────────────────
   Lean Competence — global mobile overrides.
   Loaded by every page. Targets inline-styled JSX via attr selectors
   because nearly all styling in this project is React inline-style.

   Strategy: be aggressive. Mobile gets a lighter, simpler version of
   every desktop layout. We:
   - Collapse all multi-col grids to single-column.
   - Cap massive Display headings to a phone-readable size.
   - Compress section padding and gaps.
   - Hide decorative cards / floating dashboards marked data-mobile-hide.
   - Tame brutalist shadows and floating rotated cards.
   - Force tabular tables to scroll horizontally instead of collapse.
   ─────────────────────────────────────────────────────────────── */

html, body { margin: 0; padding: 0; }
body { font-family: Helvetica, "Helvetica Neue", Arial, sans-serif; }
* { box-sizing: border-box; }
/* Reset link colour to inherit — but NOT the Astro design-system classes
   (.lc-btn/.lc-link/.lc-navlink/… and .authority-*), whose colours live in
   global.css @layer components. Unlayered rules beat @layer rules, so an
   unscoped `a{color:inherit}` here silently overrode .lc-btn.is-primary's
   white text → black-on-black primary buttons. Plain links (incl. the static
   German pages, which don't load the Tailwind base reset) still inherit. */
a:not([class*="lc-"]):not([class*="authority-"]) { color: inherit; }
html { scroll-behavior: smooth; }
::selection { background: #DEE37F; color: #14110d; }

@media (max-width: 768px) {

  /* ── Layout: stack grids, tighten paddings ────────────────────── */

  /* Stack any explicit-column grid by default. Use [data-mobile-keep]
     on a grid that should remain multi-column (e.g. 2-col KPI strip),
     or [data-mobile-carousel] to switch to horizontal scroll. */
  *[style*="grid-template-columns"]:not([data-mobile-keep]):not([data-mobile-carousel]) {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    row-gap: 16px !important;
    column-gap: 0 !important;
  }

  /* Section + footer side padding */
  section, footer {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  footer { padding-top: 40px !important; padding-bottom: 24px !important; }

  /* ── Typography: cap oversized display copy ───────────────────── */

  /* H1 display: 28-36px range, lighter line-height */
  h1 {
    font-size: clamp(28px, 8.8vw, 38px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em !important;
  }
  /* Instrument Serif italics used for big stats (e.g. "62%") */
  *[style*='"Instrument Serif"'][style*="font-size: 96"],
  *[style*='"Instrument Serif"'][style*="font-size: 104"],
  *[style*='"Instrument Serif"'][style*="font-size: 88"],
  *[style*='"Instrument Serif"'][style*="font-size: 72"],
  *[style*='"Instrument Serif"'][style*="font-size: 64"],
  *[style*='"Instrument Serif"'][style*="font-size: 56"] {
    font-size: 44px !important;
    line-height: 0.95 !important;
  }
  /* "Numbered step" giant 01/02/03 markers shrink */
  *[style*='"Instrument Serif"'][style*="font-size: 40"] {
    font-size: 32px !important;
  }
  /* Block-level quotes (article-feel italic copy) */
  *[style*='"Instrument Serif"'][style*="font-size: 26"],
  *[style*='"Instrument Serif"'][style*="font-size: 22"] {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  /* ── Padding / spacing inside containers ──────────────────────── */

  /* Cards and panels with chunky desktop padding tighten up */
  *[style*="padding: 36px"] { padding: 20px !important; }
  *[style*="padding: 28px"] { padding: 18px !important; }
  *[style*="padding: 24px"] { padding: 16px !important; }
  *[style*="padding: 20px"] { padding: 14px !important; }

  /* Big vertical row gaps tighten */
  *[style*="gap: 80px"], *[style*="gap: 64px"] { gap: 24px !important; }
  *[style*="gap: 48px"] { gap: 20px !important; }
  *[style*="gap: 40px"] { gap: 18px !important; }
  *[style*="gap: 32px"] { gap: 16px !important; }
  *[style*="marginTop: 72"], *[style*="margin-top: 72"] { margin-top: 32px !important; }

  /* ── Forms: avoid iOS zoom on focus ───────────────────────────── */
  input, select, textarea { font-size: 16px !important; }

  /* ── Section intros stack title-over-body on mobile ───────────────
     Across every section that opens with "Eyebrow + big Display title
     on the left, supporting Body or link on the right", the right
     column gets squeezed and reads as a side-eye to the title. Stack
     them: title on top, supporting text underneath. Match by the
     common alignItems: flex-end inline style, which is the signature
     of these intros. */
  *[style*="justify-content: space-between"][style*="align-items: flex-end"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  /* ── Sticky content panels (form intros etc.) unstick on mobile ──
     Desktop pins a left "See it on your data" / "Apply to join" intro
     while the form scrolls on the right. On mobile that single-col
     stack means the pinned heading overlaps the form. Match by the
     `top:` values these panels use; the real navs use top: 0 or 65. */
  *[style*="position: sticky"][style*="top: 100px"],
  *[style*="position: sticky"][style*="top: 140px"] {
    position: static !important;
    top: auto !important;
  }

  /* ── Shadows: brutalist 12px offsets look broken on small screens */
  *[style*="box-shadow: 12px 12px"] { box-shadow: 4px 4px 0 currentColor !important; }
  *[style*="box-shadow: 8px 8px"]   { box-shadow: 3px 3px 0 currentColor !important; }
  *[style*="box-shadow: 6px 6px"]   { box-shadow: 2px 2px 0 currentColor !important; }

  /* ── Decorative floating cards (absolute + rotate) ────────────── */
  /* Drop into flow, no rotation, full width */
  *[style*="position: absolute"][style*="transform: rotate"] {
    position: static !important;
    width: 100% !important;
    transform: none !important;
    margin-top: 10px !important;
  }

  /* ── Min-height props that fight column layout ────────────────── */
  *[style*="min-height: 480"],
  *[style*="min-height: 520"],
  *[style*="min-height: 88"],
  *[style*="min-height: 86"],
  *[style*="min-height: 220"] {
    min-height: 0 !important;
  }

  /* ── Fixed-width dashboard chrome shrinks to fluid ────────────── */
  *[style*="width: 460px"],
  *[style*="width: 360px"],
  *[style*="width: 320px"],
  *[style*="width: 280px"],
  *[style*="width: 260px"],
  *[style*="width: 220px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── Author-opted hides + table-scroll opt-in ─────────────────── */

  /* Hero side-panels, expert dashboards, jidokai live preview etc.
     Anything that doesn't earn its vertical real-estate on mobile. */
  [data-mobile-hide] { display: none !important; }

  /* For genuine data tables (the comparison & dashboard tables),
     mark wrapper with data-mobile-scroll. Wrapper gets horizontal
     scroll, inner grid keeps its column template. */
  [data-mobile-scroll] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin-left: -18px;
    margin-right: -18px;
    padding-left: 18px;
    padding-right: 18px;
  }
  [data-mobile-scroll] > * {
    min-width: 640px;
  }
  [data-mobile-scroll] *[style*="grid-template-columns"]:not([data-mobile-keep]) {
    grid-template-columns: revert !important;
    gap: revert !important;
  }

  /* Subtle hint that a panel scrolls sideways */
  [data-mobile-scroll]::after {
    content: "← scroll →";
    display: block;
    text-align: center;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    opacity: 0.5;
    margin-top: 8px;
    min-width: 0 !important;
  }

  /* Two-column quick-data grids stay 2-col on mobile if opted in */
  [data-mobile-keep="2col"][style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* ── Horizontal swipeable carousel (Apple-style) ──────────────────
     Apply data-mobile-carousel to a grid wrapper. On mobile it
     becomes a flex row of fixed-width cards with scroll-snap, so the
     user swipes sideways instead of vertically forever. Bleeds to
     viewport edges so the next card peeks in.
     We do NOT override the cards' own border/background — those are
     authored on each card already. */
  [data-mobile-carousel] {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 18px;
    margin-left: -18px !important;
    margin-right: -18px !important;
    padding: 4px 18px 16px !important;
    /* Drop the wrapper's own border/background if it had one, since
       in carousel mode the wrapper is just the rail. */
    border: none !important;
    background: transparent !important;
    scrollbar-width: none;
  }
  [data-mobile-carousel]::-webkit-scrollbar { display: none; }
  [data-mobile-carousel] > * {
    flex: 0 0 auto !important;
    width: 78% !important;
    max-width: 320px !important;
    scroll-snap-align: start;
    min-height: 0 !important;
  }

  /* ── Tweaks panel: bottom anchored, narrower ──────────────────── */
  [data-tweaks-panel] {
    right: 8px !important;
    bottom: 8px !important;
    width: calc(100vw - 16px) !important;
    max-width: 360px !important;
  }

  /* ── Cookie banner: slimmer ───────────────────────────────────── */
  [aria-label="Cookie notice"] {
    bottom: 12px !important;
    right: 12px !important;
    max-width: calc(100vw - 24px) !important;
  }

  /* ── Body / paragraph max-width caps just override (full width) ─ */
  /* p inherits maxWidth from <Body w={...}> — strip on mobile */
  *[style*="max-width: 520"],
  *[style*="max-width: 460"],
  *[style*="max-width: 400"],
  *[style*="max-width: 380"],
  *[style*="max-width: 360"],
  *[style*="max-width: 320"],
  *[style*="max-width: 280"] {
    max-width: 100% !important;
  }
}