/* ==========================================================================
   live-view.css — Design airshow-display sur fond sombre, structure Bootstrap

   La structure grid (2 colonnes desktop, 1 colonne mobile) est gérée par les
   classes Bootstrap col-lg-8 / col-lg-4 côté HTML. Ce fichier ne contient
   QUE le design (couleurs, badges, cards, sidebar sticky…), pas de grid.
   ========================================================================== */

.live-view-section {
    background: #001a30;
    color: #fff;
    min-height: 70vh;
    /* Padding-top pour passer sous la navbar top fixe d'airshowdisplay.fr
       (~70px de hauteur). Sans ça, le titre est masqué en haut de page. */
    padding-top: 6rem !important;
    padding-bottom: 3rem !important;
    /* Coupe tout débordement horizontal potentiel (iframe YouTube, ad qui
       force sa largeur, etc.). */
    overflow-x: hidden;
}

@media (max-width: 991.98px) {
    .live-view-section {
        padding-top: 5rem !important;
    }
}

/* -- Header (titre live + retour événement) ----------------------------- */
.live-view-header {
    margin-bottom: 1.5rem;
}
.live-view-header-inner {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.live-view-titles {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-wrap: wrap;
}
.live-view-title {
    font-family: 'Antonio', sans-serif;
    font-size: 2rem;
    color: #fff;
    margin: 4px 0 0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: transparent;
    word-break: break-word;
}
.live-view-event-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.95em;
    transition: color 0.15s ease;
}
.live-view-event-link:hover {
    color: #fff;
}

/* -- Badges statut ------------------------------------------------------ */
.live-view-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-family: 'Antonio', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    align-self: flex-start;
}
.live-view-badge--live     { background: #ED1C24; color: #fff; }
.live-view-badge--upcoming { background: rgba(255,255,255,.15); color: #fff; }
.live-view-badge--ended    { background: rgba(255,255,255,.08); color: rgba(255,255,255,.5); }

.live-view-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    animation: live-view-pulse 1.6s ease-in-out infinite;
}
@keyframes live-view-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* -- Player wrapper ----------------------------------------------------- */
/* min-width:0 sur .col-lg-8 pour permettre au player de rétrécir en mobile */
.live-view-player-col {
    min-width: 0;
}

.live-view-player-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}
.live-view-player-wrap iframe,
.live-view-player-wrap img,
.live-view-player-wrap video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    border: 0;
    display: block;
}

/* Teaser (upcoming) */
.live-view-teaser {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-color: #1a1a1a;
    position: relative;
}
.live-view-teaser-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.8) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: #fff;
    padding: 2rem;
    text-align: center;
}
.live-view-teaser-date {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}
.live-view-teaser-tz {
    opacity: 0.7;
    font-size: 0.9rem;
}

/* Fallback (pas d'ID YouTube) */
.live-view-fallback {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}
.live-view-fallback img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.live-view-fallback-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.4);
    color: #fff;
    font-size: 3rem;
    transition: background 0.2s ease;
}
.live-view-fallback:hover .live-view-fallback-play {
    background: rgba(0,0,0,0.6);
}

/* -- Sidebar (col-lg-4) : sticky pendant le scroll du player ----------- */
/* Le sticky est appliqué sur la col Bootstrap elle-même via cette classe
   qu'on ajoute côté HTML : <aside class="col-lg-4 live-view-sidebar">.
   align-self:start (implicite en flex .row) + top:100px = sidebar figée. */
.live-view-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 992px) {
    .live-view-sidebar {
        position: sticky;
        top: 100px;
        align-self: flex-start;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,0.2) transparent;
    }
    .live-view-sidebar::-webkit-scrollbar {
        width: 6px;
    }
    .live-view-sidebar::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.2);
        border-radius: 3px;
    }
}

/* Override du .ad-square d'airshow-details : ici on ne veut PAS de sticky
   sur .ad-square lui-même — c'est la sidebar parente qui gère le sticky. */
.live-view-sidebar .ad-square {
    position: relative;
    top: auto;
}

/* Marge d'aération autour des ads : évite qu'ils collent au player ou aux
   autres blocs (sidebar meta, autres lives…). */
.live-view-player-col .ad-square {
    margin-top: 1.5rem;
}
.live-view-sidebar .ad-square {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* -- Meta (horaire) dans la sidebar ------------------------------------- */
.live-view-meta {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1rem;
    color: #fff;
}
.live-view-meta-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    flex-wrap: wrap;
}
.live-view-meta-tz {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

/* -- Section "Autres lives" en bas de sidebar --------------------------- */
.live-view-others {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1rem;
}
.live-view-others-title {
    font-family: 'Antonio', sans-serif;
    font-size: 1.1rem;
    color: #fff;
    margin: 0 0 0.75rem;
    text-transform: uppercase;
}
.live-view-others-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.live-view-others-link {
    display: flex;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background 0.15s ease;
}
.live-view-others-link:hover {
    background: rgba(255, 255, 255, 0.08);
}
.live-view-others-thumb {
    flex-shrink: 0;
    width: 80px;
    height: 60px;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}
.live-view-others-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #ED1C24;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 3px;
    text-transform: uppercase;
}
.live-view-others-body {
    flex: 1;
    min-width: 0;
}
.live-view-others-title-line {
    font-size: 0.9rem;
    color: #fff;
    margin: 0 0 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.live-view-others-meta {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* -- Description live (sous le player) ---------------------------------- */
.live-view-description {
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
    font-size: 0.95em;
}

/* -- Responsive : ajustements mineurs (grid géré par Bootstrap) -------- */
@media (max-width: 991.98px) {
    .live-view-title {
        font-size: 1.5rem;
    }
}