/* ==========================================================================
   K-BIAN — Home page

   Mobile-first. Every colour comes from tokens.css. Section entrance motion
   is handled by the shared .has-animations rules in base.css — this file
   only needs [data-animate] on each <section>.
   ========================================================================== */

/* ==========================================================================
   0. Shared section-heading pattern — CLAUDE.md's Page composition
      standard, rule 2, exact and non-negotiable:

        eyebrow -> 16px -> h2 -> 12px -> deck -> 24px -> gold rule -> 40px -> content

      Kept identical to the equivalent block in pages.css (home.php does not
      load that file, so this copy exists for the same classes to work here
      too — see the P07 fix that brought home.php onto this standard).
   ========================================================================== */

.section-eyebrow {
    display: block;
    font-family: var(--kb-font-heading);
    font-size: var(--fs-eyebrow);
    font-weight: var(--kb-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--kb-tracking-caps);
    color: var(--kb-green-600);
    margin-block-end: 1rem; /* 16px, exact per spec */
}

.section-title {
    margin-block-end: 0.75rem; /* 12px to the deck, exact per spec */
}

/* The deck: 21px, one specific sentence, max 60ch. */
.section-deck {
    max-width: 60ch;
    margin-block-end: 1.5rem; /* 24px to the gold rule, exact per spec */
    font-size: 1.3125rem; /* 21px */
    line-height: var(--lh-lead);
    color: var(--kb-green-700);
}

.section-rule {
    display: block;
    width: 2.875rem; /* 46px */
    height: 3px;
    margin-block-end: 2.5rem; /* 40px to the section's real content */
    background-color: var(--kb-rule);
    border-radius: var(--kb-radius-pill);
}

.programmes-grid,
.video-block,
.kakamega-teaser,
.get-involved,
.newsletter,
.partners-marquee {
    padding-block: clamp(4rem, 9vw, 7.5rem); /* 64px -> 120px */
}

/* ==========================================================================
   1. Hero
   ========================================================================== */

.hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 80vh;
    overflow: hidden;
}

.hero__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Dark on the text side, breathing room for the photo on the other —
   deliberately not a flat top-to-bottom fade. Built from --kb-green-900-rgb
   rather than a literal rgba(42,48,24,...): same colour, but it stays tied
   to the one file that owns it. */
.hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        rgb(var(--kb-green-900-rgb) / 0.94),
        rgb(var(--kb-green-900-rgb) / 0.72) 52%,
        rgb(var(--kb-green-900-rgb) / 0.25)
    );
}

.hero__content {
    position: relative;
    z-index: var(--kb-z-raised);
    padding-block: var(--kb-space-2xl) var(--kb-space-3xl);
}

.hero__eyebrow {
    display: block;
    font-family: var(--kb-font-heading);
    font-size: var(--fs-eyebrow);
    font-weight: var(--kb-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--kb-tracking-caps);
    color: var(--kb-gold-400);
    margin-block-end: var(--kb-space-sm);
}

.hero__title {
    max-width: 20ch;
    color: var(--kb-white);
}

.hero__title mark {
    background: none;
    color: var(--kb-gold-400);
}

.hero__lede {
    max-width: 46ch;
    margin-block-start: var(--kb-space-sm);
    font-size: var(--fs-lead);
    line-height: var(--lh-lead);
    color: var(--kb-cream);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kb-space-sm);
    margin-block-start: var(--kb-space-lg);
}

/* ==========================================================================
   2. Stats row — see .data-ribbon in components.css. Impact figures use
      .achievement-band there too.
   ========================================================================== */

/* ==========================================================================
   3. Full-bleed image band — breaks out of the container between sections.
      Capped at 460px so no single image ever takes over a section — see
      the identical rule in pages.css.
   ========================================================================== */

.image-band {
    position: relative;
    height: clamp(17.5rem, 32vw, 26rem); /* 280px -> 416px */
    max-height: 28.75rem; /* 460px */
    overflow: hidden;
}

