/*
 * DJIKOSTREAM — cartes HTML creees dynamiquement
 * Fichier CSS additionnel : ne modifie aucun fichier JavaScript.
 * Compatibilite avec les deux structures :
 *   (1) cartes initiales avec .poster-container et .media-card-content
 *   (2) cartes creees par script.js avec img, h3 et p directement dans article
 */

/* Sur l'accueil uniquement : lignes horizontales avec defilement, jamais en grille verticale. */
body#estAccueil #trending-grid,
body#estAccueil #movies-grid,
body#estAccueil #series-grid {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    max-width: 100%;
    padding-bottom: 10px;
    scrollbar-width: thin;
}

body#estAccueil #trending-grid > .media-card,
body#estAccueil #movies-grid > .media-card,
body#estAccueil #series-grid > .media-card {
    flex: 0 0 calc((100% - 72px) / 4);
    min-width: 0;
}

/* Cartes creees en JavaScript : la structure simplifiee fonctionne sans modifier script.js. */
.media-grid > .media-card:has(> img.media-poster) {
    display: flex;
    flex-direction: column;
}

/* L'image est placee AVANT le titre, meme si elle a ete ajoutee apres en JavaScript. */
.media-grid > .media-card > img.media-poster {
    order: -1;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    flex: 0 0 auto;
    object-fit: cover;
    background: linear-gradient(145deg,#372d67,#1a203b 60%,#13182a);
}

/* Reproduit l'espacement du bloc .media-card-content des cartes initiales. */
.media-grid > .media-card > h3 {
    margin: 0;
    padding: 17px 17px 0;
    font: inherit;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.media-grid > .media-card > p.media-meta {
    margin: 0;
    padding: 8px 17px 0;
    color: var(--text-soft);
    font-size: .92rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Badge d'apparence identique aux autres cartes, sans nouvel element JS.
   Ce badge CSS concerne UNIQUEMENT les cartes dynamiques simples. */
.media-grid > .media-card:has(> img.media-poster)::after {
    content: "Film";
    order: 3;
    display: inline-flex;
    align-self: flex-start;
    margin: 12px 17px 17px;
    padding: 4px 9px;
    border: 1px solid rgba(162,119,238,.5);
    border-radius: 999px;
    background: var(--primary-soft);
    color: #dfc9ff;
    font-size: .78rem;
    line-height: 1.2;
}

/* Identite du badge selon la section, si les series/tendances utilisent un jour ce DOM simplifie. */
#series-grid > .media-card:has(> img.media-poster)::after {content:"Série"}
#trending-grid > .media-card:has(> img.media-poster)::after {content:"Tendance"}

/* Sur films.html / series.html les .media-grid conservent leur grille verticale existante.
   Seules les sections de l'accueil passent en carrousel horizontal. */
@media (max-width: 980px) {
    body#estAccueil #trending-grid > .media-card,
    body#estAccueil #movies-grid > .media-card,
    body#estAccueil #series-grid > .media-card {
        flex-basis: calc((100% - 24px) / 2);
    }
}

@media (max-width: 620px) {
    body#estAccueil #trending-grid > .media-card,
    body#estAccueil #movies-grid > .media-card,
    body#estAccueil #series-grid > .media-card {
        flex-basis: min(84%, 290px);
    }
}