/* Les valeurs sont lues sur les custom properties du thème actif (héritées de :root)
   avec repli sur l'apparence d'origine : le plugin reste autonome hors de ce thème. */

.remibuisson-yt {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 1rem);
    background: var(--black, #000);
}

/* Lecteur principal */
.remibuisson-yt__player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--black, #000);
}

.remibuisson-yt__player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Grille de vignettes, mobile-first : deux colonnes déclarées en base, puis
   largeur mini intrinsèque au-delà de 768px. En dessous, un minmax() ferait
   *augmenter* le nombre de colonnes quand l'écran rétrécit. */
.remibuisson-yt__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4, 1rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Cellule de la grille. Le bouton est à l'intérieur : c'est donc le <li> qui
   se retire du flux quand son lot n'est pas encore révélé, sans quoi une
   cellule vide continuerait d'occuper sa place. */
.remibuisson-yt__item { display: block; min-width: 0; }
.remibuisson-yt__item.is-hidden { display: none; }

.remibuisson-yt__thumb {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: left;
    color: inherit;
}

.remibuisson-yt__thumb:focus-visible {
    outline: 1px solid var(--red, #C8392B);
    outline-offset: 2px;
}

/* Conteneur de la vignette. Il porte le cadre et rogne son contenu : un <img>
   nu ne peut ni recevoir de recouvrement, ni contenir son propre agrandissement
   au survol si le thème en applique un. */
.remibuisson-yt__media {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--color-surface, #111);
    border: 1px solid var(--gray, transparent);
    transition: border-color var(--transition, 180ms ease);
}

.remibuisson-yt__thumb:hover .remibuisson-yt__media {
    border-color: rgba(var(--white-rgb, 255, 255, 255), 0.4);
}

.remibuisson-yt__thumb.is-active .remibuisson-yt__media {
    border-color: var(--red, currentColor);
}

.remibuisson-yt__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.remibuisson-yt__title {
    display: block;
    padding: var(--space-2, 0.4rem);
    font-family: var(--font-mono, inherit);
    font-size: var(--text-xs, 0.75rem);
    line-height: 1.4;
    color: var(--mid, inherit);
    transition: color var(--transition, 180ms ease);
}

.remibuisson-yt__thumb:hover .remibuisson-yt__title,
.remibuisson-yt__thumb.is-active .remibuisson-yt__title {
    color: var(--white, inherit);
}

/* Durée et nombre de vues — présents seulement si l'attribut `details` est actif
   (le flux RSS, lui, ne fournit que les vues). */
.remibuisson-yt__meta {
    display: block;
    padding: 0 var(--space-2, 0.4rem) var(--space-2, 0.4rem);
    font-family: var(--font-mono, inherit);
    font-size: var(--text-xs, 0.75rem);
    line-height: 1.4;
    color: var(--mid, inherit);
}

/* Bouton charger plus — calqué sur .btn / .btn--ghost du thème */
.remibuisson-yt__more {
    text-align: center;
    padding: var(--space-2, 0.5rem) 0;
}

.remibuisson-yt__load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--mid, inherit);
    border: 1px solid var(--gray, currentColor);
    border-radius: 0;
    padding: 0.6rem 1.4rem;
    font-family: var(--font-mono, inherit);
    font-size: var(--text-xs, inherit);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--transition, 180ms ease);
}

.remibuisson-yt__load-more:hover {
    border-color: var(--white, currentColor);
    color: var(--white, inherit);
}

.remibuisson-yt__load-more:focus-visible {
    outline: 1px solid var(--red, #C8392B);
    outline-offset: 2px;
}

/* Cible tactile pleine largeur en base, largeur naturelle dès qu'il y a la place. */
.remibuisson-yt__load-more {
    width: 100%;
}

.remibuisson-yt__load-more[disabled] {
    opacity: 0.5;
    cursor: default;
}

/* Paliers — mêmes bornes que le thème (481 / 769 en min-width). */
@media (min-width: 481px) {
    .remibuisson-yt__load-more {
        width: auto;
    }
}

@media (min-width: 769px) {
    .remibuisson-yt {
        gap: var(--space-5, 1.25rem);
    }

    .remibuisson-yt__grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: var(--space-8, 2rem);
    }
}