/* ==========================================================================
   Testseite "Galerie" (website/galerie/index.html).
   Lädt nach style.css und enthält nur die Stile des Bildrasters und der Großansicht (Dialog, gesteuert von assets/js/lightbox.js). Farben, Schrift, Abstände, Menü und Fußzeile kommen aus style.css.

   Aufbau je Fensterbreite (alle Bilder stehen vollständig im eigenen Seitenverhältnis --ratio, nichts wird beschnitten oder verzerrt):
   - unter 640 px:  eine Spalte, jedes Bild in voller Breite untereinander.
   - 640 bis 1023 px: zwei Spalten im CSS Grid. Ein Querformat geht über beide Spalten, ein Hochformat füllt eine Spalte, grid-auto-flow: dense füllt Lücken.
     Hier passt alles exakt: Jede Zeile besteht aus zwei Hochformaten oder einem Querformat über die ganze Breite.
   - ab 1024 px: drei bis vier Bilder je Zeile, Zeilen im Blocksatz (flex-wrap). Breite und flex-grow jedes Bildes sind sein Seitenverhältnis: Alle Bilder einer Zeile sind dadurch
     genau gleich hoch, ohne Lücken, ohne Beschnitt. Ein Raster mit festen Spalten und Zeilen kann das nicht leisten: Querformat (3:2) und Hochformat (2:3) lassen sich bei gleichem
     Abstand nicht auf ein gemeinsames Raster legen (Querformat über zwei Spalten ist dann breiter als hoch, Hochformat über zwei Zeilen passt nicht dazu), es blieben Streifen oder Beschnitt.
   ========================================================================== */

.galerie {
  --galerie-fade: 200ms;                                          /* Übergang der Großansicht beim Öffnen und Wechseln (bei reduzierter Bewegung entfällt er) */
}

.galerie__grid {
  --galerie-gap: var(--media-gap);                               /* gleichmäßiger Abstand zwischen allen Bildern, waagerecht und senkrecht (style.css, gilt auch für die Bühnen auf /360/) */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--galerie-gap);
}

.galerie__item {
  min-width: 0;
}

.galerie__item figure {
  position: relative;
  aspect-ratio: var(--ratio);          /* Seitenverhältnis des Bildes: der Platz steht vor dem Laden fest, nichts springt */
  overflow: hidden;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
}

.galerie__item picture {
  display: contents;
}

.galerie__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                   /* der Rahmen hat das Seitenverhältnis des Bildes: kein Beschnitt, nur Rundung im Bruchteil eines Pixels */
}

/* Bildschutz wie in der Galerie der Hauptseite (Kontextmenü und Ziehen unterdrückt main.js, siehe dort) */
.galerie img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* 640 bis 1023 px: zwei Spalten */
@media (min-width: 640px) {
  .galerie__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: dense;
    align-items: start;
  }

  .galerie__item--quer {
    grid-column: span 2;
  }
}

/* Ab 1024 px: Zeilen im Blocksatz. --galerie-row ist die Zielhöhe einer Zeile (32 % der Breite des Rasters, Rückfall 23 rem); jedes Bild hat die Breite
   Seitenverhältnis mal Zielhöhe, wächst im Verhältnis seines Seitenverhältnisses und wird so mit den anderen der Zeile genau gleich hoch.
   Eine Zeile mit einem Querformat und zwei Hochformaten füllt etwa 94 % der Breite vor dem Wachsen, ein weiteres Bild passt nicht mehr hinein: Die Zeilen bleiben bei jeder Breite gleich zusammengesetzt.
   max-width (112 % der Zielbreite) hält die letzte, unvollständige Zeile ungefähr so hoch wie die anderen, statt sie über die ganze Breite aufzuziehen. */
