/* ==========================================================================
   WAVE 3 — SOCCER FRONTS COMPOSITION (2026-10-14)
   James: "the soccer hub is very flat — needs a redo… MLS is kind of designed
   a little better than everything else as far as the soccer goes."
   Family: /sports/soccer/ · /sports/premier-league/ · /sports/laliga/ ·
   /sports/ucl/ (the pvhub fronts; links injected by build_intl_fronts.py
   page_shell + bake_pl_front.py, after wave2-soccer.css, before the pages'
   inline <style> — same `body .pvhub` specificity game wave2 plays).
   CSS-only: zero markup, zero JS, zero data/copy changes. The generators
   and live feeds keep owning scores, tables, fixtures and story selection.
   What this adds (mirroring the MLS hv2 hub's composition, in Package A
   language): a dark masthead plate, a sand scoreboard band with an ink
   treatment for LIVE chips, a photographic hero lead (headline over the
   photo on an ink gradient at desktop, ink plate under the photo on
   phone), plated section heads, denser match rows, a zebra table with an
   ink header band, a highlighted leaders' top row, and brick-barred doors.
   Tokens: cream #A5ACAF · card #101010 · ink #101010 · brick #FFFFFF ·
   press red #6E7478 · sand #1B1B1B · hairline #2C2C2C · dotted #7E858B.
   Text on the ink plate uses cream / sand / lifted-cream tones only
   (all ≥ 4.5:1 on #101010); brick appears on dark only as bars and the
   filled tag plate (white text on brick = 5.9:1).
   LOCKED: .pv-league-nav untouched (nav crew owns it); form-chip W/D/L
   held colors untouched; wave2 skin stays loaded underneath.
   ========================================================================== */

/* ---------- 0. SCOPED TOKENS (brings the soccer front, which never got
   the wave2 link's token parity, onto the same values) ---------- */
body .pvhub{
  --bible-bg:#A5ACAF;
  --bible-card:#101010;
  --bible-ink:#A5ACAF;
  --bible-ink-soft:#959DA2;
  --bible-ink-dim:#8C9399;
  --bible-red:#E10600;
  --bible-red-deep:#6E7478;
  --bible-rule:#2C2C2C;
  --bible-serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --w3-sand:#1B1B1B;
  --w3-sand-soft:#101010;
  --w3-dotted:#7E858B;
  --w3-cream-dim:#959DA2;
  --w3-cream-faint:#8C9399;
  color:#A5ACAF;
}
body .pvhub a:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}

