/* ═══════════════════════════════════════════════════════════════════════════
   Diverse Talent · home.css
   Page-only styles for Home. Not in a cascade layer, so these win over the design
   system; everything is scoped to this page's own blocks (.hero, .petals, .proof,
   .who, .focus, .record, .screening, .alongside, .ways, .closing).
   The signature pieces (bloom, greeting, legend, window, dial, event-card, evidence,
   numbers, steps, names, doors, cta) are shared partials with their own styles:
   this file only gives them their ground and their place.
   Colours and metrics come from the tokens; logical properties throughout.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Running text hyphenates in German, Russian, Filipino and Indonesian (lang.css), but without the limits
   the headings have: on a phone Safari cut four lines running in one entry ("äl-tere", "kos-tenlose",
   "Au-gengesundheit"). On this page a break needs four letters on either side and a word of nine, and
   never comes three lines running. (The same limits are wanted in base.css, for every page.) */
.page--home :is(p, li, figcaption) {
  hyphenate-limit-chars: 9 4 4;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;
  -webkit-hyphenate-limit-lines: 2;
}

/* ─────────────────────────────────────────────── 1. Hero ──
   One grid, two arrangements.
     under 56rem   one column: the bloom first, sized by the screen's width AND height so the
                   headline, the lead and both buttons are on the first screen with it; then the
                   text; the greeting and the relationship line close the block.
     from 56rem    text and bloom side by side, the stage as tall as the first screen, the greeting
                   in the bloom's empty outer corner. The white petal curve of the next section
                   rises into the foot of the stage. */

.page--home .hero {
  position: relative;
  isolation: isolate;
  background: var(--bone);
  overflow: clip;
}
.hero__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(.7rem, 2.8vw, 1.5rem);
  padding-block: clamp(.25rem, 1.5vw, 1rem) calc(clamp(2.25rem, 7vw, 3.5rem) + var(--seam-h));
}
.hero__art {
  order: -1;
  display: grid;
  justify-items: center;
  min-inline-size: 0;
}
/* The bloom reads --bloom-max (its documented knob). Under 40rem bloom.css sets that knob on .bloom
   itself, so a wrapper cannot reach it: it is set on the bloom here. On a phone the bloom may take
   about two thirds of the width and under a third of the height, so that the headline, the lead and
   both buttons share the first screen with it. It never goes under 12.6rem, however short the screen
   (a phone on its side, Safari with its toolbars showing): below that its leaning petals are smaller
   than a 44px target and the pause control in the corner sits on a petal. */
.hero__art > .bloom { --bloom-max: max(12.6rem, min(58vw, 26svh, 21rem)); }
.hero__text {
  display: grid;
  justify-items: start;
  gap: clamp(.7rem, 2.8vw, 1.5rem);   /* tight on a phone: the longest languages (Filipino, Russian) keep both buttons on the first screen */
  min-inline-size: 0;
}
.hero__title { display: grid; inline-size: 100%; }
.hero__title > span { display: block; }
.hero__title-a { color: var(--ink); }
.hero__title-b { color: var(--forest); }
.hero__lead { max-inline-size: 31em; color: var(--slate); }
.hero__actions { --gap: .75rem; inline-size: 100%; }
/* Phones: two full-width buttons of the ordinary height, so both stay on the first screen. */
@media (max-width: 39.99rem) {
  .hero__actions { --gap: .625rem; }
  .hero__actions > .btn { flex: 1 1 auto; min-block-size: var(--btn-h); padding-inline: 1.5rem; font-size: 1.0625rem; }
}
.hero__rel {
  display: flex;
  align-items: center;
  gap: .8rem;
  max-inline-size: 34em;
  color: var(--slate);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  line-height: var(--lh-ui);
}
.hero__hello { display: flex; justify-content: flex-start; min-inline-size: 0; }

@media (min-width: 40rem) and (max-width: 55.99rem) {
  .hero__art > .bloom { --bloom-max: max(12.6rem, min(52vw, 40svh, 24rem)); }
}

@media (min-width: 56rem) {
  .hero__stage {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: clamp(1.5rem, 4vw, 4.5rem);
    align-items: center;
    min-block-size: min(calc(100svh - var(--header-h) - var(--dock-h)), 60rem);
    padding-block: clamp(1rem, 2.4vw, 2.25rem) calc(clamp(1rem, 2.4vw, 2.25rem) + var(--seam-h));
  }
  .hero__text { grid-column: 1; grid-row: 1; gap: clamp(1.1rem, 1.9vw, 1.75rem); }
  .hero__art { order: 0; grid-column: 2; grid-row: 1; }
  /* as wide as its column, never taller than what the first screen leaves once the label under it
     and the seam below have their room */
  .hero__art > .bloom { --bloom-max: min(38rem, calc(100svh - var(--header-h) - var(--dock-h) - var(--seam-h) - 11.5rem)); }
  .hero__hello { grid-column: 2; grid-row: 1; align-self: start; justify-content: flex-end; z-index: 1; }
  .hero__actions { inline-size: auto; }
}