.image-band img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* A corner scrim, not a flat wash: guarantees a dark reading zone behind the
   caption regardless of what the photo happens to show there, rather than
   hoping a single bottom-to-top fade lands somewhere dark. */
.image-band__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, rgb(var(--kb-green-900-rgb) / 0.88) 0%, rgb(var(--kb-green-900-rgb) / 0.4) 38%, rgb(var(--kb-green-900-rgb) / 0) 62%),
        linear-gradient(0deg, rgb(var(--kb-green-900-rgb) / 0.5) 0%, rgb(var(--kb-green-900-rgb) / 0) 55%);
}

.image-band__content {
    position: absolute;
    inset-block-end: var(--kb-space-xl);
    inset-inline-start: var(--kb-gutter);
    inset-inline-end: var(--kb-gutter);
    max-width: 26rem;
}

.image-band__eyebrow {
    display: block;
    font-family: var(--kb-font-heading);
    font-size: var(--fs-eyebrow);
    font-weight: var(--kb-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--kb-tracking-caps);
    color: var(--kb-gold-400);
    margin-block-end: var(--kb-space-2xs);
}

.image-band__caption {
    font-family: var(--kb-font-heading);
    font-size: var(--fs-h3);
    font-weight: var(--kb-weight-semibold);
    line-height: var(--lh-h3);
    color: var(--kb-white);
    text-shadow: 0 2px 12px rgb(var(--kb-green-900-rgb) / 0.85);
}

/* ==========================================================================
   4. Mission strip
   ========================================================================== */

.mission-strip {
    padding-block: var(--kb-space-2xl);
    background-color: var(--kb-bg-band);
    text-align: center;
}

.mission-strip__text {
    max-width: 52ch;
    margin-inline: auto;
    font-family: var(--kb-font-heading);
    font-size: var(--fs-h3);
    font-weight: var(--kb-weight-semibold);
    line-height: var(--lh-h3);
    color: var(--kb-text-heading);
}

/* ==========================================================================
   5. Programmes grid
   ========================================================================== */

.programme-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--kb-space-lg);
    margin-block-start: var(--kb-space-xl);
}

/* Flex columns inside the grid, so every card in a row is the same height
   and "Learn more" always sits on the same line regardless of copy length. */
.programme-card {
    display: flex;
}

.programme-card__link {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--kb-surface);
    border-radius: var(--kb-radius-lg);
    box-shadow: var(--kb-shadow-sm);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: transform 200ms var(--kb-ease-out), box-shadow 200ms var(--kb-ease-out);
}

.programme-card__link:hover {
    box-shadow: var(--kb-shadow-xl);
    transform: translateY(-3px);
}

.programme-card__image {
    width: 100%;
    height: 12.5rem; /* 200px */
    object-fit: cover;
}

.programme-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: var(--kb-space-lg);
}

/* Honest, small — K-BIAN is ten months old and most programmes are designed
   rather than running. See CLAUDE.md: never soften this into looking like
   an achievement. */
.programme-card__status {
    display: inline-block;
    align-self: flex-start;
    margin-block-end: var(--kb-space-2xs);
    padding: 0.125rem 0.5rem;
    border-radius: var(--kb-radius-pill);
    font-size: var(--fs-eyebrow);
    font-weight: var(--kb-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--kb-tracking-caps);
}

.programme-card__status--active {
    background-color: var(--kb-green-100);
    color: var(--kb-green-700);
}

.programme-card__status--in_development {
    background-color: transparent;
    border: var(--kb-border-thin) solid var(--kb-border);
    color: var(--kb-text-muted);
}

.programme-card__title {
    font-size: var(--fs-h3);
    font-weight: var(--kb-weight-semibold);
}

.programme-card__summary {
    margin-block-start: var(--kb-space-2xs);
    color: var(--kb-text-muted);
}

.programme-card__cta {
    display: inline-block;
    margin-block-start: auto;
    padding-block-start: var(--kb-space-md);
    font-weight: var(--kb-weight-semibold);
    color: var(--kb-primary-text);
}

