/* ==========================================================================
   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 #FAF6EE · card #FFFDF8 · ink #1B1712 · brick #C0391B ·
   press red #9E2B12 · sand #F2E9D7 · hairline #E0D7C3 · dotted #A99E8A.
   Text on the ink plate uses cream / sand / lifted-cream tones only
   (all ≥ 4.5:1 on #1B1712); 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:#FAF6EE;
  --bible-card:#FFFDF8;
  --bible-ink:#1B1712;
  --bible-ink-soft:#3A322A;
  --bible-ink-dim:#6E6557;
  --bible-red:#C0391B;
  --bible-red-deep:#9E2B12;
  --bible-rule:#E0D7C3;
  --bible-serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --w3-sand:#F2E9D7;
  --w3-sand-soft:#FBF7EC;
  --w3-dotted:#A99E8A;
  --w3-cream-dim:#CFC4AC;
  --w3-cream-faint:#A79B83;
  color:#1B1712;
}
body .pvhub a:focus-visible{outline:2px solid #C0391B;outline-offset:2px}

/* ---------- 1. MASTHEAD — the ink plate (mirrors the MLS dark hero zone) --- */
body .pvhub-mast{
  background:#1B1712;
  border-top:4px solid #C0391B;
  border-bottom:0;
  padding:28px 28px 24px;
  margin-top:16px;
}
body .pvhub-mast .pvhub-kicker{color:#E8DCC0}
body .pvhub-mast h1{color:#FAF6EE}
body .pvhub-stand{color:#E3D9C4;max-width:74ch}
body .pvhub-updated{color:#A79B83}

/* ---------- 2. SCOREBOARD STRIP — sand band; LIVE chips go ink ---------- */
body .pvhub-strip{
  background:#F2E9D7;
  border:1px solid #E0D7C3;
  border-top:3px solid #1B1712;
  padding:14px 12px 12px;
  margin-top:18px;
}
body .pvhub-chip{border-radius:0}
body .pvhub-chip:has(.pvhub-live){
  background:#1B1712;border-color:#1B1712;color:#FAF6EE}
body .pvhub-chip:has(.pvhub-live) .lg{color:#CFC4AC}
body .pvhub-chip:has(.pvhub-live) .nm{color:#FAF6EE}
body .pvhub-chip:has(.pvhub-live) .sc{color:#FAF6EE}
body .pvhub-chip:has(.pvhub-live):hover{border-color:#C0391B}

/* ---------- 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 #1B1712;background:#1B1712}
body .pvhub-lead .bd{background:#1B1712}
body .pvhub-lead h3{color:#FAF6EE}
body .pvhub-dek{color:#E3D9C4}
body .pvhub-src{color:#A79B83}
body .pvhub-tag{
  background:#C0391B;color:#FFFDF8;
  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(27,23,18,0) 0%,rgba(27,23,18,.58) 46%,rgba(27,23,18,.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:#FBF7EC}
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:#F2E9D7;
  border-bottom:2px solid #1B1712;
  border-left:4px solid #C0391B;
  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:#FBF7EC;border-bottom:1px solid #A99E8A;
  padding:6px 10px;font-size:17px}
body .pvhub-mrow{border-radius:0;padding:13px 12px}
body .pvhub-mrow:hover{background:#FBF7EC;border-color:#C0391B}
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:#1B1712;color:#FAF6EE;
  border-bottom:3px solid #C0391B;letter-spacing:.08em}
body .pvhub-table tbody tr:nth-child(even) td{background:#FBF7EC}
body .pvhub-table tbody tr:hover td{background:#F2E9D7}
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:#F2E9D7;border-bottom:2px solid #1B1712}
body .pvhub-leaders li:first-child .val{color:#C0391B;font-size:22px}

/* ---------- 8. BRIDGES / CARDS / RIVER / DOORS / CLUBS ------------------- */
body .pvhub-bridges{border-radius:0;border-top:3px solid #1B1712}
body .pvhub-card{border-radius:0}
body .pvhub-card:hover{background:#FBF7EC}
body .pvhub-river a:hover{background:#FBF7EC}
@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:3px solid #C0391B}
body .pvhub-door-card:hover{background:#F2E9D7;border-color:#E0D7C3}
body .pvhub-club{border-radius:0}
body .pvhub-club:hover{background:#F2E9D7;border-color:#C0391B}
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}
}