/**
 * YouTube Video Grid – Frontend-Styles
 *
 * Vorgaben (fix):
 *  - 2 Spalten auf Desktop (> 768px)
 *  - 1 Spalte auf Mobil (<= 768px)
 *  - 20px Abstand (gap) zwischen den Kacheln
 *  - 20px Border-Radius pro Kachel
 *  - responsives 16:9-Seitenverhältnis, iframe füllt die Kachel voll aus
 */

/* Das Grid: standardmäßig 2 Spalten (Desktop-first). */
.yvg-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: max-content; /* jede Zeile so hoch wie ihr Inhalt (kein Strecken) */
        gap: 20px;
        width: 100%;
        box-sizing: border-box;
}

/* Eine einzelne Video-Kachel. */
.yvg-item {
        position: relative;
        width: 100%;
        min-width: 0;          /* verhindert Overflow-Probleme in Grid/Flex */
        height: auto;          /* Höhe richtet sich nach dem Ratio-Container */
        border-radius: 20px;
        overflow: hidden;      /* schneidet die abgerundeten Ecken sauber ab */
        background: #000;      /* schwarzer Hintergrund, bis das Video geladen ist */
        box-sizing: border-box;
}

/*
 * Der Ratio-Container erzwingt ein 16:9-Seitenverhältnis.
 *
 * Wir nutzen bewusst den bombensicheren Padding-Top-Trick (56.25% = 9/16)
 * als PRIMÄRE Methode. Grund: Die moderne aspect-ratio-Eigenschaft berechnet
 * die Höhe innerhalb von Grid-/Flex-Containern auf einigen mobilen Browsern
 * (v. a. älteres Safari/iOS) falsch, wodurch die Kacheln zusammenfallen oder
 * abgeschnitten wirken. Der Padding-Top-Trick funktioniert überall zuverlässig.
 */
.yvg-item__ratio {
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 56.25%;   /* 9 / 16 = 56.25% -> exaktes 16:9 */
}

/* Das iframe füllt die Kachel komplett aus. */
.yvg-item__iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
}

/* Hinweis-Text, wenn keine Videos gefunden wurden. */
.yvg-grid--empty {
        display: block;
}

.yvg-empty-msg {
        margin: 0;
        padding: 16px;
        color: #666;
        font-style: italic;
}

/* Mobil: 1 Spalte. */
@media (max-width: 768px) {
        .yvg-grid {
                grid-template-columns: 1fr;
        }
}