/* A short, wide window (a laptop with a tall browser toolbar): smaller headline, so nothing is pushed down. */
@media (min-width: 56rem) and (max-height: 44rem) {
  .hero__title { font-size: calc(var(--fs-hero) * .82); }
}

/* ───────────────────────────── 2. Six petals, six communities ──
   A white band between two petal curves. The heading and the dial make one pair at the top; the
   legend runs the full width under them (it measures itself: one, two or three columns). */

.petals__top {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-block-end: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
}
.petals__head > * + * { margin-block-start: var(--space-s); }
.petals__dial { display: grid; justify-items: center; min-inline-size: 0; }
/* Under 56rem the dial is small: it stands beside the heading, and the lead runs under both. */
@media (max-width: 55.99rem) {
  .petals__top { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem 1.25rem; }
  .petals__head { display: contents; }
  .petals__head > h2 { grid-column: 1; grid-row: 1; }
  .petals__head > .lead { grid-column: 1 / -1; grid-row: 2; margin-block-start: 0; }
  .petals__dial { grid-column: 2; grid-row: 1; margin-inline-end: .5rem; }   /* room for the dial's corners as it turns */
}
@media (min-width: 56rem) {
  .petals__top { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .petals__head { max-inline-size: 40rem; }
}

/* ───────────────────────────────────── 3. The petal window ──
   The scene is the bloom builder's. This wrapper is only the ground it stands on. */

/* No room is kept under the scene for the next section's seam: that seam is meant to lie over the
   foot of the photograph itself (the scene keeps its own padding wherever it is not pinned). */
.page--home .proof { background: var(--bone); padding-block-end: 0; }

/* ──────────────────────────────────────────── 4. Who we are ──
   The tagline at the size of a page title, with the mark gathering beside it; then the two
   sentences next to the gathering photograph in its leaf; then the three true numbers. */

.page--home .who { overflow-x: clip; }   /* the gathering petals start outside the mark's own box */
/* The curve that brings the page ground back over the pinned photograph is shallow on purpose: the
   scene's caption stands clamp(1.25rem, 5vh, 3rem) above the foot of the photograph, and each term
   here is smaller, so the curve can never reach it. */
.who > .seam { --seam-h: clamp(1.1rem, 4.2vh, 2.6rem); }
.who__top {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-block-end: clamp(2.25rem, 1.4rem + 4vw, 4.5rem);
}
.who__tagline {
  max-inline-size: 13em;
  font-size: var(--fs-page);
  font-weight: var(--fw-hero);
}
/* The mark's own box is 200 units and its petals reach 62 from the centre: the drawing is let out past
   the wrapper by that margin, so the wrapper's size is the size of the bloom you see. */
.who__gather { inline-size: clamp(6.5rem, 30vw, 9rem); aspect-ratio: 1; justify-self: start; }
.who__gather > .mark { inline-size: 161.3%; max-inline-size: none; block-size: auto; margin: -30.65%; }
.who__body { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.who__words { display: grid; justify-items: start; gap: 1.15rem; }
.who__words > .btn { margin-block-start: .35rem; }
.who__photo { inline-size: 100%; max-inline-size: 40rem; }
.who__leaf { position: relative; isolation: isolate; }
/* A flat leaf in the event's colour behind the photograph, the mirror of the photograph's own leaf, so
   its two square corners show where the photograph's corners are round. Photographs are never mirrored,
   so neither is this pair: the corners are physical on purpose. */
.who__leaf-back {
  position: absolute;
  inset-block: -7% 7%;
  inset-inline: 4% -4%;
  z-index: -1;
  background: var(--clay-mist);
  border-top-right-radius: 28.125% 50%;      /* lint-ok: the mirror of a photograph's leaf, which is never flipped */
  border-bottom-left-radius: 28.125% 50%;    /* lint-ok: the mirror of a photograph's leaf, which is never flipped */
}
[dir="rtl"] .who__leaf-back { inset-inline: -4% 4%; }
.who__numbers { margin-block-start: clamp(3rem, 2rem + 5vw, 6rem); }
@media (max-width: 55.99rem) {
  .who__gather { display: none; }
  .who__leaf-back { inset-inline: 3% -2%; inset-block: -6% 6%; }
  [dir="rtl"] .who__leaf-back { inset-inline: -2% 3%; }
  .who__photo { margin-block-start: 1rem; }
}
@media (min-width: 56rem) {
  .who__top { grid-template-columns: minmax(0, 1fr) auto; }
  .who__gather { inline-size: clamp(9rem, 15vw, 13.5rem); justify-self: end; margin-inline-end: clamp(.5rem, 4vw, 4rem); }
  .who__body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .who__photo { justify-self: end; }
}

/* ───────────────────────── 5. Three things we work towards ──
   A rail and a list. From 64rem the rail (heading, link, dial) stays in view while the three colour
   panels pass; a stem runs down beside the panels with one bud per aim and draws as they are read. */

.focus__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.focus__rail-in { display: grid; justify-items: start; gap: clamp(1.25rem, 2.5vw, 2rem); }
.focus__head > * + * { margin-block-start: var(--space-s); }
.focus__rail-in > .dial { justify-self: center; }
.focus__list { position: relative; min-inline-size: 0; }
.focus__panels { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.focus__panel { --flow: 1.15rem; max-inline-size: none; }
.focus__panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.15rem; }
.focus__panel-head > h3 {
  flex: 1 1 12rem;
  font-size: calc(var(--fs-sub) * 1.18);
  text-wrap: balance;
}
.focus__aim { max-inline-size: 36em; font-size: var(--fs-lead); line-height: calc(var(--lh-text) - .08); }
.focus__panel > .evidence { margin-block-start: 1.5rem; }
/* The honest line stands on blue: the refugees' petal, the partner colour of this aim. */
.focus__honest {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-inline-size: none;
  margin-block-start: 1.25rem;
  font-weight: var(--fw-medium);
}
.focus__honest > * + * { margin-block-start: 0; }
.focus__stem { display: none; }

/* Under 64rem the dial stands beside the heading (it is small under 56rem); the lead and the link run under both. */
@media (max-width: 63.99rem) {
  .focus__rail-in { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem 1.25rem; }
  .focus__head { display: contents; }
  .focus__head > h2 { grid-column: 1; grid-row: 1; }
  .focus__head > .lead { grid-column: 1 / -1; grid-row: 2; margin-block-start: 0; }
  .focus__more { grid-column: 1 / -1; grid-row: 3; margin-block-start: .35rem; }
  .focus__rail-in > .dial { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; position: relative; inset-block-start: auto; margin-inline-end: .5rem; }
}
@media (min-width: 64rem) {
  .focus__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 5vw, 5rem); }
  .focus__rail-in { position: sticky; inset-block-start: calc(var(--header-h) + 1.75rem); }
  .focus__rail-in > .dial { justify-self: start; margin-block-start: .25rem; margin-inline-start: -1.1rem; }
  .focus__list { padding-inline-start: 3rem; }
  .focus__stem {
    position: absolute;
    display: block;
    inset-block: 3.5rem;
    inset-inline-start: .55rem;
    inline-size: 3px;
    border-radius: var(--r-full);
    background: var(--line);
    overflow: hidden;
  }
  .focus__stem > i { display: block; block-size: 100%; background: var(--forest); transform-origin: 50% 0; }
  /* one bud per aim, in the aim's own colour, sitting on the stem */
  .focus__panel::before {
    content: "";
    position: absolute;
    inset-block-start: 2.6rem;
    inset-inline-start: -3rem;
    inline-size: 1.25rem;
    aspect-ratio: 20.648 / 45.125;
    background: var(--bud);
    -webkit-mask: var(--petal-mask) center / 100% 100% no-repeat;
    mask: var(--petal-mask) center / 100% 100% no-repeat;
    /* a ring of the ground round the bud, so the stem stops short of it */
    filter: drop-shadow(0 5px 0 var(--white)) drop-shadow(0 -5px 0 var(--white));
    transition: scale var(--dur-4) var(--ease-pop);
  }
  .focus__panel--youth { --bud: var(--gold); }
  .focus__panel--seniors { --bud: var(--forest); }
  .focus__panel--inclusion { --bud: var(--clay); }
  .focus__panel.is-dial-on::before { scale: 1.3; }
}
@media (prefers-reduced-motion: reduce) {
  .focus__panel::before { transition: none; }
}
/* A short window cannot hold the whole rail still: let it scroll, and the dial keeps its own stickiness. */
@media (min-width: 64rem) and (max-height: 45.99rem) {
  .focus__rail { display: grid; align-content: start; justify-items: start; gap: clamp(1.25rem, 2.5vw, 2rem); }
  .focus__rail-in { display: contents; }
}

