/* ==========================================================================
   WSKF Australia - fam-profile.css   (Instructor profile family, redesign)
   Loaded after inner-v2.css on instructor profile pages (Grant Rollinson;
   available to the black belt pages). Uses the v2 tokens. Prefix pf-.

     1  Lineage chart: two eras as one bar, six dan grades above it and four
        milestones below. A visual summary only (aria-hidden); the era lists
        beside it (.v2-timeline) carry the same facts for every reader.
     2  Judging years and the coaching credential (on a dark band).
   ========================================================================== */

/* ---------- 1. Lineage chart ------------------------------------------- */
/* Shown only where it has room at the reader's text size (56rem column);
   otherwise the era lists alone tell the story. */
.pf-chart{ display:none; }
@container (min-width:56rem){ .pf-chart{ display:block; margin:0 0 clamp(32px, 3.6vw, 48px); } }
.pf-chart__track{ position:relative; height:12.6rem; }
.pf-chart__bar{ position:absolute; left:0; right:0; top:5rem; height:2.2rem; display:flex; border-radius:2px; overflow:hidden; }
.pf-chart__seg{ display:flex; align-items:center; padding-left:.85rem; font-family:var(--display); font-weight:600; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--white); white-space:nowrap; overflow:hidden; }
.pf-chart__seg--ski{ width:40.54%; background:var(--ink-3); }
.pf-chart__seg--wskf{ flex:1; background:var(--red-deep); }
.pf-chart__g,.pf-chart__m{ position:absolute; left:calc(var(--x) * 100%); }
.pf-chart__g{ top:0; transform:translateX(-50%); display:grid; justify-items:center; gap:.15rem; }
.pf-chart__g b{ font-family:var(--display); font-weight:700; font-size:2rem; line-height:1; color:var(--ink); }
.pf-chart__g.is-top b{ color:var(--red); }
.pf-chart__g span{ font-family:var(--display); font-weight:600; font-size:.66rem; letter-spacing:.08em; color:var(--muted); }
.pf-chart__g::after{ content:""; width:2px; height:1rem; background:var(--ink); margin-top:.15rem; }
.pf-chart__m{ top:7.2rem; display:grid; gap:.1rem; padding:.8rem 0 0 .55rem; border-left:2px solid var(--ink); max-width:9.5rem; }
.pf-chart__m b{ font-family:var(--display); font-weight:700; font-size:.9rem; color:var(--ink); }
.pf-chart__m span{ font-size:.74rem; line-height:1.3; color:var(--muted); }
/* the bar draws once, left to right, when it scrolls in (inner.js .ip-prog) */
.pf-chart__bar i{ position:absolute; inset:0; background:var(--white); transform-origin:100% 0; transform:scaleX(0); transition:transform 1.5s var(--ease) .15s; pointer-events:none; }
.pf-chart.ip-wait .pf-chart__bar i{ transform:scaleX(1); }
@media (prefers-reduced-motion:reduce){ .pf-chart.ip-wait .pf-chart__bar i{ transform:scaleX(0); } .pf-chart__bar i{ transition:none; } }
@media print{ .pf-chart__bar i{ display:none; } }

/* ---------- 2. Judging years and credential ----------------------------- */
.pf-years{ container-type:inline-size; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px clamp(12px, 2vw, 24px); margin:0; padding:0; list-style:none; }
.pf-years li{ min-width:0; padding-top:10px; border-top:3px solid var(--red); }
.pf-years b{ display:block; font-family:var(--display); font-weight:700; line-height:1; letter-spacing:-.01em; color:var(--white); font-variant-numeric:tabular-nums;
  font-size:min(clamp(1.6rem, calc(1.1rem + 1.6vw), 2.4rem), max(clamp(25.6px, calc(17.6px + 1.6vw), 38.4px), calc(100cqi / 3 / 2.9))); }
.pf-cred{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px; margin-top:clamp(22px, 2.6vw, 32px); padding-top:16px; border-top:1px solid var(--v2-rule-ink); font-size:.95rem; line-height:1.5; color:var(--on-ink); max-width:none; }
/* V2.1.1: no single word left alone when the credential wraps. */
.pf-cred span{ text-wrap:pretty; }
.pf-cred b{ font-family:var(--display); font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--white); }