/* ═══════════════════════════════════════════════════════════════════════════
   Diverse Talent · pages/involved.css  ·  Get involved  (src/pages/involved.html)

   Three doors, and the room each one opens into. The doors themselves are the doors partial
   (parts.css); this file lays out the hero round them, the two rooms (sage, plum), the two smaller
   ways on bone, the gold door that stands open to Donate, the desk where you write, and the colour
   that floods the screen when a door is pressed (.inv-wash, driven by involved.js).

   Unlayered, so it wins over the design system. Everything is scoped to .page--involved or to an
   inv- name. Logical properties only, colours from tokens, nothing under 16px, no uppercase.
   Nothing is hidden here unless scripts run and motion is allowed.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Running text in German, Russian, Filipino and Indonesian hyphenates by itself (lang.css). In the narrow
   columns of this page (the doors, the rooms' leads) that left stubs such as "Ar-beit", "meis-te" and
   "brau-chen". A word now breaks only where at least five letters stay on each side, and never on more
   than two lines running; a word that cannot do that moves to the next line whole. */
.page--involved :is(p, li, figcaption, label, legend) {
  hyphenate-limit-chars: 12 5 5;
  -webkit-hyphenate-limit-before: 5;
  -webkit-hyphenate-limit-after: 5;
  -webkit-hyphenate-limit-lines: 2;
}

/* ───────────────────────────────────────────────────────────── 1 Hero ──
   The headline on the start side, the lead on the end side, the three doors below, full width.
   The hero has no seam of its own: the sage room brings one, and it swells as it arrives. */

.inv-hero { padding-block-end: calc(clamp(2.5rem, 1.75rem + 3.4vw, 4.75rem) + var(--seam-h)); }
.inv-hero::after { content: none; }
.inv-hero__text { display: grid; gap: 1.1rem; margin-block-end: clamp(2rem, 1.3rem + 3vw, 3.5rem); }
.inv-hero__text > h1 { max-inline-size: 13em; }
.inv-hero__text > .lead { max-inline-size: 32em; }
@media (min-width: 64rem) {
  .inv-hero__text { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: end; }
  .inv-hero__text > .lead { padding-block-end: .3em; }
}
/* A short laptop screen: the doors stay inside the first screen with the headline. */
@media (min-width: 56rem) and (max-height: 52rem) {
  .inv-hero .door { min-block-size: clamp(18rem, 46vh, 26rem); }
}

/* ──────────────────────────────────────────────────── 2 The two rooms ──
   Each room is headed by its door's own sign, grown large: the white medallion and the title. */

/* The seam of the next section rises into the foot of a room: a little less air there than the system's default. */
.inv-room { padding-block-end: calc(var(--section-pad) * .62 + var(--seam-h)); }
.inv-room__head { display: grid; gap: clamp(1rem, .8rem + 1vw, 1.5rem); }
.inv-room__sign,
.inv-give__sign { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem clamp(1rem, .6rem + 1.6vw, 1.75rem); }
.inv-room__sign > .medallion,
.inv-give__sign > .medallion { --size: clamp(4rem, 3rem + 3.6vw, 6rem); }
.inv-room__sign > h2,
.inv-give__sign > h2 { flex: 1 1 0; min-inline-size: min(100%, 6em); }
.inv-room__head > .lead { max-inline-size: 30em; }
.inv-room__ask { margin-block-start: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); }

/* The room's quiet petal: the door's own petal, grown with the room. It stands behind the first leaf of
   the plum room, on the end side, and turns a step as the room is read (data-turn). Wide screens only:
   on a phone the room's sign has that space. */
