/* ==========================================================================
   Bilder — die Bildreihen einer Unterkunftsseite.

   Aufbau: eine Reihe ist ein Raster über zwölf Spalten mit einem eigenen
   Seitenverhältnis. Das Verhältnis setzt die Höhe der Reihe, jede Kachel
   nimmt sie ganz ein, und ihre Breite ist ihr Anteil (--w) an den zwölf
   Spalten. Damit steht der Ausschnitt jedes Bildes fest, ohne dass hier eine
   einzige Zahl hartkodiert wäre — beides kommt aus js/data/site.js.

   Kachel, Schleier und Marker sind dieselben wie bei den Karten in
   spaces.css, eine Stufe leiser: eine Galerie zeigt, sie klappt nicht auf.
   ========================================================================== */

.gallery {
  --gallery-gap: clamp(0.7rem, 1.1vw, 1.15rem);
}

.gallery__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
}

/* Den Punkt davor stellt .hint-dot aus styles/ui.css. */

/* --------------------------------------------------------------- Reihen -- */

.gallery__rows {
  display: grid;
  gap: var(--gallery-gap);
  margin-block-start: clamp(2.5rem, 5vw, 4.5rem);
}

/*
   Eine Zeile, zwölf Spalten. Die Höhe kommt aus dem Seitenverhältnis der
   Reihe, die einzige Zeile füllt sie ganz (`minmax(0, 1fr)`), und jede Kachel
   nimmt ihren Anteil davon.
*/
.gallery__row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: var(--gallery-gap);
  aspect-ratio: var(--ratio);
}

/* --------------------------------------------------------------- Kachel -- */

.gallery__tile {
  position: relative;
  grid-column: span var(--w);
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--c-sand);
  box-shadow: var(--shadow-md);
  isolation: isolate;
  cursor: pointer;
}

@media (hover: hover) {
  .gallery__tile:hover {
    box-shadow: var(--shadow-lg);
  }
}

.gallery__tile:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

/*
   Wie bei den Karten: das Bild liegt absolut in einem Rahmen, der abschneidet
   — der Zoom bewegt damit nie das Layout. Die 1.005 im Ruhezustand sind nur
   gegen den Haarriss an der Kante.
*/
.gallery__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.005);
  transition: transform var(--dur-image-hover) var(--ease-out-soft);
  will-change: transform;
}

@media (hover: hover) {
  .gallery__tile:hover img {
    transform: scale(1.06);
  }
}

/*
   Der Schleier trägt die Beschriftung und ist sonst nicht da: nur unten,
   nur so viel, dass die Zeile steht. Über der ganzen Kachel läge er als
   Trübung über einem Bild, das gezeigt werden soll.
*/
.gallery__veil {
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  opacity: 0;
  background: linear-gradient(
    to top,
    rgba(24, 17, 19, 0.72) 0%,
    rgba(24, 17, 19, 0.36) 46%,
    transparent 100%
  );
  transition: opacity var(--dur-base) var(--ease-out);
}

.gallery__caption {
  position: absolute;
  left: clamp(1.1rem, 1.8vw, 1.9rem);
  right: clamp(3.6rem, 5vw, 5rem);
  bottom: clamp(1.1rem, 1.8vw, 1.9rem);
  color: #fff;
  font-size: var(--fs-meta);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: left;
  text-shadow: 0 1px 12px rgba(22, 16, 18, 0.4);
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

/* --------------------------------------------------------------- Marker -- */

/*
   Dasselbe Kreuz im Kreis wie auf den Karten (spaces.css), ohne dessen
   Drehung: dort wird es beim Öffnen zum Minus, weil die Karte wieder
   zugeht. Hier geht nichts auf, hier wird vergrößert — das Zeichen bleibt,
   solange die Ansicht offen ist, und die schließt woanders.
*/
.gallery__marker {
  position: absolute;
  z-index: 2;
  right: clamp(1.1rem, 1.8vw, 1.9rem);
  bottom: clamp(1.1rem, 1.8vw, 1.9rem);
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.gallery__marker::before,
.gallery__marker::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.85rem;
  height: 1px;
  background: #fff;
  transform: translate(-50%, -50%);
}

.gallery__marker::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/*
   Alles drei kommt gemeinsam — auf dem Zeigegerät beim Überfahren, an der
   Tastatur beim Fokus. Auf dem Touchscreen steht es von vornherein da, siehe
   unten: dort gibt es kein Überfahren, und ein Hinweis, den man nur mit der
   Maus findet, ist auf dem Telefon keiner.
*/
@media (hover: hover) {
  .gallery__tile:hover .gallery__veil,
  .gallery__tile:focus-visible .gallery__veil {
    opacity: 1;
  }

  .gallery__tile:hover .gallery__caption,
  .gallery__tile:focus-visible .gallery__caption {
    opacity: 1;
    transform: none;
  }

  .gallery__tile:hover .gallery__marker,
  .gallery__tile:focus-visible .gallery__marker {
    opacity: 1;
    transform: none;
  }

  .gallery__tile:hover .gallery__marker {
    background: rgba(255, 255, 255, 0.2);
  }
}

@media (hover: none) {
  .gallery__veil,
  .gallery__marker {
    opacity: 1;
  }

  .gallery__caption {
    opacity: 1;
    transform: none;
  }
}

/* ----------------------------------------------------------- Responsive -- */

/*
   Ab hier bricht die Reihe um. Ihr Seitenverhältnis trägt dann nicht mehr —
   zwölf Spalten auf 700 Pixel ergäben Streifen —, also steht jedes Bild für
   sich in seinem eigenen (--tile) und wird gar nicht erst beschnitten.

   Zwei nebeneinander, nicht eins: neun hochformatige Aufnahmen in voller
   Breite wären eine sehr lange Seite. Bleibt eine Kachel als letzte allein
   übrig, nimmt sie beide Spalten — sonst stünde neben ihr ein Loch.
*/
@media (max-width: 900px) {
  .gallery__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    aspect-ratio: auto;
  }

  .gallery__tile {
    grid-column: auto;
    aspect-ratio: var(--tile);
  }

  .gallery__row > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 520px) {
  .gallery__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .gallery__row > :last-child:nth-child(odd) {
    aspect-ratio: var(--tile);
  }
}

