/* Kisure Sports Frontend v854 — card and viewport bundle
 * FE854 cascade-preserving canonical consolidation.
 * Original source order is retained exactly; no selector/rule removal.
 */

/* ===== SOURCE: /css/kisure-v531-mobile-viewport-stability.css ===== */
/* Kisure v530 — global mobile viewport stability
 * Mobile-only containment for late-loaded ads, social embeds and other third-party
 * content. Desktop/tablet layouts are deliberately untouched.
 */
@media (max-width: 767.98px) {
    html,
    body.site-body {
        inline-size: 100%;
        max-inline-size: 100%;
        min-inline-size: 0;
        overflow-x: clip !important;
        overscroll-behavior-x: none;
    }

    body.site-body {
        position: relative;
    }

    .site-main,
    .site-main > *,
    .site-shell,
    .site-shell--wide,
    .content-grid,
    .stack-grid,
    .article-shell,
    .article-main-section,
    .news-view-page,
    .home-news-layout,
    .category-news-layout,
    .tag-news-layout,
    .football-page,
    .football-layout,
    .football-main-grid,
    .football-content-grid,
    .football-section,
    .football-fixtures-page,
    .football-standings-page,
    .football-match-page,
    .sports-desk-page,
    .sports-desk-layout,
    .site-header,
    .site-header__inner,
    .site-header__bar,
    .site-footer,
    .footer-panel {
        min-inline-size: 0 !important;
        max-inline-size: 100% !important;
        box-sizing: border-box !important;
    }

    .site-main,
    .site-header,
    .site-footer {
        overflow-x: clip !important;
    }

    /* AdSense is loaded after window.load on every public surface. Contain its
       intrinsic inline size so a late 728/970px creative can never resize the
       mobile document after first paint. */
    .ad-slot,
    .ad-slot-content,
    .football-ad-panel,
    .football-sidebar-ad-slot,
    .ks-desk-ad,
    .kisure-safe-ad-slot,
    [data-kisure-safe-ad-slot],
    .kisure-safe-ad-primary,
    .kisure-internal-ad-rotation,
    .kisure-internal-ad-item,
    .google-auto-placed,
    ins.adsbygoogle {
        inline-size: 100% !important;
        max-inline-size: 100% !important;
        min-inline-size: 0 !important;
        box-sizing: border-box !important;
    }

    .ad-slot,
    .ad-slot-content,
    .football-ad-panel,
    .football-sidebar-ad-slot,
    .ks-desk-ad,
    .kisure-safe-ad-slot,
    [data-kisure-safe-ad-slot] {
        overflow: hidden !important;
        contain: inline-size;
    }

    .ad-slot *,
    .football-sidebar-ad-slot *,
    .ks-desk-ad *,
    .kisure-safe-ad-slot *,
    [data-kisure-safe-ad-slot] * {
        max-inline-size: 100% !important;
        box-sizing: border-box !important;
    }

    .ad-slot iframe,
    .football-sidebar-ad-slot iframe,
    .ks-desk-ad iframe,
    .kisure-safe-ad-slot iframe,
    [data-kisure-safe-ad-slot] iframe,
    iframe[id^="google_ads_iframe_"],
    iframe[id^="aswift_"],
    ins.adsbygoogle {
        inline-size: 100% !important;
        max-inline-size: 100% !important;
        min-inline-size: 0 !important;
        margin-inline: auto !important;
    }

    /* The same rule protects late social/video transforms on articles, match
       pages, category cards and any future public surface without forcing the
       desktop/tablet presentation to change. */
    iframe,
    object,
    embed,
    video,
    canvas,
    .article-social-embed,
    .social-embed-wrap,
    .video-embed-wrap,
    .twitter-tweet,
    .twitter-tweet-rendered,
    .instagram-media,
    .tiktok-embed,
    .fb-post,
    .fb-video,
    .fb-page,
    .fb-comments {
        max-inline-size: 100% !important;
        box-sizing: border-box !important;
    }

    .article-social-embed,
    .social-embed-wrap,
    .video-embed-wrap,
    .twitter-tweet-rendered,
    .instagram-media,
    .tiktok-embed {
        min-inline-size: 0 !important;
        overflow: hidden;
    }

    img,
    svg {
        max-inline-size: 100%;
    }

    /* Preserve deliberate horizontal rails/tables inside their own scrollport;
       they may be wider internally, but can no longer widen the document. */
    [data-kisure-drag-scroll],
    .football-fixture-strip--scroll,
    .football-home-board__cards-row,
    .football-header-ticker__track,
    .football-header-ticker__marquee,
    .football-header-ticker__set,
    .football-section-tabs,
    .football-leaderboard-tabs,
    .football-table-wrap,
    .table-responsive {
        max-inline-size: 100% !important;
        overflow-x: auto !important;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }
}

