/* ==========================================================================
   Baustein Galerie + Großansicht
   --------------------------------------------------------------------------
   Drei Anordnungen aus demselben Markup, gesteuert über data-anordnung.
   Alles Gestalterische läuft über Variablen – im Projekt überschreiben:

     --galerie-abstand            Abstand zwischen den Bildern
     --galerie-radius             Eckenrundung
     --galerie-kachel-s|m|l       Mindestbreite je Kachelgröße (Raster)
     --galerie-zeile-s|m|l        Zeilenhöhe je Größe (Reihen)
     --galerie-hover              Effekt beim Überfahren (transform)
     --galerie-hover-filter       dito als filter, z. B. brightness(1.08)
     --galerie-unterschrift-groesse / -farbe
     --grossansicht-hintergrund   Fläche der Großansicht
     --grossansicht-text          Schriftfarbe der Großansicht
   ========================================================================== */

@layer sections {

  .galerie-rahmen { container: galerie / inline-size; }

  .galerie {
    --_abstand: var(--galerie-abstand, var(--size-2));
    --_radius:  var(--galerie-radius, var(--radius-2));
    --_kachel:  var(--galerie-kachel-m, 14rem);
    --_zeile:   var(--galerie-zeile-m, 12rem);
  }
  .galerie[data-groesse="s"] { --_kachel: var(--galerie-kachel-s, 10rem); --_zeile: var(--galerie-zeile-s, 9rem); }
  .galerie[data-groesse="l"] { --_kachel: var(--galerie-kachel-l, 20rem); --_zeile: var(--galerie-zeile-l, 16rem); }

  /* OPUI macht jede <figure> zum zentrierten Grid (display: grid; place-items: center).
     Neuere Browser werten place-items auch im Blocklayout aus – beides zurücksetzen,
     damit das Bild die Kachel füllt. */
  .galerie-bild { display: block; margin: 0; place-items: normal; }
  .galerie-bild > a { border-radius: var(--_radius); display: block; overflow: hidden; }
  .galerie-bild img {
    block-size: auto;
    border-radius: var(--_radius);
    display: block;
    inline-size: 100%;
    transition: transform .35s ease, filter .35s ease;
  }
  .galerie-bild > a img { border-radius: 0; }
  .galerie-bild > a:is(:hover, :focus-visible) img {
    filter: var(--galerie-hover-filter, none);
    transform: var(--galerie-hover, scale(1.03));
  }
  .galerie-bild figcaption {
    color: var(--galerie-unterschrift-farbe, var(--text-muted));
    font-size: var(--galerie-unterschrift-groesse, var(--font-size-0));
    margin-block-start: var(--size-1);
  }
  @media (prefers-reduced-motion: reduce) {
    .galerie-bild img { transition: none; }
  }

  /* Masonry: feste Spalten, von Kirby befüllt ---------------------------- */
  .galerie[data-anordnung="masonry"] {
    align-items: start;
    display: grid;
    gap: var(--_abstand);
    grid-template-columns: repeat(var(--galerie-spalten, 3), minmax(0, 1fr));
  }
  .galerie-spalte { display: flex; flex-direction: column; gap: var(--_abstand); }

  /* Schmale Fläche: Spalten auflösen, Bilder fließen in 2 bzw. 1 Spalte */
  @container galerie (width < 40rem) {
    .galerie[data-anordnung="masonry"] { column-gap: var(--_abstand); columns: 2; display: block; }
    .galerie[data-anordnung="masonry"] .galerie-spalte { display: contents; }
    .galerie[data-anordnung="masonry"] .galerie-bild { break-inside: avoid; margin-block-end: var(--_abstand); }
  }
  @container galerie (width < 22rem) {
    .galerie[data-anordnung="masonry"] { columns: 1; }
  }

  /* Raster: gleich große Kacheln, Ausschnitt über den Fokuspunkt ---------- */
  .galerie[data-anordnung="raster"] {
    --_format: 4 / 3;
    display: grid;
    gap: var(--_abstand);
    grid-template-columns: repeat(auto-fill, minmax(min(var(--_kachel), 100%), 1fr));
  }
  .galerie[data-format="f32"] { --_format: 3 / 2; }
  .galerie[data-format="f11"] { --_format: 1; }
  .galerie[data-format="f45"] { --_format: 4 / 5; }
  .galerie[data-anordnung="raster"] img {
    aspect-ratio: var(--_format);
    object-fit: cover;
    object-position: var(--fokus, 50% 50%);
  }

  /* Reihen: gleich hohe Zeilen, Bilder unbeschnitten --------------------- */
  .galerie[data-anordnung="reihen"] { display: flex; flex-wrap: wrap; gap: var(--_abstand); }
  .galerie[data-anordnung="reihen"] .galerie-bild {
    flex: var(--ratio) 1 calc(var(--ratio) * var(--_zeile));
    min-inline-size: 0;   /* sonst besteht jedes Bild auf seiner Originalbreite */
  }
  .galerie[data-anordnung="reihen"] img { aspect-ratio: var(--ratio); }
  .galerie[data-anordnung="reihen"]::after { content: ""; flex-grow: 999; }

  /* Großansicht ---------------------------------------------------------- */
  .grossansicht {
    background: var(--grossansicht-hintergrund, oklch(0% 0 0 / .94));
    block-size: 100dvh;
    border: 0;
    color: var(--grossansicht-text, #fff);
    inline-size: 100vw;
    margin: 0;
    max-block-size: none;
    max-inline-size: none;
    padding: 0;
  }
  .grossansicht::backdrop { background: transparent; }
  .grossansicht-slider,
  .grossansicht .embla__viewport { block-size: 100%; }
  .grossansicht .embla__container { block-size: 100%; }
  .grossansicht-folie {
    align-content: center;
    block-size: 100%;
    display: grid;
    justify-items: center;
    margin: 0;
    padding: var(--size-8) var(--size-3) var(--size-9);
  }
  /* Bild füllt die freie Fläche, Seitenverhältnis bleibt (contain) */
  .grossansicht-folie img {
    block-size: calc(100dvh - var(--size-8) - var(--size-9) - 2rem);
    inline-size: 100%;
    object-fit: contain;
  }
  .grossansicht-folie figcaption { margin-block-start: var(--size-2); opacity: .8; text-align: center; }
  .grossansicht-zaehler {
    font-variant-numeric: tabular-nums;
    inset-block-end: var(--size-4);
    inset-inline: 0;
    margin: 0;
    opacity: .75;
    position: absolute;
    text-align: center;
  }
  .grossansicht-schliessen {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-size: var(--font-size-4);
    inset-block-start: var(--size-3);
    inset-inline-end: var(--size-3);
    line-height: 1;
    padding: var(--size-2);
    position: absolute;
    z-index: 3;
  }
}

/* Großansicht mit Text neben dem Bild (z. B. Personen) --------------------
   Breit: Bild links, Text rechts. Schmal: Text unter dem Bild, Folie scrollt. */
@layer sections {
  .grossansicht-folie.mit-text {
    align-items: center;
    column-gap: var(--size-8);
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    justify-items: stretch;
    margin-inline: auto;
    max-inline-size: 76rem;
    padding-inline: var(--size-8);
  }
  .grossansicht-folie.mit-text img { block-size: calc(100dvh - var(--size-8) - var(--size-9) - 2rem); }
  .grossansicht-folie .grossansicht-text {   /* schlägt die zentrierte Bildunterschrift */
    margin: 0;
    max-block-size: calc(100dvh - var(--size-8) - var(--size-9));
    opacity: 1;
    overflow-y: auto;
    text-align: start;
  }
  .grossansicht-titel { font-size: var(--font-size-5); line-height: 1.15; margin: 0; }
  .grossansicht-untertitel {
    color: var(--grossansicht-akzent, var(--primary));
    font-weight: 600;
    margin: var(--size-2) 0 0;
  }
  .grossansicht-beschreibung { font-size: var(--font-size-2); line-height: 1.6; margin-block-start: var(--size-5); }
  .grossansicht-beschreibung p { margin: 0 0 var(--size-3); }

  /* Schmal: normaler Textfluss statt Grid – so scrollt die Folie zuverlässig,
     und das Polster unten hält den Text vom Zähler „1 / 6“ fern. */
  @media (max-width: 48rem) {
    .grossansicht-folie.mit-text {
      display: block;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding: var(--size-9) var(--size-4) var(--size-10);
    }
    .grossansicht-folie.mit-text img { block-size: 55dvh; }
    .grossansicht-folie .grossansicht-text { margin-block-start: var(--size-4); max-block-size: none; overflow: visible; }
    .grossansicht-titel { font-size: var(--font-size-4); }
    .grossansicht-beschreibung { font-size: var(--font-size-1); }
  }
}