/* ==========================================================================
   WSKF Australia - v2-ages.css   (Inner-page redesign, step 3: age family)
   Ages hub, Little Tigers, Juniors, Teens, Adults 20 to 29, Adults 50 to 75+.
   Loads after inner-v2.css and before a11y.css. Every rule is scoped to an
   ag- class, so nothing here touches another page or a shared component.

   Components
     ag-path     The age line: groups on one ruled line with a dot each.
                 Hub (six groups), Little Tigers (four), Teens (three).
                 A vertical line on phones, columns from a 30rem container.
     ag-finder   The age finder (Ages hub) as a light card.
     ag-list     Short lists inside steps (Little Tigers strengths).
     ag-stairs   Juniors pathway: three rising red marks above the steps.
     ag-seq      Kihon, kata, kumite (Adults 20 to 29): three image columns.
     ag-quote    A long parent quotation in sentence case.
     ag-hero-line, ag-facts, ag-stack, ag-syl, ag-family, ag-choose:
                 small layout pieces for single pages.
   Rules follow DESIGN-SYSTEM-V2: px spacing, rem type with bounded growth,
   rem container queries for column switches.
   ========================================================================== */

/* ---------- ag-path: the age line ---------------------------------------- */
.ag-path{ --ag-n:3; --ag-mid:3; display:grid; grid-template-columns:minmax(0,1fr); margin:0; padding:0; list-style:none; }
.ag-path--4{ --ag-n:4; --ag-mid:4; }
.ag-path--6{ --ag-n:6; --ag-mid:3; }
.ag-path__item{ display:flex; min-width:0; }
.ag-path__card{ position:relative; flex:1; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:16px; row-gap:4px; align-content:start; min-width:0; min-height:44px; padding:14px 0 18px 22px; border-left:2px solid var(--red); color:inherit; text-decoration:none; }
.ag-path__item:first-child .ag-path__card{ padding-top:2px; }
.ag-path__card > *{ min-width:0; grid-column:2; }
.ag-path__card::before{ content:""; position:absolute; left:-7px; top:19px; width:12px; height:12px; border-radius:50%; background:var(--paper); border:2px solid var(--red); }
.ag-path__item:first-child .ag-path__card::before{ top:7px; }
.ag-path__n{ grid-column:1; grid-row:1 / span 4; min-width:3.6ch; font-family:var(--display); font-weight:700; font-size:clamp(1.35rem, calc(1.15rem + .8vw), 1.85rem); line-height:1; letter-spacing:-.01em; color:var(--ink); font-variant-numeric:lining-nums tabular-nums; }
.ag-path__name{ font-family:var(--display); font-weight:700; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; line-height:1.3; color:var(--ink); }
.ag-path__desc{ font-size:.93rem; line-height:1.5; color:var(--muted); max-width:34ch; }
.ag-path__go{ display:inline-flex; align-items:center; gap:6px; justify-self:start; margin-top:4px; font-family:var(--display); font-weight:600; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--red-text); }
.ag-path__go .i{ width:.9em; height:.9em; transition:transform .2s var(--ease); }
.ag-path__badge{ justify-self:start; margin-top:6px; padding:5px 9px 4px; background:var(--red); color:var(--white); font-family:var(--display); font-weight:700; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; line-height:1.2; }
a.ag-path__card:hover .ag-path__name{ color:var(--red-deep); }
a.ag-path__card:hover .ag-path__go .i{ transform:translateX(3px); }
.is-here .ag-path__card::before{ background:var(--red); box-shadow:0 0 0 4px rgba(228,25,30,.16); }
.v2-sec--white .ag-path__card::before{ background:var(--white); }
.v2-sec--white .is-here .ag-path__card::before{ background:var(--red); }