/* v531 runtime companion: classes are applied only when a late-loaded element
   actually escapes the mobile viewport. */
@media (max-width: 767.98px) {
    html.kisure-mobile-viewport-guard,
    body.kisure-mobile-viewport-guard {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: clip !important;
    }

    .kisure-mobile-overflow-clamp {
        max-inline-size: 100% !important;
        min-inline-size: 0 !important;
        box-sizing: border-box !important;
    }

    iframe.kisure-mobile-overflow-clamp,
    object.kisure-mobile-overflow-clamp,
    embed.kisure-mobile-overflow-clamp,
    ins.adsbygoogle.kisure-mobile-overflow-clamp,
    .google-auto-placed.kisure-mobile-overflow-clamp,
    .twitter-tweet.kisure-mobile-overflow-clamp,
    .twitter-tweet-rendered.kisure-mobile-overflow-clamp,
    .instagram-media.kisure-mobile-overflow-clamp,
    .tiktok-embed.kisure-mobile-overflow-clamp,
    .fb-post.kisure-mobile-overflow-clamp,
    .fb-video.kisure-mobile-overflow-clamp,
    .fb-page.kisure-mobile-overflow-clamp,
    .fb-comments.kisure-mobile-overflow-clamp {
        inline-size: 100% !important;
        width: 100% !important;
        margin-inline: 0 !important;
    }
}

/* ===== SOURCE: /css/kisure-v554-prediction-dark-news-fixture-fit.css ===== */
/* 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;
    }
}

/* ===== SOURCE: /css/kisure-v560-news-card-fixture-placement.css ===== */
/* Kisure Sports Frontend v852
 * Football-linked news-card fixture strip:
 * - always below the featured image and before card copy
 * - logo-only identity is the safe server/CSS default
 * - full team names appear only after JS proves the card is wide enough
 * - never shrink names into unreadable 8px labels and never ellipsise them
 */

/* Card width is observed by JS; this also allows safe future container-query use. */
article.news-card{
    container-type:inline-size;
}

