/*
 * [afficher_rencontres] — homepage strip: live matches, then upcoming ones by day.
 * Markup: VR_Match_Strip in ScrapPlugin.php.
 *
 * Every rule is scoped under .vr-strip: the stylesheet this replaces
 * (style-rencontres-simple.css) styled bare .card / .team / .score selectors
 * and leaked into the rest of the homepage.
 *
 * Red means live and nothing else.
 */

.vr-strip {
    --vrs-ink: #002a5d;
    --vrs-blue: #003f7c;
    --vrs-live: #d62242;
    --vrs-muted: #5a6b82;
    --vrs-line: #dde4ee;
    --vrs-hover: #f4f7fb;
    --vrs-surface: #fff;
    --vrs-radius: 0.75rem;
    --vrs-card: 16.5rem;

    box-sizing: border-box;
    margin: 0;
    color: var(--vrs-ink);
    font-family: "Barlow Semi Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
}

.vr-strip *,
.vr-strip *::before,
.vr-strip *::after {
    box-sizing: inherit;
}

.vr-strip__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ===== Header ===== */

.vr-strip__head {
    display: flex;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-bottom: 1rem;
}

.vr-strip .vr-strip__title {
    flex: 1 1 auto;
    margin: 0;
    color: var(--vrs-ink);
    font-family: Poppins, sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* WordPress global styles set Poppins on every link (a:where(...)). */
.vr-strip a {
    font-family: inherit;
}

.vr-strip .vr-strip__all {
    color: var(--vrs-blue);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.vr-strip .vr-strip__all:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.vr-strip__nav {
    display: flex;
    gap: 0.5rem;
}

.vr-strip__nav[hidden] {
    display: none;
}

.vr-strip__btn {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0;
    padding: 0;
    border: 1px solid var(--vrs-line);
    border-radius: 50%;
    background: var(--vrs-surface);
    color: var(--vrs-blue);
    cursor: pointer;
}

.vr-strip__btn:hover:not(:disabled) {
    border-color: var(--vrs-blue);
}

.vr-strip__btn:disabled {
    color: #b7c2d1;
    cursor: default;
}

.vr-strip__btn[data-dir="-1"] svg {
    transform: scaleX(-1);
}

/* Touch screens swipe; arrows are for mice. */
@media (hover: none), (pointer: coarse) {
    .vr-strip__nav {
        display: none;
    }
}

/* ===== Track: groups of matches, scrolled sideways ===== */

.vr-strip__track {
    display: flex;
    gap: 1rem;
    padding-block: 2px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.vr-strip__track::-webkit-scrollbar {
    display: none;
}

/* The next card fades out instead of being cut, as long as there is more to see. */
@media (min-width: 768px) {
    .vr-strip__track[data-more] {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 4rem), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 4rem), transparent);
    }
}

.vr-strip__group {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 0.5rem;
}

/* Stays in view while its own group scrolls past (offset from the track's padding edge). */
.vr-strip .vr-strip__day {
    position: sticky;
    left: 0;
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: var(--vrs-ink);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.vr-strip .vr-strip__group--live .vr-strip__day {
    color: var(--vrs-live);
}

.vr-strip__group--live .vr-strip__day::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
    animation: vrs-pulse 1.6s ease-in-out infinite;
}

/* One band per group, split into matches like a scoreboard; all bands share the tallest height. */
.vr-strip .vr-strip__list {
    display: flex;
    flex: 1 0 auto;
    margin: 0;
    padding: 0;
    border: 1px solid var(--vrs-line);
    border-radius: var(--vrs-radius);
    background: var(--vrs-surface);
    list-style: none;
}

/* A width, not a flex-basis: Firefox and Safari size the band from its items'
   widths and ignore flex-basis, so the band came out narrower than its cards. */
.vr-strip .vr-strip__item {
    display: flex;
    flex: none;
    width: var(--vrs-card);
    margin: 0;
    padding: 0;
    scroll-snap-align: start;
}

.vr-strip__item + .vr-strip__item {
    border-left: 1px solid var(--vrs-line);
}

/* Snap to the band's own border, not 1px inside it. */
.vr-strip__item:first-child {
    scroll-margin-left: 1px;
}

/* ===== Match ===== */

.vr-strip .vr-match {
    position: relative;
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    grid-template-rows: auto 1.875rem 1.875rem auto;
    align-content: start;
    flex: 1;
    column-gap: 0.625rem;
    row-gap: 0.25rem;
    padding: 0.75rem 1rem 0.875rem;
    overflow: hidden;
    color: var(--vrs-ink);
    text-decoration: none;
}

.vr-strip__item:first-child .vr-match {
    border-radius: calc(var(--vrs-radius) - 1px) 0 0 calc(var(--vrs-radius) - 1px);
}

.vr-strip__item:last-child .vr-match {
    border-radius: 0 calc(var(--vrs-radius) - 1px) calc(var(--vrs-radius) - 1px) 0;
}

