/*
 * SuperCupNI plugin styles — every rule is scoped under
 * `.supercup-api-plugin`, the wrapper class set on each template's
 * <main> element. Themes can drop this file in unchanged with no
 * risk of leaking into the rest of the site: a rule for
 * `.scni-competition-page-hero` will only fire when the element
 * sits inside `.supercup-api-plugin`, so identical class names in
 * the host theme are completely insulated.
 *
 * Page-specific wrappers (e.g. `.supercup-api-plugin-competitions-single`,
 * `.supercup-api-plugin-venues-index`) are emitted for theme
 * authors who want to add bespoke overrides per page — this file
 * itself only uses `.supercup-api-plugin` as the scope root.
 *
 * Each block below corresponds to one feature/component; the
 * comment above the block names the templates it's used by so
 * future edits stay tied to user-visible UI.
 *
 * Layout (skim this to find what you need):
 *   1. Global page scope
 *   2. Tournament home — competition tiles
 *   3. Tournament home — venues swiper
 *   4. Competition single — page hero (full-bleed banner)
 *   5. Competition single — sub-page nav (brand-coloured band)
 *   6. Competition single — Overview editorial image
 *   7. Competition single — Overview tournament winners block
 *   8. Standings — form pills (W/D/L)
 *   9. Standings — card-row table
 *  10. Finals — cup tier pills
 *  10a. Fixture row — centred scoreline + right-hand action buttons
 *  10b. Knockout route — Finals tab feature tiles
 *  11. Team single — squad rows
 *  11a. Team single — multi-competition filter pills
 *  12. Venue single — map embed
 *  13. Fixture single — app-parity match page (scoped to that page only)
 *  14. Team single — hero + squad filter (scoped to that page only)
 *
 * Dequeue with:
 *   add_action('wp_enqueue_scripts',
 *       fn() => wp_dequeue_style('supercup-api-plugin'), 99);
 */


/* ─── 1. Global page scope ──────────────────────────────────── */

/* `.scni-page` is the base wrapper class added to every template's
 * <main>; we don't style it directly but keep the selector live
 * so theme authors have a stable hook for global padding / typography
 * overrides. */
.supercup-api-plugin .scni-page {
    /* Intentionally empty — hook for theme overrides. */
}

/* `.stretched-link` cursor fix. Bootstrap's stretched-link sits a
 * transparent pseudo-element over the entire card, which catches
 * clicks fine but only carries the pointer cursor on the anchor's
 * own area — the underlying <img>, <h3>, <p> etc. keep their
 * native cursor (default / text), so a moving mouse shows
 * pointer (overlay) but a stationary mouse re-resolves to the
 * underlying element's cursor.
 *
 * Three-layer fix:
 *   (1) `:has()` — modern browsers (Chrome 105+, Safari 15.4+,
 *       Firefox 121+). Catches every card with a stretched-link
 *       inside automatically.
 *   (2) Explicit class hooks for our known clickable cards
 *       (`.scni-news-card`, `.scni-comp-tile`) — picks up
 *       older browsers and wins against any theme cursor reset.
 *   (3) `!important` — many WP themes hard-code `cursor: auto`
 *       or `cursor: default` on heading/paragraph elements; the
 *       bang forces our pointer past those resets without us
 *       having to chase every theme's cascade.
 */
.supercup-api-plugin .card:has(.stretched-link),
.supercup-api-plugin .card:has(.stretched-link) *,
.supercup-api-plugin .scni-news-card,
.supercup-api-plugin .scni-news-card *,
.supercup-api-plugin .scni-comp-tile,
.supercup-api-plugin .scni-comp-tile * {
    cursor: pointer !important;
}

/* News card "Read more" — styled as a text link rather than a
 * button. Lives inside a stretched-link card so it's a visual
 * affordance only (the title's stretched-link catches the click);
 * the underline-on-hover treatment matches normal link behaviour
 * so the tile still looks interactive even before you read the
 * title. */
.supercup-api-plugin .scni-news-card__cta {
    color: #0F1B2D;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
}
.supercup-api-plugin .card:hover .scni-news-card__cta,
.supercup-api-plugin .card:focus-within .scni-news-card__cta {
    text-decoration: underline;
}


/* ─── 2. Tournament home — competition tiles ────────────────── */

/* Site logo at the top of the tournament home (pulled from the WP
 * Customizer via the_custom_logo()). Centred, capped height so a
 * full-size SVG doesn't dominate. Used by: templates/tournament-home.php. */
.supercup-api-plugin .scni-tournament-home-logo { line-height: 0; }
.supercup-api-plugin .scni-tournament-home-logo .custom-logo,
.supercup-api-plugin .scni-tournament-home-logo img {
    display: inline-block;
    width: auto;
    height: auto;
    max-height: 140px;
    max-width: 100%;
}

/* Coloured tiles linking into each competition. The base style is
 * a dark neutral gradient; specific competitions get their palette
 * via data-slug attribute selectors so the brand colour lives in
 * one place. Used by: page-tournament.php, templates/tournament-home.php. */

.scni-section-overview {

    color: #2D0046;

}

.scni-section-editorial {

    color: #2D0046;

}

.supercup-api-plugin .scni-comp-tile {
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
    color: #fff;
    border: 0;
    overflow: hidden;
    transition: transform 0.15s ease;
}
.supercup-api-plugin .scni-comp-tile:hover {
    transform: scale(1.02);
}
.supercup-api-plugin .scni-comp-tile .card-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
/* Match on data-slug — the API's `competition.slug` field. Stable
 * 1:1 per competition. data-category only carries "boys"/"girls",
 * which can't distinguish premier / junior / minor. */
