/* Kisure Sports Frontend v554
   Prediction dark-theme readability + full-width non-truncated news fixture strips. */

/* Older prediction modules use the --ks-* aliases. Bind them to the canonical
   site theme tokens so Light, Dark and System always resolve to the same palette
   as the rest of Kisure Sports. */
.football-prediction-detail-page {
    --ks-muted: var(--text-soft);
    --ks-accent: var(--primary);
    --ks-border: var(--border-strong);
    --ks-soft: var(--surface-strong);
    --ks-ink: var(--text);
    --ks-text: var(--text-soft);
    --ks-panel: var(--surface);
}

.football-prediction-detail-page .football-prediction-key-facts__grid > div,
.football-prediction-detail-page .football-prediction-faq details,
.football-prediction-detail-page .football-prediction-related article {
    background: var(--surface-strong);
    border-color: var(--border-strong);
}

.football-prediction-detail-page .football-prediction-key-facts__grid strong,
.football-prediction-detail-page .football-prediction-faq summary,
.football-prediction-detail-page .football-prediction-related h3 a,
.football-prediction-detail-page .football-prediction-provenance strong {
    color: var(--text) !important;
}

.football-prediction-detail-page .football-prediction-key-facts__grid span,
.football-prediction-detail-page .football-prediction-key-facts > p,
.football-prediction-detail-page .football-prediction-faq details p,
.football-prediction-detail-page .football-prediction-related small,
.football-prediction-detail-page .football-prediction-related p,
.football-prediction-detail-page .football-prediction-provenance span {
    color: var(--text-soft) !important;
}

.football-prediction-detail-page .football-prediction-key-facts__links a,
.football-prediction-detail-page .football-prediction-faq summary::after,
.football-prediction-detail-page .football-prediction-related h3 a:hover,
.football-prediction-detail-page .football-prediction-related h3 a:focus-visible {
    color: var(--primary) !important;
}

html[data-theme="dark"] .football-prediction-detail-page .football-prediction-key-facts__grid > div,
html[data-theme="dark"] .football-prediction-detail-page .football-prediction-faq details,
html[data-theme="dark"] .football-prediction-detail-page .football-prediction-related article {
    background: color-mix(in srgb, var(--surface) 86%, var(--primary) 14%);
    border-color: color-mix(in srgb, var(--border-strong) 70%, var(--primary) 30%);
}

html[data-theme="dark"] .football-prediction-detail-page .football-prediction-provenance {
    background: color-mix(in srgb, var(--surface) 91%, var(--primary) 9%);
    border-color: color-mix(in srgb, var(--border-strong) 60%, var(--primary) 40%);
}

html[data-theme="dark"] .football-prediction-detail-page .football-prediction-key-facts__grid strong,
html[data-theme="dark"] .football-prediction-detail-page .football-prediction-faq summary,
html[data-theme="dark"] .football-prediction-detail-page .football-prediction-related h3 a,
html[data-theme="dark"] .football-prediction-detail-page .football-prediction-provenance strong {
    color: #f4f8ff !important;
}

html[data-theme="dark"] .football-prediction-detail-page .football-prediction-key-facts__grid span,
html[data-theme="dark"] .football-prediction-detail-page .football-prediction-key-facts > p,
html[data-theme="dark"] .football-prediction-detail-page .football-prediction-faq details p,
html[data-theme="dark"] .football-prediction-detail-page .football-prediction-related small,
html[data-theme="dark"] .football-prediction-detail-page .football-prediction-related p,
html[data-theme="dark"] .football-prediction-detail-page .football-prediction-provenance span {
    color: #b8c7db !important;
}

/* v552 left max-width caps on team labels. v553 fixed the direction but did
   not cancel those caps, so names such as AFC Leopards could still ellipsize.
   Let each side use its natural content width and share the remaining row. */
a.news-card-match-strip,
article.news-card > a.news-card-match-strip,
.surface-card > a.news-card-match-strip {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px auto 42px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: clamp(.25rem, .75vw, .58rem) !important;
    container-type: inline-size;
}

.news-card-match-strip__team {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: clamp(.66rem, 2.15cqw, 1rem) !important;
    letter-spacing: -.018em;
}

.news-card-match-strip__team--home {
    text-align: right;
}

.news-card-match-strip__team--away {
    text-align: left;
}

.news-card-match-strip__crest,
.news-card-match-strip__result,
.news-card-match-strip__kickoff {
    flex: 0 0 auto !important;
}

.news-card-match-strip__result {
    gap: clamp(.18rem, .7cqw, .34rem) !important;
}

.news-card-match-strip__score {
    font-size: clamp(1.18rem, 3.35cqw, 1.78rem) !important;
}

.news-card-match-strip__penalty {
    font-size: clamp(.64rem, 1.75cqw, 1rem) !important;
}

.news-card-match-strip__phase {
    font-size: clamp(.6rem, 1.45cqw, .84rem) !important;
}

.news-card-match-strip__kickoff {
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: clamp(.62rem, 1.75cqw, .9rem) !important;
}

@media (max-width: 900px) {
    a.news-card-match-strip,
    article.news-card > a.news-card-match-strip,
    .surface-card > a.news-card-match-strip {
        grid-template-columns: minmax(0, 1fr) 36px auto 36px minmax(0, 1fr) !important;
    }
}

@media (max-width: 640px) {
    a.news-card-match-strip,
    article.news-card > a.news-card-match-strip,
    .surface-card > a.news-card-match-strip {
        grid-template-columns: minmax(0, 1fr) 29px auto 29px minmax(0, 1fr) !important;
        column-gap: .22rem !important;
    }

    .news-card-match-strip__team {
        font-size: clamp(.58rem, 2.35cqw, .76rem) !important;
        letter-spacing: -.025em;
    }

    .news-card-match-strip__crest {
        width: 29px !important;
        height: 29px !important;
        min-width: 29px !important;
        max-width: 29px !important;
    }

    .news-card-match-strip__crest img {
        width: 27px !important;
        height: 27px !important;
        max-width: 27px !important;
        max-height: 27px !important;
    }
}