/* gallery.css – Foto-Raster (.gallery) und Lightbox (.lb). Werte nach DESIGN.md §1 Farben, §3 Raum/Radien, §4 Bewegung, §7 Bilder.
   Tokens kommen aus site.css; die Rückfallwerte nach dem Komma greifen nur, wenn site.css fehlt. Logische Eigenschaften (RTL). Kein Dunkelmodus (DESIGN §10). */

/* ---------- Raster: mobil 2 Spalten, ab md 3, ab lg 4 (.gallery--cols-3: bleibt bei 3, .gallery--cols-2: bleibt bei 2) ---------- */
.gallery { --gal-gap: clamp(.5rem, 1.6vw, .9rem); min-width: 0; }
.gallery__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gal-gap); margin: 0; padding: 0; list-style: none; }
.gallery__cell { min-width: 0; }
.gallery__item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-img, 14px);
  background: var(--c-sage-soft, #DDE3D6);   /* hinter dem Bild; das Bild selbst trägt seine dominante Farbe */
}
.gallery__item .pic { position: absolute; inset: 0; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease, ease); }
.gallery__link { display: block; height: 100%; }   /* Auslöser um ein schon vorhandenes Foto (z. B. die drei Fotos eines Apartments) */
.gallery__link img { transition: transform .4s var(--ease, ease); }
@media (hover: hover) { .gallery__item:hover img, .gallery__link:hover img { transform: scale(1.04); } }
@media (min-width: 768px) {
  .gallery--cols-3 .gallery__grid, .gallery--cols-4 .gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .gallery--cols-4 .gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Knopf „Alle Fotos ansehen · n Fotos“; gallery_button() läuft in einem Grid über alle Spalten */
.gallery__more { margin-top: clamp(1.25rem, 3vw, 2rem); }
.gallery--button { grid-column: 1 / -1; }
.gallery__all .icon { color: var(--c-accent, #5B6E55); }
.gallery__all { flex-wrap: wrap; }   /* lange Beschriftungen (kk) brechen im Knopf um statt 320 px zu überlaufen (Matrix 31.10.) */
@media (max-width: 359.98px) { .gallery__count { display: none; } }   /* Zähler weicht auf den schmalsten Geräten; die Lightbox nennt ihn */
.gallery__count {
  padding-inline-start: .75rem;
  border-inline-start: 1px solid var(--c-line-strong, rgba(27, 26, 23, .5));
  color: var(--c-muted, #625C53);
  font-weight: 500;
}
.no-js .gallery__more, .no-js .gallery--button { display: none; }   /* ohne JS bleibt jedes Foto ein Link auf die große Datei */

/* ---------- Lightbox: natives <dialog>, volle Fläche, der Dialog selbst trägt den Hintergrund (Prüfwerkzeuge sehen ::backdrop nicht) ---------- */
html.lb-open { overflow: hidden; }   /* die Scrollbar-Breite gleicht gallery.js per padding-inline-end aus */
.lb {
  --lb-pt: 4.25rem;   /* Luft über dem Foto (Schließen-Knopf) */
  --lb-pb: .5rem;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(27, 26, 23, .92);   /* DESIGN: Hintergrund der Lightbox */
  color: var(--c-on-night, #F6F4EF);
  overflow: hidden;
  touch-action: pinch-zoom;   /* Zoomen bleibt dem Browser, Wischen gehört der Galerie */
}
.lb[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; animation: lb-fade .2s var(--ease, ease); }
.lb::backdrop { background: transparent; }
.lb:focus { outline: none; }
.lb :focus-visible { outline: 2px solid var(--c-on-night, #F6F4EF); outline-offset: 3px; }

/* Bühne: Größenbehälter, das Foto passt (contain) in ihre Innenfläche, schon vor dem Laden im richtigen Seitenverhältnis */
.lb__stage { container-type: size; display: grid; place-items: center; min-height: 0; padding: var(--lb-pt) .75rem var(--lb-pb); cursor: zoom-out; }
.lb__pic { display: grid; cursor: default; animation: lb-in .2s var(--ease, ease) both; }
.lb__pic img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 8rem);   /* Rückfall ohne Container-Einheiten */
  aspect-ratio: var(--w) / var(--h);
  object-fit: contain;
  opacity: 0;
  transition: opacity .2s;
}
.lb__pic img.is-ready { opacity: 1; }
@supports (width: 1cqw) {
  .lb__pic img { width: min(100cqw, calc(100cqh * var(--w) / var(--h)), calc(var(--w) * 1px)); max-width: none; max-height: none; }
}

/* Knöpfe: 48 px rund, Symbole in --c-on-night */
.lb__btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(246, 244, 239, .14);
  color: var(--c-on-night, #F6F4EF);
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s var(--ease, ease);
}
.lb__btn:hover { background: rgba(246, 244, 239, .26); }
.lb__btn svg { display: block; }
.lb__close { position: absolute; z-index: 1; top: max(.75rem, env(safe-area-inset-top)); inset-inline-end: max(.75rem, env(safe-area-inset-right)); }
.lb__prev svg { transform: rotate(90deg); }       /* Chevron-Symbol zeigt nach unten: gedreht wird er zum Pfeil */
.lb__next svg { transform: rotate(-90deg); }
[dir="rtl"] .lb__prev svg { transform: rotate(-90deg); }
[dir="rtl"] .lb__next svg { transform: rotate(90deg); }

/* Fuß: mobil vor · Zähler und Bildunterschrift · zurück in einer Zeile (Daumenreichweite), ab md Pfeile an den Seiten */
.lb__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .5rem;
  padding: .25rem max(.75rem, env(safe-area-inset-right)) max(.75rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
}
.lb__meta { display: grid; gap: .15rem; justify-items: center; min-width: 0; text-align: center; }
.lb__count { margin: 0; font: 600 .9rem / 1.3 var(--font-text, "Sofia Sans", system-ui, sans-serif); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.lb__cap { margin: 0; max-width: 68ch; font: 400 .9rem / 1.45 var(--font-text, "Sofia Sans", system-ui, sans-serif); color: rgba(246, 244, 239, .8); text-wrap: pretty; }
@media (min-width: 768px) {
  .lb__stage { padding-inline: 5.5rem; }
  .lb__bar { display: block; padding: .25rem 5.5rem 1.25rem; }
  .lb__prev, .lb__next { position: absolute; top: calc(50% - 24px); }
  .lb__prev { inset-inline-start: 1.25rem; }
  .lb__next { inset-inline-end: 1.25rem; }
}

@media (forced-colors: active) {
  .lb__btn { border: 1.5px solid ButtonText; background: ButtonFace; color: ButtonText; }
}

@keyframes lb-fade { from { opacity: 0; } }
@keyframes lb-in { from { opacity: 0; transform: translateX(calc(var(--dir, 0) * 1.5rem)); } }

@media (prefers-reduced-motion: reduce) {
  .lb[open], .lb__pic { animation: none; }
  .lb__btn, .lb__pic img, .gallery__item img, .gallery__link img { transition: none; }
  .gallery__item:hover img, .gallery__link:hover img { transform: none; }
}

@media print {
  .lb, .gallery__more, .gallery--button { display: none !important; }
  .gallery__item { break-inside: avoid; }
}