/* SPEC-closing-page.md. The closing page is one fixed-viewport screen: a brand-blue
   splash band (header), a white canvas (hero) and a brand-blue collaboration band
   (footer), stacked in a 100vh grid. Nothing scrolls; every size that could
   push the stack past the viewport is clamped against vh as well as vw.
   All colours, type and spacing come from the installed bbl-design skill's
   tokens.css, linked verbatim as /tokens.css. No hard-coded hex values. */

:root {
  font-synthesis: none;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background-color: var(--colors-background);
  color: var(--colors-text-primary);
  font-family: var(--font-primary);
  font-weight: var(--typography-body-weight);
  font-size: var(--typography-body-size);
  line-height: var(--typography-body-line-height);
  -webkit-font-smoothing: antialiased;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  /* vh first as the fallback; dvh tracks mobile browser chrome. */
  height: 100vh;
  height: 100dvh;
}

/* --- splash: brand-blue header band carrying the L&D mark --- */

.splash {
  background-color: var(--colors-primary);
  display: flex;
  align-items: center;
  /* Centred on the same axis as the hero and the footer. */
  justify-content: center;
  padding: clamp(var(--spacing-scale-3), 2.4vh, var(--spacing-scale-6)) var(--spacing-scale-4);
}

/* The L&D mark is a blue glyph with dark type, so on the brand-blue band it
   would vanish. It sits on a small white tile instead (white is the band's
   contrast pair; the tile radius is the system's --radius-md). The tile is
   sized to read as a badge, not a block: slim padding, modest height. */
.splash__logo {
  display: block;
  height: clamp(36px, 6.5vh, 68px);
  width: auto;
  padding: clamp(var(--spacing-scale-1), 0.8vh, var(--spacing-scale-2))
    clamp(var(--spacing-scale-2), 1.2vh, var(--spacing-scale-3));
  background-color: var(--colors-background);
  border-radius: var(--radius-md);
}

/* --- hero: the white canvas with the message --- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--spacing-scale-4) var(--spacing-scale-4);
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  min-height: 0;
}

.hero__eyebrow {
  color: var(--colors-primary);
  font-size: clamp(14px, min(2.2vw, 2.9vh), 26px);
  font-weight: 500;
  line-height: 1.45;
  margin: 0 0 clamp(var(--spacing-scale-3), 3vh, var(--spacing-scale-8)) 0;
}

.hero__eyebrow-line {
  display: block;
}

/* The theme line sits under the event name at regular weight, in the body
   grey (the two lines above are brand blue, 4.9:1 on white). */
.hero__eyebrow-line--theme {
  color: var(--colors-text-primary);
  font-weight: 400;
}

.hero__title {
  /* One brand-navy colour for the whole title. */
  color: var(--colors-background-dark);
  /* Bound by width and by height: 9vw fills a narrow portrait screen, 14vh
     keeps the two-line mobile title inside a short landscape one. */
  font-size: clamp(36px, min(9vw, 14vh), 120px);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 clamp(var(--spacing-scale-3), 3vh, var(--spacing-scale-8)) 0;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* Mobile-only line break inside the h1: forces "Thank you" / "for joining"
   so "joining" is never orphaned. Hidden from d768 up, where the title fits
   on one line. */
.hero__title-break {
  display: none;
}

.hero__next {
  color: var(--colors-accent-dark-blue);
  font-size: clamp(18px, min(3vw, 4.4vh), 32px);
  font-weight: 400;
  margin: 0;
}

/* --- credit: brand-blue footer band, "In collaboration with" + the atta mark --- */

.credit {
  background-color: var(--colors-primary);
  color: var(--colors-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-scale-4);
  padding: clamp(var(--spacing-scale-2), 2vh, var(--spacing-scale-6)) var(--spacing-scale-4);
}

.credit__label {
  margin: 0;
  font-size: var(--typography-body-sm-size);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.credit__logo {
  display: block;
  height: clamp(28px, 5.5vh, 48px);
  width: auto;
}

/* --- narrow viewports --- */

@media (max-width: 767px) {
  .hero__title-break {
    display: inline;
  }

  .credit {
    gap: var(--spacing-scale-3);
  }
}

/* --- desktop --- */

@media (min-width: 1280px) {
  .credit__label {
    font-size: var(--typography-body-size);
  }
}

/* --- short landscape (phones on their side): tighten the stack --- */

@media (max-height: 480px) {
  .hero__title-break {
    display: none;
  }
}

/* --- reduce motion: still static, but make sure no inherited animation --- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}