.supercup-api-plugin .scni-comp-tile[data-slug="boys-premier"]  { background: linear-gradient(135deg, #1e40af 0%, #06b6d4 100%); }
.supercup-api-plugin .scni-comp-tile[data-slug="boys-junior"]   { background: linear-gradient(135deg, #2563eb 0%, #818cf8 100%); }
.supercup-api-plugin .scni-comp-tile[data-slug="boys-minor"]    { background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%); }
.supercup-api-plugin .scni-comp-tile[data-slug="girls-premier"] { background: linear-gradient(135deg, #be185d 0%, #f472b6 100%); }
.supercup-api-plugin .scni-comp-tile[data-slug="girls-junior"]  { background: linear-gradient(135deg, #c026d3 0%, #f0abfc 100%); }
.supercup-api-plugin .scni-comp-tile[data-slug="minis"]         { background: linear-gradient(135deg, #16a34a 0%, #4ade80 100%); }


/* ─── 3. Tournament home — venues swiper ────────────────────── */

/* Used by: page-tournament.php (when Swiper is enqueued). */
.supercup-api-plugin .scni-venues-swiper {
    padding-bottom: 2.5rem; /* room for the pagination dots */
}
.supercup-api-plugin .scni-venues-swiper .swiper-button-prev,
.supercup-api-plugin .scni-venues-swiper .swiper-button-next {
    color: #0f172a;
}
.supercup-api-plugin .scni-venues-swiper .swiper-pagination-bullet-active {
    background: #0f172a;
}


/* ─── 4. Competition single — page hero (full-bleed banner) ── */

/* Full-browser-width banner above the sub-page nav. Background
 * image (or bundled placeholder SVG) fills the block; a dark
 * gradient overlay keeps white text legible on any image. Falls
 * back to a neutral solid colour while the image loads. Used by:
 * single-scni_competition.php. */
/* Flex COLUMN, centred vertically: the breadcrumb and the hero body
 * are normal-flow siblings, so a tall hero (long tagline, or the
 * stacked meta on a phone) grows the header rather than sliding up
 * underneath the breadcrumb. `min-height` is a floor, never a cap —
 * `height` is left to the content. */
.supercup-api-plugin .scni-competition-page-hero {
    position: relative;
    overflow: hidden;
    min-height: 425px;
    background-color: #1f2937; /* shows briefly during load */
    background-size: cover;
    background-position: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* .supercup-api-plugin .scni-competition-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.35) 100%);
    pointer-events: none;
} */
.supercup-api-plugin .scni-competition-page-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
}
.supercup-api-plugin .scni-competition-page-hero h1 {
    color: #fff;
}
.supercup-api-plugin .scni-competition-page-hero-desc {
    color: rgba(255, 255, 255, 0.92);
}
.supercup-api-plugin .scni-competition-page-hero .scni-meta-label {
    font-size: 1.1em;
    /* letter-spacing: 0.08em; */
    font-weight: 700;
    /* opacity: 0.85; */
    margin-bottom: 0.5em;
    line-height: 140%;
}
.supercup-api-plugin .scni-competition-page-hero .scni-meta-value {
    font-size: .9em;
    font-weight: 400;
    line-height: 1.15;
}
.supercup-api-plugin .scni-competition-page-hero .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.65);
}
.supercup-api-plugin .scni-competition-page-hero .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: #fff;
}
/* Narrow screens get a shorter hero so the page doesn't open with an
 * enormous banner before any content. (The `.scni-container` horizontal
 * padding reset that used to live here now applies at every breakpoint
 * and is owned by the theme — see `_competition-layout.scss`.) */
@media (max-width: 767.98px) {
    .supercup-api-plugin .scni-competition-page-hero {
        min-height: 320px;
    }
}

/* Breadcrumb / back link inside the hero. It lives INSIDE the hero's
 * `.container` (so it shares the site's gutters) and stays in normal
 * flow — it used to be absolutely positioned, which meant a hero with
 * a lot of content simply grew up over the top of it and hid the link
 * behind the title. Flow layout makes that impossible: the title can
 * never occupy the breadcrumb's box. */
.supercup-api-plugin .scni-competition-back {
    position: relative;
    z-index: 2;
}
.supercup-api-plugin .scni-competition-back__link {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color 0.15s ease-in-out;
}
.supercup-api-plugin .scni-competition-back__link:hover,
.supercup-api-plugin .scni-competition-back__link:focus {
    color: #fff;
    text-decoration: none;
}


/* ─── 5. Competition single — sub-page nav (brand band) ─────── */

/* Inline pipe-separated nav directly under the hero. Background
 * is set inline per page from the competition's brand colour, so
 * the nav becomes a brand band tying the page to the competition.
 * Bootstrap's `.navbar-nav .nav-link.active` rule reads from the
 * `--bs-navbar-*` CSS vars — we set those vars on the nav and let
 * Bootstrap's own rules paint in our palette, sidestepping a
 * specificity fight. Used by: single-scni_competition.php. */
.supercup-api-plugin .scni-competition-nav {
    --bs-navbar-color: rgba(255, 255, 255, 0.78);
    --bs-navbar-hover-color: #fff;
    --bs-navbar-active-color: #fff;
    --bs-navbar-disabled-color: rgba(255, 255, 255, 0.4);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.supercup-api-plugin .scni-competition-nav .navbar-nav {
    flex-wrap: nowrap;
    margin: 0;
}
.supercup-api-plugin .scni-competition-nav .nav-link {
    color: var(--bs-navbar-color);
    text-decoration: none;
    white-space: nowrap;
    font-weight: 500;
    /* Reserve room for the active underline so adjacent links
     * don't shift when the active state moves between them. */
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.supercup-api-plugin .scni-competition-nav .nav-link:hover,
.supercup-api-plugin .scni-competition-nav .nav-link:focus {
    color: var(--bs-navbar-hover-color);
}
.supercup-api-plugin .scni-competition-nav .nav-link.active {
    color: var(--bs-navbar-active-color);
    font-weight: 700;
    border-bottom-color: var(--bs-navbar-active-color);
}
.supercup-api-plugin .scni-competition-nav-sep {
    color: rgba(255, 255, 255, 0.4);
    user-select: none;
    line-height: 1;
}


/* ─── 6. Competition single — Overview editorial image ─────── */

/* The Overview tab pairs the long description with the uploaded
 * Overview image in a 2-column layout. The image column tracks
 * the copy column's height on desktop; on narrow screens the row
 * collapses and the image falls back to a 16:9 aspect so it
 * doesn't dominate the page. Used by: single-scni_competition.php. */
.supercup-api-plugin .scni-competition-hero {
    border-radius: 0.75rem;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}
.supercup-api-plugin .scni-competition-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (min-width: 992px) {
    .supercup-api-plugin .scni-competition-hero {
        aspect-ratio: auto;
        min-height: 240px;
    }
}


/* ─── 7. Competition single — Overview winners block ────────── */

/* Tournament-wide winners feed filtered to the current
 * competition: one card per cup tier (SuperCup / Globe / Vase /
 * Bowl). Borderless tiles, competition name in its brand colour,
 * big team badge, location underneath. Used by:
 * single-scni_competition.php (Overview tab). */
.supercup-api-plugin .scni-edition-winners {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.supercup-api-plugin .scni-edition-winner {
    background-color: transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.supercup-api-plugin a.scni-edition-winner:hover,
.supercup-api-plugin a.scni-edition-winner:focus {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}
.supercup-api-plugin .scni-edition-winner__comp {
    letter-spacing: 0.06em;
}
.supercup-api-plugin .scni-edition-winner__badge {
    width: 120px;
    height: 120px;
    object-fit: contain;
}
.supercup-api-plugin .scni-edition-winner__name {
    line-height: 1.2;
}


/* ─── 8. Standings — form pills (W/D/L) ─────────────────────── */

/* Small coloured circles in the "last 5" form column. Used by:
 * single-scni_competition.php, single-scni_team.php. */
.supercup-api-plugin .scni-form-pill {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    margin: 0 1px;
}
.supercup-api-plugin .scni-form-pill--w { background: #16a34a; }
.supercup-api-plugin .scni-form-pill--d { background: #ca8a04; }
.supercup-api-plugin .scni-form-pill--l { background: #dc2626; }


/* ─── 9. Standings — card-row table ─────────────────────────── */

/* Each <tr> reads as a single rounded tile: every cell shares an
 * #EEEEEE fill, the rank cell rounds the left edge and the last
 * cell rounds the right. Vertical gaps come from
 * `border-spacing: 0 0.5rem` on the table — no rule on the rows
 * themselves so DOM order stays normal. Headers are flat (no
 * border, no background) so the row tiles do the visual work.
 *
 * On narrow screens the # and Club cells stay sticky on the left
 * while the rest of the row scrolls horizontally — fans always
 * see which club they're reading data for. The current-team
 * highlight (used on team detail pages) tints the tile yellow.
 *
 * Used by: single-scni_competition.php (Groups),
 * single-scni_team.php (Group stage). */
.supercup-api-plugin .scni-standings-table {
    border-collapse: separate;
    border-spacing: 0 0.5rem;
    font-size: 16px;
}
.supercup-api-plugin .scni-standings-table thead th {
    background: transparent;
    border: 0;
    letter-spacing: 0.04em;
    padding: 0.25rem 0.5rem 0.75rem;
    vertical-align: bottom;
}
.supercup-api-plugin .scni-standings-table tbody td {
    background-color: #EEEEEE;
    border: 0;
    padding: 0.875rem 0.5rem;
    vertical-align: middle;
    font-size: 16px;
}
/* Rank cell — inside the tile (left edge), muted weight so it
 * reads as a row index rather than data. */
.supercup-api-plugin .scni-standings-table tbody td.scni-standings-rank {
    color: #6b7280;
    font-weight: 700;
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    padding-left: 1rem;
}
/* Right-side rounding sits on whichever column is rendered last
 * (Trophy when present, Form otherwise, … etc.). */
.supercup-api-plugin .scni-standings-table tbody td:last-child {
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    padding-right: 1rem;
}
/* Club cell — slightly extra left padding so the badge has room. Team
 * names must NEVER be truncated, so the cell wraps: the badge stays pinned
 * left and the name flows beside it, dropping to a second line if needed. */
.supercup-api-plugin .scni-standings-table tbody td.scni-standings-club {
    padding-left: 0.5rem;
    white-space: normal;
    line-height: 1.2;
    display: flex;
    align-items: center;
}
.supercup-api-plugin .scni-standings-table tbody td.scni-standings-club img {
    flex-shrink: 0;
}
/* Form pills — kept on one horizontal row even when the cell
 * is narrow (combined with the table-responsive scroll container
 * the user scrolls horizontally rather than the pills wrapping)
 * and centred so the strip sits symmetrically under the "Form"
 * header rather than hugging the left edge with dead space on
 * the right. */
.supercup-api-plugin .scni-standings-table td.scni-standings-form {
    white-space: nowrap;
    text-align: center;
}

/* Sticky-left columns — the # and Club body cells stay anchored
 * when the row scrolls horizontally on narrow screens. The header
 * merges those two into a single "Club" label (colspan="2") so
 * only one thead cell needs to stick. Each sticky cell needs an
 * explicit `left` matching the cumulative column widths and a
 * solid background so the non-sticky cells scroll behind cleanly. */
.supercup-api-plugin .scni-standings-table tbody td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 1;
}
.supercup-api-plugin .scni-standings-table tbody td:nth-child(2) {
    position: sticky;
    left: 44px; /* width of the # column */
    z-index: 1;
}
.supercup-api-plugin .scni-standings-table thead th.scni-standings-club-head {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #fff;
}

/* Current-team highlight — used on team detail pages where the
 * standings row matches the visiting team. Tints every cell so
 * the entire tile changes colour rather than a stripe. */
.supercup-api-plugin tr.scni-current-team td {
    background-color: #fef9c3;
    font-weight: 600;
}

/* Horizontal-scroll hint — the standings table is wider than a phone, so
 * flag that it swipes. Mobile-only (the markup carries `d-md-none`). */
.supercup-api-plugin .scni-standings-scroll-hint {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    color: #64748b;
}
.supercup-api-plugin .scni-standings-scroll-hint i { opacity: 0.8; }

/* Phones: the # and Club columns stay sticky; smaller type + a smaller badge
 * so team names (never truncated) fit in fewer lines and more stat columns
 * (P/Pts/GD/W/D/L) are visible at once before you swipe. The Club sticky
 * offset is retuned to the narrower # width so the pinned columns sit flush. */
@media (max-width: 575.98px) {
    .supercup-api-plugin .scni-standings-table tbody td { font-size: 13px; }
    .supercup-api-plugin .scni-standings-table thead th { font-size: 0.68rem; }
    .supercup-api-plugin .scni-standings-table { min-width: 0 !important; }
    .supercup-api-plugin .scni-standings-table col:nth-child(1) { width: 28px !important; }  /* # */
    .supercup-api-plugin .scni-standings-table col:nth-child(2) { width: 116px !important; } /* Club */
    .supercup-api-plugin .scni-standings-table col:nth-child(n+3):nth-child(-n+10) { width: 34px !important; } /* P Pts W D L GD GF GA */
    .supercup-api-plugin .scni-standings-table tbody td:nth-child(2) { left: 28px !important; } /* match narrower # */
    .supercup-api-plugin .scni-standings-table thead th,
    .supercup-api-plugin .scni-standings-table tbody td {
        padding-left: 0.2rem;
        padding-right: 0.2rem;
    }
    .supercup-api-plugin .scni-standings-table tbody td.scni-standings-rank { padding-left: 0.4rem; }
    .supercup-api-plugin .scni-standings-table tbody td.scni-standings-club img {
        width: 20px !important;
        height: 20px !important;
        margin-right: 0.3rem !important;
    }
}


/* ─── 10. Finals — cup tier pills ───────────────────────────── */

/* Knockout brackets are split by group-finish position. The
 * colour palette mirrors the mobile app's KoLegend in
 * _app/components/ui/StandingsTable.tsx — keep in sync if the
 * app's palette changes. Used by: single-scni_competition.php
 * (Finals tab). */
.supercup-api-plugin .scni-cup-pill {
    font-weight: 700;
    letter-spacing: 0.02em;
}
.supercup-api-plugin .scni-cup-amber   { background: #fef3c7; color: #92400e; } /* SuperCup — 1st */
.supercup-api-plugin .scni-cup-violet  { background: #ede9fe; color: #5b21b6; } /* Globe    — 2nd */
.supercup-api-plugin .scni-cup-emerald { background: #d1fae5; color: #065f46; } /* Vase     — 3rd */
.supercup-api-plugin .scni-cup-sky     { background: #e0f2fe; color: #075985; } /* Bowl     — 4th */


/* ─── 10a. Fixture row — centred scoreline + right actions ── */

/* The fixture card now goes edge-to-edge of its container. The
 * outer `<li>` drops its horizontal padding (the render helper
 * uses `py-3 px-0`) so meta, scoreline, venue, and the action
 * buttons all align with the body container's gutters instead of
 * sitting inside an extra Bootstrap list-group inset. Meta is
 * rendered as a vertical centred stack — one row per label —
 * with the status pill (Postponed / Cup / Free / Paid Venue)
 * dropping in as the trailing centred row. */
.supercup-api-plugin .scni-fixture-meta__comp {
    font-weight: 700;
    line-height: 1.3;
}

/* Timeline date headers — `Monday 27th July`. Carries a hairline
 * top border so each day reads as a discrete chunk; the first
 * header in the list drops the rule so the section doesn't open
 * with a stray line. Title size and dark colour mirror the app's
 * `dateHeader` style (brand accent over muted grey) so the WP
 * timeline feels like a continuation of the app's grouping. */
.supercup-api-plugin .scni-fixture-date-header {
    background: transparent;
    border-top: 0; /* no hr */
    padding-top: 2rem !important;   /* clear gap before each day-group */
    padding-bottom: 0.4rem !important;
}
.supercup-api-plugin .scni-fixture-date-header:first-child {
    padding-top: 0.25rem !important;
}
/* Plain label, no filled bar: the day header names the group of match
 * cards below it. A filled bar gave it a surface of its own, so it read
 * as another card competing with the matches rather than as their
 * heading. */
.supercup-api-plugin .scni-fixture-date-header__title {
    display: block;
    padding: 0.55rem 0;
    font-size: 1rem;
    font-weight: 700;
    color: #334155;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.2;
}

/* Filter row — five short selects, wraps onto multiple lines on
 * narrow screens. Each select uses Bootstrap's form-select-sm so
 * the bar reads as a thin utility row beneath the section title. */
.supercup-api-plugin .scni-matches-filter .form-select {
    min-width: 0;
}

/* "Up next" hairline divider — placed exactly once between the
 * last approved-complete fixture and the first non-result.
 * Pseudo-line spans flex-grow on either side of the label so the
 * label always reads centred regardless of viewport width. */
.supercup-api-plugin .scni-fixture-divider {
    background: transparent;
}
.supercup-api-plugin .scni-fixture-divider__line {
    flex: 1 1 0;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.12);
}
.supercup-api-plugin .scni-fixture-divider__label {
    letter-spacing: 0.08em;
}


/* Wraps the scoreline + Gallery / Match Report buttons. A
 * three-column outer grid (mirror | scoreline | actions) keeps
 * the scoreline geometrically centred regardless of whether the
 * action buttons are present — the left mirror column always
 * reserves the same width as the right actions column. On narrow
 * screens we collapse to a single column with the actions stacked
 * below the scoreline as a horizontal row. Used by:
 * `supercupni_render_fixture_card` (Matches, Group results,
 * Finals, Team page). */
.supercup-api-plugin .scni-fixture-row {
    --scni-fixture-side-w: 170px;
    display: grid;
    grid-template-columns: var(--scni-fixture-side-w) 1fr var(--scni-fixture-side-w);
    align-items: center;
    column-gap: 1rem;
}
.supercup-api-plugin .scni-fixture-row__meta {
    display: flex;
    flex-direction: column;
    line-height: 1.35;
}
.supercup-api-plugin .scni-fixture-row__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    justify-content: center;
}
.supercup-api-plugin .scni-fixture-row__actions .scni-fixture-btn {
    align-self: stretch;
    text-align: center;
}
@media (max-width: 767.98px) {
    .supercup-api-plugin .scni-fixture-row {
        grid-template-columns: 1fr;
        row-gap: 0.75rem;
    }
    .supercup-api-plugin .scni-fixture-row__meta {
        align-items: center;
        text-align: center;
    }
    .supercup-api-plugin .scni-fixture-row__actions {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
    .supercup-api-plugin .scni-fixture-row__actions .scni-fixture-btn {
        flex: 1 1 auto;
    }
}

/* ── Mobile match card (≤767px) ─────────────────────────────────────
 * The desktop 3-column `.scni-fixture-row` (and its trailing venue line)
 * are hidden on phones; the self-contained `.scni-fixture-m` renders
 * instead — a compact meta header, a stacked one-row-per-team scoreboard
 * where names WRAP and are never truncated, and a footer with kickoff,
 * entry and venue. Pattern follows FlashScore / OneFootball / BBC Sport. */
@media (max-width: 767.98px) {
    .supercup-api-plugin .scni-fixture-row { display: none !important; }
}
.supercup-api-plugin .scni-fixture-m {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.supercup-api-plugin .scni-fixture-m__meta {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.supercup-api-plugin .scni-fixture-m__meta .scni-fixture-meta__comp {
    font-weight: 700;
    font-size: 0.9rem;
}
.supercup-api-plugin .scni-fixture-m__sub { font-size: 0.8rem; }
.supercup-api-plugin .scni-fixture-m__team {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0;
}
.supercup-api-plugin .scni-fixture-m__team + .scni-fixture-m__team {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.supercup-api-plugin .scni-fixture-m__teamlink {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: 1 1 auto;
    min-width: 0; /* let the name wrap within the row */
    text-align: left;
}
.supercup-api-plugin .scni-fixture-m__badge {
    width: 34px;
    height: 34px;
    object-fit: contain;
    flex-shrink: 0;
}
.supercup-api-plugin .scni-fixture-m__name {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    color: #1f2937;
    white-space: normal; /* NEVER truncate — wrap long names */
}
.supercup-api-plugin .scni-fixture-m__score {
    flex-shrink: 0;
    min-width: 1.25rem;
    text-align: right;
    font-weight: 700;
    font-size: 1.45rem;
    line-height: 1;
    color: #1f2937; /* draws / normal sit dark; only the loser is muted */
}
.supercup-api-plugin .scni-fixture-m__team.is-winner .scni-fixture-m__name,
.supercup-api-plugin .scni-fixture-m__team.is-winner .scni-fixture-m__score {
    font-weight: 800;
    color: #0f172a;
}
.supercup-api-plugin .scni-fixture-m__team.is-loser .scni-fixture-m__name { color: #6b7280; }
.supercup-api-plugin .scni-fixture-m__team.is-loser .scni-fixture-m__score { color: #9ca3af; }
/* Footer — quiet meta: "when" and "where + entry" sit on one line when they
 * fit and wrap to two lines when they don't. No border/hr, no extra top
 * margin (the card's own uniform gap spaces it), so the space above team 1
 * and below team 2 stay equal. */
.supercup-api-plugin .scni-fixture-m__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.75rem;
    font-size: 0.8rem;
    color: #6b7280;
}
.supercup-api-plugin .scni-fixture-m__when,
.supercup-api-plugin .scni-fixture-m__where {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
}
.supercup-api-plugin .scni-fixture-m__venue {
    color: #6b7280;
    text-decoration: none;
}
.supercup-api-plugin .scni-fixture-m__when > i,
.supercup-api-plugin .scni-fixture-m__venue > i {
    width: 0.9rem;
    text-align: center;
    opacity: 0.8;
}
.supercup-api-plugin .scni-fixture-m__entry { font-weight: 600; }

/* ─── Fixture row affordances (UX clarity) ─────────────────────
 *
 * Each fixture row has THREE click targets fans might want:
 *   1. The whole row → match details (primary; ~90% of clicks)
 *   2. Either team name → team page (secondary)
 *   3. Venue → venue page (tertiary)
 *
 * Without affordance cues the row looks static, which is the
 * complaint that prompted this block. The treatment below makes
 * the hierarchy obvious WITHOUT a chevron icon (chevrons compete
 * with the existing Gallery / Match Report buttons in the
 * actions column) and uses the Bootstrap `.stretched-link`
 * pattern: a hidden full-row anchor under the content, with
 * inner anchors lifted via `z-index: 2` so they win locally.
 *
 *   - Row gets a subtle hover background + cursor: pointer so the
 *     whole card visibly responds to the mouse.
 *   - Team-name and venue-name text get a dotted underline that
 *     fills in on hover, communicating "I'm a separate link"
 *     without shouting.
 *   - Keyboard focus on the stretched link draws a brand-purple
 *     ring around the row (1 ring, not per-element noise).
 *   - Visited state intentionally NOT styled — a fan re-reading
 *     fixtures shouldn't have purple bleed across the list. */
.supercup-api-plugin .scni-fixture-item {
    cursor: pointer;
    background: #fff;
    border: 1px solid #e5e7eb; /* defines the card (overrides list-group's single bottom border) */
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    transition: box-shadow 150ms ease, border-color 150ms ease;
}
.supercup-api-plugin .scni-fixture-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
}
/* Phones: keep the card. This used to flatten each fixture into a
 * transparent row with a hairline under it, on the theory that a card
 * inside a card reads as clutter — but the matches list sits on a grey
 * field, so a flat row has no surface of its own and a match stops
 * reading as one object: the teams, the score and the venue line all
 * float on the same grey as everything around them. The white card IS
 * the grouping. Only the hover chrome (meaningless on touch) is dropped;
 * padding tightens to suit the narrower screen. */
@media (max-width: 767.98px) {
    .supercup-api-plugin .scni-fixture-item,
    .supercup-api-plugin .scni-fixture-item:hover {
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        box-shadow: none;
        margin-bottom: 0.75rem !important;
        padding: 1rem !important;
    }
}
/* The stretched-link is the row-wide tap target. Visually
 * invisible (no underline / border) but takes the focus ring
 * for keyboard users via :focus-visible on the parent <li>,
 * which inherits the focused state automatically. */
.supercup-api-plugin .scni-fixture-item__link {
    color: transparent;
}
.supercup-api-plugin .scni-fixture-item:focus-within {
    outline: 2px solid rgba(45, 0, 70, 0.5);
    outline-offset: 2px;
}
/* Team names — visible link affordance. Default reads as
 * regular text; hover paints a dotted underline so the user
 * sees it's separately clickable. Badge image inside the same
 * link inherits the click without underline because it's not
 * text. */
.supercup-api-plugin .scni-fixture-team__name {
    text-decoration: underline dotted rgba(0, 0, 0, 0.25);
    text-underline-offset: 3px;
    transition: text-decoration-color 150ms ease, color 150ms ease;
}
.supercup-api-plugin .scni-fixture-team:hover .scni-fixture-team__name,
.supercup-api-plugin .scni-fixture-team:focus-visible .scni-fixture-team__name {
    text-decoration-color: currentColor;
    color: #2D0046; /* brand purple */
}
/* Venue link — same dotted underline pattern as team names so
 * the affordance vocabulary stays consistent across the row.
 * Sits below the main scoreline so we restore the muted colour
 * by default and pick up the brand purple on hover. */
.supercup-api-plugin .scni-fixture-venue {
    text-decoration: underline dotted rgba(0, 0, 0, 0.25);
    text-underline-offset: 3px;
    transition: text-decoration-color 150ms ease, color 150ms ease;
}
.supercup-api-plugin .scni-fixture-venue:hover,
.supercup-api-plugin .scni-fixture-venue:focus-visible {
    text-decoration-color: currentColor;
    color: #2D0046 !important; /* brand purple — overrides .text-muted */
}

/* Solid green / ghost button pair. Green is brand-leaning (a
 * confident football-pitch green that reads well next to navy
 * text); ghost is a navy outline with no fill. Both buttons share
 * a base `.scni-fixture-btn` for consistent type weight and the
 * small "open in new tab" icon spacing. */
.supercup-api-plugin .scni-fixture-btn {
    --scni-action-navy:  #0F1B2D;
    --scni-action-green: #0FAB68;
    --scni-action-green-hover: #0E9159;
    font-weight: 600;
    white-space: nowrap;
}
.supercup-api-plugin .scni-fixture-btn--primary {
    background-color: var(--scni-action-green);
    border: 1px solid var(--scni-action-green);
    color: var(--scni-action-navy);
}
.supercup-api-plugin .scni-fixture-btn--primary:hover,
.supercup-api-plugin .scni-fixture-btn--primary:focus {
    background-color: var(--scni-action-green-hover);
    border-color: var(--scni-action-green-hover);
    color: var(--scni-action-navy);
}
.supercup-api-plugin .scni-fixture-btn--ghost {
    background-color: transparent;
    border: 1px solid var(--scni-action-navy);
    color: var(--scni-action-navy);
}
.supercup-api-plugin .scni-fixture-btn--ghost:hover,
.supercup-api-plugin .scni-fixture-btn--ghost:focus {
    background-color: rgba(15, 27, 45, 0.06);
    color: var(--scni-action-navy);
}


/* ─── 10b. Knockout route — Finals tab feature tiles ──────── */

/* Replaces the quiet single-line "Knockout route by group
 * position" legend with a four-tile feature row. Each tile is a
 * gradient card in its cup tier's palette (amber for Supercup,
 * violet for Globe, emerald for Vase, sky for Bowl) with the
 * group-finish rank as the dominant element, the cup name below
 * it, and a one-liner explaining what that position wins. Tile
 * gradients sit a couple of shades above the small pills used on
 * individual fixture cards so this block reads as the introduction
 * to the page, not a smaller variant. */
.supercup-api-plugin .scni-route-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem 1rem;
    border-radius: 0.875rem;
    color: #1f2937;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.supercup-api-plugin .scni-route-tile__rank {
    display: block;
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
}
.supercup-api-plugin .scni-route-tile__rank sup {
    font-size: 0.45em;
    font-weight: 700;
    top: -0.9em;
    margin-left: 0.05em;
}
.supercup-api-plugin .scni-route-tile__cup {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.35rem;
}
.supercup-api-plugin .scni-route-tile__note {
    display: block;
    font-size: 0.8rem;
    opacity: 0.75;
    font-weight: 500;
}

/* Palette — the saturated end of each pill colour, so the tiles
 * read as a stronger statement than the per-fixture badge. The
 * 1st place tile picks up a gold tone to imply silverware. */
.supercup-api-plugin .scni-route-tile--amber {
    background: linear-gradient(135deg, #fde68a 0%, #fbbf24 100%);
    color: #78350f;
}
.supercup-api-plugin .scni-route-tile--violet {
    background: linear-gradient(135deg, #ddd6fe 0%, #a78bfa 100%);
    color: #4c1d95;
}
.supercup-api-plugin .scni-route-tile--emerald {
    background: linear-gradient(135deg, #a7f3d0 0%, #34d399 100%);
    color: #064e3b;
}
.supercup-api-plugin .scni-route-tile--sky {
    background: linear-gradient(135deg, #bae6fd 0%, #38bdf8 100%);
    color: #0c4a6e;
}


/* ─── 11a. Team single — multi-competition filter pills ────── */

/* When a team is rostered in two or more competitions the intro
 * surfaces the placements as a row of filter pills. Each pill is
 * tinted in the competition's brand colour (via the
 * `--scni-comp-brand` inline custom property emitted by the
 * template); the active state fills with that colour and flips
 * the text to white. Clicking a pill narrows the Matches list +
 * Group Stage tables below to just that competition. */
.supercup-api-plugin .scni-team-comp-pill {
    --scni-comp-brand: #6b7280;
    color: var(--scni-comp-brand);
    border: 1px solid var(--scni-comp-brand);
    background-color: transparent;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.supercup-api-plugin .scni-team-comp-pill:hover,
.supercup-api-plugin .scni-team-comp-pill:focus {
    background-color: color-mix(in srgb, var(--scni-comp-brand) 12%, transparent);
    color: var(--scni-comp-brand);
}
.supercup-api-plugin .scni-team-comp-pill.active {
    background-color: var(--scni-comp-brand);
    border-color: var(--scni-comp-brand);
    color: #fff;
}


/* ─── 11. Team single — squad rows ──────────────────────────── */

/* Each squad member is rendered as a soft-filled row inside a
 * 2-column grid. Players show a jersey number; coaches and other
 * staff get a dash in the same spot to keep the rows vertically
 * aligned. The role/position sits on the right as muted text. */
.supercup-api-plugin .scni-squad-row {
    background-color: #EEEEEE;
    border-radius: 0.5rem;
}
.supercup-api-plugin .scni-squad-jersey {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    height: 2rem;
    padding: 0 0.5rem;
    background-color: #fff;
    border-radius: 0.375rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    color: #374151;
    flex-shrink: 0;
}


/* ─── 12. Venue single — map embed ──────────────────────────── */

/* Used by: single-scni_venue.php. */
.supercup-api-plugin .scni-map-embed {
    aspect-ratio: 16 / 9;
    border-radius: 0.5rem;
    overflow: hidden;
}
.supercup-api-plugin .scni-map-embed iframe {
    border: 0;
    display: block;
    width: 100%;
    height: 100%;
}


/* ─── 13. Fixture single — app-parity match page ────────────── */

/* A clean, open match header (crests flanking the score) over a light
 * meta strip and airy detail sections — modelled on major football
 * match pages (FIFA / FotMob). Deliberately un-boxy: no nested cards.
 * Crest + score sizes use clamp() so the header is fluid and needs no
 * width media queries. */

/* Competition hero reused on the match page. It borrows the competition
 * pages' `.scni-competition-page-hero` styling (brand background, absolute
 * back-nav), but the full 425px overview hero is far too tall above a
 * scoreboard — so trim it here: no min-height, block flow (not vertical
 * centring), and enough top padding to clear the absolutely-positioned
 * back-nav. Scoped to the match page only. */
.supercup-api-plugin-fixtures-single .scni-match-hero {
    min-height: 0;
    display: block;
    padding: 3rem 0 1.75rem;
}
.supercup-api-plugin-fixtures-single .scni-match-hero .scni-competition-page-hero-inner h1 {
    font-size: clamp(1.6rem, 5vw, 2.25rem);
}

/* Back-nav + round context (sit above the header). */
.supercup-api-plugin-fixtures-single .scni-match-crumb { font-size: 0.85rem; }
.supercup-api-plugin-fixtures-single .scni-match-crumb__back {
    color: #64748b;
    font-weight: 600;
    text-decoration: none;
}
.supercup-api-plugin-fixtures-single .scni-match-crumb__back:hover { color: #0f172a; }
.supercup-api-plugin-fixtures-single .scni-match-round {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin: 0 0 1rem;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.supercup-api-plugin-fixtures-single .scni-match-round__dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.supercup-api-plugin-fixtures-single .scni-match-header {
    text-align: center;
    margin-bottom: 1.75rem;
}
.supercup-api-plugin-fixtures-single .scni-match-header__row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(0.5rem, 4vw, 2.5rem);
}

/* Team — crest above name; the whole block links to the team page. */
.supercup-api-plugin-fixtures-single .scni-match-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.supercup-api-plugin-fixtures-single .scni-match-team__crest {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(60px, 16vw, 96px);
    height: clamp(60px, 16vw, 96px);
    padding: 0.5rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;   /* rounded square tile — not a circle */
}
/* Logos always keep their aspect ratio — never stretched or cropped. */
.supercup-api-plugin-fixtures-single .scni-match-team__crest img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.supercup-api-plugin-fixtures-single .scni-match-team__name {
    font-weight: 700;
    line-height: 1.2;
    font-size: clamp(0.95rem, 3.4vw, 1.15rem);
    color: #0f172a;
}
.supercup-api-plugin-fixtures-single .scni-match-team:hover .scni-match-team__name { text-decoration: underline; }

/* Score / status. */
.supercup-api-plugin-fixtures-single .scni-match-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}
.supercup-api-plugin-fixtures-single .scni-match-score__value {
    font-weight: 800;
    font-size: clamp(2rem, 9vw, 3rem);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: #0f172a;
}
.supercup-api-plugin-fixtures-single .scni-match-score__value.is-live { color: #dc2626; }
/* The "–" separator — identical treatment for a played score (2 – 1) and
 * the pre-kickoff placeholder (– vs –): it inherits the scoreline's weight
 * and size so both dashes read the same everywhere. */
.supercup-api-plugin-fixtures-single .scni-match-score__sep { margin: 0 0.35rem; color: #94a3b8; }
.supercup-api-plugin-fixtures-single .scni-fixture-scoreline--empty { color: #94a3b8; }
/* "vs" is the only smaller element in the placeholder — a quiet word
 * between two full-size dashes. */
.supercup-api-plugin-fixtures-single .scni-match-score__vs {
    font-size: 0.4em;
    font-weight: 600;
    color: #94a3b8;
    vertical-align: middle;
}
.supercup-api-plugin-fixtures-single .scni-match-score__state {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}
.supercup-api-plugin-fixtures-single .scni-match-score__state--live { color: #dc2626; }
.supercup-api-plugin-fixtures-single .scni-match-score__state--alert { color: #b45309; }

/* Meta strip + postponement note. */
.supercup-api-plugin-fixtures-single .scni-match-meta {
    margin: 1.1rem 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    color: #64748b;
    font-size: 0.9rem;
}
.supercup-api-plugin-fixtures-single .scni-match-meta__dot { color: #cbd5e1; }
.supercup-api-plugin-fixtures-single .scni-match-alert {
    margin: 0.6rem 0 0;
    color: #b45309;
    font-weight: 600;
}

/* Venue action bar — a light strip, not a card. */
.supercup-api-plugin-fixtures-single .scni-match-venue {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1.25rem;
    padding: 1rem 0;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}
.supercup-api-plugin-fixtures-single .scni-match-venue__place {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}
/* Line 1: venue name + entry-type badge. Address drops to line 2. */
.supercup-api-plugin-fixtures-single .scni-match-venue__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}
.supercup-api-plugin-fixtures-single .scni-match-venue__name {
    font-weight: 700;
    color: #0f172a;
    text-decoration: none;
}
.supercup-api-plugin-fixtures-single .scni-match-venue__name:hover { text-decoration: underline; }
.supercup-api-plugin-fixtures-single .scni-match-venue__entry {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
}
.supercup-api-plugin-fixtures-single .scni-match-venue__entry--free { background: #dcfce7; color: #15803d; }
.supercup-api-plugin-fixtures-single .scni-match-venue__entry--paid { background: #fef3c7; color: #b45309; }
.supercup-api-plugin-fixtures-single .scni-match-venue__address { color: #64748b; font-size: 0.9rem; }
.supercup-api-plugin-fixtures-single .scni-match-venue__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Action buttons — same rounding as the hero buttons (Bootstrap default). */
.supercup-api-plugin-fixtures-single .scni-fixture-directions,
.supercup-api-plugin-fixtures-single .scni-fixture-tickets {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 1.05rem;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
}
.supercup-api-plugin-fixtures-single .scni-fixture-directions { background: #0f172a; color: #fff; }
.supercup-api-plugin-fixtures-single .scni-fixture-directions:hover { background: #1e293b; color: #fff; }
/* Buy tickets — brand green (#00FF8A) with the official on-green foreground. */
.supercup-api-plugin-fixtures-single .scni-fixture-tickets { background: #00FF8A; color: #2D0046; }
.supercup-api-plugin-fixtures-single .scni-fixture-tickets:hover { background: #00E67D; color: #2D0046; }

/* Detail prose (venue info / about / notes) — airy divider, not a box. */
.supercup-api-plugin-fixtures-single .scni-fixture-venue-info,
.supercup-api-plugin-fixtures-single .scni-fixture-notes {
    border-top: 1px solid #e2e8f0;
    padding-top: 1.25rem;
}
.supercup-api-plugin-fixtures-single .scni-fixture-venue-info img,
.supercup-api-plugin-fixtures-single .scni-fixture-notes img,
.supercup-api-plugin-fixtures-single .scni-prose img,
.supercup-api-plugin-fixtures-single .scni-prose iframe {
    max-width: 100%;
    height: auto;
}

/* Lineup / squad — kept as-is (the squad table is good); just spacing. */
.supercup-api-plugin-fixtures-single .scni-lineup__bucket + .scni-lineup__bucket { border-top: 1px solid #eef2f7; }
.supercup-api-plugin-fixtures-single .scni-lineup-empty { color: #94a3b8; padding: 0.75rem 1rem; }
/* Small team crest before the name in each squad card header. */
.supercup-api-plugin-fixtures-single .scni-lineup-card__badge {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}


/* ── Fixture single — mobile (phones ≤575px) ────────────────── */

/* Desktop is deliberately untouched: every rule here lives inside the
 * phone breakpoint. The goal is a tighter, more scannable match page —
 * less dead space so the scoreboard, meta and actions fit above the
 * fold, and full-width action buttons that are easy to tap. */
@media (max-width: 575.98px) {
    /* Trim the hero + the big 3rem content padding so the scoreboard
       sits close to the top instead of a screenful down. */
    .supercup-api-plugin-fixtures-single .scni-match-hero {
        padding: 1.25rem 0 1.25rem;
    }
    /* Put the breadcrumb into normal flow on the match hero (it's display:block
       here, not flex-centred like the competition hero) so the title always
       stacks BELOW it and can never be overlaid, no matter the label length. */
    .supercup-api-plugin-fixtures-single .scni-match-hero .scni-competition-back {
        position: static;
        padding-top: 0;
        margin-bottom: 0.4rem;
        pointer-events: auto;
    }
    .supercup-api-plugin-fixtures-single .py-5 {
        padding-top: 1.5rem !important;
        padding-bottom: 2rem !important;
    }
    .supercup-api-plugin-fixtures-single .scni-match-header {
        margin-bottom: 1.25rem;
    }
    /* A punchier score on the narrow scoreboard. */
    .supercup-api-plugin-fixtures-single .scni-match-score__value {
        font-size: clamp(2.25rem, 13vw, 3rem);
    }
    .supercup-api-plugin-fixtures-single .scni-match-meta {
        margin-top: 0.85rem;
        font-size: 0.85rem;
    }
    /* Venue: actions drop to their own full-width row and the buttons
       split it evenly, giving big, thumb-friendly tap targets. */
    .supercup-api-plugin-fixtures-single .scni-match-venue__actions {
        width: 100%;
    }
    .supercup-api-plugin-fixtures-single .scni-match-venue__actions .scni-fixture-directions,
    .supercup-api-plugin-fixtures-single .scni-match-venue__actions .scni-fixture-tickets {
        flex: 1 1 0;
        justify-content: center;
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
    }
    /* Give the detail sections + lineups a little less top gap. */
    .supercup-api-plugin-fixtures-single .mt-5 {
        margin-top: 1.75rem !important;
    }
}


/* ─── 14. Team single — hero + squad filter (scoped to team page) ─── */

/* Team-profile banner (crest + name + meta). The background is set inline
 * from the parent competition's brand colour (e.g. Boys Premier red) so a
 * team opened from a competition feels continuous with it — the #0f172a
 * here is just the fallback when a team has no competition context. Scoped
 * to .supercup-api-plugin-teams-single so it can't touch any other page. */
.supercup-api-plugin-teams-single .scni-team-hero {
    background: #0f172a;
    color: #fff;
    padding: 2.5rem 0 2.75rem;
    margin-bottom: 2.5rem;
}
.supercup-api-plugin-teams-single .scni-team-hero__crumb { margin-bottom: 1.5rem; font-size: 0.85rem; }
.supercup-api-plugin-teams-single .scni-team-hero__back {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-weight: 600;
}
.supercup-api-plugin-teams-single .scni-team-hero__back:hover { color: #fff; }
.supercup-api-plugin-teams-single .scni-team-hero__identity {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(1rem, 4vw, 2rem);
}
.supercup-api-plugin-teams-single .scni-team-hero__crest {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(72px, 18vw, 120px);
    height: clamp(72px, 18vw, 120px);
    padding: 0.6rem;
    background: #fff;
    border-radius: 1rem;
    flex-shrink: 0;
}
.supercup-api-plugin-teams-single .scni-team-hero__crest img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
.supercup-api-plugin-teams-single .scni-team-hero__name {
    margin: 0;
    color: #fff;
    font-weight: 800;
    line-height: 1.05;
    font-size: clamp(1.75rem, 6vw, 3rem);
}
.supercup-api-plugin-teams-single .scni-team-hero__meta {
    margin: 0.5rem 0 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
}
.supercup-api-plugin-teams-single .scni-team-hero__socials {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}
.supercup-api-plugin-teams-single .scni-team-hero__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}
.supercup-api-plugin-teams-single .scni-team-hero__social:hover { background: #fff; color: #0f172a; }

/* Squad "Appearing in" filter chips (legacy — the live filter is the
 * page-level .scni-team-comp-filter bar further down). */
.supercup-api-plugin-teams-single .scni-team-squad-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.supercup-api-plugin-teams-single .scni-team-squad-filter__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-right: 0.25rem;
}
.supercup-api-plugin-teams-single .scni-team-squad-filter__chip {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.supercup-api-plugin-teams-single .scni-team-squad-filter__chip:hover { border-color: #94a3b8; }
.supercup-api-plugin-teams-single .scni-team-squad-filter__chip.is-active {
    background: var(--scni-comp-brand, #0f172a);
    border-color: var(--scni-comp-brand, #0f172a);
    color: #fff;
}

/* Cohesion — flow Matches + Squad as one page. This used to strip the band
 * treatment entirely (`background: transparent; padding: 0`), which left the
 * white fixture cards sitting on a white page with nothing to group them.
 * The band now behaves like the competition Matches tab: a grey field that
 * the white cards sit on. Only the box chrome the theme would otherwise add
 * is stripped; the field and the rhythm come from the theme
 * (_competition-layout.scss). */
.supercup-api-plugin-teams-single .scni-container {
    margin: 0;
    border: 0;
    box-shadow: none;
}
.supercup-api-plugin-teams-single .scni-team-filterable { margin-bottom: 3rem; }
.supercup-api-plugin-teams-single .scni-container.squad,
.supercup-api-plugin-teams-single section.squad { margin-bottom: 3rem; }

/* Squad-before-Matches order. The DOM keeps Matches (and its filter/standings
 * JS hooks) ahead of Squad, but the page shows the Squad first. A flex-column
 * wrapper + `order` swaps them visually; the page-level "Appearing in" filter
 * sits above this stack and drives both. */
.supercup-api-plugin-teams-single .scni-team-stack {
    display: flex;
    flex-direction: column;
}
.supercup-api-plugin-teams-single .scni-team-stack > .scni-container.squad { order: 1; }
.supercup-api-plugin-teams-single .scni-team-stack > .scni-team-filterable { order: 2; }
/* Section headings ("Matches", "Squad") — uppercase eyebrow with an underline
 * rule so they read clearly as section headers, distinct from the mixed-case
 * day headers ("Monday 27th July") inside the matches list that they were
 * clashing with. */
.supercup-api-plugin-teams-single .scni-container h2.h3,
.supercup-api-plugin-teams-single section h2.h3 {
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #0f172a;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
}

/* Page-level "Appearing in" filter bar (top of the team page) — filters both
 * the matches list and the squad tables. */
.supercup-api-plugin-teams-single .scni-team-comp-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
}
.supercup-api-plugin-teams-single .scni-team-comp-filter__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-right: 0.25rem;
}
.supercup-api-plugin-teams-single .scni-team-comp-pill {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
    border-radius: 999px;
    padding: 0.35rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.supercup-api-plugin-teams-single .scni-team-comp-pill:hover { border-color: #94a3b8; }
.supercup-api-plugin-teams-single .scni-team-comp-pill.active {
    background: var(--scni-comp-brand, #0f172a);
    border-color: var(--scni-comp-brand, #0f172a);
    color: #fff;
}

/* Per-competition squad tables reuse the single-match squad card markup
 * (`.scni-lineup-card` + Bootstrap card/list-group/badges) — no bespoke
 * styling here, so they render identically to the match page. */

/* ── Mobile (phones ≤575px) — tighten the whole team page ────────────
 * Most of the userbase is on a phone, so the priority here is: a compact
 * hero that keeps crest + name side by side, comfortable tap targets on
 * the filter pills and socials, and calmer vertical rhythm between the
 * Matches and Squad sections. */
@media (max-width: 575.98px) {

    /* Hero — less vertical bulk; crest + name stay on one row. */
    .supercup-api-plugin-teams-single .scni-team-hero {
        padding: 1.5rem 0 1.75rem;
        margin-bottom: 1.5rem;
    }
    .supercup-api-plugin-teams-single .scni-team-hero__crumb { margin-bottom: 1rem; }
    .supercup-api-plugin-teams-single .scni-team-hero__identity { gap: 1rem; }
    .supercup-api-plugin-teams-single .scni-team-hero__crest {
        width: 64px;
        height: 64px;
        padding: 0.4rem;
        border-radius: 0.75rem;
    }
    .supercup-api-plugin-teams-single .scni-team-hero__meta { font-size: 0.85rem; }
    /* Bigger tap targets than the desktop 36px. */
    .supercup-api-plugin-teams-single .scni-team-hero__social { width: 40px; height: 40px; }

    /* "Appearing in" — label on its own line so the pills get a full,
     * easy-to-tap row of their own. */
    .supercup-api-plugin-teams-single .scni-team-comp-filter {
        margin-bottom: 1.5rem;
        gap: 0.5rem;
    }
    .supercup-api-plugin-teams-single .scni-team-comp-filter__label {
        flex: 0 0 100%;
        margin: 0 0 0.15rem;
    }
    .supercup-api-plugin-teams-single .scni-team-comp-pill {
        padding: 0.45rem 0.95rem;
        font-size: 0.9rem;
    }

    /* Section headers + rhythm — smaller heading, tighter gaps between the
     * two sections so the page doesn't feel stretched out. */
    .supercup-api-plugin-teams-single .scni-container h2.h3,
    .supercup-api-plugin-teams-single section h2.h3 {
        font-size: 1.4rem;
        margin-bottom: 1.1rem;
        padding-bottom: 0.6rem;
    }
    .supercup-api-plugin-teams-single .scni-team-filterable { margin-bottom: 2rem; }
    .supercup-api-plugin-teams-single .scni-container.squad,
    .supercup-api-plugin-teams-single section.squad { margin-bottom: 2rem; }

    /* Stacked squad tables (row-cols-1) already gap via g-4; nothing to add. */
}