/* ==========================================================================
   WSKF Australia - v2-editorial.css   (Inner-page redesign, Step 3)
   Editorial group: Calendar, Articles, Enrol and contact, More.

   Loads after inner-v2.css (the foundation) and before a11y.css. Everything
   here is scoped to ve- classes used only by these four pages; nothing
   restyles a foundation or legacy class except where noted (event cards
   inside .ve-evs / .ve-feature).

   Same rules as the foundation: spacing in px, type in rem with bounded
   growth, column switches as container queries in rem (so 150% and 200%
   text fall back to fewer columns), dark surfaces set --red-text.
   ========================================================================== */


/* ---------- E1. Shared atoms ------------------------------------------- */
.ve-kick{ font-family:var(--display); font-weight:600; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; line-height:1.4; color:var(--muted); }
.ve-kick--red{ color:var(--red-text); }
.ve-arrow{ flex:none; width:1rem; height:1rem; color:var(--red); transition:transform .2s var(--ease); }

/* Event status ("Past", "Status pending"). */
.ve-status{ display:inline-flex; align-items:center; gap:7px; width:max-content; max-width:100%; padding:4px 9px; border:1px solid currentColor; border-radius:2px; font-family:var(--display); font-weight:600; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; line-height:1.3; color:var(--muted); }
.ve-status::before{ content:""; flex:none; width:6px; height:6px; border-radius:50%; background:currentColor; }
.ve-status--on-red{ color:#FFFFFF; }

/* Kind-of-event swatches: championships ink, seminars red, gradings outline. */
.ve-sw{ display:inline-block; flex:none; width:10px; height:10px; background:var(--ink); }
.ve-sw--s{ background:var(--red); }
.ve-sw--g{ background:transparent; border:2px solid var(--ink); }

/* An enquiry section opened by its chapter kicker only (the card carries
   its own heading). */
.ve-enq-k{ margin-bottom:clamp(14px, 1.6vw, 20px); }

/* Closing next step (light band, phone link, the hairline before the
   footer) and related descriptions: foundation since V2.1. */


/* ---------- E2. Calendar ----------------------------------------------- */
/* Hero legend: one ruled line under the lede. */
.ve-legend{ display:flex; flex-wrap:wrap; gap:8px 22px; margin:2px 0 0; padding:14px 0 0; list-style:none; border-top:1px solid var(--grey-line); }
@media (max-width:599px){ .ve-legend{ flex-direction:column; gap:8px; } }      /* a key, one item a line, never 2 + 1 */
.ve-legend li{ display:flex; align-items:center; gap:8px; font-family:var(--display); font-weight:600; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; line-height:1.3; }
/* Small caption plate on the hero photograph's corner. */
.ve-tag{ position:absolute; left:0; bottom:0; max-width:100%; padding:8px 12px; background:var(--ink); color:var(--white); border-radius:0 4px 0 4px; font-family:var(--display); font-weight:600; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; line-height:1.3; }

/* Featured event: the foundation event card, larger. Red date panel beside
   the details on tablets and up; stacked (date as a strip) on phones and
   with enlarged text. */
.ve-feature{ box-shadow:var(--v2-shadow); }
.ve-feature .ve-feature__date{ width:clamp(150px, 22%, 250px); align-content:space-between; justify-items:start; gap:20px; padding:clamp(20px, 2.6vw, 32px); text-align:left; }
.ve-feature__m{ font-family:var(--display); font-weight:700; text-transform:uppercase; line-height:.9; letter-spacing:-.02em; font-size:clamp(2.6rem, calc(1.8rem + 2.4vw), 4rem); }
.ve-feature__date .ve-feature__y{ display:block; margin-top:.18em; font-size:.42em; letter-spacing:.02em; }
.ve-feature__body{ gap:10px; padding:clamp(20px, 2.8vw, 36px); }
.ve-feature__body .ve-kick{ font-size:.68rem; color:var(--muted); }
.ve-feature__body h3{ font-size:min(clamp(1.25rem, calc(1rem + .9vw), 1.625rem), max(20px, calc((100cqi - 2 * var(--v2-inset)) / 12))); line-height:1.12; letter-spacing:-.01em; }
.ve-feature__body > p:not(.ve-kick){ max-width:62ch; font-size:min(var(--v2-body), max(16px, calc((100cqi - 2 * var(--v2-inset)) / 8.6))); line-height:1.6; }
.ve-feature__facts{ margin-top:8px; }
@container wskf-col (min-width:48rem){
  .ve-feature__facts{ grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:24px; border-top:0; }
  .ve-feature__facts > div{ display:block; padding:12px 0 0; border-top:1px solid var(--v2-rule); border-bottom:0; }
  .ve-feature__facts dd{ margin-top:5px; }
}
@container wskf-col (max-width:39.99rem){
  .ve-feature{ flex-direction:column; }
  .ve-feature .ve-feature__date{ width:auto; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:12px 16px; padding:18px var(--v2-inset); }
  .ve-feature__m{ font-size:clamp(2.2rem, calc(1.6rem + 2vw), 3rem); }
}
/* Narrow card or enlarged text: label over value is foundation behaviour
   for .v2-card__facts since V2.1. */

/* Archive: month groups, two across from 42rem (April | June, July |
   September and October), each a short stack of event cards. */
.ve-arch{ display:grid; gap:clamp(28px, 3.2vw, 40px) var(--v2-gap); }
@container wskf-col (min-width:42rem){ .ve-arch{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.ve-cal .v2-note a{ white-space:nowrap; }
.ve-month{ container-type:inline-size; min-width:0; padding-top:14px; border-top:2px solid var(--ink); }
.ve-month__h{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-bottom:14px; font-size:var(--v2-h3); line-height:1.2; }
.ve-month__h span{ font-size:.72rem; font-weight:600; letter-spacing:.14em; color:var(--muted); }
.ve-month .v2-cards{ grid-template-columns:minmax(0,1fr); gap:10px; }

/* Event card details (foundation .v2-card--event; its date panel grows with
   the reader's text since V2.1). */
.ve-evs .v2-card__date span{ color:rgba(255,255,255,.86); }
.ve-evs .v2-card__date--red span{ color:#FFFFFF; }
.ve-evs .v2-card__body{ gap:6px; padding:16px var(--v2-inset) 18px; }
.ve-evs h4{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.01em; line-height:1.25; font-size:min(1.0625rem, max(16px, calc((100cqi - max(96px, 5.6rem) - 2 * var(--v2-inset)) / 9.6))); }
.ve-evs .v2-card__body p{ font-size:.93rem; color:var(--muted); }
.ve-evs .ve-status{ margin-top:4px; }
@container (max-width:22rem){
  .ve-evs h4{ font-size:min(1.0625rem, max(16px, calc((100cqi - 2 * var(--v2-inset)) / 9.6))); }
  .ve-evs .v2-card__date{ width:auto; }
}

/* Kinds of event: three ruled columns. */
.ve-types{ display:grid; gap:0 clamp(20px, 2.6vw, 36px); }
.ve-types > div{ display:grid; gap:8px; align-content:start; min-width:0; padding:16px 0 20px; border-top:1px solid var(--v2-rule); }
.ve-types > div:last-child{ border-bottom:1px solid var(--v2-rule); }
.ve-types h3{ --v2-h3-em:11.4; display:flex; align-items:center; gap:10px; font-size:var(--v2-h3); line-height:1.2; }
.ve-types p{ max-width:52ch; font-size:.97rem; line-height:1.6; color:var(--ip-text); }
@container wskf-col (min-width:44rem){
  .ve-types{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ve-types > div{ border-top:2px solid var(--ink); }
  .ve-types > div:last-child{ border-bottom:0; }
}


/* ---------- E3. Enrol and contact -------------------------------------- */
/* Phone block in the hero: the number large but controlled. */
.ve-phone{ display:grid; gap:6px; justify-items:start; padding-top:16px; border-top:2px solid var(--ink); }
.ve-phone a{ display:inline-flex; align-items:center; gap:12px; max-width:100%; min-height:44px; font-family:var(--display); font-weight:700; line-height:1; letter-spacing:-.02em; color:var(--ink); text-decoration:none; font-size:min(clamp(2rem, calc(1.5rem + 1.6vw), 2.75rem), max(32px, calc(100cqi / 7.6))); }
.ve-phone a .i{ flex:none; width:.6em; height:.6em; color:var(--red); }
.ve-phone a:hover{ color:var(--red-deep); }
.ve-phone p:not(.ve-kick){ font-size:.95rem; line-height:1.5; color:var(--muted); }

/* Trust points beside the hero: a light card, never a dark slab. */
.ve-trust{ display:grid; min-width:0; 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); }
.ve-trust .ve-kick{ margin-bottom:8px; }
.ve-trust ul{ margin:0; padding:0; list-style:none; }
.ve-trust li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; padding:13px 0; border-top:1px solid var(--v2-rule); font-family:var(--display); font-weight:600; font-size:.95rem; line-height:1.45; }
.ve-trust li .i{ width:1.1rem; height:1.1rem; margin-top:.12em; color:var(--red); }
.ve-trust small{ display:block; padding-top:12px; border-top:1px solid var(--v2-rule); font-size:.82rem; line-height:1.5; color:var(--muted); }

/* The enquiry straight after the hero: a slightly shorter top. */
.ve-enq-first{ padding-top:var(--v2-sec-tight); }

/* Clubs by state on ink: state, its clubs, and an enquiry for that state,
   on one ruled row from 50rem. */
.ve-route{ margin:0; padding:0; list-style:none; border-bottom:1px solid var(--v2-rule-ink); }
.ve-route > li{ display:grid; gap:6px 24px; align-items:center; min-width:0; padding:14px 0 16px; border-top:1px solid var(--v2-rule-ink); }
.ve-route > li > *{ min-width:0; }
.ve-route__state{ display:inline-flex; align-items:center; min-height:44px; color:var(--white); text-decoration:none; font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.01em; line-height:1.2; font-size:var(--v2-h3); }
.ve-route__state small{ margin-left:8px; font-size:.66rem; font-weight:600; letter-spacing:.14em; color:var(--on-ink); }
.ve-route__state:hover > span{ text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:.25em; }
.ve-route__clubs{ display:flex; flex-wrap:wrap; gap:0 22px; }
.ve-route__clubs a{ display:inline-flex; align-items:center; min-height:44px; font-weight:600; font-size:.95rem; color:var(--paper); text-decoration:underline; text-decoration-color:rgba(255,255,255,.4); text-underline-offset:.25em; }
.ve-route__clubs a:hover{ color:var(--white); text-decoration-color:var(--red); }
.ve-route__go{ justify-self:start; display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 16px; border:1px solid rgba(255,255,255,.4); border-radius:2px; font-family:var(--display); font-weight:600; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--white); text-decoration:none; text-align:center; transition:background-color .2s var(--ease),color .2s var(--ease); }
.ve-route__go:hover{ background:var(--white); color:var(--ink); }
/* Phones: state and its enquiry button on one line, the clubs below. */
@container wskf-col (min-width:21rem) and (max-width:49.99rem){
  .ve-route > li{ grid-template-columns:minmax(0,1fr) auto; column-gap:14px; }
  .ve-route__go{ grid-column:2; grid-row:1; }
  .ve-route__clubs{ grid-column:1 / -1; }
}
/* One shared column grid for every row (subgrid), so states, clubs and
   buttons line up down the list. */
@container wskf-col (min-width:50rem){
  .ve-route{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,6fr) auto; column-gap:24px; }
  .ve-route > li{ grid-column:1 / -1; grid-template-columns:subgrid; padding:10px 0; }
  .ve-route__go{ justify-self:stretch; white-space:nowrap; }
}

/* Contact details under the questions heading. */
.ve-detail{ display:grid; margin:8px 0 0; border-top:1px solid var(--v2-rule); }
.ve-detail > div{ display:grid; gap:4px; padding:12px 0; border-bottom:1px solid var(--v2-rule); }
.ve-detail dt{ font-family:var(--display); font-weight:600; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.ve-detail dd{ margin:0; font-family:var(--display); font-weight:600; font-size:.95rem; line-height:1.5; }
.ve-detail a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:.2em; }
.ve-detail a:hover{ color:var(--red-deep); }
.ve-faqhead{ container-type:inline-size; }
@container (min-width:21rem){
  .ve-detail > div{ grid-template-columns:7.5rem minmax(0,1fr); gap:12px; align-items:baseline; }
}


/* ---------- E4. Articles ----------------------------------------------- */
/* Masthead: title left, lede right, on one bottom line. */
.ve-mast__grid{ display:grid; gap:14px var(--v2-gap); align-items:end; }
.ve-mast__grid > *{ min-width:0; }
.ve-mast__title{ container-type:inline-size; display:grid; gap:clamp(14px, 1.5vw, 20px); }
.ve-mast__sub .v2-hero__lede{ max-width:56ch; }
@container wskf-main (min-width:56.25rem){
  .ve-mast__grid{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
  .ve-mast__sub .v2-hero__lede{ padding-bottom:.1em; }
}

/* Lead article: photograph and copy in one card. */
.ve-lead{ display:grid; overflow:hidden; background:var(--white); border:1px solid var(--v2-card-line); border-radius:4px; box-shadow:var(--v2-shadow); }
.ve-lead > *{ min-width:0; }
.ve-lead__media{ margin:0; }
.ve-lead__media .v2-media{ width:100%; height:100%; border-radius:0; }
.ve-lead__copy{ container-type:inline-size; display:grid; align-content:center; gap:14px; padding:clamp(22px, 3.2vw, 48px); }
.ve-lead__copy h2{ font-size:var(--v2-h2); line-height:1.08; letter-spacing:-.015em; text-wrap:balance; }
.ve-lead__copy > p:not(.ve-kick){ max-width:46ch; font-size:var(--v2-body); line-height:1.62; color:var(--ip-text); }
.ve-lead__copy .v2-actions{ margin-top:6px; }
@container wskf-col (min-width:52rem){ .ve-lead{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); } }
/* Medium widths: image and copy share the card evenly so the heading keeps
   two lines. 1280 and wider keep 7 / 5. */
@container wskf-col (min-width:52rem) and (max-width:1187.5px){ .ve-lead{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Topics as editorial cards: six cards, three entries each. */
.ve-themes{ display:grid; gap:clamp(12px, 1.6vw, 20px); }
@container wskf-col (min-width:40rem){ .ve-themes{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@container wskf-col (min-width:62rem){ .ve-themes{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.ve-theme{ container-type:inline-size; display:flex; flex-direction:column; min-width:0; padding:var(--v2-inset) var(--v2-inset) 6px; background:var(--white); border:1px solid var(--v2-card-line); border-top:3px solid var(--ink); border-radius:4px; }
.ve-theme__h{ display:flex; align-items:baseline; gap:10px; padding-bottom:12px; }
.ve-theme__n{ font-family:var(--display); font-weight:700; font-size:.78rem; letter-spacing:.08em; color:var(--red-text); font-variant-numeric:tabular-nums; }
.ve-theme__h h2{ font-size:var(--v2-h3); line-height:1.2; }
.ve-entries{ margin:0; padding:0; list-style:none; }
.ve-entries > li{ border-top:1px solid var(--v2-rule); }
.ve-entries a{ display:grid; gap:4px; min-height:44px; padding:14px 0 16px; color:inherit; text-decoration:none; }
.ve-entries h3{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:min(1rem, max(16px, calc(100cqi / 12.5))); line-height:1.25; letter-spacing:.01em; }
.ve-entries h3 .ve-arrow{ width:.95rem; height:.95rem; transform:translateY(.1em); }
.ve-entries p{ font-size:.92rem; line-height:1.5; color:var(--muted); }
.ve-entries a:hover h3{ color:var(--red-deep); }
.ve-entries a:hover .ve-arrow{ transform:translate(3px, .1em); }

/* Older articles: a quiet ruled note aligned to the card columns. */
.ve-archnote{ display:grid; gap:8px clamp(12px, 1.6vw, 20px); margin-top:clamp(24px, 3vw, 40px); padding:18px var(--v2-inset); border:1px solid var(--v2-card-line); border-radius:4px; }
.ve-archnote h2{ font-size:var(--v2-h3); line-height:1.2; }
.ve-archnote p{ max-width:72ch; font-size:.95rem; line-height:1.6; color:var(--muted); }
@container wskf-col (min-width:62rem){
  .ve-archnote{ grid-template-columns:repeat(3,minmax(0,1fr)); align-items:baseline; }
  .ve-archnote p{ grid-column:2 / -1; }
}


/* ---------- E5. More (hub) --------------------------------------------- */
/* The hub's own directory in the hero. */
.ve-jump{ container-type:inline-size; display:grid; gap:10px; min-width:0; }
.ve-jump ol{ margin:0; padding:0; list-style:none; border-top:2px solid var(--ink); }
.ve-jump a{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px; min-height:52px; padding:8px 2px; border-bottom:1px solid var(--v2-rule); color:var(--ink); text-decoration:none; }
.ve-jump__n{ font-family:var(--display); font-weight:700; font-size:.74rem; letter-spacing:.08em; color:var(--red-text); font-variant-numeric:tabular-nums; }
.ve-jump b{ font-family:var(--display); font-weight:700; font-size:min(.98rem, max(15.68px, calc((100cqi - 70px) / 12))); letter-spacing:.03em; text-transform:uppercase; line-height:1.25; }
.ve-jump .i{ width:1rem; height:1rem; color:var(--red); transform:rotate(90deg); transition:transform .2s var(--ease); }
.ve-jump a:hover b{ color:var(--red-deep); }
.ve-jump a:hover .i{ transform:rotate(90deg) translateX(3px); }

/* Link rows: title, one line, arrow. Used for the organisation and the
   worldwide links. */
.ve-rows{ container-type:inline-size; margin:0; padding:0; list-style:none; border-top:2px solid var(--ink); min-width:0; }
.ve-rows > li{ border-bottom:1px solid var(--v2-rule); }
.ve-row{ position:relative; display:grid; gap:4px; min-height:44px; padding:16px 40px 16px 0; color:inherit; text-decoration:none; }
.ve-row b{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.02em; line-height:1.25; font-size:min(1.0625rem, max(16px, calc((100cqi - 40px) / 11))); }
.ve-row__d{ max-width:58ch; font-size:.93rem; line-height:1.5; color:var(--muted); }
.ve-row .ve-arrow{ position:absolute; right:4px; top:19px; }
.ve-row:hover b{ color:var(--red-deep); }
.ve-row:hover .ve-arrow{ transform:translateX(3px); }
/* Instructor sub-links (V2.1 polish): one row when all three fit, otherwise
   a stacked list of equal-width links, never two plus one. */
.ve-sub{ display:grid; grid-template-columns:minmax(0,1fr); gap:6px; padding:0 0 16px; }
@container (min-width:41.875rem){ .ve-sub{ grid-template-columns:repeat(3,auto); justify-content:start; } }
.ve-sub a{ display:flex; align-items:center; min-height:44px; padding:0 10px; border:1px solid rgba(0,0,0,.18); border-radius:2px; background:var(--white); font-family:var(--display); font-weight:600; font-size:.76rem; line-height:1.3; color:var(--ink); text-decoration:none; }
.ve-sub a:hover{ border-color:var(--ink); color:var(--red-deep); }
.ve-fig{ margin:0; }
/* On ink. */
.ve-rows--ink{ border-top-color:var(--red); }
.ve-rows--ink > li{ border-bottom-color:var(--v2-rule-ink); }
.ve-rows--ink .ve-row b{ color:var(--white); }
.ve-rows--ink .ve-row__d{ color:var(--on-ink); }
.ve-rows--ink .ve-row:hover b{ color:var(--white); text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:.22em; }

/* Benefits: the lead column (head, red member panel, link) beside a ruled,
   numbered list of the personal benefits. */
.ve-ben-lead{ container-type:inline-size; display:grid; gap:20px; align-content:start; justify-items:start; min-width:0; }
.ve-ben-lead > *{ max-width:100%; }
.ve-redpanel{ display:grid; gap:6px; width:100%; padding:var(--v2-inset); background:var(--red); color:#FFFFFF; border-radius:4px; text-decoration:none; transition:background-color .2s var(--ease); }
.ve-redpanel .ve-kick{ color:#FFFFFF; }
.ve-redpanel b{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.01em; line-height:1.2; font-size:min(1.25rem, max(18px, calc((100cqi - 80px) / 10))); }
.ve-redpanel .ve-arrow{ color:#FFFFFF; }
.ve-redpanel > span:last-child{ font-size:.95rem; line-height:1.5; }
.ve-redpanel:hover{ background:var(--red-deep); }
.ve-redpanel:hover .ve-arrow{ transform:translateX(3px); }
.ve-blist{ container-type:inline-size; min-width:0; }
.ve-blist .ve-blist__t{ margin-top:0; }
.ve-blist ol{ margin:0; padding:0; list-style:none; border-top:2px solid var(--ink); }
.ve-blist a{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; min-height:54px; padding:10px 2px; border-bottom:1px solid var(--v2-rule); color:var(--ink); text-decoration:none; }
.ve-blist__n{ font-family:var(--display); font-weight:700; font-size:.74rem; letter-spacing:.08em; color:var(--red-text); font-variant-numeric:tabular-nums; }
.ve-blist b{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.03em; line-height:1.25; font-size:min(1.0625rem, max(16px, calc((100cqi - 80px) / 10.6))); }
.ve-blist a:hover b{ color:var(--red-deep); }
.ve-blist a:hover .ve-arrow{ transform:translateX(3px); }

/* Japan and the world: the page's one dark band; two photographs close it. */
.ve-world .v2-head p:not(.cap){ color:var(--on-ink); }
.ve-world__ext{ margin-top:4px; }
.ve-world__media{ display:grid; gap:clamp(12px, 1.6vw, 20px); margin-top:clamp(32px, 4vw, 56px); }
@container wskf-col (min-width:40rem){ .ve-world__media{ grid-template-columns:repeat(2,minmax(0,1fr)); } }