/* ==========================================================================
   WSKF Australia - v2-benefits.css   (Inner-page redesign, Step 3, Nov 2026)
   Benefits family: Personal benefits hub, Great member benefits and the
   seven benefit detail pages. Loads after inner-v2.css, before a11y.css.

   Everything here builds on the v2 foundation (shell, type scale, rhythm,
   container queries in rem). Only the pieces the benefits pages need and
   the foundation does not have:
     1. Splits (the ruled section flow is the foundation's since V2.1)
     2. Hero extras: statement line, three-word line, image pair
     3. Health note
     4. Hub: top, group rows, benefit index rows, member list
     5. Detail components: matrix, age tiles, check list, directions
        diagram, member ledger, progression scale, image set
     6. Foundation components on dark bands (points, steps, links)
   ========================================================================== */

/* ---------- 1. Ruled flow: sections on the same surface -----------------
   Since V2.1 the pages use the foundation's .v2-sec and .v2-sec--rule (the
   ruled flow these pages introduced as v2b-sec); only the splits are here.
   Lead column heads inside a split do not need their bottom margin. */
.v2b-split{ display:grid; gap:var(--v2-head-gap) var(--v2-gap); }
.v2b-split > *{ min-width:0; }
.v2b-split > .v2-head{ margin-bottom:0; }
@container (min-width:56rem){
  .v2b-split{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); align-items:start; }
  .v2b-split--4{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); }
}
.v2b-split .v2-prose{ align-self:start; }
.v2b-after{ margin-top:var(--v2-head-gap); }

/* ---------- 2. Hero extras -----------------------------------------------*/
/* Statement under the H1 (Fitness & Healthy Weight): one controlled line. */
.v2b-state{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:-.005em; line-height:1.15; font-size:min(clamp(1.2rem, calc(1rem + .7vw), 1.55rem), max(19.2px, calc(100cqi / 9))); max-width:26ch; text-wrap:balance; }
.v2b-state em{ display:block; font-style:normal; color:var(--red); }
.v2b-state + .v2-hero__lede{ font-size:var(--v2-body); line-height:1.65; max-width:58ch; }

/* Three short words on one ruled line (Mental fitness). */
.v2b-trio{ display:grid; grid-template-columns:minmax(0,1fr); margin:2px 0 0; padding:0; border-block:1px solid var(--grey-line); }
.v2b-trio span{ display:flex; align-items:center; gap:9px; padding:10px 12px 10px 0; font-family:var(--display); font-weight:700; font-size:.92rem; letter-spacing:.05em; text-transform:uppercase; line-height:1.25; }
.v2b-trio span::before{ content:""; width:6px; height:6px; flex:none; background:var(--red); }
@container (min-width:22rem){
  .v2b-trio{ grid-template-columns:repeat(3,max-content); column-gap:clamp(10px, 2vw, 28px); }
  .v2b-trio span{ font-size:min(.92rem, max(12.5px, calc(100cqi / 28.5))); padding-right:0; white-space:nowrap; }
}

/* Two photographs as one hero frame (Better social skills). */
.v2b-pair{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(8px, 1vw, 14px); margin:0; }
.v2b-pair > figure{ position:relative; margin:0; }
.v2b-pair .v2-media{ aspect-ratio:4/5; }
@container wskf-main (min-width:56.25rem){
  .v2b-pair .v2-media{ max-height:max(280px, calc(100svh - var(--ip-top) - 170px)); }
}
.v2b-pair figcaption{ position:absolute; left:0; bottom:0; z-index:1; padding:7px 11px; background:var(--ink); color:var(--white); font-family:var(--display); font-weight:600; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; border-radius:0 4px 0 4px; }

/* ---------- 3. Health note: the standing note, clearly set apart -------- */
.v2b-health{ display:flex; gap:12px; align-items:flex-start; max-width:var(--v2-read); margin-top:clamp(22px, 2.6vw, 32px); padding:14px 18px; background:var(--white); border:1px solid var(--v2-card-line); border-left:3px solid var(--red); border-radius:4px; font-size:.95rem; line-height:1.58; color:var(--ip-text); }
.v2b-health .i{ flex:none; width:1.05rem; height:1.05rem; margin-top:.2em; color:var(--red); }

/* ---------- 4. Hub ------------------------------------------------------- */
/* Top: H1 left, lede right, one baseline row from 56rem. */
.v2b-hubtop{ display:grid; gap:clamp(14px, 1.5vw, 20px) var(--v2-gap); }
.v2b-hubtop > *{ min-width:0; }
.v2b-hubtop .v2-hero__copy{ gap:clamp(12px, 1.4vw, 18px); }
@container wskf-main (min-width:56.25rem){
  .v2b-hubtop{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end; }
  .v2b-hubtop .v2-hero__lede{ padding-bottom:.25em; }
}