.vr-strip__item:only-child .vr-match {
    border-radius: calc(var(--vrs-radius) - 1px);
}

.vr-strip .vr-match:hover {
    background: var(--vrs-hover);
    color: var(--vrs-ink);
    text-decoration: none;
}

.vr-strip .vr-match:focus-visible {
    outline: 2px solid var(--vrs-blue);
    outline-offset: -2px;
}

/* On air: the red light across the top of a match being played. */
.vr-match[data-state="live"]::before,
.vr-match[data-state="halftime"]::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--vrs-live);
}

.vr-match__head {
    display: flex;
    grid-column: 1 / -1;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.3;
}

.vr-match__comp {
    min-width: 0;
    overflow: hidden;
    color: var(--vrs-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vr-match__status {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.35rem;
    color: var(--vrs-muted);
    font-weight: 600;
}

.vr-match__status:empty {
    display: none;
}

.vr-match[data-state="live"] .vr-match__status,
.vr-match[data-state="halftime"] .vr-match__status {
    color: var(--vrs-live);
}

.vr-match[data-state="live"] .vr-match__status::before {
    content: "";
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: currentColor;
    animation: vrs-pulse 1.6s ease-in-out infinite;
}

/* Each team's logo, name and score sit directly on the match grid. */
.vr-match__team {
    display: contents;
}

.vr-match__team--home > * {
    grid-row: 2;
}

.vr-match__team--away > * {
    grid-row: 3;
}

.vr-strip .vr-match__logo {
    grid-column: 1;
    align-self: center;
    width: 1.75rem;
    height: 1.75rem;
    max-width: none;
    margin: 0;
    object-fit: contain;
}

.vr-match__logo--blank {
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e9eef5;
    color: var(--vrs-muted);
    font-size: 0.6875rem;
    font-weight: 700;
}

.vr-match__name {
    grid-column: 2;
    align-self: center;
    min-width: 0;
    overflow: hidden;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The figures are the scoreboard: score once under way, kickoff time before. */
.vr-match__score,
.vr-match__time {
    grid-column: 3;
    align-self: center;
    justify-self: end;
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.vr-match__time {
    grid-row: 2 / span 2;
}

.vr-match[data-state="scheduled"] .vr-match__score,
.vr-match[data-state="postponed"] .vr-match__score,
.vr-match[data-state="cancelled"] .vr-match__score,
.vr-match:not([data-state="scheduled"]) .vr-match__time {
    display: none;
}

.vr-match[data-state="finished"][data-lead="home"] .vr-match__team--away,
.vr-match[data-state="finished"][data-lead="away"] .vr-match__team--home {
    color: var(--vrs-muted);
}

/* Set by match-strip.js when a refresh brings a new score. */
.vr-match__score.is-changed {
    animation: vrs-score 1.8s ease-out;
}

.vr-match__tv {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    margin-top: 0.375rem;
    color: var(--vrs-muted);
    font-size: 0.875rem;
    line-height: 1.3;
}

.vr-match__tv svg {
    flex: none;
}

.vr-match__channel {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Nothing scheduled ===== */

.vr-strip .vr-strip__empty {
    margin: 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--vrs-line);
    border-radius: var(--vrs-radius);
    color: var(--vrs-muted);
    font-size: 1rem;
    line-height: 1.5;
}

.vr-strip .vr-strip__empty a {
    color: var(--vrs-blue);
    font-weight: 600;
}

/* ===== Small screens ===== */

@media (max-width: 600px) {
    /* Sized on 119 real team names: nine in ten fit beside a kickoff time. */
    .vr-strip {
        --vrs-card: 16rem;
    }

    .vr-strip .vr-match {
        column-gap: 0.5rem;
        padding-inline: 0.875rem;
    }

    .vr-match__name {
        font-size: 1rem;
    }

    .vr-match__score,
    .vr-match__time {
        font-size: 1.375rem;
    }

    .vr-strip .vr-strip__title {
        font-size: 1.125rem;
    }

    .vr-strip__head {
        margin-bottom: 0.75rem;
    }

    .vr-strip__track {
        gap: 0.75rem;
    }

    /* Swipe edge to edge inside WordPress' padded groups, first card on the text column. */
    .has-global-padding > .vr-strip .vr-strip__track {
        margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px));
        margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px));
        padding-right: var(--wp--style--root--padding-right, 0px);
        padding-left: var(--wp--style--root--padding-left, 0px);
        scroll-padding-inline: var(--wp--style--root--padding-left, 0px) var(--wp--style--root--padding-right, 0px);
    }
}

@keyframes vrs-pulse {
    50% {
        opacity: 0.25;
    }
}

@keyframes vrs-score {
    from {
        color: var(--vrs-live);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vr-strip *,
    .vr-strip *::before {
        animation: none !important;
    }
}