/* ============================================================
   Helea — site-level layout helpers (consumes design-system tokens)
   Only responsive grid behaviour + scroll-reveal + a few utilities.
   All colour / type / spacing comes from the design system tokens.
   ============================================================ */

/* Responsive grid collapses (mirrors the DS ui_kit conventions) */
@media (max-width: 960px) {
  .helea-herogrid,
  .helea-headgrid,
  .helea-grid3,
  .helea-grid4,
  .helea-split { grid-template-columns: 1fr !important; }
}
@media (max-width: 620px) {
  .helea-grid2 { grid-template-columns: 1fr !important; }
}

/* Section rhythm shorthands */
.sec    { padding-block: var(--section-y); }
.sec--c { padding-block: var(--section-y-compact); }
.sec--dark { background: var(--surface-dark); }
.sec--sunken { background: var(--surface-sunken); }

/* Grid shorthands used across pages */
.helea-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.helea-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.helea-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* Anchored sections clear the sticky header */
[id] { scroll-margin-top: 96px; }

/* Scroll reveal — quiet fade-up, respects reduced motion.
   Hidden state is gated behind html.js-reveal so content is ALWAYS visible
   without JS / if IntersectionObserver never fires (progressive enhancement). */
html.js-reveal .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  will-change: opacity, transform;
}
html.js-reveal .reveal.is-in { opacity: 1; transform: none; }
/* Hard fallback: if the observer never fires (or the page isn't painting and the
   transition stalls at opacity:0), this forces all reveal content fully visible. */
html.reveal-shown .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  html.js-reveal .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
}

/* Generic text link with red affordance */
.txtlink {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--helea-red); font-weight: 700; font-size: 14px;
}
.txtlink:hover { color: var(--helea-red-press); }

/* Hairline list */
.facts { list-style: none; margin: 0; padding: 0; display: grid; }
.facts li {
  display: grid; grid-template-columns: auto 1fr; gap: 14px;
  padding: 16px 0; border-top: 1px solid var(--border-hairline);
  align-items: baseline;
}
.facts li:last-child { border-bottom: 1px solid var(--border-hairline); }
.facts .k {
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
  letter-spacing: 0.04em; color: var(--text-muted); white-space: nowrap;
}

/* Quiet pill row */
.pillrow { display: flex; flex-wrap: wrap; gap: 8px; }

/* Make all DS buttons full-width inside tight stacks on mobile */
@media (max-width: 480px) {
  .btnstack a, .btnstack button { width: 100%; }
}