/* ==========================================================================
   Bloc 08 · Page Esport (mobile-first 390px)
   Design mobile-first pour /esport et /en/esport : palmarès en grille 2 colonnes,
   grande carte Worlds en tête, hiérarchie claire, padding-bottom suffisant pour
   que le dock mobile ne cache jamais le contenu.
   ========================================================================== */

/* En-tête Esport (mobile centré) */
@media (max-width: 767px) {
    .esport-page-head > .wrap {
        justify-items: center;
        text-align: center;
    }
    .esport-page-head .page-head__kicker::after {
        display: none;
    }
}

/* Section Esport */
.esport-section {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.esport-section:last-of-type {
    padding-bottom: clamp(6rem, 10vw, 7.5rem);
}

/* Titres de section (mobile centré) */
.esport-section-head {
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 768px) {
    .esport-section-head {
        text-align: left;
    }
}

.esport-section-head .h2 {
    margin-top: 0.75rem;
}

.esport-section-head .lead {
    margin-top: 0.85rem;
    font: 500 var(--fs-body) / 1.55 var(--font-body);
    color: #c9c2b6;
    max-width: 54ch;
}

@media (max-width: 767px) {
    .esport-section-head .lead {
        margin-inline: auto;
    }
}

/* Conteneur des résultats Esport */
.esport-results {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.25rem);
}

/* Grande carte Worlds (lead) */
.esport-card--lead {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, rgba(201, 162, 39, 0.12), rgba(201, 162, 39, 0.04));
    border: 1px solid rgba(201, 162, 39, 0.3);
    border-radius: 20px;
    padding: clamp(1.75rem, 4.5vw, 2.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.85rem;
    box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.08), 0 20px 40px -18px rgba(201, 162, 39, 0.16);
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.esport-card--lead:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.18), 0 24px 48px -18px rgba(201, 162, 39, 0.28);
}

.esport-card--lead .esport-card__kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font: 700 clamp(0.7rem, 1.8vw, 0.8rem) / 1 var(--font-body);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-2);
}

.esport-card--lead .esport-card__kicker i {
    font-size: 0.9em;
}

.esport-card--lead .esport-card__event {
    font: 800 clamp(1.35rem, 3.5vw, 1.95rem) / 1.1 var(--font-body);
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: -0.015em;
    max-width: 24ch;
}

.esport-card--lead .esport-card__location {
    font: 600 clamp(0.95rem, 2.2vw, 1.15rem) / 1.35 var(--font-body);
    color: #e8e2d6;
    max-width: 36ch;
}

.esport-card--lead .esport-card__detail {
    font: 500 clamp(0.85rem, 2vw, 0.95rem) / 1.4 var(--font-body);
    color: var(--muted);
    max-width: 40ch;
}

/* Grille 2 colonnes (autres résultats) */
.esport-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 2.5vw, 1.25rem);
}

@media (min-width: 768px) {
    .esport-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .esport-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Carte résultat standard */
.esport-card {
    background: var(--bg-elevated);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: clamp(1.25rem, 3vw, 1.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}

.esport-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.14);
}

.esport-card__rank {
    font: 900 clamp(2rem, 4.5vw, 2.5rem) / 1 var(--font-display);
    color: var(--gold-2);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.esport-card__rank .hash {
    font-size: 0.5em;
    opacity: 0.7;
}

.esport-card__rank--qual {
    font-size: clamp(1.75rem, 4vw, 2rem);
}

.esport-card__rank--qual i {
    color: var(--gold-2);
}

.esport-card__event {
    font: 700 clamp(0.9rem, 2vw, 1rem) / 1.25 var(--font-body);
    color: var(--text);
    letter-spacing: 0.01em;
}

.esport-card__round {
    font: 500 clamp(0.8rem, 1.8vw, 0.85rem) / 1.35 var(--font-body);
    color: var(--muted);
}

/* Bouton "Voir tous les résultats" */
.esport-show-all {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.esport-show-all .btn {
    min-width: 240px;
}

/* Grille cachée initialement */
.esport-grid--hidden {
    display: none;
}

.esport-grid--hidden.is-visible {
    display: grid;
}

/* Animations scroll-driven (optionnelles, progressives) */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .esport-card,
        .esport-card--lead {
            animation: b08-cardIn linear both;
            animation-timeline: view();
            animation-range: entry 0% cover 25%;
        }
        @keyframes b08-cardIn {
            from {
                translate: 0 12px;
            }
        }
    }
}