/* === Results page ===========================================================
   Архив прошедших забегов. Визуальный язык совпадает с `.distance-strip` со
   страниц событий (event.html / event-bishkek.html), но строки — это ссылки,
   а не <details>: один клик → переход на страницу с результатами забега. */

.results-page { background: #09152f; }

/* ─── Hero ──────────────────────────────────────────────────────────────── */

.results-hero {
    --bg: #09152f;
    --accent: #427bff;
    --on-accent: #09152f;
    background: #09152f;
}

.results-hero__center {
    position: absolute;
    top: 50%;
    left: var(--side-pad);
    transform: translateY(-50%);
    width: calc(1500 * var(--u));
    max-width: calc(100% - 80px);
}

.results-hero__eyebrow {
    font-family: 'Roboto Flex', sans-serif;
    font-weight: 600;
    font-stretch: 25%;
    font-size: calc(28 * var(--u));
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
    opacity: 0.7;
    margin-bottom: calc(20 * var(--u));
}

.results-hero__title {
    margin: 0 0 calc(32 * var(--u));
    width: 100%;
    font-size: calc(276.957 * var(--u));
    line-height: 0.85;
    text-align: left;
}

.results-hero__lede {
    font-family: 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: calc(24 * var(--u));
    line-height: 1.4;
    color: var(--accent);
    opacity: 0.85;
    max-width: calc(820 * var(--u));
}

.results-hero__scroll-cue {
    position: absolute;
    left: var(--side-pad);
    bottom: calc(80 * var(--u));
    display: inline-flex;
    width: calc(28 * var(--u));
    height: calc(42 * var(--u));
    color: var(--accent);
    pointer-events: none;
    animation: results-hero-scroll-cue 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.results-hero__scroll-cue svg {
    width: 100%;
    height: 100%;
    display: block;
}

@keyframes results-hero-scroll-cue {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.45;
    }
    50% {
        transform: translateY(calc(10 * var(--u)));
        opacity: 0.95;
    }
}

@media (prefers-reduced-motion: reduce) {
    .results-hero__scroll-cue {
        animation: none;
        opacity: 0.7;
    }
}

/* ─── Список забегов (как distance-list, но строки = ссылки) ───────────── */

.results-list {
    background: #09152f;
    color: #427bff;
    --bg: #09152f;
    --accent: #427bff;
    --on-accent: #09152f;
}

.result-strip {
    display: grid;
    grid-template-columns: calc(220 * var(--u)) 1fr auto;
    align-items: center;
    column-gap: calc(60 * var(--u));
    padding: calc(40 * var(--u)) 40px;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
    background: var(--bg);
    color: var(--accent);
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.35s ease,
        color 0.35s ease,
        padding 0.35s ease;
}

.result-strip:last-child { border-bottom: none; }

.result-strip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: calc(-4 * var(--u));
}

.result-strip__meta {
    display: flex;
    flex-direction: column;
    gap: calc(8 * var(--u));
    color: inherit;
}

.result-strip__year {
    font-family: 'Roboto Flex', sans-serif;
    font-weight: 600;
    font-stretch: 25%;
    font-size: calc(64 * var(--u));
    line-height: 0.9;
    color: inherit;
}

.result-strip__sub {
    font-family: 'Golos Text', sans-serif;
    font-weight: 500;
    font-size: calc(18 * var(--u));
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: inherit;
    opacity: 0.7;
}

.result-strip__name {
    font-family: 'Roboto Flex', sans-serif;
    font-weight: 600;
    font-stretch: 25%;
    font-size: calc(96 * var(--u));
    line-height: 0.9;
    text-transform: uppercase;
    color: inherit;
    min-width: 0;
}

.result-strip__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(120 * var(--u));
    height: calc(28 * var(--u));
    color: inherit;
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.15, 1);
}

.result-strip__arrow svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Hover — повторяем поведение distance-strip[open]: акцентная заливка
   и тёмный текст. Курсорная стрелка получает форвардный нудж. */
.result-strip:hover,
.result-strip:focus-visible {
    background: #427bff;
    color: #09152f;
    --accent: #09152f;
    --on-accent: #427bff;
}

.result-strip:hover .result-strip__arrow,
.result-strip:focus-visible .result-strip__arrow {
    transform: translateX(calc(20 * var(--u)));
}

/* ─── Mobile (≤768px) ───────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .results-hero__stage {
        justify-content: center;
        gap: 12px;
    }

    .results-hero__center {
        position: static;
        transform: none;
        width: 100%;
        max-width: none;
        left: auto;
        top: auto;
    }

    .results-hero__eyebrow {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .results-hero__title {
        margin: 4px 0 16px;
        font-size: clamp(56px, 16vw, 110px);
        line-height: 0.88;
    }

    .results-hero__lede {
        font-size: 15px;
        line-height: 1.4;
        max-width: none;
    }

    .results-hero__scroll-cue {
        left: 20px;
        bottom: 24px;
        width: 18px;
        height: 28px;
    }

    @keyframes results-hero-scroll-cue {
        0%, 100% { transform: translateY(0); opacity: 0.45; }
        50%      { transform: translateY(6px); opacity: 0.95; }
    }

    /* Result strip — на мобиле складываем в две строки:
       ряд 1: название забега + стрелка справа
       ряд 2: год · дата · место (мутая подпись на всю ширину) */
    .result-strip {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        column-gap: 14px;
        row-gap: 6px;
        padding: 22px 20px;
        align-items: center;
    }

    .result-strip__name {
        grid-column: 1;
        grid-row: 1;
        font-size: clamp(22px, 6.4vw, 34px);
        line-height: 0.95;
    }

    .result-strip__arrow {
        grid-column: 2;
        grid-row: 1;
        width: 44px;
        height: 12px;
        align-self: center;
    }

    .result-strip__meta {
        grid-column: 1 / -1;
        grid-row: 2;
        flex-direction: row;
        align-items: baseline;
        gap: 8px;
        opacity: 0.7;
    }

    .result-strip__year {
        font-size: 13px;
        line-height: 1;
    }

    .result-strip__year::after {
        content: '·';
        margin-left: 8px;
        opacity: 0.6;
    }

    .result-strip__sub {
        font-size: 11px;
        opacity: 1;
    }

    /* Mobile: убираем «движение» стрелки, чтобы тач-нажатие не ощущалось как лаг */
    .result-strip:hover .result-strip__arrow,
    .result-strip:focus-visible .result-strip__arrow {
        transform: none;
    }
}