/* ==========================================================================
   WSKF Australia - v2-principles.css   (Inner-page redesign, step 3)
   The principles family: the Principles hub and the eight principle pages
   (Respect, Self Control, Good manners, Honesty and integrity, Awareness of
   others, Perseverance, Develop focus, Develop listening).

   Loads after inner-v2.css and before a11y.css. Everything here is prefixed
   pr- and only adds what the v2 foundation does not already provide:
     pr-plate    the chapter numeral beside the hero copy (uses .v2-rank)
     pr-wide     a wide editorial photograph inside a section
     pr-seq      a principle's signature sequence (two to four ruled columns;
                 --path adds the progression marker)
     pr-ones     "one instruction, one goal, one movement" rows
     pr-rings    the three circles of awareness (decorative, aria-hidden)
     pr-quote    a long quotation set as reading text, not a display line
     pr-chapnav  previous / all / next between the eight chapters
     pr-index    every principle, the current one marked
     pr-halves   the two groups of principles (hub hero)
     pr-pidx     the chapter index (hub)
   Grant's calligraphy appears once per page, in the hero (ip-cal--hero).
   Column switches are rem container queries, so 150% and 200% text and
   200% zoom fall back to fewer columns. Spacing is px; type is rem.
   ========================================================================== */

/* ---------- Hero: chapter numeral plate -------------------------------- */
.pr-plate .v2-rank__n{ font-variant-numeric:lining-nums tabular-nums; letter-spacing:-.04em; }
.pr-plate .v2-rank__t{ padding-bottom:8px; }
/* Stacked hero (phones, tablets, enlarged text): a compact plate, so the
   numeral does not push the page a screen down. */
@container wskf-main (max-width:56.24rem){
  .pr-plate{ grid-template-columns:auto minmax(0,1fr); align-items:center; padding-top:12px; border-top-width:2px; max-width:24rem; }
  .pr-plate .v2-rank__n{ font-size:min(3.4rem, 54.4px); line-height:.9; }
  .pr-plate .v2-rank__t{ padding-bottom:0; }
}

/* Calligraphy column on phones and tablets: foundation behaviour for every
   .v2-hero--cal since V2.1 (these were the model rules). */

/* ---------- Feature images on phones ------------------------------------
   A portrait frame at full phone width is taller than the screen; the
   stacked layout uses the landscape family instead (faces kept in frame by
   each image's object-position). */
@container (max-width:43.99rem){ .pr-figure.v2-media--portrait{ aspect-ratio:4/3; } }

/* ---------- Wide photograph inside a section ---------------------------- */
.pr-wide{ margin-top:var(--v2-head-gap); }
.pr-wide--lead{ margin-top:0; margin-bottom:var(--v2-head-gap); }
.pr-wide img{ display:block; }

/* ---------- Signature sequence ------------------------------------------
   li (or div) > [span.idx | span.cap] + h3 (or b) + p. Rows on phones; from
   44rem two to four ruled columns. Four columns wait for 60rem (two
   columns between). */