@container (min-width:30rem){
  .ag-path{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:26px; }
  .ag-path__card,.ag-path__item:first-child .ag-path__card{ display:flex; flex-direction:column; gap:7px; padding:24px clamp(14px, 1.8vw, 24px) 6px 0; border-left:0; border-top:2px solid var(--red); }
  .ag-path__card::before,.ag-path__item:first-child .ag-path__card::before{ left:0; top:-7px; }
  .ag-path__n{ margin-bottom:4px; }
  .ag-path__go,.ag-path__badge{ margin-top:auto; align-self:flex-start; }
}
@container (min-width:46rem){ .ag-path{ grid-template-columns:repeat(var(--ag-mid),minmax(0,1fr)); } }
@container (min-width:62rem){ .ag-path{ grid-template-columns:repeat(var(--ag-n),minmax(0,1fr)); } }

/* ---------- ag-finder: the age finder (Ages hub) ------------------------- */
.ag-finder{ display:grid; gap:14px; align-content:start; min-width:0; padding:var(--v2-inset); background:var(--paper); border:1px solid var(--v2-card-line); border-top:3px solid var(--red); border-radius:4px; }
.ag-finder h3{ font-size:var(--v2-h3); line-height:1.2; }
.ag-finder p{ font-size:.95rem; line-height:1.55; color:var(--muted); max-width:46ch; }
.ag-finder__row{ display:flex; flex-wrap:wrap; gap:10px; align-items:end; }
.ag-finder label{ display:block; margin-bottom:6px; font-family:var(--display); font-weight:600; font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); }
.ag-finder input{ width:min(8.5rem, 136px); min-height:52px; padding:.6rem min(.85rem, 13.6px); border:1px solid rgba(0,0,0,.24); border-bottom:2px solid var(--ink); border-radius:2px; background:var(--white); color:var(--ink); font-family:var(--display); font-weight:700; font-size:1.1rem; }
.ag-finder input:focus{ outline:3px solid var(--red); outline-offset:2px; }
.ag-finder .btn{ min-height:52px; }
.ag-finder__out{ display:grid; gap:4px; align-content:start; min-height:3.2rem; padding-top:14px; border-top:1px solid var(--v2-rule); }
.ag-finder__out:empty{ min-height:0; padding-top:0; border-top:0; }
.ag-finder__out b{ font-family:var(--display); font-weight:700; font-size:1.1rem; letter-spacing:.02em; text-transform:uppercase; color:var(--ink); }
.ag-finder__out p{ color:var(--ip-text); }
.ag-finder__out a{ justify-self:start; display:inline-flex; align-items:center; min-height:44px; font-family:var(--display); font-weight:600; font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); text-decoration:none; }
.ag-finder__out a{ background:linear-gradient(var(--red),var(--red)) 0 calc(100% - 10px) / 100% 1.5px no-repeat; }
.ag-finder__out a:hover{ color:var(--red-deep); }
.ag-finder__out .ip-finder__err{ color:var(--red-text); font-weight:600; }

/* ---------- ag-list: short lists inside steps ---------------------------- */
.ag-list{ display:grid; gap:6px; margin:4px 0 0; padding:0; list-style:none; }
.ag-list li{ position:relative; padding-left:16px; font-size:.97rem; line-height:1.5; color:var(--ip-text); }
.ag-list li::before{ content:""; position:absolute; left:0; top:.72em; width:7px; height:1.5px; background:var(--red); }
.ag-list a{ color:var(--red-deep); text-underline-offset:.18em; }

/* ---------- ag-stairs: Juniors pathway marks ----------------------------- */
@container (min-width:44rem){
  .ag-stairs{ padding-top:18px; }
  .ag-stairs > li{ position:relative; }
  .ag-stairs > li::before{ content:""; position:absolute; left:0; top:-2px; width:28px; height:6px; background:var(--red); transform:translateY(-100%); }
  .ag-stairs > li:nth-child(2)::before{ height:12px; }
  .ag-stairs > li:nth-child(3)::before{ height:18px; }
}