/* ───────────────────────────── 6. What we have done, with dates ──
   One large entry and two small ones. Never three equal cards: the lead takes half the row. */

.record__head { display: grid; gap: 1.25rem 3rem; align-items: end; }
.record__intro > * + * { margin-block-start: var(--space-s); }
.record__more { justify-self: start; }
.record__grid { display: grid; gap: clamp(2.25rem, 5vw, 3rem) clamp(1.5rem, 3vw, 2.75rem); align-items: start; }
.record__cell { min-inline-size: 0; }
@media (min-width: 40rem) {
  .record__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .record__cell--lead { grid-column: 1 / -1; }
}
@media (min-width: 56rem) {
  .record__head { grid-template-columns: minmax(0, 1fr) auto; }
  .record__more { justify-self: end; }
}
@media (min-width: 72rem) {
  .record__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .record__cell--lead { grid-column: auto; }
  .record__cell:nth-child(3) { margin-block-start: clamp(2rem, 4vw, 4rem); }
}

/* ───────────────────────── 7. Trained first, then trusted ──
   Forest. The leaf and the petal lean together at the top: the petal stands in the corner the
   leaf's round edge leaves free. Then the two numbers, the four steps and one action. */

/* The petals are clipped by their own layer, not by the section: the section's seam stands outside its box. */
.page--home .screening { isolation: isolate; }
.screening__petals { position: absolute; inset: 0; z-index: -1; overflow: clip; pointer-events: none; }
.screening__drift { position: absolute; display: block; inline-size: var(--w); }
.screening__drift > i {
  display: block;
  aspect-ratio: 20.648 / 45.125;
  background: var(--ghost);
  -webkit-mask: var(--petal-mask) center / 100% 100% no-repeat;
  mask: var(--petal-mask) center / 100% 100% no-repeat;
}
/* the turn is on the wrapper, the drift on the inner element (GSAP folds a rotate into its own transform) */
.screening__drift--a { --w: clamp(8rem, 19vw, 19rem); inset-block-start: 2%; inset-inline-end: 4%; rotate: calc(var(--dir) * -60deg); }
.screening__drift--b { --w: clamp(7rem, 16vw, 16rem); inset-block-start: 36%; inset-inline-start: -2%; rotate: calc(var(--dir) * 60deg); }
.screening__drift--c { --w: clamp(6rem, 12vw, 12rem); inset-block-end: 4%; inset-inline-end: 12%; rotate: calc(var(--dir) * 120deg); }
.screening__top { display: grid; gap: clamp(2.25rem, 6vw, 5rem); align-items: center; }
.screening__intro { display: grid; justify-items: start; gap: var(--space-s); }
.screening__photos { display: grid; gap: 1.5rem; }
.screening__lead-photo { max-inline-size: 31rem; }
.screening__tall-photo { grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: 1.25rem; }
.screening__petal { inline-size: clamp(7.5rem, 34vw, 11rem); }
.screening__numbers { inline-size: 100%; margin-block-start: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.screening__steps { margin-block-start: clamp(3rem, 2rem + 5vw, 6rem); }
.screening__steps-head { max-inline-size: 46rem; margin-block-end: clamp(1.75rem, 1.2rem + 2.4vw, 3rem); }
.screening__steps-head > h3 { font-size: calc(var(--fs-sub) * 1.3); text-wrap: balance; }
.screening__steps-head > * + * { margin-block-start: var(--space-s); }
.screening__action { margin-block-start: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }

@media (min-width: 40rem) {
  .screening__photos {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0;
    align-items: start;
    isolation: isolate;
    max-inline-size: 36rem;
  }
  .screening__lead-photo { grid-column: 1 / span 10; grid-row: 1; }
  .screening__lead-photo > figcaption { max-inline-size: 64%; }
  .screening__tall-photo {
    grid-column: 8 / -1;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr);
    justify-items: end;
    margin-block-start: 30%;
    z-index: 1;
  }
  .screening__petal { inline-size: min(78%, 13rem); }
  .screening__tall-photo > figcaption { justify-self: stretch; }
}
/* Side by side only from 64rem: between 56rem and 64rem half the row is too narrow for the pair, and the
   petal's caption was squeezed into a column of eight short lines. Below that the pair follows the words. */
@media (min-width: 64rem) {
  .screening__top { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: start; }
  .screening__photos { justify-self: end; inline-size: 100%; margin-block-start: .5rem; }
}

/* ───────────────────────────────── 8. Worked alongside ──
   Plum is the partners' petal: its mist is this section's ground. */

.alongside__head { display: grid; gap: 1.25rem 1.75rem; align-items: start; }
.alongside__words > * + * { margin-block-start: var(--space-s); }
.page--home .alongside__head > * + * { margin-block-start: 0; }
@media (min-width: 40rem) {
  .alongside__head { grid-template-columns: auto minmax(0, 1fr); }
}

/* ───────────────────────────────── 9 and 10. Ways in, closing ── */

.page--home .closing { padding-block-start: 0; }