/* ==========================================================================
   WSKF Australia - v2-directory.css   (Inner-page redesign, step 3)
   Directory group: Clubs hub and the five state pages.
   Loads after inner-v2.css and before a11y.css. Builds on the v2 tokens and
   components; only the directory pieces live here (prefix vd-).

     vd-chooser   state chooser card (hub hero), summary-card grammar
     vd-states    state list: rows in the chooser, cells at the page end
     vd-filter    state filter buttons for the club index (js/fam-directory.js)
     vd-index     every club, one row each (hub)
     vd-clubs     one or two club cards (state pages)
     vd-club      club card: context line, optional name, facts, actions
     vd-line      WA venues listed north to south on a quiet rail

   Spacing is px, type is rem with bounded growth, column switches are rem
   container queries, so enlarged text and zoom fall back to one column.
   ========================================================================== */

/* ---------- 1. Small shared pieces -------------------------------------- */
.vd-after{ margin-top:18px; }
.vd-lead{ margin-top:-6px; margin-bottom:10px; }
.vd-intro{ font-size:var(--v2-body); line-height:1.65; color:var(--ip-text); max-width:56ch; }
.vd-intro + .v2-note{ margin-top:18px; }
/* Prose links on the dark band: foundation B21b since V2.1. */
.vd-band__media{ width:100%; margin-bottom:var(--v2-head-gap); max-height:440px; }   /* a panoramic seminar photograph: kept near its own ratio on wide screens */
.vd-links{ display:flex; flex-wrap:wrap; gap:12px 24px; }
.vd-related{ margin-top:var(--v2-head-gap); }
.vd-clubs + .v2-note{ margin-top:18px; }

/* Hero facts: label and value rows on phones are foundation .v2-facts
   behaviour since V2.1 (this file's vd-facts rules were its model). */

/* ---------- 2. State chooser card (hub hero) ----------------------------- */
.vd-chooser{ container-type:inline-size; display:grid; gap:12px; padding:20px 20px 6px; 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; }
.vd-chooser__t,.vd-club__state{ display:flex; align-items:baseline; gap:8px; font-family:var(--display); font-weight:700; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; line-height:1.4; color:var(--ink); }
.vd-chooser__t::before,.vd-club__state::before{ content:""; width:7px; height:7px; flex:none; background:var(--red); transform:translateY(-1px); }

/* ---------- 3. State list ------------------------------------------------ */
.vd-states{ display:grid; margin:0; padding:0; list-style:none; }
.vd-states > li{ min-width:0; }
.vd-states a,.vd-states__here{ position:relative; display:grid; align-items:center; min-height:44px; color:var(--ink); text-decoration:none; }
.vd-states__code{ font-family:var(--display); font-weight:700; letter-spacing:.03em; color:var(--red-text); font-variant-numeric:lining-nums; }
.vd-states__name{ display:grid; gap:3px; min-width:0; }
.vd-states__name b{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.02em; line-height:1.2; }
.vd-states__name small{ font-size:.84rem; line-height:1.4; color:var(--muted); }
.vd-states .i{ width:1rem; height:1rem; color:var(--red); transition:transform .2s var(--ease); }
.vd-states a:hover b{ color:var(--red-deep); }
.vd-states a:hover .i{ transform:translateX(3px); }

/* Rows (inside the chooser card). */
.vd-states--rows{ border-top:1px solid var(--v2-rule); }
.vd-states--rows > li + li{ border-top:1px solid var(--v2-rule); }
.vd-states--rows a{ grid-template-columns:min(3.4rem, 54px) minmax(0,1fr) auto; gap:12px; min-height:60px; padding:10px 0; }
.vd-states--rows .vd-states__code{ font-size:1.05rem; }
.vd-states--rows .vd-states__name b{ font-size:min(.98rem, max(15.2px, calc((100cqi - 94px) / 7.2))); }
@container (max-width:17rem){ .vd-states--rows a{ grid-template-columns:minmax(0,1fr) auto; } .vd-states--rows .vd-states__code{ display:none; } }

