/* ═══════════════════════════════════════════════════════════════════════════
   Fun-Tastic 悠樂長 · pages/involved.css
   Page-only styles for Get involved. Not in a cascade layer, so it wins over the
   design system; everything is scoped to .page--involved.

   Four doors, four rooms: a door is the colour of the room it opens.

   Contents
     1  Anchors            4  Invite us (indigo)        7  Support us (white)
     2  Hero and doors     5  Volunteer (mint)          8  A note on languages
     3  Rooms              6  Join an activity (orchid) 9  Action
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────── 1 Anchors ──
   #invite, #volunteer, #join and #support are the four rooms. A jump lands with the room's
   heading two and a half rem under the page's own anchor line (which is already clear of the
   header), so the room's colour fills the screen and its seam stays out of sight above.
   The negative margin takes the section's top padding back out; involved.js lands in exactly
   the same place when a door is pressed. */
.page--involved .room { scroll-margin-block-start: calc(2.5rem - var(--section-pad)); }
.page--involved .room:focus { outline: none; }   /* a jump target, not a control: the room fills the screen */

/* Single-column grids on this page take the width they are given, never the width their content
   would like: an implicit "auto" column can be pushed wider than the screen by one long unbreakable
   word. :where() keeps this at the weight of one class, so any layout rule below wins. */
.page--involved :where(.inv-hero__text, .room__grid, .room__intro, .invite__bring, .bring, .invite__route, .route, .volunteer__detail, .roles, .role__text, .support__reach, .langs__panel, .langs__text, .cta__text) { grid-template-columns: minmax(0, 1fr); }

/* ─────────────────────────────────────────────── 2 Hero and doors ── */
.page--involved .inv-hero > .container { position: relative; z-index: 1; }
.page--involved .inv-hero__text { display: grid; gap: 1.25rem; justify-items: start; max-inline-size: 48rem; }
.page--involved .inv-hero__doors { margin-block-start: clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem); }

/* The shared doors component has three arches. Here there are four, and on a phone each one is
   a wide row, so that all four ways are in sight under the headline. */
.page--involved .doors { display: grid; grid-template-columns: minmax(0, 1fr); gap: .65rem; }
.page--involved .doors > li { display: block; min-inline-size: 0; }
.page--involved .door {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  align-content: center;
  justify-items: start;
  gap: .9rem;
  min-block-size: 4.75rem;
  padding-block: .7rem;
  padding-inline: .75rem .8rem;
  border-radius: 2.375rem;
  text-align: start;
}
.page--involved .door:focus-visible { outline-color: var(--indigo); }   /* the ring sits on the hero's ground, not on the door */
.page--involved .door.panel--white { box-shadow: inset 0 0 0 2px var(--indigo); }   /* the quiet fourth: outlined, like a secondary button */
.page--involved .door > .icon-circle { --size: 3.25rem; }
.page--involved .door__title {
  color: var(--heading);
  font-family: var(--font-display);
  font-size: var(--fs-sub);
  font-weight: var(--fw-sub);
  line-height: var(--lh-sub);
  letter-spacing: var(--tracking-sub);
  hyphens: var(--hyphens-display);
  -webkit-hyphens: var(--hyphens-display);
  overflow-wrap: anywhere;
}
.page--involved .door__go {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  background: var(--row);
  color: var(--heading);
  transition: translate var(--dur-3) var(--ease-out);
}
.page--involved .door__go > .icon { inline-size: 1.35rem; block-size: 1.35rem; }
.page--involved .door.panel--white .door__go { background: var(--indigo-mist); }

@media (min-width: 40rem) {
  .page--involved .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .page--involved .doors > li { display: flex; }
  .page--involved .door {
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    align-content: stretch;
    justify-items: center;
    gap: .9rem;
    min-block-size: 16.5rem;
    padding: clamp(2.5rem, 1.5rem + 4vw, 3.5rem) 1.5rem 1.4rem;
    border-radius: var(--r-panel);
    border-start-start-radius: 12rem;
    border-start-end-radius: 12rem;
    text-align: center;
  }
  .page--involved .door > .icon-circle { --size: 4.5rem; }
  .page--involved .door__title { max-inline-size: 11em; }
  .page--involved .door__go { align-self: end; }
}
@media (min-width: 62rem) {
  .page--involved .doors { display: flex; flex-direction: row; align-items: stretch; gap: clamp(.75rem, 1.4vw, 1.25rem); }
  .page--involved .doors > li { flex: 1 1 0; }
  .page--involved .door {
    min-block-size: clamp(19rem, 25vw, 21.5rem);
    padding-block-start: clamp(3.25rem, 5vw, 4.5rem);
    border-start-start-radius: var(--r-full);
    border-start-end-radius: var(--r-full);
  }
}
@media (hover: hover) and (pointer: fine) {
  .page--involved .door:hover .door__go { translate: 0 4px; }
}

