/* v245 clean polish
   Scope: spacing, compact sidebar width, prediction cards, sitemap-safe visual polish.
   This file is loaded last and deliberately avoids rebuilding the hero or moving sidebars into the main column. */

:root {
    --kisure-sticky-top: 104px;
}

@media (min-width: 992px) {
    .sticky-sidebar,
    aside.sticky-sidebar,
    .sidebar-stack.sticky-sidebar,
    .article-rail.sticky-sidebar,
    .football-sidebar-stack.sticky-sidebar,
    .football-match-sidebar-stack.sticky-sidebar,
    [data-kisure-sticky-sidebar] {
        top: var(--kisure-sticky-top) !important;
        align-self: flex-start !important;
        height: max-content !important;
        max-height: none !important;
        overflow: visible !important;
        position: -webkit-sticky !important;
        position: sticky !important;
        transform: none !important;
        width: 100% !important;
        z-index: 20 !important;
    }

    .sidebar-stack.sticky-sidebar,
    .article-rail.sticky-sidebar,
    .football-sidebar-stack.sticky-sidebar,
    .football-match-sidebar-stack.sticky-sidebar {
        display: grid !important;
        gap: .85rem !important;
    }

    .sticky-sidebar.is-js-sticky-fixed,
    .sticky-sidebar.is-kisure-sticky-fixed,
    .sticky-sidebar.is-kisure-sticky-bottom,
    .is-js-sticky-fixed,
    .is-kisure-sticky-fixed,
    .is-kisure-sticky-bottom,
    [data-kisure-sticky-sidebar][data-kisure-sticky-mode] {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: var(--kisure-sticky-top) !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        transform: none !important;
        width: 100% !important;
        will-change: auto !important;
    }

    .content-grid {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 315px) !important;
        gap: clamp(1rem, 1.45vw, 1.55rem) !important;
        align-items: start !important;
    }

    .article-shell,
    .article-main-section,
    .main-content-wrapper {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 330px) !important;
        gap: clamp(1rem, 1.45vw, 1.55rem) !important;
        align-items: start !important;
    }

    .football-layout,
    .football-layout--wide-main,
    .football-prediction-layout {
        grid-template-columns: minmax(0, 1fr) minmax(270px, 330px) !important;
        gap: clamp(1rem, 1.6vw, 1.65rem) !important;
        align-items: start !important;
    }

    .football-layout--match-page {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 330px) !important;
        gap: clamp(1.05rem, 1.55vw, 1.7rem) !important;
        align-items: start !important;
    }

    .content-grid > section,
    .content-grid > aside,
    .football-layout > div,
    .football-layout > aside,
    .football-prediction-main,
    .football-match-main-column {
        min-width: 0 !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    :root { --kisure-sticky-top: 98px; }

    .content-grid,
    .article-shell,
    .article-main-section,
    .main-content-wrapper,
    .football-layout,
    .football-layout--wide-main,
    .football-layout--match-page,
    .football-prediction-layout {
        grid-template-columns: minmax(0, 1fr) minmax(250px, 300px) !important;
    }
}

/* Match and prediction cards: add space between stacked panels without changing hero structure. */
.football-match-main-column,
.football-prediction-main {
    display: grid !important;
    gap: clamp(1.15rem, 1.8vw, 1.75rem) !important;
    align-content: start !important;
}

.football-match-main-column > .football-section,
.football-prediction-main > .football-section,
.football-prediction-main > .football-prediction-day,
.football-prediction-detail-page .football-prediction-result-card,
.football-prediction-detail-page .football-prediction-market-grid,
.football-prediction-detail-page .football-prediction-analysis-grid {
    margin-block: 0 !important;
}

.football-section--match-stats-inline {
    margin-top: clamp(1rem, 1.6vw, 1.45rem) !important;
}

.football-prediction-layout .football-side-panel,
.football-layout--match-page .football-side-panel,
.content-grid .site-panel,
.content-grid .surface-card,
.content-grid .ad-slot {
    border-radius: 24px !important;
}

