/* ============================================
   PREGAME BLOCK — bloc "Avant les matchs" repliable
   Contient les insights connus AVANT le tip-off (absents + temps de jeu en hausse).
   Distinct visuellement du recap "soir" qui depend des matchs joues.
   Replie par defaut via <details>/<summary> natif (pas de callback).
   ============================================ */
.pregame-block {
    margin: 16px 0 24px 0;
    /* 50% de largeur, aligne a gauche : deux blocs internes (Blesses + Hausse)
       restent cote-a-cote tant que la fenetre est assez large (>= 1100px env.) ;
       passent en 1 colonne empilee sous via .recap-two-col @ media 900px. */
    width: 50%;
    min-width: 520px;
    border: 1px dashed var(--color-border-light);
    border-radius: 10px;
    background: linear-gradient(135deg,
        rgba(var(--color-primary-rgb), 0.04),
        transparent 80%);
    transition: border-color 150ms ease;
}

/* Sur ecrans plus petits, le 50% deviendrait trop etroit pour 2 colonnes
   internes lisibles → on repasse en 100% du parent. */
@media (max-width: 1100px) {
    .pregame-block {
        width: 100%;
        min-width: 0;
    }
}

.pregame-block[open] {
    border-style: solid;
    border-color: var(--color-border);
}

/* Summary stylise comme une bande clickable */
.pregame-summary {
    cursor: pointer;
    list-style: none;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    user-select: none;
    border-radius: 10px;
}

.pregame-summary::-webkit-details-marker {
    display: none;
}

/* Chevron rotatif personnalise (pas de flexe natif) */
.pregame-summary::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: rotate(-45deg);
    transition: transform 200ms ease, border-color 150ms ease;
    flex-shrink: 0;
    margin-left: 2px;
}

.pregame-block[open] .pregame-summary::before {
    transform: rotate(45deg);
    border-color: var(--color-primary-hover);
}

.pregame-summary:hover::before {
    border-color: var(--color-text-primary);
}

.pregame-summary-title {
    color: var(--color-text-primary);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.pregame-summary-sub {
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 500;
    flex: 1;  /* push le sub vers la gauche, occupe l'espace restant */
}

/* Hint "Voir le detail" : pill primary visible juste apres le titre, signal
   immediat que la zone est cliquable. Texte change quand ouvert. */
.pregame-summary-hint {
    color: var(--color-primary-hover);
    background: rgba(var(--color-primary-rgb), 0.10);
    border: 1px solid rgba(var(--color-primary-rgb), 0.30);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    flex-shrink: 0;
    transition: background 120ms ease, border-color 120ms ease;
}

.pregame-summary:hover .pregame-summary-hint {
    background: rgba(var(--color-primary-rgb), 0.18);
    border-color: rgba(var(--color-primary-rgb), 0.50);
}

/* Quand ouvert : le hint devient "Replier" (texte change via ::before) */
.pregame-block[open] .pregame-summary-hint {
    color: var(--color-text-muted);
    background: rgba(var(--color-text-muted-rgb, 148, 163, 184), 0.10);
    border-color: var(--color-border-light);
    font-size: 0;  /* masque le texte original */
}
.pregame-block[open] .pregame-summary-hint::before {
    content: 'Replier';
    font-size: 10px;
}

/* Contenu deplie : laisse .recap-two-col gerer le layout 2 colonnes responsive
   (Blesses a gauche, Hausse a droite — passe en 1 col sous 900px via media query). */
.pregame-content {
    padding: 4px 12px 14px 12px;
}

/* ============================================
   PREGAME — variante "preview-large" pour le mode ?preview=1
   Le bloc devient l'info principale de la page :
   - 75% de la largeur ecran (au lieu de 50%)
   - titre plus gros (H2-like)
   - hint plus visible
   - ouvert par defaut (gere cote Python via `open` attribut)
   ============================================ */
.pregame-block.preview-large {
    width: 75%;
    max-width: none;
    border-style: solid;
    border-color: var(--color-primary);
    background: linear-gradient(135deg,
        rgba(var(--color-primary-rgb), 0.08),
        transparent 80%);
}

.pregame-block.preview-large .pregame-summary {
    padding: 18px 22px;
    gap: 14px;
}

.pregame-block.preview-large .pregame-summary-title {
    font-size: 22px;
    letter-spacing: 0;
}

.pregame-block.preview-large .pregame-summary-sub {
    font-size: 14px;
}

.pregame-block.preview-large .pregame-summary-hint {
    font-size: 11px;
    padding: 4px 12px;
}

.pregame-block.preview-large .pregame-summary::before {
    width: 12px;
    height: 12px;
    border-width: 2.5px;
    margin-left: 4px;
}

.pregame-block.preview-large .pregame-content {
    padding: 8px 18px 20px 18px;
}

/* Sous 1100px : repasse pleine largeur (même contrainte que .pregame-block normal) */
@media (max-width: 1100px) {
    .pregame-block.preview-large {
        width: 100%;
    }
}