/* ---------- ag-seq: kihon, kata, kumite ---------------------------------- */
.ag-seq{ display:grid; gap:18px; margin:0; padding:0; list-style:none; }
.ag-seq > li{ display:grid; grid-template-columns:min(7rem, 112px) minmax(0,1fr); gap:16px; align-items:start; min-width:0; padding-top:18px; border-top:1px solid var(--v2-rule); }
.ag-seq__body{ display:grid; gap:6px; align-content:start; min-width:0; }
.ag-seq .idx{ font-size:1.2rem; line-height:1; color:var(--red); }
.ag-seq h3{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; font-size:var(--v2-h3); line-height:1.2; }
.ag-seq h3 span{ font-size:.66rem; font-weight:600; letter-spacing:.16em; color:var(--muted); }
.ag-seq p{ font-size:.97rem; line-height:1.6; color:var(--ip-text); max-width:46ch; }
@container (min-width:40rem){
  .ag-seq{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px, 2.2vw, 28px); }
  .ag-seq > li{ grid-template-columns:minmax(0,1fr); gap:16px; padding-top:0; border-top:0; }
}

/* ---------- ag-quote: a long parent quotation -----------------------------
   The type is the foundation's .v2-quote--long (V2.1); only the spacing
   above the quotation is set here. */
.ag-quote{ margin-top:clamp(28px, 3vw, 40px); }

/* ---------- Single-page pieces ------------------------------------------- */
/* Adults 50 to 75+: the short statement under the H1, clearly below it. */
.ag-hero-line{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:-.005em; line-height:1.1; color:var(--ink); font-size:min(clamp(1.2rem, calc(1rem + .9vw), 1.75rem), max(19.2px, calc(100cqi / 9))); }
.ag-hero-line em{ font-style:normal; color:var(--red); }

/* Adults 20 to 29: the "Starting out" label over the hero facts. */
.ag-facts{ display:grid; min-width:0; }
.ag-facts__t{ margin-bottom:8px; font-family:var(--display); font-weight:700; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); }
.ag-facts .v2-facts{ margin-top:0; }

/* Prose with a note under it, in one feature column. */
.ag-stack{ display:grid; align-content:start; min-width:0; }

/* Ages hub, one syllabus: heading and facts share the lead column. */
.ag-syl__lead{ display:grid; gap:clamp(24px, 3vw, 36px); align-content:start; min-width:0; }
.ag-syl__facts{ margin-top:0; }

/* Ages hub, how to choose: steps beside the finder. */
.ag-choose{ align-items:start; }

/* Ages hub, family: a narrower portrait beside a fuller copy column. */
.ag-family__copy{ display:grid; gap:clamp(20px, 2.4vw, 28px); align-content:start; min-width:0; }
.ag-family__copy .v2-head{ margin-bottom:0; }
.ag-family .ag-quote{ margin-top:0; }
@container (min-width:44rem){ .ag-family{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); column-gap:clamp(28px, 4vw, 64px); } }

/* Phone links inside a section head (Ages hub questions). */
.v2-faq--split .v2-head p a{ color:var(--ink); font-weight:700; text-underline-offset:.18em; }

/* Hero and syllabus facts (Adults 20 to 29, Ages hub): the foundation's
   .v2-facts behaviour (label and value rows below a 30rem column, one ruled
   line above it) since V2.1; the family 2 x 2 grid and row rules are gone. */

/* ---------- Enlarged text (150% and 200%) ---------------------------------
   Rem container queries: at normal text these never apply on a phone of
   320px or wider; with enlarged text the same columns are too narrow in rem,
   so the side-by-side pieces stack. */
@container (max-width:17.5rem){
  .ag-path__card{ grid-template-columns:minmax(0,1fr); }
  .ag-path__card > *{ grid-column:1; }
  .ag-path__n{ grid-row:auto; margin-bottom:4px; }
  .ag-seq > li{ grid-template-columns:minmax(0,1fr); }
  .ag-seq .v2-media{ max-width:min(14rem, 224px); }
}