.inv-partners-wrap { position: relative; }
.inv-room__decor { display: none; }
@media (min-width: 56rem) {
  .inv-room__decor {
    --inv-petal-h: clamp(15rem, 8rem + 14vw, 22rem);
    display: block;
    position: absolute;
    inset-block-end: 100%;                     /* its foot is the top edge of the first leaf */
    inset-inline-end: 0;
    inline-size: min(46%, 34rem);
    block-size: calc(var(--inv-petal-h) + 2rem);
    overflow: clip;
    pointer-events: none;
  }
  .inv-room__petal {
    position: absolute;
    inset-block-end: -1.75rem;
    inset-inline-start: calc(50% - var(--inv-petal-h) * .2288);
    block-size: var(--inv-petal-h);
    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;
    transform-origin: 50% 100%;
  }
}

/* A quiet line that has to be read: a petal and a sentence. */
.inv-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .85rem; max-inline-size: 36rem; }
.inv-note > .petal { --size: 1.3rem; margin-block-start: calc((1lh - 1.3rem) / 2); background: var(--p1); vertical-align: baseline; }
.inv-note > span:last-child { max-inline-size: none; }
.inv-note--row { padding: .95rem 1.15rem; border-radius: var(--r-row); background: var(--row); color: var(--fg); font-size: var(--fs-small); }
.inv-note--row > .petal { background: var(--c); }

/* ── 2a Volunteer, sage: the sign and the wide photograph, then the tall photograph beside the three rows. */
.inv-vol { display: grid; gap: clamp(2rem, 1.4rem + 3vw, 3.5rem); }
.inv-vol .figure { --c: var(--white); }                 /* the caption's petal has to show on sage */
.inv-vol .figure > figcaption { color: var(--fg); }
.inv-vol__wide { max-inline-size: 40rem; }
.inv-vol__tall { inline-size: min(100%, 22rem); justify-self: end; }
.inv-vol__rows { gap: .75rem; }
.inv-vol__rows > li { column-gap: 1.1rem; row-gap: .3rem; padding: clamp(1rem, .85rem + .8vw, 1.4rem) clamp(1.15rem, .9rem + 1.2vw, 1.75rem); }
.inv-vol__rows > li::before { block-size: 1.75rem; margin-block-start: .1rem; }
.inv-vol__rows > li > .inv-vol__row-title { font-size: var(--fs-lead); font-weight: var(--fw-display); line-height: var(--lh-sub); }
.inv-vol__rows > li > p { max-inline-size: none; }
.inv-vol__ask { display: grid; gap: 1.5rem; justify-items: start; }
/* What screening is and is not (BRIEF 1.7, 5.11): the room speaks of screening days, so the note stands at its foot. */
.inv-vol__note { margin-block-start: .5rem; }
.inv-vol__note > .petal { background: var(--p1); }
/* Phones: the tall photograph is as wide as the text above it, edge to edge with the rows. */
@media (max-width: 29.99rem) {
  .inv-vol__tall { inline-size: 100%; }
}
/* Tablets: the tall photograph and the invitation stand side by side, so neither is left alone in a wide room. */
@media (min-width: 44rem) and (max-width: 59.99rem) {
  .inv-vol { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); column-gap: clamp(1.75rem, 5vw, 3rem); align-items: start; }
  .inv-vol__head, .inv-vol__wide, .inv-vol__rows { grid-column: 1 / -1; }
  .inv-vol__tall { grid-column: 1; inline-size: auto; justify-self: stretch; }
  .inv-vol__ask { grid-column: 2; align-self: center; }
}
@media (min-width: 60rem) {
  .inv-vol { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 2.4vw, 2.5rem); row-gap: clamp(1.75rem, 1rem + 1.6vw, 2.5rem); align-items: start; }
  .inv-vol__head { grid-column: 1 / span 6; grid-row: 1; align-self: center; }
  .inv-vol__wide { grid-column: 7 / -1; grid-row: 1; max-inline-size: none; }
  .inv-vol__head, .inv-vol__wide { margin-block-end: clamp(1rem, 3.5vw, 3.5rem); }
  .inv-vol__tall { grid-column: 1 / span 4; grid-row: 2 / span 2; inline-size: auto; justify-self: stretch; }
  .inv-vol__rows { grid-column: 6 / -1; grid-row: 2; }
  .inv-vol__ask { grid-column: 6 / -1; grid-row: 3; }
}

