/*
 * Chorisma Greifswald – Fotos in Beiträgen
 *
 * Zwei Bausteine:
 *   .chorisma-galerie   Vier Spalten, quadratische Kacheln, Bildunterschriften
 *   .chorisma-bild      Ein einzelnes Foto über die volle Breite
 *
 * Warum quadratische Kacheln: Die Fotos kommen gemischt aus Hoch- und
 * Querformat. Behielte jedes seine eigene Form, haetten die Zeilen ausgefranste
 * Unterkanten. Hochformatige Kacheln wiederum schneiden Querformate zu stark
 * an – ausprobiert mit den echten Fotos, das Quadrat traegt beide am besten.
 *
 * Auf dem Handy zwei Spalten statt vier: vier waeren rund 80 Pixel breit,
 * darauf ist niemand mehr zu erkennen.
 */

.chorisma-galerie {
  list-style: none;
  margin: 2rem 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 48rem) {
  .chorisma-galerie {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.1rem;
    /* Gleich hohe Zeilen, damit unterschiedlich lange Bildunterschriften
       das Raster nicht ausfransen lassen. */
    grid-auto-rows: 1fr;
  }
}

.chorisma-galerie li { margin: 0; }

.chorisma-galerie figure {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

/*
 * Der Rahmen sitzt am Bildkasten, nicht an der figure – sonst waere die
 * Bildunterschrift Teil des Quadrats und wuerde das Foto stauchen.
 */
.chorisma-galerie__bild {
  flex: none;
  padding: 0.4rem;                 /* der kleine Rand ums Foto */
  background: #FFFFFF;
  border: 1px solid #C9D2DB;
  border-radius: 4px;
}

/*
 * Das Seitenverhaeltnis gehoert ans Bild, nicht an den Kasten. Als Kind einer
 * Spalten-Flexbox nimmt der Kasten sonst die natuerliche Bildhoehe an und das
 * Quadrat bleibt wirkungslos. Am Bild dagegen ist die Breite durch die Spalte
 * bestimmt – die Hoehe folgt daraus, und object-fit beschneidet den Rest.
 */
.chorisma-galerie img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 2px;
}

.chorisma-bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.chorisma-galerie figcaption,
.chorisma-bild figcaption {
  font-size: 0.85rem;
  line-height: 1.45;
  color: #48586A;
  text-wrap: pretty;
}

/* --- Einzelnes Foto über die volle Breite --- */
.chorisma-bild {
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.chorisma-bild__bild {
  padding: 0.4rem;
  background: #FFFFFF;
  border: 1px solid #C9D2DB;
  border-radius: 4px;
}

.chorisma-bild__bild img { height: auto; }