/* Cells (the closing "other states" list): two across on phones, three on
   tablets, five on laptops. The current state is marked, not linked. */
.vd-states--row{ gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@container (max-width:22rem){ .vd-states--row{ grid-template-columns:minmax(0,1fr); } }
/* Two columns: the fifth state takes the full last row (never a lone half
   card beside an empty cell). */
.vd-states--row > li:last-child:nth-child(odd){ grid-column:1 / -1; }
@container (max-width:22rem){ .vd-states--row > li:last-child:nth-child(odd){ grid-column:auto; } }
@container (min-width:36rem){ .vd-states--row{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@container (min-width:36rem){ .vd-states--row > li:last-child:nth-child(odd){ grid-column:auto; } }
@container (min-width:56rem){ .vd-states--row{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(10px, 1.2vw, 16px); } }
.vd-states--row > li{ container-type:inline-size; display:flex; }
.vd-states--row a,.vd-states--row .vd-states__here{ flex:1; align-content:start; gap:8px; padding:16px 40px 18px 16px; background:var(--white); border:1px solid var(--v2-card-line); border-radius:4px; transition:border-color .2s var(--ease); }
.vd-states--row a:hover{ border-color:var(--ink); }
.vd-states--row .vd-states__code{ font-size:1.25rem; line-height:1; }
.vd-states--row .vd-states__name b{ font-size:min(.92rem, max(14.4px, calc((100cqi - 56px) / 6.6))); }
.vd-states--row .i{ position:absolute; right:14px; top:16px; }
.vd-states--row .vd-states__here{ background:transparent; border-color:var(--ink); border-top:3px solid var(--red); padding-top:14px; }
.vd-states__flag{ font-family:var(--display); font-weight:700; font-size:.66rem !important; letter-spacing:.14em; text-transform:uppercase; color:var(--red-text) !important; }

/* ---------- 4. Filter and club index (hub) ------------------------------- */
.vd-filter{ padding:0; list-style:none; }
/* Rows: the shared balanced chip layout (inner-v2 B6). On phones, three
   equal columns (3 + 3) instead of the shared two (2 + 2 + 2), and two
   below 20rem (a 320px phone, enlarged text). */
ul.vd-filter{ margin:0 0 4px; }
@container (max-width:29.99rem){
  ul.vd-filter{ grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:10px; }
  ul.vd-filter button{ justify-content:center; padding-inline:8px; }
}
@container (max-width:19.99rem){ ul.vd-filter{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
html:not(.js) .vd-filter{ display:none; }
.vd-filter button{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border:1px solid rgba(0,0,0,.18); border-radius:2px; background:var(--white); font-family:var(--display); font-weight:600; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); cursor:pointer; transition:border-color .2s var(--ease),background-color .2s var(--ease); }
.vd-filter button small{ font-size:.72rem; font-weight:700; color:var(--red-text); letter-spacing:.04em; }
.vd-filter button:hover{ border-color:var(--ink); }
.vd-filter button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--white); }
.vd-filter button[aria-pressed="true"] small{ color:inherit; }
.vd-status{ min-height:1.4em; margin:0 0 12px; font-size:.88rem; line-height:1.4; color:var(--muted); }
html:not(.js) .vd-status{ display:none; }

.vd-index{ container-type:inline-size; margin:0; padding:0; list-style:none; background:var(--white); border:1px solid var(--v2-card-line); border-radius:4px; box-shadow:var(--v2-shadow); }
.vd-entry{ display:grid; grid-template-columns:min(3.4rem, 54px) minmax(0,1fr); gap:4px 12px; padding:18px clamp(14px, 3vw, 26px) 18px clamp(12px, 2.4vw, 18px); min-width:0; }
.vd-entry[hidden]{ display:none; }
.vd-entry:not([hidden]) ~ .vd-entry:not([hidden]){ border-top:1px solid var(--v2-rule); }
.vd-entry__code{ font-family:var(--display); font-weight:700; font-size:.86rem; letter-spacing:.06em; color:var(--red-text); padding-top:4px; }
.vd-entry__body{ min-width:0; }
.vd-entry h3{ font-size:min(var(--v2-h3-fluid), max(var(--v2-h3-px), calc((100cqi - 90px) / 7.4))); line-height:1.2; letter-spacing:.01em; }
.vd-entry h3 a{ color:inherit; text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:2px; text-underline-offset:.2em; transition:text-decoration-color .2s var(--ease),color .2s var(--ease); }
.vd-entry h3 a:hover{ color:var(--red-deep); text-decoration-color:var(--red); }
.vd-entry__where{ margin-top:5px; font-size:.93rem; line-height:1.5; color:var(--muted); max-width:52ch; }
.vd-entry__meta{ grid-column:2; display:grid; margin:10px 0 0; border-top:1px solid var(--v2-rule); min-width:0; }
.vd-entry__meta > div{ display:grid; grid-template-columns:minmax(0,6.25rem) minmax(0,1fr); gap:10px; padding:8px 0; border-bottom:1px solid var(--v2-rule); min-width:0; }
.vd-entry__meta > div:last-child{ border-bottom:0; padding-bottom:0; }
.vd-entry__meta dt,.vd-club__facts dt{ font-family:var(--display); font-weight:600; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-top:.3em; }
.vd-entry__meta dd{ margin:0; font-family:var(--display); font-weight:600; font-size:.9rem; line-height:1.4; overflow-wrap:break-word; }
.vd-entry__meta a,.vd-club__facts a{ color:inherit; text-decoration:none; border-bottom:1.5px solid rgba(228,25,30,.55); }
.vd-entry__meta a:hover,.vd-club__facts a:hover{ color:var(--red-deep); border-bottom-color:var(--red); }
@container (max-width:20rem){
  .vd-entry{ grid-template-columns:minmax(0,1fr); }
  .vd-entry__meta{ grid-column:1; }
  .vd-entry__meta > div{ grid-template-columns:minmax(0,1fr); gap:2px; }
}
@container (min-width:52rem){
  .vd-entry{ grid-template-columns:min(3.6rem, 57.6px) minmax(0,5fr) minmax(0,6fr); column-gap:24px; align-items:start; padding-block:20px; }
  .vd-entry__meta{ grid-column:3; margin:0; border-top:0; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); column-gap:20px; }
  .vd-entry__meta > div{ display:grid; grid-template-columns:minmax(0,1fr); gap:4px; padding:0; border:0; }
  .vd-entry__meta dt{ padding-top:0; }
}

/* ---------- 5. Club cards (state pages) ---------------------------------
   The summary-card grammar of the club benchmark (white, red top rule,
   context line, ruled facts, one Enquire button), placed in the flow and
   never sticky. One card beside the section head for a one-club state;
   two cards side by side for a two-club state. */
.vd-clubs{ display:grid; gap:clamp(14px, 1.8vw, 24px); }
@container (min-width:44rem){ .vd-clubs{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.vd-club{ container-type:inline-size; display:flex; flex-direction:column; gap:14px; padding:22px var(--v2-inset) 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; }
.vd-club > *{ min-width:0; }
.vd-club h3{ font-size:min(clamp(1.25rem, calc(1.1rem + .5vw), 1.5rem), max(clamp(20px, calc(17.6px + .5vw), 24px), calc(100cqi / 8.4))); line-height:1.12; letter-spacing:-.005em; text-wrap:balance; }
.vd-club > p:not(.vd-club__state){ font-size:.96rem; line-height:1.6; color:var(--ip-text); max-width:60ch; }
.vd-club__facts{ display:grid; margin:0; border-top:1px solid var(--v2-rule); }
.vd-club__facts > div{ display:grid; grid-template-columns:minmax(0,6.5rem) minmax(0,1fr); gap:12px; padding:10px 0; border-bottom:1px solid var(--v2-rule); min-width:0; }
.vd-club__facts dd{ margin:0; font-family:var(--display); font-weight:600; font-size:.92rem; line-height:1.42; overflow-wrap:anywhere; }
.vd-club__facts address{ font-style:normal; }
/* Email addresses never break mid-word: bounded growth against the value
   column (the longest address sets --vd-mail-em on its own link). */
.vd-club__facts :is(a[href^="mailto:"],a[rel~="noopener"]){ font-size:min(.92rem, max(12.8px, calc((100cqi - 6.5rem - 12px) / var(--vd-mail-em, 12.2)))); }
.vd-club__acts{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:auto; padding-top:6px; }
.vd-club__acts .btn{ max-width:100%; text-align:center; line-height:1.3; }
/* V2.1.1: a card whose three actions do not fit one row (two club cards side
   by side at about 960 to 1180px) takes the same stacked form as tablets and
   phones: the button across the card, both text links together beneath it.
   Never "Club page" alone on its own line. */
@container (max-width:29.25rem){ .vd-club__acts:has(> :nth-child(3)) .btn{ width:100%; } }
@container (max-width:23rem){
  .vd-club__facts > div{ grid-template-columns:minmax(0,1fr); gap:3px; }
  .vd-club__facts :is(a[href^="mailto:"],a[rel~="noopener"]){ font-size:min(.92rem, max(12.8px, calc(100cqi / var(--vd-mail-em, 12.2)))); }
  .vd-club__acts .btn{ width:100%; }
}

/* ---------- 6. WA venues, north to south --------------------------------
   One quiet vertical rail (the dan-ladder grammar). WSKF Perth stops are
   open dots, WSKF Mandurah stops are red, and every row names its club. */
.vd-line{ container-type:inline-size; display:grid; margin:0; padding:6px clamp(16px, 2.4vw, 26px); list-style:none; background:var(--white); border:1px solid var(--v2-card-line); border-radius:4px; box-shadow:var(--v2-shadow); }
.vd-line > li{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:4px 16px; min-height:50px; padding:6px 0 6px 28px; min-width:0; }
.vd-line > li + li{ border-top:1px solid var(--v2-rule); }
.vd-line > li::before{ content:""; position:absolute; left:5px; top:0; bottom:0; width:2px; background:var(--grey-line); }
.vd-line > li:first-child::before{ top:50%; }
.vd-line > li:last-child::before{ bottom:50%; }
.vd-line > li::after{ content:""; position:absolute; left:0; top:50%; width:12px; height:12px; margin-top:-6px; border-radius:50%; background:var(--white); border:2px solid var(--ink); }
.vd-line > li.is-mandurah::after{ background:var(--red); border-color:var(--red); }
.vd-line b{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.02em; font-size:min(1.02rem, max(16px, calc((100cqi - 150px) / 7.2))); line-height:1.2; min-width:0; }
.vd-line b a{ color:var(--ink); text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:2px; text-underline-offset:.2em; transition:text-decoration-color .2s var(--ease),color .2s var(--ease); }
.vd-line b a:hover{ color:var(--red-deep); text-decoration-color:var(--red); }
.vd-line small{ font-family:var(--display); font-weight:600; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-align:right; }
.vd-line .is-mandurah small{ color:var(--red-text); }
@container (max-width:19rem){
  .vd-line > li{ grid-template-columns:minmax(0,1fr); }
  .vd-line small{ text-align:left; }
}
.vd-line__scale{ margin-top:10px; font-size:.84rem; line-height:1.45; color:var(--muted); }

/* ---------- 7. Motion ----------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .vd-states .i,.vd-entry h3 a,.vd-line b a,.vd-filter button,.vd-states--row a{ transition:none; }
}