/* ---------- 1. MASTHEAD — the ink plate (mirrors the MLS dark hero zone) --- */
body .pvhub-mast{
  background:#101010;
  border-top:4px solid #FFFFFF;
  border-bottom:0;
  padding:28px 28px 24px;
  margin-top:16px;
}
body .pvhub-mast .pvhub-kicker{color:#FFFFFF}
body .pvhub-mast h1{color:#A5ACAF}
body .pvhub-stand{color:#959DA2;max-width:74ch}
body .pvhub-updated{color:#8C9399}

/* ---------- 2. SCOREBOARD STRIP — sand band; LIVE chips go ink ---------- */
body .pvhub-strip{
  background:#1B1B1B;
  border:1px solid #2C2C2C;
  border-top:1px solid #2C2C2C;
  padding:14px 12px 12px;
  margin-top:18px;
}
body .pvhub-chip{border-radius:0}
body .pvhub-chip:has(.pvhub-live){
  background:#1B1B1B;border-color:#E10600;color:#FFFFFF}
body .pvhub-chip:has(.pvhub-live) .lg{color:#8C9399}
body .pvhub-chip:has(.pvhub-live) .nm{color:#FFFFFF}
body .pvhub-chip:has(.pvhub-live) .sc{color:#FFFFFF}
body .pvhub-chip:has(.pvhub-live):hover{border-color:#E10600}

/* ---------- 3. HERO LEAD — headline over the photo (MLS hv2-hero move) --- */
body .pvhub-sec{margin-top:42px}
body .pvhub-lead{
  border-radius:0;border:2px solid #101010;background:#101010}
body .pvhub-lead .bd{background:#101010}
body .pvhub-lead h3{color:#FFFFFF}
body .pvhub-dek{color:#959DA2}
body .pvhub-src{color:#8C9399}
body .pvhub-tag{
  background:#E10600;color:#FFFFFF;
  padding:3px 8px 2px;margin-bottom:10px}
@media(min-width:900px){
  body .pvhub-leadgrid{gap:22px}
  body .pvhub-lead{position:relative}
  body .pvhub-lead img{aspect-ratio:16/10}
  body .pvhub-lead .bd{
    position:absolute;left:0;right:0;bottom:0;
    padding:64px 24px 20px;
    background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.58) 46%,rgba(0,0,0,.94) 100%)}
  body .pvhub-lead h3{font-size:clamp(27px,3.4vw,38px);line-height:1.12}
  body .pvhub-dek{font-size:15.5px}
}
/* side stories — bigger thumbs, plate hover */
body .pvhub-side a{padding:13px 8px}
body .pvhub-side a:hover{background:#101010}
body .pvhub-side img{width:108px;height:80px;border-radius:0;flex-basis:108px}
body .pvhub-side b{font-size:15.5px}

/* ---------- 4. SECTION HEADS — sand plates with a brick bar ---------- */
body .pvhub-sechead{
  background:transparent;
  border-bottom:1px solid #2C2C2C;
  border-left:0;
  padding:10px 14px;
  margin-bottom:18px;
  align-items:center;
}
body .pvhub-sechead h2{font-size:27px}

/* ---------- 5. FIXTURES & RESULTS — denser, squared, sand day bands ----- */
body .pvhub-day{
  background:#101010;border-bottom:1px solid #7E858B;
  padding:6px 10px;font-size:17px}
body .pvhub-mrow{border-radius:0;padding:13px 12px}
body .pvhub-mrow:hover{background:#101010;border-color:#E10600}
body .pvhub-mteam{font-size:15px}
body .pvhub-mteam .sc{font-size:18px}

/* ---------- 6. TABLE — ink header band, zebra rows ---------------------- */
body .pvhub-table th{
  background:#060606;color:#A5ACAF;
  border-bottom:1px solid #2C2C2C;letter-spacing:.08em}
body .pvhub-table tbody tr:nth-child(even) td{background:#101010}
body .pvhub-table tbody tr:hover td{background:#1B1B1B}
body .pvhub-table td{padding:8px 6px}

/* ---------- 7. LEADERS — the top row is a plate ------------------------- */
body .pvhub-leaders li{padding:9px 8px}
body .pvhub-leaders li:first-child{
  background:#1B1B1B;border-bottom:1px solid #2C2C2C}
body .pvhub-leaders li:first-child .val{color:#D7DBDD;font-size:22px}

/* ---------- 8. BRIDGES / CARDS / RIVER / DOORS / CLUBS ------------------- */
body .pvhub-bridges{border-radius:0;border-top:1px solid #2C2C2C}
body .pvhub-card{border-radius:0}
body .pvhub-card:hover{background:#101010}
body .pvhub-river a:hover{background:#101010}
@media(min-width:900px){
  body .pvhub-river img{width:132px;height:94px;border-radius:0;flex-basis:132px}
  body .pvhub-river b{font-size:16px}
}
body .pvhub-door-card{
  border-radius:0;border-top:1px solid #2C2C2C}
body .pvhub-door-card:hover{background:#1B1B1B;border-color:#2C2C2C}
body .pvhub-club{border-radius:0}
body .pvhub-club:hover{background:#1B1B1B;border-color:#E10600}
body .pvhub-club img{width:56px;height:56px}

/* ---------- 9. PHONE (390) — plate padding tightens, hero stacks -------- */
@media(max-width:640px){
  body .pvhub-mast{padding:22px 18px 19px;margin-top:10px}
  body .pvhub-sechead{padding:9px 12px}
  body .pvhub-sechead h2{font-size:23px}
  body .pvhub-sec{margin-top:34px}
  body .pvhub-strip{margin-top:14px;padding:12px 10px 10px}
  body .pvhub-side img{width:92px;height:68px;flex-basis:92px}
}

/* RAIDERS P2 residual: page ground + bible chrome flip */
html,body{background:#000000}
:root{--bible-bg:#000000;--bible-card:#101010;--bible-ink:#A5ACAF;--bible-ink-soft:#959DA2;--bible-ink-dim:#8C9399;--bible-red:#E10600;--bible-red-deep:#6E7478;--bible-rule:#2C2C2C;--bible-cream:#A5ACAF;--bible-cream-dim:rgba(165,172,175,.82);--bible-peach:#D7DBDD;--bible-champagne:#D7DBDD;--bible-fdf:#101010;--bible-win:#FFFFFF}