/* Groups: label column and the benefit rows. */
.v2b-group{ display:grid; gap:18px var(--v2-gap); padding-block:clamp(26px, calc(12px + 2.4vw), 44px); border-top:1px solid var(--v2-rule); }
.v2b-group:first-child{ border-top:0; padding-top:0; }
.v2b-group:last-child{ padding-bottom:0; }
.v2b-group > *{ min-width:0; }
.v2b-group .v2-head{ margin-bottom:0; gap:8px; }
.v2b-group .v2-head h2{ font-size:min(var(--v2-h2), max(22px, calc(100cqi / 8))); }
@container (min-width:56rem){
  .v2b-group{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); align-items:start; }
}

/* Benefit rows: number, square thumbnail, name and line, arrow. */
.v2b-index{ container-type:inline-size; display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.v2b-item{ display:grid; grid-template-columns:64px minmax(0,1fr) 20px; grid-template-areas:"img n go" "img name go" "img d go"; column-gap:14px; align-items:center; align-content:center; min-height:88px; padding:12px 16px 12px 12px; background:var(--white); border:1px solid var(--v2-card-line); border-radius:4px; color:inherit; text-decoration:none; transition:border-color .2s var(--ease); }
.v2b-item__n{ grid-area:n; font-family:var(--display); font-weight:700; font-size:.7rem; letter-spacing:.1em; color:var(--red-text); font-variant-numeric:tabular-nums; }
.v2b-item__img{ grid-area:img; align-self:center; display:block; width:64px; aspect-ratio:1/1; overflow:hidden; border-radius:3px; background:var(--paper-2); }
.v2b-item__img img{ width:100%; height:100%; object-fit:cover; }
.v2b-item__name{ grid-area:name; margin-top:2px; font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.01em; line-height:1.18; font-size:min(1.125rem, max(16px, calc((100cqi - 132px) / 10.4))); }
.v2b-item__d{ grid-area:d; margin-top:4px; font-size:.9rem; line-height:1.45; color:var(--muted); max-width:60ch; }
.v2b-item__go{ grid-area:go; width:1.05rem; height:1.05rem; color:var(--red); transition:transform .2s var(--ease); }
.v2b-item:hover{ border-color:var(--ink); }
.v2b-item:hover .v2b-item__name{ color:var(--red-deep); }
.v2b-item:hover .v2b-item__go{ transform:translateX(3px); }
@container (min-width:34rem){
  .v2b-item{ grid-template-columns:2.2rem 80px minmax(0,1fr) 20px; grid-template-areas:"n img name go" "n img d go"; column-gap:18px; padding:12px 20px 12px 16px; }
  .v2b-item__n{ align-self:center; font-size:.78rem; }
  .v2b-item__img{ width:80px; }
  .v2b-item__name{ align-self:end; margin-top:0; font-size:min(1.2rem, max(17px, calc((100cqi - 190px) / 10.4))); }
  .v2b-item__d{ align-self:start; }
}

/* Enlarged text in a phone column: the thumbnail sits above the words. */
@container (max-width:17rem){
  .v2b-item{ grid-template-columns:minmax(0,1fr) 20px; grid-template-areas:"img go" "n n" "name name" "d d"; row-gap:2px; padding:14px 16px; }
  .v2b-item__img{ width:56px; margin-bottom:10px; }
  .v2b-item__go{ align-self:start; }
  .v2b-item__name{ font-size:min(1.125rem, max(16px, calc((100cqi - 40px) / 10.4))); }
}

/* Member list (hub membership): five numbered lines on hairlines. */
.v2b-list{ display:grid; margin:clamp(18px, 2vw, 24px) 0 clamp(16px, 1.8vw, 22px); padding:0; list-style:none; border-top:1px solid var(--v2-rule); max-width:var(--v2-read); }
.v2b-list li{ display:grid; grid-template-columns:2.2rem minmax(0,1fr); gap:10px; align-items:baseline; padding:11px 0; border-bottom:1px solid var(--v2-rule); font-family:var(--display); font-weight:600; font-size:.95rem; line-height:1.4; }
.v2b-list b{ font-size:.74rem; letter-spacing:.08em; color:var(--red-text); font-variant-numeric:tabular-nums; }
.v2b-lead{ font-size:var(--v2-body); line-height:1.62; color:var(--ip-text); max-width:60ch; margin-top:12px; }

/* ---------- 5. Detail components ---------------------------------------- */
/* Matrix (Complete fitness): three parts, body and mind for each. */
.v2b-matrix{ display:grid; gap:clamp(26px, 3vw, 36px) clamp(20px, 2.6vw, 36px); margin:0; padding:0; list-style:none; }
.v2b-matrix > li{ min-width:0; padding-top:16px; border-top:2px solid var(--red); }
.v2b-matrix h3{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; font-size:var(--v2-h3); line-height:1.2; }
.v2b-matrix h3 span{ font-weight:600; font-size:.66rem; letter-spacing:.16em; color:var(--red-text); }
.v2b-matrix dl{ display:grid; margin:14px 0 0; }
.v2b-matrix dl > div{ display:grid; grid-template-columns:3.6rem minmax(0,1fr); gap:12px; padding:12px 0; border-top:1px solid var(--v2-rule-ink); }
.v2b-matrix dt{ font-family:var(--display); font-weight:600; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-ink); padding-top:.25em; }
.v2b-matrix dd{ margin:0; font-size:.96rem; line-height:1.58; color:var(--paper); }
@container (min-width:50rem){ .v2b-matrix{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@container (max-width:17rem){ .v2b-matrix dl > div{ grid-template-columns:minmax(0,1fr); gap:4px; } }

/* Age tiles (Family training together). */
.v2b-ages{ display:grid; gap:8px; margin:0; padding:0; list-style:none; grid-template-columns:repeat(2,minmax(0,1fr)); }
@container (min-width:36rem){ .v2b-ages{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@container (min-width:66rem){ .v2b-ages{ grid-template-columns:repeat(6,minmax(0,1fr)); } }
.v2b-ages > li{ min-width:0; }
.v2b-ages a{ position:relative; display:grid; gap:6px; align-content:start; height:100%; min-height:92px; padding:16px 16px 18px; background:var(--white); border:1px solid var(--v2-card-line); border-top:3px solid var(--ink); border-radius:4px; color:inherit; text-decoration:none; transition:border-color .2s var(--ease); }
.v2b-ages b{ font-family:var(--display); font-weight:700; font-size:min(1.6rem, max(24px, calc(100cqi / 14))); line-height:1; letter-spacing:-.01em; font-variant-numeric:lining-nums; }
.v2b-ages span{ font-family:var(--display); font-weight:600; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.v2b-ages .i{ position:absolute; right:14px; top:16px; width:1rem; height:1rem; color:var(--red); transition:transform .2s var(--ease); }
.v2b-ages a:hover{ border-color:var(--ink); border-top-color:var(--red); }
.v2b-ages a:hover .i{ transform:translateX(3px); }
.v2b-tagline{ display:flex; align-items:center; gap:12px; margin-top:clamp(18px, 2vw, 26px); font-family:var(--display); font-weight:700; font-size:.92rem; letter-spacing:.08em; text-transform:uppercase; }
.v2b-tagline::before{ content:""; width:28px; height:2px; flex:none; background:var(--red); }

/* Check list with a button (family enquiry band). */
.v2b-check{ display:grid; margin:0; padding:0; list-style:none; border-top:1px solid var(--v2-rule-ink); }
.v2b-check li{ display:grid; grid-template-columns:1.2rem minmax(0,1fr); gap:12px; padding:13px 0; border-bottom:1px solid var(--v2-rule-ink); font-size:.98rem; line-height:1.5; color:var(--paper); }
.v2b-check .i{ width:1.05rem; height:1.05rem; margin-top:.2em; color:var(--red); }
.v2b-check + .btn{ margin-top:22px; }

/* Directions diagram (Focus and co-ordination). */
.v2b-dirs{ display:grid; place-items:center; margin:0; aspect-ratio:1/1; max-width:380px; width:100%; padding:clamp(22px, 3vw, 40px); background:var(--white); border:1px solid var(--v2-card-line); border-radius:4px; }
.v2b-dirs svg{ display:block; width:100%; height:100%; overflow:visible; }
.v2b-dirs .ln-a{ stroke:var(--grey-line); stroke-width:1.2; }
.v2b-dirs .ln-b{ stroke:var(--red); stroke-width:2.4; }
.v2b-dirs .dot{ fill:var(--ink); }
.v2b-dirs .ring{ fill:none; stroke:var(--grey-line); stroke-width:1; stroke-dasharray:3 5; }
@container (max-width:43.99rem){ .v2b-dirs{ max-width:300px; } }

/* Ledger (Great member benefits): five numbered rows. */
.v2b-ledger{ display:grid; margin:0; padding:0; list-style:none; border-top:2px solid var(--ink); }
.v2b-ledger > li{ display:grid; grid-template-columns:2.4rem minmax(0,1fr); gap:6px 14px; padding:18px 0 20px; border-bottom:1px solid var(--v2-rule); min-width:0; }
.v2b-ledger__n{ font-family:var(--display); font-weight:700; font-size:1.05rem; color:var(--red-text); line-height:1.2; font-variant-numeric:tabular-nums; }
.v2b-ledger h3{ font-size:var(--v2-h3); line-height:1.2; }
.v2b-ledger h3 span{ display:block; margin-top:6px; font-weight:600; font-size:.68rem; letter-spacing:.14em; color:var(--muted); line-height:1.4; }
.v2b-ledger p{ grid-column:2; font-size:.97rem; line-height:1.6; color:var(--ip-text); max-width:60ch; }
.v2b-ledger p a{ color:var(--red-deep); }
@container (max-width:17rem){
  .v2b-ledger > li{ grid-template-columns:minmax(0,1fr); }
  .v2b-ledger p{ grid-column:1; }
}
@container (min-width:50rem){
  .v2b-ledger > li{ grid-template-columns:3rem minmax(0,5fr) minmax(0,7fr); column-gap:var(--v2-gap); align-items:start; padding:22px 0; }
  .v2b-ledger p{ grid-column:3; }
}

/* Progression scale (Mental fitness). */
.v2b-scale{ display:grid; gap:0; margin:0; padding:0; list-style:none; border-top:2px solid var(--ink); }
.v2b-scale li{ display:grid; gap:10px; padding:16px 0 18px; border-bottom:1px solid var(--v2-rule); }
.v2b-scale span{ font-family:var(--display); font-weight:700; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; line-height:1.35; }
.v2b-scale__bar{ position:relative; height:8px; overflow:hidden; border-radius:1px; background:var(--paper-2); box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.v2b-scale__bar i{ position:absolute; inset:0 auto 0 0; background:var(--ink); }
.v2b-scale li:nth-child(1) .v2b-scale__bar i{ width:18%; }
.v2b-scale li:nth-child(2) .v2b-scale__bar i{ width:52%; }
.v2b-scale li:nth-child(3) .v2b-scale__bar i{ width:100%; background:var(--red); }

/* Image set (Better social skills): three frames, one ratio. */
.v2b-set{ display:grid; gap:clamp(8px, 1.2vw, 16px); grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:var(--v2-head-gap); }
.v2b-set > .v2-media{ aspect-ratio:3/2; }
.v2b-set > .v2-media:first-child{ grid-column:1 / -1; }
@container (min-width:44rem){
  .v2b-set{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .v2b-set > .v2-media:first-child{ grid-column:auto; }
}

/* Small label inside a step ("Only if necessary"). */
.v2b-tag{ display:inline-block; margin-top:10px; padding:4px 9px; border:1px solid currentColor; border-radius:2px; font-family:var(--display); font-weight:600; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--red-text); }

/* Steps whose marker is a word label, not a number. */
.v2b-steps--label .idx{ font-family:var(--display); font-weight:600; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--red-text); line-height:1.4; padding-top:0; }
@container (min-width:44rem){ .v2b-steps--label.v2-steps--cols .idx{ font-size:.68rem; margin-bottom:4px; } }
.v2b-steps--label > li{ grid-template-columns:minmax(0,1fr); }

/* Six short words (Better social skills): two across on phones, three
   from a wider column; one column at enlarged text in a phone column. */
.v2b-split .v2-values{ grid-template-columns:minmax(0,1fr); }
@container (min-width:17rem){ .v2b-split .v2-values{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@container (min-width:34rem){ .v2b-split .v2-values{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* A row of quiet links under copy. */
.v2b-links{ display:flex; flex-wrap:wrap; gap:12px 26px; margin-top:20px; }

/* ---------- 6. Foundation components on dark bands ----------------------
   Points, steps, prose and heads on dark surfaces, and points written as
   b + span: foundation behaviour since V2.1 (B8, B21b). */
.v2-band .v2b-prose,.v2-sec--ink .v2b-prose{ display:grid; gap:1em; max-width:var(--v2-read); font-size:var(--v2-body); line-height:1.68; color:var(--on-ink); }
/* Keep a hyphenated word on one line ("Co-ordination"): always in short
   labels; in headings only once the column is wide enough for it. */
.v2b-nw{ white-space:nowrap; }
.v2b-item__name span{ white-space:nowrap; }
@container (min-width:21rem){ .v2b-nw-h{ white-space:nowrap; } }