/* ── 2b Partner with us, plum: three kinds of partner. Schools has a true example to show, so it is
      the large leaf and carries the photograph; the other two stand beside each other below it. */
.inv-partner__head { position: relative; max-inline-size: 46rem; margin-block-end: clamp(2rem, 1.4rem + 3vw, 3.75rem); }
.inv-partners { display: grid; gap: clamp(1rem, .7rem + 1.2vw, 1.5rem); }
.inv-kind h3 { margin-block-start: 1.25rem; }
.inv-kind p { color: var(--fg); }
.inv-kind--schools h3 { font-size: calc(var(--fs-sub) * 1.22); }
.inv-kind--schools .inv-kind__text > p { max-inline-size: 30em; font-size: var(--fs-lead); line-height: calc(var(--lh-text) - .08); }
.inv-kind--schools { display: grid; gap: clamp(1.5rem, 1rem + 2.5vw, 3rem); align-items: center; }
.inv-kind--schools > * + * { margin-block-start: 0; }
.inv-kind__text > * + * { margin-block-start: 1rem; }
.inv-kind__photo { inline-size: min(100%, 26rem); }
/* Held to the right: the lesson and the screen, and nobody at the left edge of the frame. */
.inv-kind__photo img { object-position: 100% var(--focal-y, 50%); }
@media (min-width: 48rem) {
  .inv-kind--schools { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .inv-kind__photo { justify-self: end; }
}
@media (min-width: 60rem) {
  .inv-partners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv-kind--schools { grid-column: 1 / -1; }
}

/* ─────────────────────────────── 3 Come to an event, Fundraise: on bone ──
   Two smaller ways, side by side, with a stem between them that draws. No boxes: the three doors
   are the large ways, these two are the open ground beside them. */

.inv-more__grid { display: grid; gap: clamp(2.25rem, 1.8rem + 2.5vw, 3.5rem); }
.inv-way { display: grid; gap: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); align-content: start; }
.inv-way__sign { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(.9rem, .7rem + .8vw, 1.25rem); }
.inv-way__title { font-size: calc(var(--fs-section) * .84); }
.inv-way__text { display: grid; gap: 1.1rem; justify-items: start; align-content: start; }
.inv-way__actions { margin-block-start: .5rem; }
.inv-way__photo { inline-size: min(100%, 20rem); align-self: start; }
.inv-more__stem { display: flex; align-items: center; gap: .75rem; }
.inv-more__stem > .petal { --size: 1.6rem; }
.inv-more__line { flex: 1 1 auto; block-size: 2px; background: var(--rule); }
@media (min-width: 60rem) {
  .inv-more__grid { grid-template-columns: minmax(0, 7fr) auto minmax(0, 5fr); column-gap: clamp(1.75rem, 3.2vw, 3.5rem); }
  .inv-more__stem { flex-direction: column; gap: .5rem; }
  .inv-more__line { inline-size: 2px; block-size: auto; }
}
@media (min-width: 75rem) {
  .inv-way--attend { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); column-gap: clamp(1.75rem, 2.6vw, 2.5rem); }
  .inv-way--attend > .inv-way__sign { grid-column: 1 / -1; }
  .inv-way--attend > .inv-way__photo { margin-block-start: .35rem; }
}

/* ───────────────────────────────── 4 Give: a gold door, standing open ──
   The door's own shape and petal, as wide as the page; a white leaf inside carries the line and the
   one gold button, which leads to the Donate page. */

