/* ==========================================================================
   05-sections.css
   Styling that belongs to one section only, in the order the sections appear
   on the page. If a rule here starts getting reused, move it to 04-components.
   ========================================================================== */

/* Without JS, a plain #anchor jump would put the target under the fixed navbar.
   js/nav.js applies the same 80px offset for the animated scroll. */
section[id] { scroll-margin-top: var(--scroll-offset); }


/* ==========================================================================
   HERO
   Full-viewport photo with a purple scrim, and a white stats card sitting
   flush with the bottom edge.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
}

/* The founders and the children sit in the middle of the frame, so the crop is
   centred — anchoring to the top would trade them for sky and rooftops. */
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to bottom,
    rgb(74 29 106 / 0.72),
    rgb(74 29 106 / 0.62),
    rgb(74 29 106 / 0.72)
  );
}

.hero__content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 5rem 1.5rem 8rem;
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--white);
  max-width: 750px;
  margin-inline: auto;
  text-shadow: 0 2px 20px rgb(0 0 0 / 0.3);
}

.hero__lede {
  margin: 1.25rem auto 0;
  max-width: 600px;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: rgb(255 255 255 / 0.9);
}

.hero__actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

@media (min-width: 640px) {
  .hero__title { font-size: var(--text-5xl); line-height: var(--lh-5xl); }
}

@media (min-width: 768px) {
  .hero__title { font-size: var(--text-hero); line-height: var(--lh-hero); }
}

/* ---- Hero stats card -----------------------------------------------------
   Sits flush with the bottom edge of the hero.

   The old build carried a `translate-y-[40%]` class here, intending the card to
   overhang into the About section — but it never took effect: the entrance
   animation wrote its own transform over it on load, and the hero's
   `overflow: hidden` would have clipped the overhang anyway. This matches what
   the site actually renders. If you ever want the overhang, remove
   `overflow: hidden` from .hero as well.

   Centred with left:50% + translateX(-50%). The entrance animation below has
   to carry that -50% in every keyframe as a result — worth it because the
   transform also puts the card on its own compositing layer, which is how the
   original rasterizes its shadow.                                         */

.hero__stats {
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 20;
  width: 90%;
  max-width: 800px;
  background-color: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 2rem;
  transform: translate(-50%, 0);
}

.hero__stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.stat-mini { text-align: center; }

.stat-mini__value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--lh-2xl);
  font-weight: 600;
  color: var(--purple);
}

.stat-mini__label {
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--soft-gray);
  margin-top: 0.25rem;
}

@media (min-width: 768px) {
  .hero__stats-grid  { gap: 2rem; }
  .stat-mini__value  { font-size: var(--text-4xl); line-height: var(--lh-4xl); }
}

/* ---- Hero entrance -------------------------------------------------------
   Four elements fade up in sequence on load. js/hero.js adds .is-loaded.
   Delays and durations mirror the original timeline exactly:
     1 title   delay 0.30s  duration 0.60s  from y 40
     2 lede    delay 0.60s  duration 0.50s  from y 30
     3 actions delay 0.90s  duration 0.40s  from y 20
     4 stats   delay 1.20s  duration 0.60s  from y 60, with a slight overshoot
   ------------------------------------------------------------------------ */

.hero [data-hero] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-timing-function: var(--ease-out-quart);
}

.hero [data-hero="1"] { transform: translateY(40px); transition-duration: 0.6s; transition-delay: 0.3s; }
.hero [data-hero="2"] { transform: translateY(30px); transition-duration: 0.5s; transition-delay: 0.6s; }
.hero [data-hero="3"] { transform: translateY(20px); transition-duration: 0.4s; transition-delay: 0.9s; }

/* The stats card is horizontally centred by its transform, so every state
   below has to keep the -50% X component. */
.hero [data-hero="4"] {
  transform: translate(-50%, 60px);
  transition-duration: 0.6s;
  transition-delay: 1.2s;
  transition-timing-function: var(--ease-out-back);
}

.hero.is-loaded [data-hero]      { opacity: 1; transform: translateY(0); }
.hero.is-loaded [data-hero="4"]  { transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .hero [data-hero]      { opacity: 1; transform: none; transition: none; }
  .hero [data-hero="4"]  { transform: translate(-50%, 0); }
}

