/* ==========================================================================
   What We Do (page 29346) — richer treatment, 2026-08-10 (Hilwyn: "a lot sexier").
   Reuses the site design system (brand tokens, split rules, seam diamond, cards)
   and adds four page-specific blocks: the two-role showcase, an at-a-glance
   figures strip, a video row with play posters, and editorial onward links.
   Loaded only on this page (functions.php), so nothing here can leak site-wide.
   ========================================================================== */

/* ---- 1. The two roles: full-bleed split, one seal colour per panel ---------- */
/* Editorial diptych, labels boxed (Hilwyn 2026-08-10, v5): type on the parchment as
   in v3 — serif numeral on a drafting rule, seam + diamond divider — with ONLY the
   jurisdiction label line sitting in a solid seal-coloured box. */
.wd-roles{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.4rem,6vw,5.5rem);padding-block:clamp(.6rem,1.5vw,1.4rem)}
.wd-roles::before{content:"";position:absolute;top:-1%;bottom:-1%;left:50%;width:2px;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,#323392 32%,var(--base-gold) 47%,var(--base-gold) 53%,#01A3DD 68%,transparent 100%)}
.wd-roles::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;transform:translate(-50%,-50%) rotate(45deg);
  background:var(--base-gold);box-shadow:0 0 0 2.5px #eeeae2;pointer-events:none}
.wd-role{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.wd-num{display:flex;align-items:center;gap:1.1rem;width:100%;margin-bottom:.2rem}
.wd-num b{font-family:var(--serif);font-weight:700;font-size:clamp(2.4rem,3.6vw,3.2rem);line-height:1;letter-spacing:.02em}
.wd-num i{flex:1;height:1px;background:rgba(21,35,59,.16)}
.wd-role-orig .wd-num b{color:#323392}
.wd-role-appel .wd-num b{color:#0E86BD}
/* the text line alone carries the colour */
.wd-kicker{display:inline-block;padding:.36rem .7rem;border-radius:3px;font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#fff}
.wd-role-orig .wd-kicker{background:#323392}   /* Logo Royal */
.wd-role-appel .wd-kicker{background:#0186BD}  /* deep Logo Cyan — true #01A3DD is too light under white caps this small */
.wd-role h2{font-size:clamp(1.45rem,2.2vw,1.85rem);line-height:1.18;margin:0;color:var(--teal);max-width:24ch}
.wd-role p{font-size:1.02rem;line-height:1.66;margin:0;color:var(--muted);max-width:50ch}
.wd-role .link{margin-top:.35rem}
.wd-role .link .arrow{width:17px;height:17px;transition:transform .18s ease}
.wd-role .link:hover .arrow{transform:translateX(3px)}
@media(max-width:900px){
  .wd-roles{grid-template-columns:1fr;gap:2.2rem}
  .wd-roles::before,.wd-roles::after{display:none}
  .wd-role-appel{border-top:1px solid rgba(21,35,59,.14);padding-top:2rem}
}

/* helper note under the roles, on the page ground */
.wd-help{display:flex;gap:.9rem;align-items:flex-start;margin-top:var(--space-heading);padding:1.15rem 1.4rem;border-radius:9px;
  background:#F6F4F0;border:1px solid rgba(21,35,59,.07);font-size:1rem;line-height:1.6;color:var(--ink)}
.wd-help svg{width:20px;height:20px;flex:none;margin-top:.15rem;color:#323392}

/* ---- 2. At a glance: dark figures strip ------------------------------------ */
.wd-figures{background:linear-gradient(150deg,#0E2140 0%,#13294B 60%,#1B3A66 100%);color:#fff;
  padding-block:clamp(2.6rem,5vw,4rem)}
.wd-figures .sec-head{margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.wd-figures .sec-head h2{color:#fff}
.wd-figures .sec-head .lede{color:var(--muted-on-dark)}
.wd-figures .sec-head h2::after{background:linear-gradient(90deg,#01A3DD 0 46px,transparent 46px 52px,var(--gold) 52px)}  /* dark-band split rule: cyan + gold */
/* figures as a ledger row (Hilwyn 2026-08-10 — tiles retired): type straight on the
   navy band, columns separated by hairline rules, each figure under its own
   cyan+gold micro split-rule. */
.wd-figgrid{display:grid;grid-template-columns:repeat(4,1fr)}
.wd-fig{padding:.35rem clamp(1.4rem,2.6vw,2.2rem);border-left:1px solid rgba(255,255,255,.18)}
.wd-fig:first-child{border-left:0;padding-left:0}
.wd-fig b{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(2.7rem,4.6vw,3.7rem);line-height:1;color:#fff}
.wd-fig span{display:block;margin-top:.6rem;font-size:.95rem;line-height:1.5;color:var(--muted-on-dark);max-width:24ch}
.wd-fig i{display:block;width:38px;height:3px;margin-bottom:1.05rem;border-radius:2px;
  background:linear-gradient(90deg,#01A3DD 0 26px,transparent 26px 31px,var(--base-gold) 31px)}
@media(max-width:900px){
  .wd-figgrid{grid-template-columns:repeat(2,1fr);row-gap:2.2rem}
  .wd-fig:nth-child(odd){border-left:0;padding-left:0}
}
@media(max-width:520px){
  .wd-figgrid{grid-template-columns:1fr;row-gap:1.8rem}
  .wd-fig{border-left:0;padding-inline:0}
}

/* ---- 3. Video row: 16:9 posters with a play badge --------------------------- */
.wd-vids{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-grid)}
.wd-vid{display:flex;flex-direction:column;background:#fff;border-radius:9px;overflow:hidden;
  box-shadow:0 2px 10px rgba(20,35,63,.06);transition:transform .2s ease,box-shadow .2s ease}
.wd-vid:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(20,35,63,.14)}
.wd-poster{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#1B2E4B 0%,#25417A 55%,#323392 100%);overflow:hidden}
.wd-poster::after{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse 60% 70% at 78% 20%,rgba(1,163,221,.35),transparent 62%),
  radial-gradient(ellipse 50% 60% at 12% 92%,rgba(50,51,146,.5),transparent 65%)}
.wd-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.94);color:#323392;
  box-shadow:0 8px 22px rgba(4,16,38,.34);transition:transform .2s ease,background .2s ease}
.wd-play svg{width:22px;height:22px;margin-left:3px}
.wd-vid:hover .wd-play{transform:translate(-50%,-50%) scale(1.07);background:#fff}
.wd-vidbody{padding:1.15rem 1.3rem 1.35rem}
.wd-vidbody h3{font-size:1.06rem;line-height:1.35;margin:0 0 .4rem;color:var(--teal)}
.wd-vidbody p{font-size:.94rem;line-height:1.55;color:var(--muted);margin:0}
.wd-pending{display:inline-block;margin-bottom:.55rem;padding:.22rem .6rem;border-radius:999px;background:#FFF7E6;border:1px dashed #D97706;
  color:#92400E;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
@media(max-width:900px){.wd-vids{grid-template-columns:1fr}}


/* ---- 4. Onward links: ledger columns, no cards (Hilwyn 2026-08-10) ----------
   Each destination is a column of type under a hairline rule; the site's split
   rule (royal + cyan dash) sits on the rule and stretches royal on hover. */
.wd-next{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.8rem,4vw,3.2rem)}
.wd-nextcard{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;padding-top:1.35rem;border-top:1px solid rgba(21,35,59,.16)}
.wd-nextcard::before{content:"";position:absolute;left:0;top:-2px;height:3px;width:64px;border-radius:1px;
  background:linear-gradient(90deg,#323392 0 46px,transparent 46px 52px,#01A3DD 52px);transition:width .22s ease}
.wd-nextcard:hover::before{width:96px}
.wd-nextcard h3{font-size:1.14rem;margin:0;color:var(--teal)}
.wd-nextcard p{font-size:.97rem;line-height:1.62;color:var(--muted);margin:0;max-width:38ch}
.wd-nextcard .wd-go{display:inline-flex;align-items:center;gap:.45rem;margin-top:.4rem;font-family:var(--sans);font-weight:600;font-size:.94rem;color:var(--blue)}
.wd-nextcard .wd-go svg{width:16px;height:16px;transition:transform .18s ease}
.wd-nextcard:hover .wd-go svg{transform:translateX(3px)}
@media(max-width:900px){.wd-next{grid-template-columns:1fr;gap:1.9rem}}

/* ---------- Judgments overview (page-judgments-overview.php, Hilwyn 2026-10-02) — the
   two-role split from What We Do, each role carrying its count, newest three judgments
   and the way through to its full table. ---------- */
.jo-count{margin:.2rem 0 -.2rem;font-family:var(--sans);font-size:.92rem;color:var(--muted)}
.jo-count b{font-size:1.15rem;color:var(--teal);font-variant-numeric:tabular-nums}
.jo-latest{list-style:none;margin:0;padding:0;width:100%;border-top:1px solid rgba(21,35,59,.14)}
.jo-latest li{border-bottom:1px solid rgba(21,35,59,.14)}
.jo-item{display:grid;grid-template-columns:6.4rem minmax(0,1fr);column-gap:1rem;row-gap:.15rem;padding:.85rem 0;text-decoration:none;color:inherit}
.jo-item time{grid-row:span 2;font-family:var(--sans);font-size:.82rem;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:.15rem}
.jo-title{font-weight:600;color:var(--teal);line-height:1.4}
.jo-cite{font-family:var(--sans);font-size:.82rem;color:var(--muted)}
a.jo-item:hover .jo-title,a.jo-item:focus-visible .jo-title{text-decoration:underline;text-underline-offset:3px}
.wd-role-orig a.jo-item:hover .jo-title{color:#323392}
.wd-role-appel a.jo-item:hover .jo-title{color:#0E86BD}
.jo-all{display:inline-flex;align-items:center;gap:.5rem;margin-top:.5rem;padding:.75rem 1.15rem;border-radius:5px;font-family:var(--sans);font-weight:600;font-size:.95rem;color:#fff;text-decoration:none;transition:background .18s ease}
.jo-all svg{width:17px;height:17px;transition:transform .18s ease}
.jo-all:hover svg{transform:translateX(3px)}
.wd-role-orig .jo-all{background:#323392}
.wd-role-orig .jo-all:hover{background:#282A7E}
.wd-role-appel .jo-all{background:#0186BD}
.wd-role-appel .jo-all:hover{background:#0A6E99}
.wd-help a{color:#323392;font-weight:600}
@media(max-width:600px){.jo-item{grid-template-columns:1fr}.jo-item time{grid-row:auto}}

/* ---------- The Court, explained — real videos (H01, CCJ round 3, 2026-10-02) ----------
   Cards keep the existing .wd-vid frame; the poster is now the video's own thumbnail, and a
   press swaps it for the privacy-enhanced player in place. */
.wd-vgroup+.wd-vgroup{margin-top:clamp(2.6rem,5vw,3.6rem)}
.wd-vhead{margin:0 0 1.2rem;font-family:var(--sans);font-size:.8rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#323392}
.wd-yt{position:relative;display:block;width:100%;aspect-ratio:16/9;max-width:100%;padding:0;border:0;background:#0B1B36;cursor:pointer;overflow:hidden}
.wd-yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.3,.7,.3,1)}
.wd-yt::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,18,44,0) 45%,rgba(3,18,44,.45) 100%);pointer-events:none}
.wd-vid:hover .wd-yt img,.wd-yt:focus-visible img{transform:scale(1.04)}
.wd-yt:focus-visible{outline:3px solid #01A3DD;outline-offset:-3px}
.wd-yt .wd-play{z-index:1}
.wd-vnum{position:absolute;left:12px;top:12px;z-index:1;padding:.18rem .55rem;border-radius:3px;background:rgba(3,18,44,.78);color:#fff;font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.wd-ytframe{display:block;width:100%;aspect-ratio:16/9;max-width:100%;border:0;background:#000}
.wd-vidbody h4{font-size:1.04rem;line-height:1.4;margin:0 0 .55rem;color:var(--teal)}
.wd-vkicker{display:block;margin-bottom:.35rem;font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#0186BD}
.wd-ytlink{font-family:var(--sans);font-size:.86rem;font-weight:600;color:#323392;text-decoration:none}
.wd-ytlink:hover{text-decoration:underline;text-underline-offset:3px}
.wd-channel{margin:clamp(1.8rem,3.5vw,2.4rem) 0 0}
.wd-channel a{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--sans);font-weight:600;color:#323392;text-decoration:none}
.wd-channel svg{width:16px;height:16px;transition:transform .18s ease}
.wd-channel a:hover svg{transform:translateX(3px)}
@media(min-width:601px) and (max-width:900px){.wd-vids{grid-template-columns:repeat(2,1fr)}}