a.news-card-match-strip,
article.news-card > a.news-card-match-strip,
.surface-card > a.news-card-match-strip{
    position:relative;
    display:grid !important;
    grid-template-columns:44px auto 44px !important;
    justify-content:center !important;
    justify-items:center !important;
    grid-template-rows:1fr !important;
    grid-auto-flow:column !important;
    align-items:center !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    min-height:64px;
    margin:0 !important;
    padding:.7rem .9rem !important;
    column-gap:.55rem !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    border-top:0 !important;
    border-bottom:1px solid color-mix(in srgb,var(--primary) 18%,var(--border-color,#d9e2ea));
    background:color-mix(in srgb,var(--surface,#fff) 96%,var(--primary) 4%);
    color:var(--text,#111827) !important;
    text-decoration:none !important;
    white-space:nowrap !important;
}

a.news-card-match-strip::before{
    content:"";
    position:absolute;
    inset:0 0 auto;
    height:4px;
    background:var(--primary,#0ea5a4);
}
a.news-card-match-strip.is-live::before{background:var(--danger,#dc2626)}
a.news-card-match-strip.is-upcoming::before{background:var(--accent,#f59e0b)}
a.news-card-match-strip.is-finished::before{background:var(--success,#16a34a)}
a.news-card-match-strip:hover{
    background:color-mix(in srgb,var(--surface,#fff) 91%,var(--primary) 9%);
    color:var(--text,#111827) !important;
}
html[data-theme="dark"] a.news-card-match-strip{
    background:color-mix(in srgb,var(--surface,#0f172a) 94%,var(--primary) 6%);
}

.news-card-match-strip > *{
    min-width:0;
    margin:0 !important;
}

.news-card-match-strip__team{
    display:none !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    overflow:visible !important;
    text-overflow:clip !important;
    white-space:nowrap !important;
    color:var(--text,#111827) !important;
    font-family:"Space Grotesk",sans-serif;
    font-size:1rem !important;
    line-height:1.05;
    font-weight:900;
    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{
    display:grid !important;
    place-items:center !important;
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    overflow:hidden;
    border-radius:8px;
    background:transparent;
}
.news-card-match-strip__crest img{
    display:block !important;
    width:38px !important;
    height:38px !important;
    max-width:38px !important;
    max-height:38px !important;
    object-fit:contain;
}
.news-card-match-strip__crest i{
    color:var(--text-soft,#64748b);
    font-size:1.15rem;
}

.news-card-match-strip__result{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:center !important;
    gap:.34rem !important;
    min-width:max-content !important;
    white-space:nowrap !important;
    font-family:"Space Grotesk",sans-serif;
    font-variant-numeric:tabular-nums;
}
.news-card-match-strip__score,
.news-card-match-strip__penalty,
.news-card-match-strip__phase,
.news-card-match-strip__kickoff{
    display:inline-block !important;
    flex:0 0 auto !important;
    margin:0 !important;
    font-family:"Space Grotesk",sans-serif;
    font-variant-numeric:tabular-nums;
    white-space:nowrap !important;
}
.news-card-match-strip__score{
    min-width:25px;
    text-align:center;
    color:var(--text,#111827) !important;
    font-size:1.78rem !important;
    line-height:.92;
    font-weight:950;
    letter-spacing:-.045em;
}
.news-card-match-strip__penalty{
    color:var(--text,#111827) !important;
    font-size:.96rem !important;
    line-height:1;
    font-weight:900;
}
.news-card-match-strip__phase{
    min-width:30px;
    text-align:center;
    color:var(--text,#111827) !important;
    font-size:.82rem !important;
    line-height:1;
    font-weight:950;
    letter-spacing:.02em;
    text-transform:uppercase;
}
.news-card-match-strip.is-live .news-card-match-strip__phase{color:var(--danger,#dc2626) !important}
.news-card-match-strip__kickoff{
    display:block !important;
    justify-self:center !important;
    max-width:none !important;
    overflow:visible !important;
    text-overflow:clip !important;
    color:var(--text,#111827) !important;
    font-size:.88rem !important;
    line-height:1.08;
    font-weight:900;
    text-align:center;
}

/* FE852: full names are an explicit measured-fit enhancement, never the fallback. */
a.news-card-match-strip.is-full-names,
article.news-card > a.news-card-match-strip.is-full-names,
.surface-card > a.news-card-match-strip.is-full-names{
    grid-template-columns:minmax(0,1fr) 42px auto 42px minmax(0,1fr) !important;
    justify-content:stretch !important;
    justify-items:stretch !important;
    column-gap:.55rem !important;
    padding-inline:.9rem !important;
}
.news-card-match-strip.is-full-names .news-card-match-strip__team{
    display:block !important;
}

/* Compact/news-grid cards remain logo-only. Logos + score/date stay large and
   centred instead of reducing names or allowing them to escape the card. */
a.news-card-match-strip.is-logo-only,
article.news-card > a.news-card-match-strip.is-logo-only,
.surface-card > a.news-card-match-strip.is-logo-only{
    grid-template-columns:44px auto 44px !important;
    justify-content:center !important;
    justify-items:center !important;
    column-gap:clamp(.65rem,4cqw,1.35rem) !important;
    padding-inline:.75rem !important;
}
.news-card-match-strip.is-logo-only .news-card-match-strip__team{
    display:none !important;
}
.news-card-match-strip.is-logo-only .news-card-match-strip__crest{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    max-width:44px !important;
}
.news-card-match-strip.is-logo-only .news-card-match-strip__crest img{
    width:40px !important;
    height:40px !important;
    max-width:40px !important;
    max-height:40px !important;
}
.news-card-match-strip.is-logo-only .news-card-match-strip__score{
    font-size:1.9rem !important;
}
.news-card-match-strip.is-logo-only .news-card-match-strip__kickoff{
    font-size:.82rem !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{
        min-height:58px;
        padding-block:.62rem !important;
    }
    .news-card-match-strip__score{font-size:1.58rem !important}
    .news-card-match-strip__penalty{font-size:.82rem !important}
    .news-card-match-strip__phase{font-size:.72rem !important}
    .news-card-match-strip__kickoff{font-size:.76rem !important}
}

@media(max-width:390px){
    a.news-card-match-strip.is-logo-only,
    article.news-card > a.news-card-match-strip.is-logo-only,
    .surface-card > a.news-card-match-strip.is-logo-only{
        grid-template-columns:38px auto 38px !important;
        column-gap:.55rem !important;
        padding-inline:.45rem !important;
    }
    .news-card-match-strip.is-logo-only .news-card-match-strip__crest{
        width:38px !important;height:38px !important;min-width:38px !important;max-width:38px !important;
    }
    .news-card-match-strip.is-logo-only .news-card-match-strip__crest img{
        width:35px !important;height:35px !important;max-width:35px !important;max-height:35px !important;
    }
    .news-card-match-strip.is-logo-only .news-card-match-strip__score{font-size:1.48rem !important}
    .news-card-match-strip.is-logo-only .news-card-match-strip__kickoff{font-size:.7rem !important}
}