/* No-JS fallback: .is-loaded never arrives, so show everything up front. */
html:not([data-js]) .hero [data-hero]     { opacity: 1; transform: none; }
html:not([data-js]) .hero [data-hero="4"] { transform: translate(-50%, 0); }


/* ==========================================================================
   ABOUT — founders' welcome letter, portrait, slogan, vision and mission
   ========================================================================== */

/* ---- Welcome from the Founders -------------------------------------------
   A white card holding the letter. The body is capped at a comfortable reading
   measure and centred inside the card, so the card can stay full width while
   the prose does not run too long a line.                                  */

.founders {
  background-color: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 2rem;
  text-align: center;
}

.founders__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--lh-2xl);
  font-weight: 600;
  color: var(--charcoal);
  margin-top: 0.75rem;
}

/* The heading doubles as the collapse toggle: a full-width button that keeps
   the heading's type and adds a chevron beside it. With scripts off the panel
   cannot close, so the chevron is hidden and the button left inert.        */

.founders__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
}

.founders__toggle:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 4px;
  border-radius: var(--radius-card);
}

.founders__chevron {
  flex: none;
  color: var(--purple);
  transition: transform 0.3s var(--ease-out-quart);
}

/* Points down when the letter is closed, up once it is open. */
.founders__toggle[aria-expanded="true"] .founders__chevron {
  transform: rotate(180deg);
}

html:not([data-js]) .founders__toggle  { pointer-events: none; }
html:not([data-js]) .founders__chevron { display: none; }

@media (prefers-reduced-motion: reduce) {
  .founders__chevron { transition: none; }
}

.founders__body {
  max-width: 680px;
  margin: 2rem auto 0;
  text-align: left;
}

.founders__body p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--soft-gray);
}

.founders__body p + p {
  margin-top: 1.25rem;
}

/* The opening line carries a little more weight than the body copy. */
.founders__body p:first-child {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--charcoal);
}

/* The two founders' photographs. They sit a little wider than the reading
   measure so they read as a feature, and each keeps its natural aspect ratio —
   the family shot is landscape, the couple's portrait is upright — so the grid
   sizes the columns to suit rather than cropping either one to match.       */

.founders__gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  max-width: 860px;
  margin: 2.5rem auto 0;
}

.founders__photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.founders__photo figcaption {
  margin-top: 0.75rem;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--soft-gray);
}

.founders__signoff {
  max-width: 680px;
  margin: 2rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--border-gray);
  text-align: center;
}

.founders__salutation {
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--soft-gray);
}

/* The two names sit as a centred pair rather than in columns, so they stay
   balanced under the salutation however wide the card is. */
.founders__signatures {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.signature__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  font-weight: 600;
  color: var(--charcoal);
}

.signature__role {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--lavender);
}

.founders__org {
  margin-top: 1.25rem;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 500;
  color: var(--soft-gray);
}

@media (min-width: 768px) {
  .founders             { padding: 3rem; }
  .founders__title      { font-size: var(--text-3xl); line-height: var(--lh-3xl); }
  .founders__signatures { flex-direction: row; justify-content: center; gap: 4rem; }

  /* Side by side, matched on height rather than width: the landscape family
     shot and the upright portrait then share a baseline without either being
     cropped, and each column is only as wide as its photo needs. */
  .founders__gallery {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    max-width: none;
  }

  .founders__photo     { flex: 0 1 auto; }
  .founders__photo img { height: 22rem; width: auto; max-width: 100%; }
}

/* ---- Slogan ---------------------------------------------------------------
   The organisation's tagline, set as a pull-quote between the letter and the
   formal statements.                                                       */

.slogan {
  margin: 4rem auto 0;
  max-width: 800px;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  font-weight: 600;
  color: var(--purple);
}

@media (min-width: 768px) {
  .slogan { font-size: var(--text-3xl); }
}

/* ---- Vision and Mission statements ---------------------------------------
   Two panels with a purple rule down the left edge, stacked at every width:
   the vision statement is read first, the mission statement beneath it. The
   column is capped so the lines do not run the full width of the section. */

.statement-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  max-width: 900px;
  margin: 4rem auto 0;
  align-items: start;
}