/* Homepage: avoid squeezing the main news cards when a desktop sidebar is present. */
@media (min-width: 992px) and (max-width: 1499.98px) {
    .content-grid .news-grid,
    .content-grid .news-grid--cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1500px) {
    .content-grid .news-grid,
    .content-grid .news-grid--cards {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Homepage showcase: when the side cards become too narrow, place title below image. */
@media (min-width: 992px) and (max-width: 1500px) {
    .site-panel--hero.hero-grid.hero-grid--showcase .story-tiles--showcase .story-tile--showcase {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: start !important;
    }

    .site-panel--hero.hero-grid.hero-grid--showcase .story-tiles--showcase .story-tile__media {
        aspect-ratio: 16 / 9 !important;
        width: 100% !important;
    }
}

/* Prediction list redesign */
.football-prediction-league-list {
    display: grid;
    gap: clamp(1rem, 1.6vw, 1.45rem);
}

.football-prediction-league-group {
    background: linear-gradient(135deg, rgba(14,165,164,.06), rgba(255,255,255,.74));
    border: 1px solid rgba(14,165,164,.16);
    border-radius: 26px;
    display: grid;
    gap: 1rem;
    padding: clamp(.85rem, 1.4vw, 1.15rem);
}

.football-prediction-league-group__head {
    align-items: center;
    display: flex;
    gap: .8rem;
}

.football-prediction-league-group__logo {
    align-items: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    display: inline-flex;
    flex: 0 0 auto;
    height: 54px;
    justify-content: center;
    width: 54px;
}

.football-prediction-league-group__logo img {
    height: 38px;
    object-fit: contain;
    width: 38px;
}

.football-prediction-league-group__head h3 {
    color: var(--bg-contrast);
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    line-height: 1.05;
    margin: 0;
}

.football-prediction-league-group__head p {
    color: var(--text-soft);
    font-weight: 800;
    margin: .2rem 0 0;
}

.football-prediction-grid--league {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.football-prediction-card--club {
    gap: .9rem;
    padding: 1rem;
}

.football-prediction-card__teams {
    align-items: center;
    display: grid;
    gap: .65rem;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    text-align: center;
}

.football-prediction-card__teams > span {
    align-items: center;
    background: var(--surface-strong);
    border: 1px solid var(--border);
    border-radius: 18px;
    display: grid;
    gap: .45rem;
    min-height: 112px;
    min-width: 0;
    padding: .8rem .6rem;
}

.football-prediction-card__teams img,
.football-prediction-card__teams b {
    align-items: center;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    display: inline-flex;
    height: 46px;
    justify-content: center;
    margin: 0 auto;
    object-fit: contain;
    padding: 4px;
    width: 46px;
}

.football-prediction-card__teams strong {
    color: var(--bg-contrast);
    font-size: .92rem;
    line-height: 1.16;
    overflow-wrap: anywhere;
}

.football-prediction-card__teams > em {
    background: var(--primary);
    border-radius: 999px;
    color: #fff;
    font-size: .72rem;
    font-style: normal;
    font-weight: 900;
    padding: .4rem .5rem;
    text-transform: uppercase;
}

.football-prediction-card__top span {
    align-items: center;
    display: inline-flex;
    gap: .35rem;
}

/* Prediction detail professional polish */
.football-prediction-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin: .85rem 0 0;
}

.football-prediction-detail-meta span {
    align-items: center;
    background: rgba(14,165,164,.10);
    border: 1px solid rgba(14,165,164,.18);
    border-radius: 999px;
    color: var(--primary-strong);
    display: inline-flex;
    font-size: .82rem;
    font-weight: 900;
    gap: .4rem;
    padding: .5rem .72rem;
}

.football-prediction-detail-page .football-prediction-match-hero {
    gap: clamp(1rem, 2vw, 1.6rem);
}

.football-prediction-detail-page .football-prediction-result-card {
    border-color: rgba(14,165,164,.18);
    box-shadow: 0 18px 46px rgba(15,23,42,.07);
}

.football-prediction-detail-page .football-prediction-scoreline {
    border-radius: 28px;
    padding: clamp(1.2rem, 2.8vw, 2rem);
}

.football-prediction-detail-page .football-prediction-scoreline strong {
    letter-spacing: -.06em;
}

@media (max-width: 991.98px) {
    .content-grid,
    .football-layout,
    .football-layout--wide-main,
    .football-layout--match-page,
    .football-prediction-layout {
        grid-template-columns: 1fr !important;
    }

    .football-prediction-card__teams {
        grid-template-columns: 1fr;
    }

    .football-prediction-card__teams > em {
        justify-self: center;
    }
}

html[data-theme="dark"] .football-prediction-league-group {
    background: linear-gradient(135deg, rgba(14,165,164,.12), rgba(15,23,42,.74));
    border-color: rgba(45,212,191,.16);
}

html[data-theme="dark"] .football-prediction-league-group__logo,
html[data-theme="dark"] .football-prediction-card__teams img,
html[data-theme="dark"] .football-prediction-card__teams b {
    background: rgba(255,255,255,.92);
}