/* ============================================================
   Vikings vs Colts matchup page
   Class prefix: vco- (Vikings/Colts)
   ============================================================ */

.page-matchupcenter { background:#f3f3f5; }

.vco-shell { max-width:1200px; margin:0 auto; padding:0 16px; }

/* ---------- breadcrumb ---------- */
.vco-crumb { background:#fff; border-bottom:1px solid #d2d2de; }
.vco-crumb ol { list-style:none; display:flex; align-items:center; gap:8px; margin:0; padding:12px 0; font:500 13px/1.3 "Roboto Condensed", sans-serif; color:#5d5d66; flex-wrap:wrap; }
.vco-crumb li:not(:last-child)::after { content:"/"; margin-left:8px; color:#d2d2de; }
.vco-crumb a { color:#5d5d66; text-decoration:none; }
.vco-crumb a:hover, .vco-crumb a:focus-visible { color:#4f2683; text-decoration:underline; }
.vco-crumb [aria-current="page"] { color:#1a1a1a; }

/* ---------- hero ---------- */
.vco-hero { position:relative; color:#fff; overflow:hidden; }
.vco-hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; z-index:0; }
.vco-hero-scrim { position:absolute; inset:0; background:linear-gradient(90deg, rgba(25,19,37,.92) 0%, rgba(25,19,37,.72) 38%, rgba(25,19,37,.28) 68%, rgba(25,19,37,.15) 100%); z-index:1; }
.vco-hero-in { position:relative; z-index:2; padding:64px 16px 48px; display:grid; grid-template-columns:1.3fr 1fr; gap:32px; align-items:end; }
.vco-hero-tag { display:inline-block; background:#44cee3; color:#191325; font:700 12px/1 "Oswald", sans-serif; letter-spacing:.08em; text-transform:uppercase; padding:6px 12px; border-radius:5px; margin:0 0 16px; }
.vco-hero h1 { font:700 clamp(34px,6vw,58px)/1.02 "Oswald", sans-serif; text-transform:uppercase; margin:0 0 16px; letter-spacing:.01em; }
.vco-hero-sub { font:400 16px/1.55 "Roboto Condensed", sans-serif; max-width:46ch; margin:0 0 24px; color:#e9e6f0; }
.vco-hero-cta { display:inline-flex; align-items:center; gap:8px; background:#44cee3; color:#191325; font:700 15px/1 "Oswald", sans-serif; text-transform:uppercase; letter-spacing:.04em; padding:14px 22px; border-radius:5px; text-decoration:none; min-height:44px; }
.vco-hero-cta:hover, .vco-hero-cta:focus-visible { background:#fff; }
.vco-hero-cta .ar { width:16px; height:16px; }

/* game selector card */
.vco-selector { background:rgba(25,19,37,.88); border:1px solid rgba(255,255,255,.14); border-radius:5px; padding:24px; backdrop-filter:blur(3px); }
.vco-selector h2 { font:600 13px/1 "Oswald", sans-serif; text-transform:uppercase; letter-spacing:.08em; color:#44cee3; margin:0 0 16px; }
.vco-vs { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.vco-vs-team { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; font:600 13px/1.2 "Roboto Condensed", sans-serif; flex:1; }
.vco-vs-team img { width:52px; height:52px; }
.vco-vs-mid { font:700 13px/1 "Oswald", sans-serif; color:#44cee3; }
.vco-selector select { width:100%; min-height:44px; border-radius:5px; border:1px solid rgba(255,255,255,.25); background:#191325; color:#fff; font:500 14px/1 "Roboto Condensed", sans-serif; padding:0 12px; margin-bottom:12px; }
.vco-selector .vco-note { font:400 12px/1.4 "Roboto Condensed", sans-serif; color:#c7c2d4; margin:0; }

/* ---------- sections ---------- */
.vco-sec { padding:48px 0; }
.vco-sec.vco-white { background:#fff; }
.vco-sec.vco-dark { background:#191325; color:#f3f3f5; }
.vco-kicker { font:700 12px/1 "Oswald", sans-serif; text-transform:uppercase; letter-spacing:.1em; color:#4f2683; margin:0 0 8px; }
.vco-dark .vco-kicker { color:#44cee3; }
.vco-h2 { font:600 26px/1.15 "Oswald", sans-serif; text-transform:uppercase; letter-spacing:.01em; margin:0 0 16px; color:#1a1a1a; }
.vco-dark .vco-h2 { color:#fff; }
.vco-deck { font:400 15px/1.55 "Roboto Condensed", sans-serif; color:#5d5d66; max-width:70ch; margin:0 0 24px; }
.vco-dark .vco-deck { color:#c7c2d4; }
.vco-p { font:400 15px/1.6 "Roboto Condensed", sans-serif; color:#3a3a42; max-width:76ch; margin:0 0 16px; }
.vco-dark .vco-p { color:#dcd9e4; }
.vco-note { font:400 13px/1.5 "Roboto Condensed", sans-serif; color:#5d5d66; font-style:italic; margin:16px 0 0; }

/* ---------- series summary ---------- */
.vco-series { display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:start; }
.vco-bal-bar { display:flex; height:38px; border-radius:5px; overflow:hidden; font:700 13px/1 "Oswald", sans-serif; }
.vco-bal-bar span { display:flex; align-items:center; padding:0 12px; color:#fff; white-space:nowrap; }
.vco-bal-min { background:#4f2683; }
.vco-bal-ind { background:#191325; justify-content:flex-end; }
.vco-bal-legend { display:flex; flex-wrap:wrap; gap:16px 24px; margin-top:12px; font:400 13px/1.3 "Roboto Condensed", sans-serif; color:#5d5d66; }
.vco-bal-legend b { color:#1a1a1a; font-weight:700; }

.vco-table-wrap { overflow-x:auto; background:#fff; border:1px solid #d2d2de; border-radius:5px; }
.vco-table { width:100%; border-collapse:collapse; font:400 14px/1.4 "Roboto Condensed", sans-serif; min-width:420px; }
.vco-table caption { text-align:left; padding:12px 16px; font:600 13px/1.2 "Oswald", sans-serif; text-transform:uppercase; letter-spacing:.03em; color:#5d5d66; border-bottom:1px solid #d2d2de; }
.vco-table th, .vco-table td { padding:10px 16px; text-align:left; border-bottom:1px solid #ececf1; }
.vco-table thead th { background:#f3f3f5; font:700 12px/1 "Oswald", sans-serif; text-transform:uppercase; letter-spacing:.04em; color:#5d5d66; }
.vco-table tbody tr:last-child td, .vco-table tbody tr:last-child th { border-bottom:none; }
.vco-table tbody th[scope="row"] { font-weight:600; color:#1a1a1a; white-space:nowrap; }
.vco-win { color:#1c7a3c; font-weight:600; }
.vco-loss { color:#a3243a; font-weight:600; }

/* ---------- last meeting ---------- */
.vco-lastmeet { display:grid; grid-template-columns:.9fr 1.1fr; gap:32px; align-items:start; }
.vco-lm-card { background:#fff; border:1px solid #d2d2de; border-radius:5px; padding:24px; }
.vco-lm-score { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.vco-lm-team { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; font:600 14px/1.2 "Roboto Condensed", sans-serif; flex:1; }
.vco-lm-team img { width:56px; height:56px; }
.vco-lm-pts { font:700 34px/1 "Oswald", sans-serif; color:#1a1a1a; }
.vco-lm-pts.vco-win-pts { color:#4f2683; }
.vco-lm-meta { list-style:none; margin:0; padding:16px 0 0; border-top:1px solid #ececf1; display:grid; gap:8px; font:400 14px/1.4 "Roboto Condensed", sans-serif; color:#3a3a42; }
.vco-lm-meta b { color:#5d5d66; font-weight:600; margin-right:6px; }

.vco-scoring { display:grid; gap:12px; }
.vco-scoring-row { display:flex; gap:12px; align-items:baseline; padding:12px 16px; background:#fff; border:1px solid #d2d2de; border-radius:5px; }
.vco-scoring-row img { width:24px; height:24px; flex:none; }
.vco-scoring-row p { margin:0; font:400 14px/1.45 "Roboto Condensed", sans-serif; color:#3a3a42; }
.vco-scoring-row b { color:#1a1a1a; }

/* ---------- stat tables (passing/rushing/receiving) ---------- */
.vco-stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.vco-stat-col h3 { font:600 15px/1 "Oswald", sans-serif; text-transform:uppercase; letter-spacing:.03em; margin:0 0 12px; display:flex; align-items:center; gap:8px; }
.vco-stat-col h3 img { width:22px; height:22px; }
.vco-stat-empty { padding:20px 16px; font:400 14px/1.5 "Roboto Condensed", sans-serif; color:#5d5d66; text-align:center; }

/* ---------- team comparison ---------- */
.vco-compare { overflow-x:auto; background:#fff; border:1px solid #d2d2de; border-radius:5px; }
.vco-compare table { width:100%; border-collapse:collapse; font:400 14px/1.4 "Roboto Condensed", sans-serif; min-width:520px; }
.vco-compare th, .vco-compare td { padding:12px 16px; border-bottom:1px solid #ececf1; text-align:center; }
.vco-compare thead th { font:700 13px/1 "Oswald", sans-serif; text-transform:uppercase; letter-spacing:.03em; }
.vco-compare thead th:first-child, .vco-compare td:first-child { text-align:left; color:#5d5d66; font-weight:600; }
.vco-compare thead .vco-th-min { background:#4f2683; color:#fff; }
.vco-compare thead .vco-th-ind { background:#191325; color:#fff; }
.vco-compare tbody tr:last-child td { border-bottom:none; }

/* ---------- playoff / notable meetings ---------- */
.vco-notable { display:grid; gap:24px; }
.vco-note-card { display:grid; grid-template-columns:220px 1fr; gap:24px; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,.12); }
.vco-note-card:last-child { border-bottom:none; padding-bottom:0; }
.vco-note-when { font:700 14px/1.3 "Oswald", sans-serif; color:#44cee3; margin:0; }
.vco-note-when small { display:block; font:400 12px/1.4 "Roboto Condensed", sans-serif; color:#c7c2d4; text-transform:none; letter-spacing:0; margin-top:4px; }
.vco-note-h3 { font:600 18px/1.3 "Oswald", sans-serif; margin:0 0 8px; color:#fff; }
.vco-note-card p { margin:0; font:400 14px/1.55 "Roboto Condensed", sans-serif; color:#dcd9e4; }

/* ---------- viewing guide ---------- */
.vco-watch-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.vco-watch-card { background:#fff; border:1px solid #d2d2de; border-radius:5px; padding:20px; display:flex; flex-direction:column; gap:8px; text-decoration:none; min-height:44px; }
.vco-watch-card h3 { font:600 15px/1.3 "Oswald", sans-serif; color:#1a1a1a; margin:0; text-transform:uppercase; letter-spacing:.02em; }
.vco-watch-card p { margin:0; font:400 13px/1.5 "Roboto Condensed", sans-serif; color:#5d5d66; }
.vco-watch-card .vco-watch-link { margin-top:auto; font:700 13px/1 "Oswald", sans-serif; text-transform:uppercase; letter-spacing:.03em; color:#4f2683; display:inline-flex; align-items:center; gap:6px; }
.vco-watch-card:hover, .vco-watch-card:focus-visible { border-color:#4f2683; }

/* ---------- related coverage ---------- */
.vco-related { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.vco-rel-card { display:block; background:#fff; border:1px solid #d2d2de; border-radius:5px; padding:20px; text-decoration:none; min-height:44px; }
.vco-rel-eyebrow { font:700 11px/1 "Oswald", sans-serif; text-transform:uppercase; letter-spacing:.08em; color:#4f2683; margin:0 0 8px; }
.vco-rel-card h3 { font:600 16px/1.3 "Oswald", sans-serif; color:#1a1a1a; margin:0 0 8px; }
.vco-rel-card p { margin:0; font:400 13px/1.5 "Roboto Condensed", sans-serif; color:#5d5d66; }
.vco-rel-card:hover h3, .vco-rel-card:focus-visible h3 { color:#4f2683; }

/* ---------- sources ---------- */
.vco-src { margin-top:32px; padding-top:24px; border-top:1px solid #d2d2de; }
.vco-src p { font:600 13px/1 "Oswald", sans-serif; text-transform:uppercase; letter-spacing:.03em; color:#5d5d66; margin:0 0 12px; }
.vco-src ul { margin:0; padding:0 0 0 18px; font:400 13px/1.6 "Roboto Condensed", sans-serif; color:#5d5d66; }
.vco-src a { color:#4f2683; }

/* ---------- focus states ---------- */
.vco-shell a:focus-visible, .vco-selector select:focus-visible { outline:3px solid #44cee3; outline-offset:2px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:900px) {
  .vco-hero-in { grid-template-columns:1fr; }
  .vco-series { grid-template-columns:1fr; }
  .vco-lastmeet { grid-template-columns:1fr; }
  .vco-stat-grid { grid-template-columns:1fr; }
  .vco-related, .vco-watch-grid { grid-template-columns:1fr; }
  .vco-note-card { grid-template-columns:1fr; }
}

@media (max-width:600px) {
  .vco-hero-bg { object-position:75% center; }
  .vco-hero-in { padding:48px 16px 32px; }
  .vco-hero h1 { font-size:clamp(30px,9vw,40px); }
}