/* ───────────────────────────────────────────────────────── 3 Rooms ── */
.page--involved .room__grid { display: grid; align-items: center; gap: clamp(2rem, 1rem + 4.5vw, 5rem); }
.page--involved .room__grid--top { align-items: start; }
@media (min-width: 62rem) {
  .page--involved .room__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .page--involved .room__grid--wide-first { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.page--involved .room__intro { display: grid; align-content: start; justify-items: start; gap: 1.25rem; min-inline-size: 0; }
.page--involved .room__intro > .lead { max-inline-size: 30em; }
.page--involved .room__plan { margin-block-start: clamp(2.5rem, 1.5rem + 4vw, 5rem); }

/* Two photographs that lean together, like the two figures of the logo: a large one, and a small
   round one tucked into its rounded lower corner (where the large picture has nothing to lose).
   Each keeps its own caption directly under it. --cap is set in the template from the photograph's
   own size, so a picture is never shown wider than its file allows.
   Without subgrid (browsers before 2023) the two simply stand one under the other. */
.page--involved .duo {
  --small: clamp(8.5rem, 5.2rem + 11vw, 15.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  inline-size: 100%;
  max-inline-size: var(--cap, none);
  min-inline-size: 0;
  isolation: isolate;
}
.page--involved .duo__big > .frame {
  --ar: 16 / 10;
  border-radius: clamp(4rem, 13vw, 9.5rem);   /* generous, but short of a full round: these are rooms full of people, and the corners are faces */
}
.page--involved .duo__big > .frame--embrace-end { border-end-end-radius: 0; }
.page--involved .duo__big > .frame--embrace-start { border-end-start-radius: 0; }
.page--involved .duo__small { inline-size: var(--small); }
.page--involved .duo__small > .frame { box-shadow: 0 0 0 clamp(5px, .8vw, 10px) var(--bg); }   /* a ring of the room's colour where the two overlap */
@supports (grid-template-columns: subgrid) {
  /* The small picture's column is as wide as the circle, but never so narrow that its caption
     becomes a ladder of single words: on a phone the two captions share the width instead. */
  .page--involved .duo {
    --small-col: max(var(--small), min(10.75rem, 48%));
    grid-template-columns: minmax(0, 1fr) var(--small-col);
    gap: .9rem clamp(.9rem, .6rem + 1vw, 1.5rem);
    align-items: start;
  }
  .page--involved .duo--flip { grid-template-columns: var(--small-col) minmax(0, 1fr); }
  .page--involved .duo__big {
    grid-column: 1 / -1;
    grid-row: 1 / span 2;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    gap: inherit;   /* the pair's own gutters, so the caption lines up with the columns exactly */
  }
  .page--involved .duo__big > .frame { grid-column: 1 / -1; grid-row: 1; }
  .page--involved .duo__big > figcaption { grid-column: 1; grid-row: 2; }
  .page--involved .duo--flip > .duo__big > figcaption { grid-column: 2; }
  .page--involved .duo__small {
    grid-column: 2;
    grid-row: 2;
    z-index: 1;
    inline-size: auto;
    margin-block-start: calc(var(--small) * -.5 - .9rem);   /* the circle's centre sits on the lower edge of the large picture */
  }
  .page--involved .duo--flip > .duo__small { grid-column: 1; }
  .page--involved .duo__small > .frame { inline-size: var(--small); justify-self: end; }   /* at the pair's outer edge, in the rounded corner */
  .page--involved .duo--flip > .duo__small > .frame { justify-self: start; }
}

/* A sentence that stands a little apart: a dot, then the line. */
.page--involved .room__aside {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .8rem;
  max-inline-size: 34em;
}
.page--involved .room__aside::before {
  content: "";
  inline-size: .7rem;
  block-size: .7rem;
  margin-block-start: calc((1lh - .7rem) / 2);
  border-radius: 50%;
  background: var(--dot-a);
}

/* The right person: who, the sentence, and the one thing to press. In a wide box they sit on
   one line; in a narrow one the button takes the full width underneath. */
.page--involved :is(.invite__route, .volunteer__detail, .room--join .room__intro) { container: reachbox / inline-size; }
.page--involved .reach {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .85rem 1rem;
}
.page--involved .reach__text { max-inline-size: none; }
.page--involved .reach > .btn { grid-column: 1 / -1; }
.page--involved .reach--band {
  justify-self: stretch;
  padding: 1rem 1.15rem;
  border-radius: var(--r-panel);
}
@container reachbox (min-width: 36rem) {
  .page--involved .reach { grid-template-columns: auto minmax(0, 1fr) auto; }
  .page--involved .reach > .btn { grid-column: auto; max-inline-size: 17rem; }
}

/* ─────────────────────────────────────────── 4 Invite us (indigo) ── */
.page--involved .invite__bring { display: grid; gap: 1.1rem; }
.page--involved .bring { display: grid; gap: .55rem; }
.page--involved .bring > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .9rem;
  min-block-size: 3.75rem;
  padding-block: .5rem;
  padding-inline: .5rem 1.25rem;
  border-radius: 1.875rem;
  background: var(--row);
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  line-height: var(--lh-sub);
}
.page--involved .invite__route { display: grid; gap: 1.25rem; }
.page--involved .route { display: grid; gap: .6rem; }
.page--involved .route > .reach { padding: 1rem 1.15rem; border-radius: var(--r-panel); background: var(--row); }
.page--involved .invite__route > .room__aside { color: var(--fg-muted); }

/* ──────────────────────────────────────────── 5 Volunteer (mint) ── */
.page--involved .volunteer__detail { display: grid; gap: clamp(1.25rem, 1rem + 1vw, 1.75rem); min-inline-size: 0; }
.page--involved .roles { display: grid; gap: .75rem; }
.page--involved .role {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(1rem, .6rem + 1.5vw, 1.6rem);
}
.page--involved .role > * { margin-block-start: 0; }
.page--involved .role__text { display: grid; gap: .3rem; }
.page--involved .role__text > p { max-inline-size: none; color: var(--fg-muted); }
.page--involved .volunteer__gain {
  max-inline-size: 30em;
  color: var(--heading);
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: var(--fw-sub);
  line-height: var(--lh-sub);
}
@media (max-width: 29.99rem) {
  .page--involved .role > .icon-circle { --size: 3.5rem; }
}

/* ──────────────────────────────────── 6 Join an activity (orchid) ── */
.page--involved .room--join .lead { font-weight: var(--fw-medium); }
.page--involved .join__photo { inline-size: min(100%, 26rem); justify-self: center; }

/* ────────────────────────────────────────── 7 Support us (white) ── */
.page--involved .room--support { padding-block-end: calc(var(--section-pad) * .55); }   /* the note on languages belongs with it */
.page--involved .support__facts { justify-self: stretch; max-inline-size: 34rem; }
.page--involved .support__reach { display: grid; justify-items: start; gap: 1.1rem; }
.page--involved .support__reach > * { margin-block-start: 0; }
.page--involved .support__ask {
  color: var(--heading);
  font-family: var(--font-display);
  font-size: var(--fs-sub);
  font-weight: var(--fw-sub);
  line-height: var(--lh-sub);
  letter-spacing: var(--tracking-sub);
}
.page--involved .support__actions { display: flex; flex-wrap: wrap; gap: .6rem; inline-size: 100%; }
.page--involved .support__actions > .btn { flex: 1 1 13rem; }

/* ────────────────────────────────────── 8 A note on languages ── */
.page--involved .langs__panel { display: grid; align-items: center; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); }
.page--involved .langs__panel > * { margin-block-start: 0; }
.page--involved .langs__text { display: grid; justify-items: start; gap: 1rem; }
.page--involved .hellos { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.page--involved .hello {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding: .3rem 1.1rem;
  border-radius: var(--r-full);
  background: var(--white);
  color: var(--indigo);
  font-size: 1.1875rem;
  font-weight: var(--fw-strong);
  line-height: var(--lh-ui);
}
.page--involved .hello--here { background: var(--indigo); color: var(--white); }
/* Nastaliq climbs as a word goes on: the Urdu greeting needs more room above it than any other script here. */
.page--involved .hello:lang(ur) { padding-block-start: .6rem; line-height: calc(var(--lh-text) + .3); }
@media (min-width: 62rem) {
  .page--involved .langs__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ──────────────────────────────────────────────────────── 9 Action ── */
.page--involved .cta__text { display: grid; justify-items: start; gap: 1.1rem; }
.page--involved .cta__text > .btn { margin-block-start: .6rem; }
/* Three people look after three subjects: where orchid and mint overlap, the colour is indigo. */
.page--involved .trio { display: flex; justify-content: center; isolation: isolate; }
.page--involved .trio > .monogram { --size: clamp(5.5rem, 4.2rem + 6vw, 9.5rem); }
.page--involved .trio > .monogram + .monogram { margin-inline-start: calc(var(--size) * -.2); }
.page--involved .trio > .monogram--mint { mix-blend-mode: multiply; }
.page--involved .trio > .monogram--indigo { position: relative; z-index: 1; }   /* over the mint, or mint × indigo would go near-black */

/* ── The walk through a door (involved.js): the door's colour fills the screen, then is the room. ── */
.page-involved .door-wipe {
  position: fixed;
  inset: 0;
  z-index: 40;   /* under the header (50), over the page */
  pointer-events: none;
  will-change: clip-path, opacity;
}

/* Captions: the shared figcaption sets a fixed line-height of 1.5, which is right for Latin and
   makes Nastaliq lines collide. Follow the language's own rhythm instead (1.5 for Latin still). */
.page--involved .figure > figcaption { line-height: max(1.5, calc(var(--lh-text) - .15)); }

/* A button with a glyph whose label runs to two lines (German, Russian, Urdu …): the label is set
   from the start side, so the glyph stays beside its first word instead of drifting away from it. */
.page--involved .btn > .icon + span { text-align: start; }