@media (min-width: 40em) { /* 640px */
    .programme-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 64em) { /* 1024px */
    .programme-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .programme-card__link:hover {
        transform: none;
    }
}

/* ==========================================================================
   6. Video block
   ========================================================================== */

.video-facade {
    position: relative;
    aspect-ratio: 16 / 9;
    margin-block-start: var(--kb-space-lg);
    overflow: hidden;
    border-radius: var(--kb-radius-lg);
    background-color: var(--kb-green-900);
}

.video-facade__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-facade__play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 4.5rem;
    height: 4.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--kb-radius-circle);
    background-color: rgb(var(--kb-ink-rgb) / 0.55);
    color: var(--kb-white);
    transition: background-color var(--kb-duration-base) var(--kb-ease-out),
                transform var(--kb-duration-base) var(--kb-ease-out);
}

.video-facade__play:hover {
    background-color: var(--kb-primary);
    transform: scale(1.05);
}

.video-facade__pending {
    position: absolute;
    inset-block-end: var(--kb-space-md);
    inset-inline-start: var(--kb-space-md);
    padding: var(--kb-space-2xs) var(--kb-space-sm);
    border-radius: var(--kb-radius-md);
    background-color: rgb(var(--kb-ink-rgb) / 0.6);
    color: var(--kb-white);
    font-size: var(--fs-small);
}

.video-facade__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==========================================================================
   7. Why Kakamega Forest — asymmetric two-column teaser: image 55%, text 45%
   ========================================================================== */

.kakamega-teaser__grid {
    display: grid;
    gap: var(--kb-space-xl);
    align-items: center;
}

.kakamega-teaser__media img {
    width: 100%;
    height: auto;
    border-radius: var(--kb-radius-lg);
}

@media (min-width: 56em) { /* 896px */
    .kakamega-teaser__grid {
        grid-template-columns: 11fr 9fr; /* 55 / 45 */
    }

    /* Breaks the image out past the container edge for a photography-led,
       asymmetric composition rather than a centred 50/50 split. */
    .kakamega-teaser__media {
        margin-inline-start: calc(var(--kb-gutter) * -1);
    }
}

/* ==========================================================================
   8. Get involved
   ========================================================================== */

.get-involved__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--kb-space-lg);
    margin-block-start: var(--kb-space-xl);
}

.get-involved__card {
    display: flex;
    flex-direction: column;
    padding: var(--kb-space-lg);
    background-color: var(--kb-bg-band);
    border-radius: var(--kb-radius-lg);
}

.get-involved__card p {
    margin-block: var(--kb-space-sm);
    color: var(--kb-text-muted);
}

/* Every button in the row uses margin-top: auto, so Donate / Find out how /
   Explore partnership all sit on one horizontal line regardless of how much
   copy is above them. */
.get-involved__card .btn {
    margin-block-start: auto;
    align-self: flex-start;
}

