/* ============================================================
   PETCO PARK feature page (petco-park.html)
   Night-game hero + live "On Deck" board, then standard site sections.
   ============================================================ */
.pp-hero{
  --pp-night:#0A1222; --pp-lamp:#F4BE55; --pp-ink:#EDF0F7; --pp-ink-2:#A9B3CB; --pp-ink-3:#76819C; --pp-line:rgba(169,179,203,.2);
  background:
    radial-gradient(ellipse 60% 50% at 62% 62%, rgba(244,190,85,.18), transparent 70%),
    radial-gradient(ellipse 90% 80% at 60% 60%, #1B2B50, transparent 75%),
    linear-gradient(180deg, #070D1A 0%, #101C36 70%, #0C162B 100%);
  color:var(--pp-ink); padding:40px 0 64px; overflow:hidden; color-scheme:dark;
}
.pp-hero .breadcrumb, .pp-hero .breadcrumb a{ color:var(--pp-ink-3); }
.pp-hero .eyebrow{ color:var(--pp-lamp); }
.pp-hero h1{ color:var(--pp-ink); font-size:clamp(46px,8vw,104px); line-height:.92; letter-spacing:-0.02em; }
.pp-hero .lede{ color:var(--pp-ink-2); max-width:520px; margin-top:18px; font-size:17px; }
.pp-hero-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:24px 40px; align-items:center; margin-top:18px; }
.pp-hero-img img{ height:auto; width:118%; max-width:none; margin-left:-6%; filter:drop-shadow(0 24px 40px rgba(0,0,0,.6)); }
.pp-facts{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--pp-line); border:1px solid var(--pp-line); border-radius:12px; overflow:hidden; margin-top:34px; }
.pp-fact{ background:#0E1830; padding:14px 16px; }
.pp-fact b{ display:block; font-family:'Fraunces', Georgia, serif; font-weight:560; font-size:30px; line-height:1; color:var(--pp-lamp); font-variant-numeric:tabular-nums; }
.pp-fact span{ display:block; margin-top:6px; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--pp-ink-3); }

/* live board */
.pp-live{ margin-top:22px; border:1px solid var(--pp-line); border-radius:12px; background:rgba(14,24,48,.85); padding:18px 20px; }
.pp-live-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px 16px; margin-bottom:6px; }
.pp-live-head h2{ font-size:22px; color:var(--pp-ink); }
.pp-live-head .pp-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:#4ADE80; margin-right:8px; box-shadow:0 0 0 4px rgba(74,222,128,.18); vertical-align:middle; }
.pp-offline .pp-dot{ background:var(--pp-ink-3); box-shadow:none; }
#pp-record{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.08em; color:var(--pp-lamp); }
#pp-status{ color:var(--pp-ink-2); font-size:14px; margin:8px 0 0; }
#pp-status:empty{ display:none; }
.pp-games{ list-style:none; margin:4px 0 0; padding:0; }
.pp-game{ display:grid; grid-template-columns:110px 1fr auto; gap:12px; align-items:center; padding:11px 0; border-top:1px solid var(--pp-line); font-size:15px; }
.pp-game:first-child{ border-top:0; }
.pp-date{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--pp-ink-3); text-transform:uppercase; letter-spacing:.04em; }
.pp-opp{ color:var(--pp-ink); }
.pp-type{ margin-left:8px; font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--pp-night); background:var(--pp-lamp); padding:2px 6px; border-radius:3px; vertical-align:middle; }
.pp-time, .pp-score{ font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--pp-ink-2); text-align:right; white-space:nowrap; }
.pp-score b{ color:#4ADE80; }
.pp-live-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.pp-pill{ display:inline-flex; align-items:center; gap:6px; padding:9px 15px; border-radius:999px; border:1px solid var(--pp-line); color:var(--pp-ink); font-size:13.5px; font-weight:500; }
.pp-pill:hover{ border-color:var(--pp-lamp); }
.pp-pill.solid{ background:var(--pp-lamp); border-color:var(--pp-lamp); color:var(--pp-night); }

/* body sections */
.pp-dims{ width:100%; border-collapse:collapse; margin-top:6px; }
.pp-dims td{ padding:12px 0; border-bottom:1px solid var(--line); }
.pp-dims td:last-child{ text-align:right; font-family:'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums; }
.pp-timeline{ list-style:none; margin:0; padding:0; border-left:1px solid var(--line); }
.pp-timeline li{ position:relative; padding:0 0 22px 24px; }
.pp-timeline li::before{ content:""; position:absolute; left:-5px; top:6px; width:9px; height:9px; border-radius:50%; background:var(--text); }
.pp-timeline .yr{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:.1em; color:var(--text-faint); }
.pp-timeline h3{ margin:2px 0 4px; }
.pp-links{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.pp-link{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 20px; border:1px solid var(--line); border-radius:12px; background:var(--bg-card); transition:border-color .2s, transform .2s; }
.pp-link:hover{ border-color:var(--text); transform:translateY(-2px); }
.pp-link b{ display:block; font-weight:600; }
.pp-link span{ font-size:13.5px; color:var(--text-soft); }
.pp-link i{ font-style:normal; font-size:18px; }
.pp-cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }

@media (max-width:860px){
  .pp-hero-grid{ grid-template-columns:1fr; }
  .pp-hero-img img{ width:100%; margin-left:0; }
  .pp-facts{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:520px){
  .pp-game{ grid-template-columns:1fr auto; }
  .pp-date{ grid-column:1 / -1; }
}