/* Integration of the report into the PadelCompass page frame (partials/header.php + partials/footer.php).
   Owned by the lead (integration). Loaded by article.php AFTER base.css and all section CSS.
   Everything is scoped to body.tb-article, so the standalone shell and other pages are unaffected. */

/* ---- Website frame: styles other pages define inline in their <head> ---- */
.tb-article .glassmorphism {
  background: rgba(10, 10, 10, .65);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.tb-article .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48; }

/* The header partial opens a wrapper with `overflow-x-hidden`. overflow-x:hidden turns it into a scroll
   container, which disables position:sticky for everything inside (website header, timeline clock,
   planner photos, intro card). `clip` cuts horizontal overflow the same way without that side effect. */
body.tb-article > .overflow-x-hidden { overflow-x: clip; }

/* ---- Hero sits below the sticky website header instead of under a transparent overlay bar ---- */
.tb-article .hero-stage {
  min-height: calc(100vh - var(--chrome-h, 0px));
  min-height: calc(100svh - var(--chrome-h, 0px));
}

/* ---- Tailwind preflight + forms plugin (needed for the website frame) vs. the report ----
   The sections were designed against browser defaults. Inside #bericht those defaults come back with
   element weight (0,0,1): later than tailwind-built.css, so they beat preflight, while every section
   class rule (0,1,0 and up) still wins. Without this, eyebrow/lead paragraphs and section heads lose
   their spacing, h2/h4 their default size/weight and inline links their underline. */
:where(#bericht) :is(p, blockquote, figure, dl, dd, hr, pre) { margin: revert; }
:where(#bericht) :is(h1, h2, h3, h4, h5, h6) { margin: revert; font-size: revert; font-weight: revert; }
:where(#bericht) :is(ul, ol, menu) { margin: revert; padding: revert; list-style: revert; }
:where(#bericht) a { text-decoration: revert; }
:where(#bericht) input:where([type=checkbox], [type=radio]) { border: revert; color: revert; }