.statement {
  background-color: var(--white);
  border-radius: var(--radius-card);
  border-left: 4px solid var(--purple);
  box-shadow: var(--shadow-card);
  padding: 2rem;
}

.statement__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--lavender);
  margin-bottom: 0.75rem;
}

.statement__text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--soft-gray);
}

@media (min-width: 768px) {
  .statement-grid { gap: 2rem; }
  .statement      { padding: 2.5rem; }
}


/* ---- Founder portrait ----------------------------------------------------- */

.ceo {
  margin-top: 4rem;
  text-align: center;
}

.ceo__inner { display: inline-block; }

.ceo__img {
  width: 10rem;
  height: 10rem;
  border-radius: var(--radius-full);
  object-fit: cover;
  object-position: top;
  margin-inline: auto;
  box-shadow: var(--shadow-card);
}

.ceo__name {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--lh-xl);
  font-weight: 600;
  color: var(--charcoal);
}

.ceo__role {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--soft-gray);
}

@media (min-width: 768px) {
  .ceo__img { width: 12rem; height: 12rem; }
}


/* ==========================================================================
   PROGRAMS — the note pointing one-time activities at the Gallery instead of
   giving them a "Programs" card, so the section only claims standing work.
   ========================================================================== */

.initiatives-note {
  max-width: 700px;
  margin: 3rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--border-gray-100);
  text-align: center;
}

.initiatives-note__title {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--soft-gray);
}

.initiatives-note__list {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--soft-gray);
}

.initiatives-note__list a {
  font-weight: 600;
  color: var(--purple);
}
.initiatives-note__list a:hover { text-decoration: underline; }

@media (min-width: 640px) {
  .initiatives-note__list { flex-direction: row; justify-content: center; gap: 2rem; }
}


/* ==========================================================================
   FILM — the school-visit video
   ========================================================================== */

/* The player is centred three ways over, on purpose. A <video> carries its own
   intrinsic width from the file (and from the width attribute in the markup),
   so if `width: 100%` below is ever missed — a stale stylesheet, a narrower
   override — the element falls back to 848px and, being a block, pins itself
   to the left. `margin-inline: auto` on the player and `text-align: center` on
   the wrapper both keep it centred at whatever width it ends up. */
.film {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}

/* aspect-ratio holds the player's shape before the poster loads, so the
   sections below do not jump once it arrives. It matches the source footage
   (848x478); change both together if the film is ever re-cut. */
.film__player {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  aspect-ratio: 848 / 478;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-hover);
  background-color: var(--charcoal);
}

/* Only reachable if the browser cannot play the file at all. */
.film__fallback {
  padding: 1.5rem;
  text-align: center;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--white);
}

.film__fallback a {
  color: var(--light-purple);
  text-decoration: underline;
}


/* ==========================================================================
   IMPACT — count-up stats and the image/text split
   ========================================================================== */

.stat { text-align: center; }

.stat__value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--lh-3xl);
  font-weight: 600;
  color: var(--light-purple);
}

.stat__label {
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 500;
  color: rgb(255 255 255 / 0.7);
  margin-top: 0.5rem;
}

@media (min-width: 768px) {
  .stat__value { font-size: var(--text-5xl); line-height: var(--lh-5xl); }
}

.impact-split__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-card);
}

.impact-split__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--lh-2xl);
  font-weight: 600;
  color: var(--white);
  margin-bottom: 1rem;
}

.impact-split__text {
  line-height: var(--leading-relaxed);
  color: rgb(255 255 255 / 0.8);
  margin-bottom: 1.5rem;
}


/* ==========================================================================
   NEWSLETTER
   ========================================================================== */

.newsletter {
  max-width: 600px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  text-align: center;
}

.newsletter__text {
  margin-top: 0.75rem;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--soft-gray);
}

.newsletter__form {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.newsletter__input { flex: 1; }

@media (min-width: 640px) {
  .newsletter__form { flex-direction: row; }
}

.newsletter__social-wrap { margin-top: 1.5rem; }

.newsletter__social {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-weight: 500;
  color: var(--purple);
  transition: color 200ms ease;
}

.newsletter__social:hover { color: var(--lavender); }