/* ============================================================
   SKEION — EU Space Act page: what belongs to this page only.
   Loaded after /assets/site/site.css. Everything shared (page head, sections, facts, lists, callout, plate figure,
   disclosure, CTA band) comes from the system: see docs/build/13-design-system.md.
   ============================================================ */

/* ---------- 01 Head: date line under the lead, the text at a glance in the right-hand column ---------- */
.page-meta { margin-top: 20px; font: 400 0.75rem/1.6 var(--f-mono); letter-spacing: 0.06em; color: var(--ink-3); }
.glance-k { margin-bottom: 14px; font: 500 0.75rem/1.4 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); }
/* with the aside beside it, the title is a size down from a bare page head (4 lines at most) */
@media (min-width: 1024px) {
  .page-head--media .h1 { font-size: clamp(34px, calc(2.4vw + 18px), 54px); }
}
/* the system's .facts stacks term over value under 768 px: only widen it when it sits in two columns */
@media (min-width: 768px) {
  .glance { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); column-gap: 20px; }
}
.glance dd sup, .faq sup { font-size: 0.7em; line-height: 0; vertical-align: 0.4em; }

/* ---------- Head, alignment: the copy starts on the content column (right after --idx), like every section below.
   The system puts a 48 px gap after the margin column; here the gap moves to the left of the aside instead. ---------- */
@media (min-width: 1024px) {
  .page-head--media .page-head-grid { column-gap: 0; align-items: center; }
  .page-head--media .page-head-copy { padding-right: 24px; }
  .page-head--media .page-head-media { padding-left: 48px; }
}

/* ---------- 02 Timeline: one dated row per step, mono date on the left, under 1 px rules (the .facts vocabulary).
   The last row ("Next") is undated: dashed rule, grey label. ---------- */
.tl > li { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); column-gap: 24px; padding: 14px 0; border-top: 1px solid var(--line); }
.tl > li:last-child { border-bottom: 1px solid var(--line); }
.tl-d { padding-top: 0.3em; font: 500 0.75rem/1.5 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal); font-variant-numeric: tabular-nums; }
.tl-t { line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.tl > .tl-next { border-top-style: dashed; }
.tl-next .tl-d { color: var(--ink-3); }
@media (max-width: 599px) {
  .tl > li { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .tl-d { padding-top: 0; }
}

/* ---------- 03 Scope and 04 Space weather (one item per text: Commission, Council, Parliament):
   the lead-in of each item in full ink ---------- */
.scope-list strong, .sw-list strong { font-weight: 500; color: var(--ink); }
.scope-list > li, .sw-list > li { font-size: clamp(16px, calc(0.23vw + 14.8px), 18px); }

/* ---------- 05 What SKEION brings: the figure sits under the title, in the left column ---------- */
.skeion-fig { margin-top: clamp(28px, 2.6vw, 40px); }
@media (max-width: 1023px) { .skeion-fig { max-width: 560px; } }
.skeion-fig .fig-cap > .fig-n, .skeion-fig .fig-cap > .fig-d { display: inline; }   /* one line, as on the home (audit A16) */
/* the « Nature » link is long: let it wrap like the rest of the sentence (the system keeps .link--inline on one line) */
#skeion .link--inline { white-space: normal; }

/* ---------- 06 Questions: each question is an h3 inside its <summary> (outline), with the summary's own type ---------- */
.faq summary h3 { font: inherit; letter-spacing: inherit; color: inherit; }
.faq .disclosure > div { font-size: clamp(16px, calc(0.23vw + 14.8px), 18px); }

/* ---------- 07 Sources: a narrower term column; long URLs never widen the page ---------- */
@media (min-width: 768px) {
  .src { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); }
}
.src dd { overflow-wrap: anywhere; }
.sources a { overflow-wrap: anywhere; }

/* ---------- Long button labels wrap on a narrow phone instead of overflowing the column
   (the system keeps .btn on one line). ---------- */
@media (max-width: 479px) {
  .actions .btn { white-space: normal; text-align: left; justify-content: space-between; padding-block: 12px; line-height: 1.25; }
}