/* ==========================================================================
   WSKF Australia - v2-club.css   (Step 3, club pages, November 2026)
   Small additions to the v2 foundation (inner-v2.css) for the six single
   club pages: Mandurah, Noosa / Sunshine Coast, Hamilton, Portland,
   Adelaide and Sydney. Built on the WSKF Perth benchmark grammar. All
   classes are prefixed v2c- (or scoped to them) so nothing else changes.
   Spacing in px, type in rem with bounded growth, column switches as rem
   container queries (enlarged text reflows to fewer columns).
   ========================================================================== */

/* ---------- 1. Hero additions ------------------------------------------- */
/* Second line of a two-part club name ("/ Sunshine Coast"). */
.v2c-h1sub{ display:block; margin-top:.14em; font-size:.52em; line-height:1.05; letter-spacing:-.01em; color:var(--red-text); }
/* "Also listed as" note: one quiet line under the lede. */
.v2c-aka{ max-width:52ch; padding-left:12px; border-left:2px solid var(--red); font-size:.9rem; line-height:1.5; color:var(--muted); }
.v2c-aka b{ color:var(--ink); font-weight:600; }
/* Three club facts: the last one takes the full row (foundation since V2.1). */
/* Hero caption under the photograph (Sydney). */
.v2-hero__media .v2-caption{ margin-top:8px; }

/* Venue index at the foot of the hero (three venues on one line). */
.v2c-route{ container-type:inline-size; display:grid; margin:clamp(22px, 2.6vw, 34px) 0 0; padding:0; list-style:none; border-top:2px solid var(--ink); }
.v2c-route > li{ min-width:0; border-bottom:1px solid var(--v2-rule); }
.v2c-route a{ display:grid; grid-template-columns:min(2.2rem, 35px) minmax(0,1fr) auto; gap:2px 10px; align-items:baseline; min-height:44px; padding:12px 0; color:inherit; text-decoration:none; }
.v2c-route .idx{ grid-row:1 / span 2; font-size:1rem; color:var(--red-text); }
.v2c-route b{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.01em; font-size:1.02rem; line-height:1.2; }
.v2c-route a > span:not(.idx){ grid-column:2; font-size:.86rem; line-height:1.45; color:var(--muted); }
.v2c-route .i{ grid-column:3; grid-row:1; width:.95rem; height:.95rem; color:var(--red); transition:transform .2s var(--ease); }
.v2c-route a:hover b{ color:var(--red-deep); }
.v2c-route a:hover .i{ transform:translateY(2px); }
@container (min-width:44rem){
  .v2c-route{ grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:clamp(20px, 2.6vw, 36px); }
  .v2c-route > li{ border-bottom:0; }
}

/* ---------- 2. Instructor card ------------------------------------------ */
/* A light card: the dan numeral (decorative, the rank is also written in
   the role line) beside the name, role and an optional note. */
