/*
Letzte Cleaning Prüfung: 23.09.2026
Letztes Cleaning: 01.09.2026

Gemeinsame Vorlage für alle Medien-Galerien der Contentfactory.

Anlass (01.09.2026): Videoverlauf und Shorts-Verlauf hatten jeder ein eigenes
Raster mit eigenen Zahlen. Die Shorts-Kacheln blieben dadurch rund ein Drittel
niedriger als die Hochkant-Kacheln im Videoverlauf, obwohl beide dasselbe
zeigen. Statt die Werte ein zweites Mal abzuschreiben, stehen sie hier
EINMAL - wer die Kachelgröße ändert, ändert sie für beide Galerien.

Benutzung:

  <div class="medien-galerie-raster …">
    <article class="medien-galerie-kachel …">              16:9, zwei Spalten
    <article class="medien-galerie-kachel ist-hoch …">      9:16, zwei Zeilen
    <article class="medien-galerie-kachel ist-quadrat …">   1:1, zwei mal zwei

Querformat ist der Grundfall, weil die Galerien das so führen: eine Kachel
ohne Formatklasse ist 16:9. Die Klassen stehen ZUSÄTZLICH zu den bisherigen
(.video-history-gallery-grid, .shorts-history-grid …); jene tragen weiterhin
Farbe, Rahmen und Verhalten, diese allein die Geometrie.

Warum die Spalten in Hochkant-Breite stehen und Querformate zwei davon
spannen: sonst stünden die schmalen 9:16 zentriert in landschaftsbreiten
Spalten und das Raster hätte überall Lücken (Befund vom 31.08.2026). Die
Zeilenhöhe ist auf 16:9 der Doppelspalte abgestimmt - Querformate bleiben
dadurch praktisch unbeschnitten, die 9:16 füllen ihre Spalte und werden
seitlich um rund 20 % angeschnitten. Das Motiv sitzt mittig; der Anschnitt
ist der bewusste Tausch gegen die Lücken.
*/

:root {
  /* Die einzige Stelle mit den Maßen. */
  --medien-galerie-spalte: clamp(180px, 14vw, 240px);
  --medien-galerie-zeile: clamp(212px, 15.9vw, 278px);
  --medien-galerie-abstand: 14px;
}

.medien-galerie-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--medien-galerie-spalte), 1fr));
  grid-auto-rows: var(--medien-galerie-zeile);
  /* dense füllt die Lücken, die entstehen, wenn ein Querformat nicht mehr in
     die angefangene Zeile passt. */
  grid-auto-flow: dense;
  gap: var(--medien-galerie-abstand);
  align-items: stretch;
}

/* aspect-ratio MUSS hier abgeschaltet werden: im Raster bestimmt allein die
   Zelle die Größe. Mit einem Seitenverhältnis rechnet die Kachel ihre Breite
   aus der festen Zeilenhöhe zurück (550 × 9/16 = 309px) - deutlich mehr als
   die Spalte, und die Kachel ragt über ihre Nachbarn.

   min-width/min-height:0 ist Pflicht: Grid-Items weigern sich sonst, kleiner
   zu werden als die intrinsische Größe ihres geladenen Videos (720×1280 nach
   dem ersten Hover) und wachsen ebenfalls über die Nachbarn.
   Beides zusammen war der Befund vom 31.08.2026 (überlappende Kacheln). */
.medien-galerie-raster > .medien-galerie-kachel {
  flex: none;
  grid-column: span 2;
  grid-row: auto;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  aspect-ratio: auto;
  overflow: hidden;
}

.medien-galerie-raster > .medien-galerie-kachel.ist-hoch {
  grid-column: auto;
  grid-row: span 2;
}

.medien-galerie-raster > .medien-galerie-kachel.ist-quadrat {
  grid-column: span 2;
  grid-row: span 2;
}

/* Schmale Fenster: feste Spaltenzahl, Höhe wieder aus dem Seitenverhältnis.
   Die doppelte Zeilenhöhe von oben würde hier eine einzelne Kachel höher als
   das Fenster machen - man scrollte an einem einzigen Video. */
@media (max-width: 1050px) {
  .medien-galerie-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
  }
  .medien-galerie-raster > .medien-galerie-kachel {
    grid-column: span 2;
    grid-row: auto;
    aspect-ratio: 16 / 9;
  }
  .medien-galerie-raster > .medien-galerie-kachel.ist-hoch {
    grid-column: auto;
    aspect-ratio: 9 / 16;
  }
  .medien-galerie-raster > .medien-galerie-kachel.ist-quadrat {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 720px) {
  .medien-galerie-raster {
    grid-template-columns: 1fr;
  }
  .medien-galerie-raster > .medien-galerie-kachel,
  .medien-galerie-raster > .medien-galerie-kachel.ist-hoch,
  .medien-galerie-raster > .medien-galerie-kachel.ist-quadrat {
    grid-column: auto;
    grid-row: auto;
  }
}