/* ==========================================================================
   layout.css — container, section rhythm, grid helpers, wave divider.
   Depends on tokens.css. See plans/landing.MD §6.1, §6.2, §10.
   ========================================================================== */

/* -- Section rhythm (§6.1) — uniform, not hand-tuned per section -- */
.section {
  padding-block: clamp(var(--space-16), 9vw, var(--space-28));
}
.section--alt {
  background: var(--surface-alt);
}

/* -- Wave divider (§10.3) -- */
.wave-divider {
  line-height: 0;
}
.wave-divider svg {
  display: block;
  width: 100%;
  height: 56px;
}
.wave-divider--footer {
  margin-bottom: -1px;
}

@media (max-width: 768px) {
  .wave-divider svg { height: 36px; }
}
@media (max-width: 560px) {
  .wave-divider--hero { display: none; }
}

/* -- Page head (plans/team.MD §3.2) — shared block for inner pages,
   left-aligned on the container spine. Not a .section: its top padding
   must clear the sticky navbar and sit tighter than a content section. -- */
.page-head {
  padding-block: clamp(var(--space-16), 8vw, var(--space-20)) var(--space-12);
}
.page-head h1 {
  margin-top: var(--space-5);
}
.page-head__lead {
  margin-top: var(--space-4);
  font-size: var(--fs-lead);
  color: var(--text-muted);
  max-width: 54ch;
}

/* -- Generic grid helpers -- */
.grid { display: grid; }

/* -- Scroll-reveal (§9.7) --
   Elements are visible by default. reveal.js adds .js-reveal (the hidden
   start state) only after confirming JS runs and motion is not reduced,
   so a no-JS or reduced-motion visitor always sees a complete, static page. */
.js-reveal {
  opacity: 0;
  transform: translateY(16px) scale(.98);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}
/* Direction variants — same fade/scale, sliding in from a side instead of
   up, for elements whose layout already reads as "this belongs on the
   left/right" (alternating Research/Team cards, the home statement's
   text+figure pair). */
.js-reveal--left  { transform: translateX(-28px) scale(.98); }
.js-reveal--right { transform: translateX(28px) scale(.98); }
.js-reveal.is-visible {
  opacity: 1;
  transform: none;
}