.v2c-sensei{ container-type:inline-size; display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px clamp(16px, 2vw, 24px); align-items:start; padding:var(--v2-inset); background:var(--white); border:1px solid var(--v2-card-line); border-top:3px solid var(--red); border-radius:4px; box-shadow:var(--v2-shadow); min-width:0; }
.v2c-sensei__n{ font-family:var(--display); font-weight:700; line-height:.8; letter-spacing:-.04em; color:var(--red); font-size:min(clamp(2.8rem, calc(2rem + 2vw), 3.6rem), 60px); font-variant-numeric:lining-nums; }
.v2c-sensei__n sup{ font-size:.34em; letter-spacing:0; vertical-align:top; position:relative; top:.2em; margin-left:.04em; color:var(--ink); }
.v2c-sensei__t{ align-self:center; font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--red-text); font-size:.95rem; line-height:1; }
.v2c-sensei__who{ min-width:0; align-self:center; }
.v2c-sensei h3{ font-size:var(--v2-h3); line-height:1.2; }
.v2c-sensei__role{ margin-top:5px; font-family:var(--display); font-weight:600; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; line-height:1.45; color:var(--muted); }
.v2c-sensei__note{ grid-column:1 / -1; margin-top:10px; padding-top:12px; border-top:1px solid var(--v2-rule); font-size:.95rem; line-height:1.6; color:var(--ip-text); max-width:62ch; }
/* Very narrow (enlarged text): numeral above the name. */
@container (max-width:15rem){ .v2c-sensei{ grid-template-columns:minmax(0,1fr); } }
.v2c-pair{ display:grid; gap:clamp(12px, 1.6vw, 20px); }
@container (min-width:34rem){ .v2c-pair{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.v2c-foot{ margin-top:16px; font-size:.95rem; line-height:1.6; color:var(--muted); max-width:68ch; }
.v2c-foot a{ color:var(--red-deep); font-weight:600; }
/* Instructor beside the first-class steps (Mandurah). */
.v2c-with{ display:grid; gap:clamp(20px, 2.8vw, 40px); align-items:start; }
.v2c-with > *{ min-width:0; }
@container (min-width:44rem){ .v2c-with{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); } }

/* ---------- 3. Contact facts (single-venue pages) ----------------------- */
.v2c-contact{ display:grid; margin:0; border-top:1px solid var(--v2-rule); }
.v2c-contact > div{ display:grid; grid-template-columns:minmax(0,5.6rem) minmax(0,1fr); gap:10px; align-items:baseline; padding:11px 0; border-bottom:1px solid var(--v2-rule); min-width:0; }
.v2c-contact dt{ font-family:var(--display); font-weight:600; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.v2c-contact dd{ margin:0; font-family:var(--display); font-weight:700; font-size:.98rem; line-height:1.35; overflow-wrap:break-word; min-width:0; }
.v2c-contact a{ color:inherit; text-decoration:none; border-bottom:1.5px solid var(--red); }
.v2c-contact a:hover{ color:var(--red-deep); }
@container (min-width:36rem){
  .v2c-contact{ grid-template-columns:repeat(auto-fit, minmax(0,1fr)); column-gap:24px; }
  .v2c-contact > div{ display:block; padding:12px 0 11px; }
  .v2c-contact dd{ margin-top:5px; }
}
.v2c-gap{ margin-top:clamp(22px, 2.6vw, 30px); }

/* ---------- 4. The club's own website ----------------------------------- */
.v2c-web{ container-type:inline-size; display:grid; gap:14px var(--v2-gap); padding:clamp(20px, 2.6vw, 32px); background:var(--white); border:1px solid var(--v2-card-line); border-top:3px solid var(--ink); border-radius:4px; box-shadow:var(--v2-shadow); min-width:0; }
.v2c-web > *{ min-width:0; }
.v2c-web__copy{ display:grid; gap:12px; align-content:start; justify-items:start; }
.v2c-web__copy > *{ max-width:100%; }
.v2c-web__domain{ font-family:var(--display); font-weight:700; text-transform:none; letter-spacing:-.02em; line-height:1.05; color:var(--ink); overflow-wrap:normal;
  font-size:min(clamp(1.6rem, calc(1.2rem + 1.4vw), 2.3rem), max(25.6px, calc(100cqi / 8.6))); }
.v2c-web__copy p:not(.cap):not(.v2c-web__domain){ font-size:var(--v2-body); line-height:1.6; color:var(--ip-text); max-width:46ch; }
.v2c-web .btn{ margin-top:4px; max-width:100%; text-align:center; }
@container (min-width:40rem){
  .v2c-web{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:end; }
  .v2c-web .v2c-contact{ grid-template-columns:minmax(0,1fr); }
  .v2c-web .v2c-contact > div{ display:grid; padding:11px 0; }
  .v2c-web .v2c-contact dd{ margin-top:0; }
}
/* V2.1.1: at about 1100 to 1140px the card already sits as copy beside
   contact (decided by the page column), but the card itself is just under
   40rem, so the narrow contact column split into two tiny columns and broke
   the phone number and email. In that band the contact facts are one
   column with each label above its value (the form they take in narrow
   columns), so the email address has the full width. */
@container (min-width:36rem) and (max-width:39.99rem){
  .v2c-web .v2c-contact{ grid-template-columns:minmax(0,1fr); }
  .v2c-web .v2c-contact > div{ display:grid; grid-template-columns:minmax(0,1fr); gap:3px; padding:11px 0; }
  .v2c-web .v2c-contact dd{ margin-top:0; }
}

/* ---------- 5. Principles list (four linked principles) ----------------- */
.v2c-plist{ display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.v2c-plist > li{ min-width:0; }
.v2c-plist a{ container-type:inline-size; position:relative; display:grid; grid-template-columns:min(2.2rem, 35px) minmax(0,1fr); gap:4px 10px; height:100%; padding:16px 48px 18px 16px; background:var(--white); border:1px solid var(--v2-card-line); border-radius:4px; color:inherit; text-decoration:none; transition:border-color .2s var(--ease); }
.v2c-plist .idx{ grid-row:1 / span 2; font-size:1rem; color:var(--red-text); padding-top:1px; }
.v2c-plist b{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.01em; line-height:1.2; font-size:min(1.05rem, max(16.8px, calc((100cqi - 99px) / 7.6))); }
.v2c-plist__d{ grid-column:2; font-size:.92rem; line-height:1.5; color:var(--muted); }
.v2c-plist .i{ position:absolute; right:16px; top:18px; width:1rem; height:1rem; color:var(--red); transition:transform .2s var(--ease); }
.v2c-plist a:hover{ border-color:var(--ink); }
.v2c-plist a:hover b{ color:var(--red-deep); }
.v2c-plist a:hover .i{ transform:translateX(3px); }
@container (min-width:40rem){ .v2c-plist{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } }
.v2c-more{ margin-top:18px; }

/* ---------- 6. Dark feature band (Adelaide: a worldwide federation) ----- */
.v2c-world{ display:grid; gap:24px var(--v2-gap); }
.v2c-world > *{ min-width:0; }
.v2c-world h2{ font-size:var(--v2-h2); line-height:1.08; letter-spacing:-.015em; color:var(--white); max-width:24ch; text-wrap:balance; overflow-wrap:normal; }
.v2c-world h2 b{ font-weight:inherit; }
.v2c-world h2 em{ font-style:normal; color:var(--red); }
.v2c-world__copy p{ margin-top:14px; font-size:var(--v2-body); line-height:1.65; color:var(--on-ink); max-width:56ch; }
@container (min-width:56rem){ .v2c-world{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:start; } }
/* Related cards on the band take their dark-surface colours from the
   foundation (B21b, V2.1); here they only stack in the narrow column. */
.v2-band .v2c-world .v2-related{ grid-template-columns:minmax(0,1fr); gap:10px; }
.v2-band .v2-kicker-h{ margin-bottom:clamp(16px, 2vw, 24px); }

/* ---------- 7. Venue row details ---------------------------------------- */
/* An email address as a venue action: lower case; it may wrap between
   words but never inside the address (the foundation lets every action
   wrap since V2.1). */
.v2-venue__acts a.v2c-mail{ text-transform:none; letter-spacing:.02em; font-size:.8rem; overflow-wrap:normal; }
/* Two actions on every row: the second keeps one width so the Directions
   buttons line up down the list (wide rows only). */
@container (min-width:46rem){
  .v2-venue__acts a:nth-child(2){ min-width:min(13rem, 208px); }
}

/* ---------- 8. Three points (Portland syllabus) ------------------------- */
/* Three short facts: one column, then three across (never 2 + 1). */
@container (min-width:38rem){ .v2-points.v2c-points{ grid-template-columns:minmax(0,1fr); } }
@container (min-width:46rem){ .v2-points.v2c-points{ grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:clamp(20px, 2.6vw, 36px); } }
.v2-label.v2c-label0{ margin-top:0; }

/* ---------- 9. Enlarged text and narrow phones -------------------------- */
/* Venue actions that wrap: foundation behaviour since V2.1. */
/* Venue names with a long word ("Westminster"): the foundation's venue
   hook, set to the longest word. */
.v2-venue h3.v2c-long{ --v2-venue-em:9; }
.v2c-route b{ font-size:min(1.02rem, max(16.3px, calc((100cqi - 75px) / 8.8))); }
/* Contact facts: label above value in narrow columns; the value (an email
   address) gets bounded growth so it never breaks inside a word. */
@container (max-width:21rem){
  .v2c-contact > div{ grid-template-columns:minmax(0,1fr); gap:3px; }
}
.v2c-contact dd{ font-size:min(.98rem, max(15.7px, calc(100cqi / 13.5))); }
/* A lede with a long domain name ("karatenoosa.com."): bounded growth. */
.v2-hero__lede.v2c-lede-long{ font-size:min(var(--v2-lede), max(17px, calc(100cqi / 10.6))); }