/* Galerie v2 - ausgerichtete Reihen.
 *
 * Welche Bilder in eine Reihe gehoeren, entscheidet das Skript anhand der
 * Fensterbreite - das kann der Server nicht wissen. Wie hoch die Reihe dann
 * wird, rechnet ausschliesslich CSS aus: Breite minus Abstaende, geteilt
 * durch die Summe der Seitenverhaeltnisse. Dadurch stehen alle Bilder einer
 * Reihe exakt gleich hoch, nichts wird beschnitten, und ein fertig geladenes
 * Bild loest kein Re-Layout aus.
 */

.gv2-page {
  max-width: 1680px;
  margin: 0 auto;
  padding: 1.5rem 1rem 6rem;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #2c2c2c;
}

.gv2-head { margin: 0 0 1.25rem; }
.gv2-head h1 { margin: 0 0 .35rem; font-size: 1.4rem; font-weight: 600; }
.gv2-meta { margin: 0; font-size: .85rem; color: #6d6d6d; }
.gv2-meta code { background: #f1efec; padding: .1rem .35rem; border-radius: .25rem; }

/* ── Galerie ────────────────────────────────────────────────────────── */

.gv2-gallery {
  --gap: 6px;
  --row-h: clamp(250px, 26vw, 340px);
  /* Ein Streifen Luft an beiden Raendern - randlos wirkte die Galerie
     angeklebt. Prozent und nicht 90vw: vw zaehlt die Bildlaufleiste mit, die
     Galerie stuende dann um deren Breite aus der Mitte. */
  width: 90%;
  margin-inline: auto;
  /* Bezugsbreite fuer die Reihenhoehe (100cqw weiter unten). */
  container-type: inline-size;
  /* Ausgangszustand ohne JavaScript: Umbruch per Flexbox. Die Reihen sind so
     nicht exakt gleich hoch, aber die Galerie ist vollstaendig sichtbar. */
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

/* Sobald das Skript die Reihen gebildet hat, uebernimmt der Block-Fluss. */
.gv2-gallery.is-rowed { display: block; }

.gv2-item {
  flex: var(--r) 1 calc(var(--r) * var(--row-h));
  min-width: 0;
  aspect-ratio: var(--r);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
  /* Winziges Vorschaubild als Hintergrund: es steht sofort, auch wenn das
     richtige Foto auf schwacher Verbindung noch unterwegs ist. Darunter die
     Dominantfarbe fuer den Fall, dass es keines gibt. */
  background-color: var(--c, #e8e4df);
  background-image: var(--lqip, none);
  background-size: cover;
  background-position: center;
}

.gv2-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  /* Kein opacity:0 im Ausgangszustand - ohne JavaScript bleibt die Galerie
     sichtbar. Die Einblendung passiert erst, wenn das Bild da ist. */
  animation: gv2-fade 260ms ease both;
}

@keyframes gv2-fade { from { opacity: 0 } to { opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  .gv2-item img { animation: none }
}

/* ── Eine Reihe ─────────────────────────────────────────────────────── */

.gv2-row {
  display: flex;
  gap: var(--gap);
  margin-bottom: var(--gap);
  height: calc((100cqw - var(--gaps, 0px)) / var(--sum, 3));
}

.gv2-row > .gv2-item {
  flex: var(--r) 1 0;
  aspect-ratio: auto;
  height: 100%;
}

/* Die angefangene letzte Reihe wird nicht auf volle Breite gezogen - sonst
   geriete ein einzelnes Restfoto riesig. Sie behaelt die Zielhoehe, die
   Bilder behalten ihre natuerliche Breite. */
.gv2-row--rest { height: var(--rest-h, var(--row-h)); }

.gv2-row--rest > .gv2-item {
  flex: 0 0 auto;
  aspect-ratio: var(--r);
  height: 100%;
}

/* ── Nachladen ──────────────────────────────────────────────────────── */

.gv2-sentinel { height: 1px; width: 100%; }

.gv2-more {
  margin: 2rem 0 0;
  text-align: center;
  /* Feste Hoehe: der Bereich unter der Galerie darf beim Nachladen niemals
     wachsen oder schrumpfen, sonst verschiebt sich sichtbarer Inhalt. */
  min-height: 5.5rem;
}

.gv2-button {
  font: inherit;
  padding: .8rem 2rem;
  border: 1px solid #cfc7be;
  border-radius: 2rem;
  background: #fff;
  color: #2c2c2c;
  cursor: pointer;
  transition: opacity 200ms ease;
}
.gv2-button:hover { background: #f6f3f0; }
/* Greift auch am Knopf der Portfolio-Seiten, der eigene Klassen traegt. */
[data-gv2-more].is-gone { opacity: 0; pointer-events: none; }

.gv2-status { margin-top: .75rem; font-size: .8rem; color: #8a8a8a; }

/* Nach dem Aufklappen schwebt der Bereich ueber der Seite statt im Fluss zu
   stehen. So kann die nachwachsende Galerie ihn nicht mehr verschieben - und
   er selbst verschiebt auch nichts. */
.gv2-more.is-floating {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 0;
  margin: 0;
  padding: .5rem 1rem calc(.5rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  border-top: 1px solid #ece7e0;
  pointer-events: none;
  z-index: 5;
}

.gv2-more.is-floating .gv2-status { margin: 0; }

/* ── Hinweis, wenn keine Bildvarianten erzeugt wurden ───────────────── */

.gv2-empty {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid #e0d7cc;
  border-radius: .5rem;
  background: #fdfaf6;
  font-size: .9rem;
  line-height: 1.6;
}

.gv2-hint {
  display: block;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid #ece5db;
  color: #7a7168;
}

.gv2-empty code {
  display: inline-block;
  margin-top: .35rem;
  background: #efeae3;
  padding: .2rem .45rem;
  border-radius: .25rem;
}

/* ── Vollbildansicht ────────────────────────────────────────────────── */

.pswp__counter { opacity: .7; }