/* =====================================================
   THE VERITA POST — FOOTBALL HUB
   Scoped styles only. This file must never restyle the main site header.
   ===================================================== */

.vls-page,
.vls-match-page {
    --vls-ink: var(--text-primary, #1f2937);
    --vls-muted: var(--text-muted, #8b93a4);
    --vls-border: var(--border, #e5e7eb);
    --vls-card: var(--card, #ffffff);
    --vls-brand: var(--burgundy, #7f1d1d);
    --vls-deep: #0c2119;
    --vls-green: #22a660;
    --vls-gold: #e5c07b;
    color: var(--vls-ink);
}

.vls-page { padding: 34px 0 70px; }
.vls-shell { max-width: 1180px; }

.vls-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--vls-border);
}
.vls-kicker,
.vls-section-head span,
.vls-match-section-head > span {
    display: block;
    color: var(--vls-brand);
    font-family: var(--font-heading, sans-serif);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.vls-hero h1 {
    margin: 5px 0 6px;
    font-family: var(--font-serif, Georgia, serif);
    font-size: clamp(2rem, 4vw, 3.3rem);
    font-weight: 400;
    line-height: 1.02;
}
.vls-hero p { margin: 0; color: var(--text-secondary, #6b7280); font-size: .92rem; }
.vls-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary, #6b7280);
    font-size: .72rem;
    white-space: nowrap;
}
.vls-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vls-green);
    box-shadow: 0 0 0 4px rgba(34, 166, 96, .11);
}

.vls-main-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 20px 0 14px;
    overflow-x: auto;
    scrollbar-width: none;
}
.vls-main-tabs::-webkit-scrollbar,
.vls-competition-strip::-webkit-scrollbar { display: none; }
.vls-main-tabs a,
.vls-competition-strip a {
    flex: 0 0 auto;
    border: 1px solid var(--vls-border);
    border-radius: 999px;
    color: var(--text-secondary, #6b7280);
    background: transparent;
    text-decoration: none;
    font-family: var(--font-heading, sans-serif);
    font-weight: 700;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.vls-main-tabs a { padding: 9px 14px; font-size: .76rem; }
.vls-competition-strip a { padding: 7px 11px; font-size: .68rem; }
.vls-main-tabs a:hover,
.vls-competition-strip a:hover { color: var(--vls-brand); border-color: color-mix(in srgb, var(--vls-brand) 40%, var(--vls-border)); }
.vls-main-tabs a.active {
    background: var(--vls-deep);
    border-color: var(--vls-deep);
    color: #fff;
}
.vls-competition-strip {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: none;
}
.vls-competition-strip a.active {
    color: var(--vls-brand);
    border-color: rgba(127, 29, 29, .3);
    background: rgba(127, 29, 29, .06);
}

.vls-section { margin-top: 34px; }
.vls-two-col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 30px;
}
.vls-two-col > div { min-width: 0; }
.vls-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 11px;
    margin-bottom: 13px;
    border-bottom: 2px solid var(--rich-black, #111);
}
.vls-section-head h2 {
    margin: 2px 0 0;
    font-family: var(--font-serif, Georgia, serif);
    font-size: clamp(1.35rem, 2.5vw, 1.8rem);
    font-weight: 400;
    line-height: 1.1;
}
.vls-section-head a {
    color: var(--vls-brand);
    font-size: .7rem;
    font-weight: 700;
    text-decoration: none;
}
.vls-league-group + .vls-league-group { margin-top: 22px; }
.vls-league-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 9px;
}
.vls-league-heading::after { content: ""; flex: 1; height: 1px; background: var(--vls-border); }
.vls-league-heading h3 {
    margin: 0;
    color: var(--text-secondary, #6b7280);
    font-family: var(--font-heading, sans-serif);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.vls-match-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.vls-match {
    display: block;
    min-width: 0;
    padding: 13px 14px 11px;
    border: 1px solid var(--vls-border);
    border-radius: 11px;
    background: var(--vls-card);
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.vls-match:hover {
    transform: translateY(-1px);
    border-color: rgba(127, 29, 29, .28);
    box-shadow: 0 8px 20px rgba(17, 17, 17, .06);
}
.vls-match[data-state="live"],
.vls-match[data-state="halftime"] { border-left: 3px solid var(--vls-green); }
.vls-match-top,
.vls-match-bottom,
.vls-team-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}
.vls-match-top {
    margin-bottom: 10px;
    color: var(--vls-muted);
    font-family: var(--font-heading, sans-serif);
    font-size: .61rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.vls-status {
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary, #6b7280);
    font-size: .64rem;
}
.vls-status.is-live { color: var(--vls-green); }
.vls-team-line + .vls-team-line { margin-top: 7px; }
.vls-team-name {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.vls-team-name img,
.vls-team-name i {
    width: 25px;
    height: 25px;
    flex: 0 0 28px;
    object-fit: contain;
}
.vls-team-name i {
    border-radius: 50%;
    background: var(--border-light, #f3f4f6);
}
.vls-team-name strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .82rem;
}
.vls-team-line > b {
    flex: 0 0 auto;
    font-family: var(--font-serif, Georgia, serif);
    font-size: 1.12rem;
}
.vls-match-bottom {
    margin-top: 6px;
    padding-top: 9px;
    border-top: 1px solid var(--border-light, #f3f4f6);
    color: var(--vls-muted);
    font-size: .61rem;
}
.vls-match-bottom span:last-child {
    max-width: 48%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}
.vls-empty {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 18px 0;
    color: var(--text-secondary, #6b7280);
    border-bottom: 1px solid var(--vls-border);
}
.vls-empty strong { color: var(--vls-ink); font-size: .82rem; }
.vls-empty span { font-size: .76rem; }
.vls-footer-note {
    margin-top: 34px;
    padding-top: 13px;
    border-top: 1px solid var(--vls-border);
    color: var(--vls-muted);
    font-size: .65rem;
}

.vls-table-scroll { overflow-x: auto; }
.vls-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.vls-table th,
.vls-table td { padding: 11px 10px; border-bottom: 1px solid var(--vls-border); text-align: center; font-size: .75rem; }
.vls-table th { color: var(--vls-muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; }
.vls-table th:nth-child(2), .vls-table td:nth-child(2) { text-align: left; }
.vls-table-team { display: flex; align-items: center; gap: 9px; min-width: 180px; }
.vls-table-team img { width: 24px; height: 24px; object-fit: contain; }

/* Match centre */
.vls-match-page { padding: 26px 0 64px; }
.vls-match-shell { max-width: 1080px; }
.vls-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--vls-muted);
    font-size: .7rem;
}
.vls-breadcrumb a { color: var(--vls-brand); text-decoration: none; }
.vls-match-hero {
    overflow: hidden;
    border-radius: 17px;
    background: var(--vls-deep);
    color: #fff;
    box-shadow: 0 14px 34px rgba(12, 33, 25, .12);
}
.vls-match-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255,255,255,.09);
}
.vls-match-hero-top > span { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.vls-match-hero-top > strong { padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.09); font-size: .65rem; }
.vls-match-hero-top > strong.is-live { color: #83efb4; background: rgba(53,208,127,.13); }
.vls-match-scoreboard {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    align-items: center;
    gap: 22px;
    padding: 27px 22px 30px;
}
.vls-match-team {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.vls-match-team img,
.vls-match-team i { width: 70px; height: 70px; object-fit: contain; flex: 0 0 auto; }
.vls-match-team i { border-radius: 50%; background: rgba(255,255,255,.08); }
.vls-match-team h1 { margin: 0; max-width: 100%; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.vls-match-team > span { color: rgba(255,255,255,.55); font-size: .65rem; }
.vls-match-score { min-width: 150px; text-align: center; }
.vls-match-score > div { display: flex; align-items: center; justify-content: center; gap: 9px; }
.vls-match-score strong { font-family: var(--font-serif, Georgia, serif); font-size: 2.75rem; line-height: 1; font-weight: 400; }
.vls-match-score > div > span { opacity: .45; }
.vls-match-score .is-vs { font-family: var(--font-heading, sans-serif); font-size: .85rem; font-weight: 800; letter-spacing: .12em; }
.vls-match-score time,
.vls-match-score small { display: block; margin-top: 8px; color: rgba(255,255,255,.75); font-size: .68rem; }
.vls-match-score small { margin-top: 4px; color: rgba(255,255,255,.48); }
.vls-match-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 15px;
}
.vls-match-section {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--vls-border);
    border-radius: 12px;
    background: var(--vls-card);
}
.vls-match-section:has(.vls-lineups) { grid-column: 1 / -1; }
.vls-match-section.is-compact { grid-column: 1 / -1; }
.vls-match-section-head { padding: 12px 14px 10px; border-bottom: 1px solid var(--vls-border); }
.vls-match-section-head h2 { margin: 2px 0 0; font-family: var(--font-serif, Georgia, serif); font-size: 1.35rem; font-weight: 400; }
.vls-event-list,
.vls-goal-list { display: grid; }
.vls-event-row {
    display: grid;
    grid-template-columns: 48px minmax(0,1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-light, #f3f4f6);
}
.vls-event-row:last-child { border-bottom: 0; }
.vls-event-row > span { color: var(--vls-brand); font-size: .7rem; font-weight: 800; }
.vls-event-row > strong { min-width: 0; overflow-wrap: anywhere; font-size: .76rem; line-height: 1.4; }
.vls-event-row > small { color: var(--vls-muted); font-size: .62rem; text-align: right; }
.vls-event-row.is-goal > strong::before { content: "⚽"; margin-right: 6px; }
.vls-event-row.kind-yellow_card > strong::before { content: ""; display: inline-block; width: 8px; height: 11px; margin-right: 6px; border-radius: 1px; background: #e8c343; vertical-align: -1px; }
.vls-event-row.kind-red_card > strong::before { content: ""; display: inline-block; width: 8px; height: 11px; margin-right: 6px; border-radius: 1px; background: #c43b3b; vertical-align: -1px; }
.vls-stats { padding-bottom: 4px; }
.vls-stat-head,
.vls-stat-row { display: grid; grid-template-columns: minmax(0,1fr) 130px minmax(0,1fr); align-items: center; gap: 10px; text-align: center; }
.vls-stat-head { padding: 10px 14px 6px; color: var(--text-secondary, #6b7280); font-size: .67rem; }
.vls-stat-row { padding: 9px 14px; border-top: 1px solid var(--border-light, #f3f4f6); }
.vls-stat-row strong { font-size: .8rem; }
.vls-stat-row span { color: var(--vls-muted); font-size: .66rem; }
.vls-lineups { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
.vls-lineup-team { min-width: 0; padding: 15px; }
.vls-lineup-team + .vls-lineup-team { border-left: 1px solid var(--vls-border); }
.vls-lineup-team h3 { margin: 0 0 10px; font-size: .88rem; }
.vls-lineup-team ol { list-style: none; margin: 0; padding: 0; }
.vls-lineup-team ol li { display: grid; grid-template-columns: 28px minmax(0,1fr) 34px; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border-light, #f3f4f6); font-size: .72rem; }
.vls-lineup-team li > span { color: var(--vls-muted); }
.vls-lineup-team li > small { color: var(--vls-muted); text-align: right; }
.vls-lineup-team details { margin-top: 11px; }
.vls-lineup-team summary { cursor: pointer; color: var(--vls-brand); font-size: .68rem; font-weight: 700; }
.vls-lineup-team ul { columns: 2; margin: 8px 0 0; padding-left: 18px; color: var(--text-secondary, #6b7280); font-size: .68rem; }
.vls-officials { display: flex; flex-wrap: wrap; gap: 0; }
.vls-officials > div { min-width: 180px; padding: 12px 14px; }
.vls-officials strong, .vls-officials span { display: block; }
.vls-officials strong { font-size: .74rem; }
.vls-officials span { margin-top: 2px; color: var(--vls-muted); font-size: .62rem; }
.vls-match-quiet {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--vls-border);
    border-radius: 11px;
    color: var(--text-secondary, #6b7280);
    font-size: .72rem;
}
.vls-match-quiet strong { color: var(--vls-ink); }
.vls-match-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 16px;
}
.vls-match-actions a,
.vls-match-pending a {
    padding: 8px 11px;
    border: 1px solid var(--vls-border);
    border-radius: 999px;
    color: var(--vls-brand);
    text-decoration: none;
    font-size: .68rem;
    font-weight: 700;
}
.vls-match-pending {
    padding: clamp(24px, 5vw, 48px);
    border-radius: 15px;
    background: var(--vls-card);
    border: 1px solid var(--vls-border);
}
.vls-match-pending > span { color: var(--vls-brand); font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.vls-match-pending h1 { margin: 7px 0 6px; font-family: var(--font-serif, Georgia, serif); font-weight: 400; }
.vls-match-pending p { margin: 0 0 16px; color: var(--text-secondary, #6b7280); }

/* Global Premier League Hot Match card — V60.3.6 ultra-compact */
.vhm-widget {
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: 950;
    width: min(228px, calc(100vw - 24px));
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 11px;
    background: #0c2119;
    color: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,.20);
}
.vhm-widget[hidden] { display: none !important; }
.vhm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    padding: 5px 5px 5px 7px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.vhm-head > div { display: flex; align-items: center; gap: 4px; min-width: 0; }
.vhm-head strong { font-size: .52rem; letter-spacing: .055em; white-space: nowrap; }
.vhm-head small { color: var(--vls-gold); font-size: .44rem; font-weight: 800; letter-spacing: .055em; white-space: nowrap; }
.vhm-pulse { width: 5px; height: 5px; border-radius: 50%; background: #54d38f; box-shadow: 0 0 0 3px rgba(84,211,143,.09); }
.vhm-widget.is-live .vhm-pulse { animation: vhmPulse 1.6s infinite; }
@keyframes vhmPulse { 50% { box-shadow: 0 0 0 5px rgba(84,211,143,0); } }
.vhm-close {
    width: 21px;
    height: 21px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: rgba(255,255,255,.07);
    color: #fff;
    cursor: pointer;
    font-size: .82rem;
    line-height: 1;
}
.vhm-main { display: block; padding: 5px 7px 7px; color: inherit; text-decoration: none; }
.vhm-status {
    width: max-content;
    max-width: 100%;
    margin: 0 auto 4px;
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    color: #cbd8d0;
    font-size: .49rem;
    font-weight: 800;
    line-height: 1.35;
}
.vhm-widget.is-live .vhm-status { color: #8af2b8; background: rgba(53,208,127,.11); }
.vhm-teams { display: grid; grid-template-columns: minmax(0,1fr) 38px minmax(0,1fr); align-items: center; gap: 3px; }
.vhm-team { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.vhm-badge { display: grid; place-items: center; width: 21px; height: 21px; }
.vhm-badge img { width: 21px; height: 21px; object-fit: contain; }
.vhm-badge i { width: 19px; height: 19px; border-radius: 50%; background: rgba(255,255,255,.08); }
.vhm-team strong { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .54rem; line-height: 1.15; }
.vhm-score { display: flex; align-items: center; justify-content: center; gap: 3px; min-width: 0; }
.vhm-score strong { font-family: var(--font-serif, Georgia, serif); font-size: .96rem; font-weight: 400; line-height: 1; }
.vhm-score > span { opacity: .55; font-size: .58rem; }
.vhm-cta, .vhm-dots { display: none; }

[data-theme="dark"] .vls-match,
[data-theme="dark"] .vls-match-section,
[data-theme="dark"] .vls-match-pending { background: var(--card, #1a1a1a); }

@media (max-width: 820px) {
    .vls-two-col { grid-template-columns: 1fr; gap: 12px; }
    .vls-match-body { grid-template-columns: 1fr; }
    .vls-match-section:has(.vls-lineups), .vls-match-section.is-compact { grid-column: auto; }
}

@media (max-width: 640px) {
    .vls-page { padding-top: 24px; }
    .vls-shell, .vls-match-shell { padding-left: 16px; padding-right: 16px; }
    .vls-hero { align-items: flex-start; flex-direction: column; gap: 12px; }
    .vls-hero h1 { font-size: 2.05rem; }
    .vls-match-grid { grid-template-columns: 1fr; }
    .vls-match { padding: 12px; }
    .vls-match-scoreboard { grid-template-columns: minmax(0,1fr) 92px minmax(0,1fr); gap: 8px; padding: 22px 10px 24px; }
    .vls-match-team img, .vls-match-team i { width: 52px; height: 52px; }
    .vls-match-team h1 { font-size: .78rem; }
    .vls-match-score { min-width: 0; }
    .vls-match-score strong { font-size: 2rem; }
    .vls-match-score time, .vls-match-score small { font-size: .58rem; }
    .vls-stat-head, .vls-stat-row { grid-template-columns: minmax(0,1fr) 105px minmax(0,1fr); gap: 6px; }
    .vls-stat-row { padding: 9px 10px; }
    .vls-lineups { grid-template-columns: 1fr; }
    .vls-lineup-team + .vls-lineup-team { border-left: 0; border-top: 1px solid var(--vls-border); }
    .vls-event-row { grid-template-columns: 38px minmax(0,1fr); }
    .vls-event-row > small { grid-column: 2; text-align: left; }
    .vls-match-quiet { align-items: flex-start; flex-direction: column; }

    .vhm-widget {
        right: 8px;
        left: auto;
        bottom: 8px;
        width: min(212px, calc(100vw - 16px));
        border-radius: 10px;
        box-shadow: 0 8px 24px rgba(0,0,0,.19);
    }
    .vhm-head { padding: 4px 4px 4px 6px; }
    .vhm-head strong { font-size: .47rem; letter-spacing: .045em; }
    .vhm-head small { font-size: .4rem; }
    .vhm-close { width: 20px; height: 20px; border-radius: 6px; font-size: .78rem; }
    .vhm-main { padding: 4px 6px 6px; }
    .vhm-status { margin-bottom: 3px; padding: 1px 5px; font-size: .45rem; }
    .vhm-teams { grid-template-columns: minmax(0,1fr) 34px minmax(0,1fr); gap: 3px; }
    .vhm-team { gap: 1px; }
    .vhm-badge, .vhm-badge img { width: 19px; height: 19px; }
    .vhm-badge i { width: 18px; height: 18px; }
    .vhm-team strong { font-size: .5rem; }
    .vhm-score { gap: 2px; }
    .vhm-score strong { font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) {
    .vhm-widget.is-live .vhm-pulse { animation: none; }
    .vls-match { transition: none; }
}