.inv-give {
  --inv-door-r: clamp(4rem, 2rem + 9vw, 9rem);
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  gap: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  align-items: center;
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  border-start-start-radius: var(--inv-door-r);
}
.inv-give > * + * { margin-block-start: 0; }
.inv-give__sign { padding-block: clamp(.5rem, 2vw, 1.5rem); padding-inline-start: clamp(0rem, 2vw, 1.5rem); }
.inv-give__leaf { display: grid; gap: 1.5rem; justify-items: start; padding: clamp(1.4rem, 1rem + 2vw, 2.5rem); border-end-end-radius: clamp(3rem, 2rem + 5vw, 6rem); }
.inv-give__leaf > * + * { margin-block-start: 0; }
.inv-give__leaf > .lead { max-inline-size: 26em; }
.inv-give__petal {
  position: absolute;
  z-index: -1;
  inset-block-end: -2.25rem;
  inset-inline-start: clamp(9rem, 30%, 24rem);
  block-size: min(88%, 17rem);
  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;
  transform-origin: 50% 100%;
  rotate: calc(var(--dir) * -42deg);              /* an open door: the petal has turned its step */
  transition: rotate var(--dur-6) var(--ease-bloom);
  pointer-events: none;
}
@media (min-width: 56rem) {
  .inv-give { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-block-size: clamp(16rem, 23vw, 21rem); }
}
@media (max-width: 55.99rem) {
  /* One column: the petal stands on the end side of the sign, its foot behind the white leaf below. */
  .inv-give__sign, .inv-give__petal { grid-row: 1; grid-column: 1; }
  .inv-give__petal {
    position: relative;
    inset: auto;
    align-self: end;
    justify-self: end;
    block-size: 9.5rem;
    margin-block-end: calc(clamp(1.5rem, 1rem + 2.4vw, 3rem) * -1 - 1.5rem);
    margin-inline-end: clamp(1.25rem, 6vw, 3rem);
  }
}
@media (prefers-reduced-motion: no-preference) {
  /* Until the door has opened, its petal stands as it does on a closed door. */
  html.js:not(.dt-failsafe) .inv-give:not(.is-in) > .inv-give__petal { rotate: calc(var(--dir) * 18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .inv-give__petal { transition: none; }
}

/* ───────────────────────────────── 5 Write to us, and what happens next ──
   The form on a white panel; beside it the heading and the three steps that follow, one under another. */

.inv-write__grid { display: grid; gap: clamp(2rem, 1.4rem + 3vw, 3.5rem); }
.inv-write__head { display: grid; gap: 1.1rem; }
.inv-write__head > h2 { max-inline-size: 11em; }
.inv-write__head > .lead { max-inline-size: 28em; }
.inv-write__form { inline-size: 100%; max-inline-size: 46rem; }
.inv-next { display: grid; gap: clamp(2.75rem, 2.4rem + 1.4vw, 3.5rem); }
.inv-next__title { font-size: var(--fs-sub); }
.inv-next .step::before { color: var(--white); }
.inv-next .step > .inv-next__text { max-inline-size: 22em; padding-inline-end: clamp(3.25rem, 14%, 4.75rem); color: var(--heading); font-size: var(--fs-lead); line-height: calc(var(--lh-text) - .08); }
@media (min-width: 60rem) {
  .inv-write__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: clamp(2.5rem, 5vw, 5.5rem); align-items: start; }
  .inv-write__head { grid-column: 1; grid-row: 1; }
  .inv-write__form { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
  .inv-next { grid-column: 1; grid-row: 2; margin-block-start: clamp(1rem, 2.5vw, 2.5rem); }
  .inv-next__list { grid-template-columns: minmax(0, 1fr); }
}

/* ────────────────────────────────────────────── 6 The door opens (wash) ──
   One fixed sheet in the door's colour. involved.js grows it from the door that was pressed until it
   fills the screen, moves the page to the room underneath, and lets it clear. It exists only while
   that happens; without scripts or under reduced motion it is never made. */

.inv-wash {
  position: fixed;
  inset: 0;
  z-index: 80;                 /* over the header and the progress bar, under the preloader and the skip link */
  overflow: clip;
  visibility: hidden;
  pointer-events: none;
}
.inv-wash.is-on { visibility: visible; pointer-events: auto; }
.inv-wash__petal {
  position: absolute;
  inset-block-end: -8vh;
  inset-inline-end: 14vw;
  block-size: 70vh;
  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;
  transform-origin: 50% 100%;
}