.pr-seq{ display:grid; margin:0; padding:0; list-style:none; }
.pr-seq > *{ position:relative; display:grid; align-content:start; gap:7px; min-width:0; padding:18px 0 20px; border-top:1px solid var(--v2-rule); }
.pr-seq > :last-child{ border-bottom:1px solid var(--v2-rule); }
.pr-seq .idx{ display:block; font-family:var(--display); font-weight:700; font-size:1.25rem; line-height:1; color:var(--red-text); font-variant-numeric:tabular-nums; }
.pr-seq .cap{ display:block; }
.pr-seq h3,.pr-seq b{ display:block; font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:var(--v2-h3); line-height:1.2; letter-spacing:.005em; color:var(--ink); }
.pr-seq p{ font-size:.97rem; line-height:1.6; color:var(--ip-text); max-width:46ch; }
@container (min-width:44rem){
  .pr-seq--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pr-seq--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .pr-seq--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pr-seq--2,.pr-seq--3,.pr-seq--4{ column-gap:clamp(20px, 2.6vw, 36px); }
  .pr-seq--2 > *,.pr-seq--3 > *,.pr-seq--4 > *{ border-top:2px solid var(--ink); border-bottom:0; padding-top:16px; }
  .pr-seq--2 > :last-child,.pr-seq--3 > :last-child,.pr-seq--4 > :last-child{ border-bottom:0; }
}
@container (min-width:60rem){
  .pr-seq--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
/* Path: the steps of one progression. Phones: dots on a vertical line.
   Columns: a dot where each step starts on the shared top rule; the last
   dot is filled. */
.pr-seq--path > *{ border:0; padding:4px 0 22px 30px; }
.pr-seq--path > :last-child{ border:0; padding-bottom:2px; }
.pr-seq--path > *::before{ content:""; position:absolute; left:0; top:6px; width:14px; height:14px; box-sizing:border-box; border-radius:50%; border:2px solid var(--red); background:var(--paper); z-index:1; }
.pr-seq--path > :last-child::before{ background:var(--red); }
.pr-seq--path > *::after{ content:""; position:absolute; left:6px; top:20px; bottom:-6px; width:2px; background:var(--grey-line); }
.pr-seq--path > :last-child::after{ display:none; }
@container (min-width:44rem){
  .pr-seq--path > *,.pr-seq--path > :last-child{ border:0; border-top:2px solid var(--grey-line); padding:24px 0 0; }
  .pr-seq--path > *::before{ top:-8px; }
  .pr-seq--path > *::after{ display:none; }
}
/* On the dark band. */
.v2-sec--ink .pr-seq > *{ border-color:var(--v2-rule-ink); }
.v2-sec--ink .pr-seq h3,.v2-sec--ink .pr-seq b{ color:var(--white); }
.v2-sec--ink .pr-seq p{ color:var(--on-ink); }
.v2-sec--ink .pr-seq--path > *::before{ background:var(--ink); }
.v2-sec--ink .pr-seq--path > :last-child::before{ background:var(--red); }
.v2-sec--ink .pr-seq--path > *::after{ background:rgba(255,255,255,.22); }
@container (min-width:44rem){
  .v2-sec--ink .pr-seq--path > *,.v2-sec--ink .pr-seq--path > :last-child{ border-top-color:rgba(255,255,255,.26); }
}

/* ---------- "One" rows (Develop focus) ---------------------------------- */
.pr-ones{ display:grid; margin:0; padding:0; list-style:none; border-top:1px solid var(--v2-rule); }
.pr-ones > li{ display:grid; gap:6px; padding:18px 0 20px; border-bottom:1px solid var(--v2-rule); min-width:0; }
.pr-ones b{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:var(--v2-h3); line-height:1.2; letter-spacing:.005em; color:var(--ink); }
.pr-ones b em{ font-style:normal; color:var(--red-text); }
.pr-ones p{ font-size:.97rem; line-height:1.6; color:var(--ip-text); max-width:52ch; }

/* ---------- Three circles (Awareness of others; decorative) ------------- */
.pr-rings{ position:relative; width:min(100%, 400px); aspect-ratio:1; margin:0 auto; }
.pr-rings span{ position:absolute; display:flex; justify-content:center; border-radius:50%; border:1.5px solid var(--grey-line); font-family:var(--display); font-weight:700; font-size:min(.72rem, 11.5px); letter-spacing:.14em; text-transform:uppercase; text-align:center; color:var(--muted); }
.pr-rings span:nth-child(1){ inset:0; padding-top:6%; }
.pr-rings span:nth-child(2){ inset:17%; padding-top:7%; border-color:#8d8c8b; color:var(--ink); }
.pr-rings span:nth-child(3){ inset:36%; align-items:center; padding:0 4%; border:0; background:var(--red-text-light, #C8161A); color:var(--white); }
@container (max-width:30rem){ .pr-rings{ width:min(100%, 300px); } }

/* ---------- Long quotation (Respect, on the dark band) ------------------
   Type: foundation .v2-quote--long; colours: foundation dark surfaces
   (both V2.1). Only the split beside the quotation is set here. */
@container (min-width:56rem){
  .pr-quote-split{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
}

/* ---------- Small helpers ---------------------------------------------- */
.pr-stack{ display:grid; gap:clamp(20px, 2.4vw, 28px); min-width:0; }
.pr-statement .v2-head{ --v2-head-w:52rem; }
.pr-values{ margin-top:0; }
.v2-label + .pr-values{ margin-top:0; }

/* ---------- Chapter navigation (previous / all / next) ------------------ */
.pr-chapnav{ display:grid; gap:0; margin-top:clamp(28px, 3.4vw, 44px); border-top:1px solid var(--v2-rule); }
.pr-chapnav a{ display:grid; align-content:center; gap:3px; min-height:60px; padding:12px 0; border-bottom:1px solid var(--v2-rule); color:var(--ink); text-decoration:none; min-width:0; }
.pr-chapnav .cap{ color:var(--muted); }
.pr-chapnav b{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:1rem; line-height:1.25; transition:color .2s var(--ease); }
.pr-chapnav a:hover b{ color:var(--red-deep); }
.pr-chapnav__all b{ display:inline-flex; align-items:center; gap:8px; }
.pr-chapnav__all b::before{ content:""; width:7px; height:7px; flex:none; background:var(--red); }
@container (min-width:44rem){
  .pr-chapnav{ grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); column-gap:24px; border-bottom:1px solid var(--v2-rule); }
  .pr-chapnav a{ border-bottom:0; }
  .pr-chapnav__next{ text-align:right; justify-items:end; }
  .pr-chapnav__all{ justify-items:center; }
}

/* ---------- Every principle (Respect) ---------------------------------- */
.pr-index{ margin-top:clamp(28px, 3.4vw, 44px); }
.pr-index__t{ margin-bottom:10px; font-family:var(--display); font-weight:600; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.pr-index ol{ display:grid; gap:0 clamp(16px, 2.4vw, 32px); margin:0; padding:0; list-style:none; border-top:1px solid var(--v2-rule); grid-template-columns:repeat(auto-fill, minmax(min(100%, max(220px, 13.75rem)), 1fr)); }
.pr-index li{ min-width:0; border-bottom:1px solid var(--v2-rule); }
.pr-index a,.pr-index__here{ display:flex; align-items:baseline; gap:10px; min-height:48px; padding:13px 0 11px; font-family:var(--display); font-weight:700; font-size:.86rem; letter-spacing:.05em; text-transform:uppercase; line-height:1.3; color:var(--ink); text-decoration:none; }
.pr-index b{ font-size:.72rem; letter-spacing:.1em; color:var(--muted); font-variant-numeric:tabular-nums; }
.pr-index a:hover{ color:var(--red-deep); }
.pr-index__here,.pr-index__here b{ color:var(--red-text); }

/* ---------- Hub hero: the two groups ----------------------------------- */
.pr-halves{ display:grid; gap:10px; min-width:0; }
.pr-halves a{ position:relative; display:grid; gap:4px; min-height:44px; padding:16px 52px 18px 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); min-width:0; }
.pr-halves a + a{ border-top-color:var(--red); }
.pr-halves__n{ font-family:var(--display); font-weight:700; font-size:.78rem; letter-spacing:.1em; color:var(--red-text); font-variant-numeric:tabular-nums; }
.pr-halves b{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:var(--v2-h3); line-height:1.2; letter-spacing:.01em; }
.pr-halves__d{ font-size:.92rem; line-height:1.5; color:var(--muted); }
.pr-halves .i{ position:absolute; right:18px; top:20px; width:1.05rem; height:1.05rem; color:var(--red); transition:transform .2s var(--ease); }
.pr-halves a:hover{ border-color:var(--ink); border-top-color:var(--ink); }
.pr-halves a + a:hover{ border-top-color:var(--red); }
.pr-halves a:hover .i{ transform:translateX(3px); }
@container wskf-main (min-width:37.5rem) and (max-width:56.24rem){
  .pr-halves{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ---------- Hub: the chapter index ------------------------------------- */
.pr-pidx{ display:grid; gap:clamp(36px, 4vw, 48px) var(--v2-gap); }
@container (min-width:56rem){ .pr-pidx{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.pr-pidx__group{ min-width:0; }
.pr-pidx__head{ display:grid; gap:8px; margin-bottom:16px; }
.pr-pidx__head h3{ font-size:var(--v2-h3); line-height:1.2; }
.pr-pidx__head p:not(.cap){ font-size:.95rem; line-height:1.55; color:var(--muted); max-width:48ch; }
.pr-pidx ol{ margin:0; padding:0; list-style:none; border-top:2px solid var(--ink); }
.pr-pidx li{ border-bottom:1px solid var(--v2-rule); }
.pr-pidx__item{ position:relative; display:grid; grid-template-columns:min(2.6rem, 41.6px) minmax(0,1fr); gap:3px 12px; min-height:44px; padding:16px 40px 17px 0; color:inherit; text-decoration:none; }
.pr-pidx__n{ grid-row:1 / span 2; font-family:var(--display); font-weight:700; font-size:1.25rem; line-height:1.1; color:var(--red-text); font-variant-numeric:tabular-nums; }
.pr-pidx__name{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:min(1.05rem, max(16.8px, calc((100cqi - 100px) / 11))); line-height:1.25; letter-spacing:.02em; transition:color .2s var(--ease); }
.pr-pidx__line{ font-size:.93rem; line-height:1.5; color:var(--muted); max-width:52ch; }
.pr-pidx__item .i{ position:absolute; right:4px; top:20px; width:1.05rem; height:1.05rem; color:var(--red); transition:transform .2s var(--ease); }
.pr-pidx__item:hover .pr-pidx__name{ color:var(--red-deep); }
.pr-pidx__item:hover .i{ transform:translateX(3px); }

/* ---------- Hub enquiry head: club finder and phone -------------------- */
.pr-enq-acts{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 24px; }
.pr-enq-acts .v2-tel a{ min-height:48px; }