@media (min-width: 1024px) {
  .galerie__grid {
    container-type: inline-size;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .galerie__item {
    flex: calc(var(--ratio) * 100) 1 calc(var(--ratio) * 23rem);
    max-width: calc(var(--ratio) * 23rem * 1.12);
  }
}

@supports (width: 1cqw) {
  @media (min-width: 1024px) {
    .galerie__item {
      flex-basis: calc(var(--ratio) * 32cqw);
      max-width: calc(var(--ratio) * 32cqw * 1.12);
    }
  }
}

/* Großansicht ---------------------------------------------------------------
   Jedes Bild im Raster ist ein <button> (.galerie__open, kein Link auf die Bilddatei), der den modalen Dialog .galerie__lightbox öffnet.
   Der Dialog füllt das Fenster, der Hintergrund ist die Seitenfarbe. Das Bild steht vollständig im Dialog (object-fit: contain, nie beschnitten oder verzerrt) mit Abstand zum Rand
   und den Safe Areas des Geräts. Die Bedienelemente liegen neben dem Bild, nicht darüber: Ab 640 px Breite links und rechts, darunter unter dem Bild. */

.galerie__open {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  color: inherit;
  font: inherit;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

.galerie__open:disabled {
  cursor: default;                     /* bis lightbox.js läuft (und ohne JavaScript) ist das Bild nur ein Bild */
}

.galerie__open:focus-visible {
  outline-offset: calc(-1 * (var(--focus-width) + 2px));   /* der Fokusring liegt im Bild, der Rahmen schneidet ihn sonst ab */
}

html.galerie-lightbox-open {
  overflow: hidden;                    /* die Seite dahinter scrollt nicht */
}

html.galerie-lightbox-open .site-nav {
  visibility: hidden;                  /* Menü und Hover-Zone sind bei geöffneter Großansicht nicht aktiv (der Dialog macht die Seite zusätzlich inert) */
}

html.galerie-lightbox-open .site-nav__zone {
  display: none;
}

.galerie__lightbox[open] {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;                  /* Wischen im Dialog bedient lightbox.js, der Browser scrollt oder zoomt nicht */
  color: var(--color-text);
  background: var(--color-bg);
  animation: galerie-lightbox-in var(--galerie-fade) var(--ease);
}

.galerie__lightbox::backdrop {
  background: var(--color-bg);
}

@keyframes galerie-lightbox-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.galerie__lightbox-frame {
  box-sizing: border-box;
  height: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "count count close"
    "prev stage next";
  gap: var(--space-3);
  padding:
    max(var(--space-3), env(safe-area-inset-top, 0px))
    max(var(--space-3), env(safe-area-inset-right, 0px))
    max(var(--space-3), env(safe-area-inset-bottom, 0px))
    max(var(--space-3), env(safe-area-inset-left, 0px));
}

.galerie__lightbox-count {
  grid-area: count;
  align-self: center;
  padding-left: var(--space-2);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-ui);
  color: var(--color-text-muted);
  transition: opacity var(--galerie-fade) var(--ease);
}

.galerie__lightbox[aria-busy="true"] .galerie__lightbox-count {
  opacity: 0.5;                        /* dezenter Ladezustand: Das vorige Bild bleibt stehen, die Zählung wird gedämpft */
}

.galerie__lightbox-stage {
  grid-area: stage;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);   /* feste Spur: Die Höhe und Breite des Bildes beziehen sich auf die Fläche, nicht auf das Bild */
  place-items: center;
  min-width: 0;
  min-height: 0;
  outline: 0;                          /* nur Anker für den Fokus im Dialog, kein Bedienelement */
  opacity: 1;
  transition: opacity var(--galerie-fade) var(--ease);
}

.galerie__lightbox-stage.is-fading {
  opacity: 0;
}

.galerie__lightbox-stage picture {
  display: contents;
}

.galerie__lightbox-stage source {
  display: none;                       /* sonst wird die <source> neben dem Bild zu einem eigenen Rasterelement */
}

.galerie__lightbox-stage img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;                        /* Größe aus Seitenverhältnis (width und height am Bild) und Fläche: vollständig, nie verzerrt */
  object-fit: contain;
}

.galerie__lightbox-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--target-size);
  height: var(--target-size);
  margin: 0;
  padding: 0;
  color: var(--color-text);
  background: var(--color-hover-fill);   /* halbtransparent: gut sichtbar auch über hellen und dunklen Bildern */
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease);
}

.galerie__lightbox-btn:hover {
  background: var(--color-line);
  border-color: var(--color-text-muted);
}

.galerie__lightbox-btn:focus-visible {
  border-radius: var(--radius-pill);
}

.galerie__lightbox-btn svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.galerie__lightbox-close {
  grid-area: close;
}

.galerie__lightbox-prev {
  grid-area: prev;
  align-self: center;
}

.galerie__lightbox-next {
  grid-area: next;
  align-self: center;
}

/* Unter 640 px: das Bild nutzt die ganze Breite, die Pfeile stehen darunter links und rechts */
@media (max-width: 639px) {
  .galerie__lightbox-frame {
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "count count close"
      "stage stage stage"
      "prev . next";
  }
}