@media (min-width: 48em) { /* 768px */
    .get-involved__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   9. Newsletter
   ========================================================================== */

.newsletter__form {
    display: flex;
    flex-direction: column;
    gap: var(--kb-space-md);
    margin-block-start: var(--kb-space-lg);
}

.newsletter__field {
    display: flex;
    flex-direction: column;
    gap: var(--kb-space-3xs);
}

.newsletter__field label,
.newsletter__consent label {
    font-weight: var(--kb-weight-medium);
}

.newsletter__optional {
    font-weight: var(--kb-weight-regular);
    color: var(--kb-text-muted);
}

.newsletter__field input {
    min-height: 2.75rem;
    padding: var(--kb-space-xs) var(--kb-space-sm);
    border: var(--kb-border-thin) solid var(--kb-border);
    border-radius: var(--kb-radius-md);
    background-color: var(--kb-surface);
}

.newsletter__consent {
    display: flex;
    align-items: flex-start;
    gap: var(--kb-space-xs);
}

.newsletter__consent input {
    flex-shrink: 0;
    margin-block-start: 0.3rem;
}

.newsletter__form .btn {
    align-self: flex-start;
}

/* ==========================================================================
   10. Partners marquee — on --kb-green-900, not the site's usual cream/
       white/band rotation. Deliberate exception to the "no two consecutive
       sections share a background" rule (CLAUDE.md): the footer directly
       below is also green-900, and the KWS logo's white/reversed lockup
       needs the dark surface, so the two dark sections sit back to back on
       purpose here — the hairline border below gives them a seam so they
       don't read as one merged block. Text recoloured for the dark surface
       inline rather than via .page-section--dark, which is a shade lighter
       (green-800) by design elsewhere on the site — see that class's own
       comment in pages.css.
   ========================================================================== */

.partners-marquee {
    background-color: var(--kb-green-900);
    border-block-end: 1px solid rgb(155 165 127 / 0.16); /* green-400, faint */
}

.partners-marquee .section-eyebrow {
    color: var(--kb-gold-400);
}

.partners-marquee .section-title {
    color: var(--kb-text-on-deep);
}

.partners-marquee .section-deck {
    color: var(--kb-cream);
    opacity: 0.85;
}

.partners-marquee__viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}

.partners-marquee__track {
    display: flex;
    width: max-content;
    animation: partners-scroll 36s linear infinite;
}

.partners-marquee__list {
    display: flex;
    align-items: center;
    gap: 4.5rem; /* 72px */
    padding-inline: var(--kb-gutter);
}

/* Every logo occupies an identical box, centred within it, so the row reads
   as one deliberate system rather than mismatched blobs.
   ------------------------------------------------------------------------
   `overflow: hidden` is a hard backstop: nothing can ever visually spill
   past this box regardless of what the image inside does. */
.partners-marquee__item {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 11.25rem;  /* 180px */
    height: 7rem;     /* 112px */
    flex-shrink: 0;
}

/* The <picture> wrapper around a real logo — absent for the SVG placeholder
   branch, which needs none of this. Must be block-level and exactly the
   item's size so the <img> inside has a DEFINITE height to resolve its own
   height:100% against.
   ------------------------------------------------------------------------
   FOUND THE HARD WAY: `.partners-marquee__logo` used to be
   `width:auto;height:auto;max-width:100%;max-height:100%`. `max-width:100%`
   worked (percentage widths resolve against the flex item's content-box,
   which IS definite here); `max-height:100%` silently did nothing, because
   <picture> is a non-replaced inline wrapper with no explicit height, and a
   percentage height cannot resolve against an ancestor whose own height is
   auto — the CSS spec says it must be treated as `none` in that case. With
   the height cap inert, an image whose native ratio isn't close to the
   180x112 box's own (KFS ~215x224, KEFRI ~227x224 — nearly square, much
   taller relative to their width than the box) rendered at close to its
   native pixel height, visibly overflowing top and bottom, and every
   partner ended up a different actual height, so the row didn't even sit
   on one visual baseline. KWS (~719x224, very wide) happened to look right
   by accident, not because the rule worked for it. */
.partners-marquee__logo-frame {
    display: block;
    width: 100%;
    height: 100%;
}

.partners-marquee__logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    color: var(--kb-green-400);
    opacity: 0.75;
    transition: opacity var(--kb-duration-base) var(--kb-ease-out);
}

.partners-marquee__item:hover .partners-marquee__logo,
.partners-marquee__track:focus-within .partners-marquee__logo {
    opacity: 1;
}

.partners-marquee__viewport:hover .partners-marquee__track,
.partners-marquee__viewport:focus-within .partners-marquee__track {
    animation-play-state: paused;
}

@keyframes partners-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Static wrapped grid, one copy only, no motion. */
@media (prefers-reduced-motion: reduce) {
    .partners-marquee__viewport {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .partners-marquee__track {
        width: 100%;
        animation: none;
    }

    .partners-marquee__list {
        flex-wrap: wrap;
        justify-content: center;
    }

    .partners-marquee__list[aria-hidden="true"] {
        display: none;
    }
}