/* ==========================================================================
   Die Großansicht — js/lib/lightbox.js.

   Liegt am Ende von <body>, nicht in einem Abschnitt, und gehört trotzdem
   hierher: sie ist der zweite Zustand derselben Kachel.
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  opacity: 0;
  /*
     Beim Schließen liegt die Ansicht noch da, während sie ausblendet — bis
     `hidden` gesetzt ist, vergeht die Dauer der Blende. Ohne diese Zeile
     fingen ihre unsichtbaren Flächen in dieser Zeit weiter jeden Klick ab.
     Dieselbe Vorsichtsmaßnahme wie beim Checkout-Dialog.
  */
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

/*
   `hidden` allein genügt nicht: das `display: grid` oben ist eine
   Autorenregel und schlägt das `display: none`, das der Browser dem Attribut
   mitgibt — wie beim mobilen Menü, siehe styles/sections/header.css.

   Ohne diese Zeile blieb die geschlossene Großansicht als unsichtbare Fläche
   über der ganzen Seite stehen: Links ließen sich nicht mehr anklicken, die
   Karten reagierten nicht mehr auf den Zeiger, und ihre drei Knöpfe standen
   weiter im Fokuslauf und im Baum für Screenreader. Erst ein neuer
   Seitenaufbau räumte sie weg.
*/
.lightbox[hidden] {
  display: none;
}

.lightbox__scrim {
  position: absolute;
  inset: 0;
  /* Nicht Schwarz: dieselbe Tinte wie die Schrift, nur tief heruntergefahren. */
  background: rgba(20, 14, 16, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lightbox__dialog {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 0;
}

/*
   Zwei Zeilen: das Bild bekommt, was übrig bleibt, die Beschriftung ihre
   eigene Höhe. `minmax(0, 1fr)` statt `1fr`, damit die obere Zeile wirklich
   schrumpfen darf — und erst dadurch hat das Bild eine feste Bezugshöhe, an
   der sein `max-height: 100%` sich messen kann. Ohne das rechnet der Browser
   gegen eine automatische Höhe, findet keine, und ein hochformatiges Bild
   schiebt die Beschriftung unter den Bildschirmrand.
*/
.lightbox__figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  min-height: 0;
}

.lightbox__image {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  object-fit: contain;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.lightbox__image.is-shown {
  opacity: 1;
  transform: none;
}

.lightbox__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem 1.1rem;
  text-align: center;
}

.lightbox__count {
  color: rgba(255, 255, 255, 0.55);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.lightbox__text {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--fs-small);
  font-weight: 300;
}

/* ---------------------------------------------------------------- Knöpfe -- */

.lightbox__btn {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  transition: background-color var(--dur-hover) var(--ease-out-soft),
    border-color var(--dur-hover) var(--ease-out-soft),
    transform var(--dur-hover) var(--ease-out-soft);
}

.lightbox__btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.6);
}

.lightbox__btn:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

.lightbox__btn--close {
  top: 0;
  right: 0;
}

.lightbox__btn--prev,
.lightbox__btn--next {
  top: 50%;
  margin-block-start: -1.5rem;
}

.lightbox__btn--prev {
  left: 0;
}

.lightbox__btn--next {
  right: 0;
}

.lightbox__btn--prev:hover {
  transform: translateX(-3px);
}

.lightbox__btn--next:hover {
  transform: translateX(3px);
}

/*
   Auf dem Telefon liegen die Pfeile sonst auf dem Bild. Sie rücken unter die
   Beschriftung und teilen sich die Zeile mit ihr — das Bild bleibt frei.
*/
@media (max-width: 720px) {
  .lightbox__figure {
    padding-block: 3.5rem;
  }

  .lightbox__btn {
    width: 2.75rem;
    height: 2.75rem;
  }

  .lightbox__btn--prev,
  .lightbox__btn--next {
    top: auto;
    bottom: 0;
    margin-block-start: 0;
  }

  .lightbox__btn--prev {
    left: 15%;
  }

  .lightbox__btn--next {
    right: 15%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox__image {
    transform: none;
  }
}