/* ==========================================================================
   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}}

/* ---- 3b. Video OPTION: featured frame + ruled rail (comparison candidate,
   Hilwyn 2026-08-10; panel key wwd-videos-cinema) — echoes the homepage
   Court-in-Session broadcast-light anatomy: one large frame, quiet playlist. */
.wd-cin{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(1.6rem,3.5vw,3rem);align-items:stretch}
.wd-cin-frame{position:relative;display:block;aspect-ratio:16/9;border-radius:9px;overflow:hidden;
  background:linear-gradient(135deg,#1B2E4B 0%,#25417A 55%,#323392 100%)}
.wd-cin-frame::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%),
  linear-gradient(180deg,transparent 55%,rgba(4,16,38,.72) 100%)}
.wd-cin-frame .wd-pending{position:absolute;top:14px;left:14px;z-index:2}
.wd-cin-frame .wd-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:64px;height:64px;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}
.wd-cin-frame .wd-play svg{width:24px;height:24px;margin-left:3px}
.wd-cin-frame:hover .wd-play{transform:translate(-50%,-50%) scale(1.07)}
.wd-cin-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;gap:.2rem;padding:1.1rem 1.3rem}
.wd-cin-cap b{font-family:var(--sans);font-weight:700;font-size:1.12rem;color:#fff}
.wd-cin-cap span{font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.85);max-width:52ch}
.wd-cin-rail{display:flex;flex-direction:column}
.wd-cin-railhead{margin:0 0 .35rem;font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#323392}
.wd-cin-row{display:flex;gap:.95rem;align-items:flex-start;padding:1rem 0;border-top:1px solid rgba(21,35,59,.14)}
.wd-cin-row:first-of-type{border-top:0}
.wd-cin-ring{flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(50,51,146,.45);color:#323392;transition:background .18s ease,color .18s ease,border-color .18s ease}
.wd-cin-ring svg{width:15px;height:15px;margin-left:2px}
.wd-cin-channel .wd-cin-ring svg{margin-left:0}
.wd-cin-row:hover .wd-cin-ring{background:#323392;border-color:#323392;color:#fff}
.wd-cin-txt{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.wd-cin-txt b{font-family:var(--sans);font-weight:700;font-size:1rem;color:var(--teal);line-height:1.35}
.wd-cin-txt span{font-size:.9rem;line-height:1.5;color:var(--muted)}
@media(max-width:900px){.wd-cin{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}}