/*
 * Galerie als Slider – Stil „Slider“ des Galerieblocks (mu-plugins/vtwp-galerie.php).
 * Gemeinsamer Stand aller Projekte (Skill wp-galerie) – nicht im Projekt ändern.
 *
 * Gestaltung je Theme über diese Variablen (in style.css, :root), sonst gelten die Ersatzwerte:
 *   --vtwp-galerie-farbe        Knöpfe (Rand, Pfeil; beim Überfahren Fläche)    #333
 *   --vtwp-galerie-knopf-radius Knöpfe rund (50%) oder eckig (0)                 50%
 *   --vtwp-galerie-rahmen       Fläche hinter nicht zugeschnittenen Bildern     #eef1f4
 *   --vtwp-galerie-radius       Ecken von Rahmen und Bild                       0
 *   --vtwp-galerie-text         Bildunterschrift und Zähler (≥ 4,5:1 auf Weiß)   #4a4a4a
 *
 * Geladen über wp_enqueue_block_style(): auf der Website, wo eine Galerie steht (und wo eine
 * Lightbox steht – für die Textzeile darin, vtwp-galerie.php), und im
 * Block-Editor – dort ohne Knöpfe (die setzt erst vtwp-galerie.js), aber als waagerechter
 * Streifen, damit der Editor zeigt, was die Seite zeigt. Theme-Variablen gibt es im Editor
 * nur, wenn das Editor-Stylesheet sie setzt; sonst greifen die Ersatzwerte.
 *
 * Klassen mit Präfix galerie-slider: „.slider“ allein kollidierte mit slick (cibedo, BDKJ).
 * Die Breite steuert flex-basis: Sie hat im Flex-Layout Vorrang vor den width-Regeln der
 * Spalten-Varianten von WordPress, deren Selektoren höher gewichtet sind.
 */

.galerie-slider { margin: 2rem 0; }

.wp-block-gallery.has-nested-images.is-style-slider {
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  border-radius: var(--vtwp-galerie-radius, 0);
  container-type: inline-size; /* für die Höhe des Rahmens in cqw, siehe unten */
}

/* Gleich hoher 3:2-Rahmen, damit beim Blättern nichts springt – als Rasterfeld der Figur (Höhe
   aus der Breite der Galerie, Container-Einheit), die Unterschrift steht darunter. Der Rahmen
   liegt bewusst nicht auf dem <img>: Die Lightbox von WordPress übernimmt das Seitenverhältnis
   des Bildes und zeigte mit 3:2 + object-fit: contain am <img> Hochformate beschnitten
   (lvu.de, 19.10.2026). Das Bild behält seine Maße und steht mittig im Rahmen.
   „Bilder zuschneiden und einpassen“ füllt den Rahmen (dann bewusst beschnitten). */
.wp-block-gallery.has-nested-images.is-style-slider figure.wp-block-image:not(#individual-image) {
  flex: 0 0 100%;
  flex-direction: column;
  margin: 0;
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: calc(100cqw * 2 / 3) auto;
  grid-template-columns: 100%;
  position: relative;
  isolation: isolate;
}

.wp-block-gallery.has-nested-images.is-style-slider figure.wp-block-image:not(#individual-image)::after {
  content: "";
  grid-area: 1 / 1;
  z-index: -1;
  background: var(--vtwp-galerie-rahmen, #eef1f4);
  border-radius: var(--vtwp-galerie-radius, 0);
}

/* Das Bild steckt je nach Seite in Hüllen: <picture> (WebP Express), <span class="isc-source">
   (Bildnachweis). Die Hülle ist das Rasterelement, die Höhe begrenzt das Bild selbst über die
   Galeriebreite (cqw) – das gilt mit und ohne Hülle. */
.wp-block-gallery.has-nested-images.is-style-slider figure.wp-block-image:not(#individual-image) > :not(figcaption, button) {
  grid-area: 1 / 1;
  place-self: center;
  max-width: 100%;
}

.wp-block-gallery.has-nested-images.is-style-slider figure.wp-block-image:not(#individual-image) picture {
  display: contents;
}

.wp-block-gallery.has-nested-images.is-style-slider figure.wp-block-image:not(#individual-image) img {
  grid-area: 1 / 1; /* direktes Rasterelement, wenn <picture> display: contents hat */
  place-self: center;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100cqw * 2 / 3);
  object-fit: contain;
  border-radius: var(--vtwp-galerie-radius, 0);
}

.wp-block-gallery.has-nested-images.is-style-slider.is-cropped figure.wp-block-image:not(#individual-image) > :not(figcaption, button) {
  place-self: stretch;
}

.wp-block-gallery.has-nested-images.is-style-slider.is-cropped figure.wp-block-image:not(#individual-image) img {
  width: 100%;
  height: calc(100cqw * 2 / 3);
  object-fit: cover;
}

.wp-block-gallery.has-nested-images.is-style-slider figure.wp-block-image:not(#individual-image) figcaption {
  grid-area: 2 / 1;
}

/* Vergrößern-Knopf der Lightbox: WordPress setzt top/right per Skript so, als stünde das Bild
   links im Rahmen – bei mittigen Hochformaten landete er mitten im Bild. Fest in die Ecke. */
.wp-block-gallery.has-nested-images.is-style-slider figure.wp-block-image:not(#individual-image) > button.lightbox-trigger {
  top: 16px !important;
  right: 16px !important;
}

/* Bildunterschrift unter dem Bild statt weiß über dem Foto (Kontrast hinge vom Foto ab) */
.wp-block-gallery.has-nested-images.is-style-slider figure.wp-block-image:has(figcaption)::before { content: none; }

.wp-block-gallery.has-nested-images.is-style-slider figure.wp-block-image figcaption {
  position: static;
  max-height: none;
  padding: .5rem 0 0;
  background: none;
  color: var(--vtwp-galerie-text, #4a4a4a);
  text-shadow: none;
  font-size: .9rem;
  text-align: left;
  overflow: visible;
}

.galerie-slider__steuerung {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: .75rem;
}

/* margin mit !important: „Mehr Abstand“ der Themes (html.lvu-abstand, html.vt-abstand,
   html[data-a11y-spacing] …) gibt jedem Absatz unten 2 em – der Zähler rutschte aus der Mitte */
.galerie-slider__zaehler {
  margin: 0 !important;
  min-width: 7.5em;
  text-align: center;
  font-size: .95rem;
  color: var(--vtwp-galerie-text, #4a4a4a);
}

.galerie-slider__knopf {

  /* allgemeine button-Regeln der Themes (Polsterung, Großschrift, Hintergrund) aufheben */
  box-sizing: border-box;
  flex: none;
  padding: 0;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--vtwp-galerie-farbe, #333);
  border-radius: var(--vtwp-galerie-knopf-radius, 50%);
  background: #fff;
  color: var(--vtwp-galerie-farbe, #333);
  line-height: 1;
  letter-spacing: 0 !important; /* gegen „Mehr Abstand“ */
  cursor: pointer;
}

/* Pfeil als SVG statt Symbolschrift: sitzt unabhängig von Schrift, Zeilenhöhe und
   Buchstabenabstand immer mittig */
.galerie-slider__knopf svg {
  display: block;
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: currentcolor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.galerie-slider__knopf:hover { background: var(--vtwp-galerie-farbe, #333); color: #fff; }

.galerie-slider__unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Im Editor das nächste Bild anschneiden – zeigt, dass es weitergeht, und lässt sich leichter
   anklicken als ein Streifen aus lauter ganz breiten Bildern. */
.block-editor-block-list__block.wp-block-gallery.is-style-slider figure.wp-block-image:not(#individual-image) {
  flex-basis: 85%;
}

/* Vorschaubilder unter dem Slider (Panel „Darstellung“, vtwp-galerie.js) */
.galerie-slider__vorschau {
  position: relative; /* Bezug für offsetLeft im Skript */
  display: flex;
  gap: .5rem;
  margin-top: .75rem;
  padding: 4px; /* Platz für den Fokusrahmen */
  overflow-x: auto;
  scrollbar-width: thin;
}

.galerie-slider__bildchen {
  box-sizing: border-box;
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--vtwp-galerie-radius, 0);
  background: none;
  opacity: .65;
  cursor: pointer;
  transition: opacity .15s;
}

.galerie-slider__bildchen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.galerie-slider__bildchen:hover,
.galerie-slider__bildchen[aria-current="true"] { opacity: 1; }

.galerie-slider__bildchen[aria-current="true"] { border-color: var(--vtwp-galerie-farbe, #333); }

.galerie-slider__bildchen:focus-visible {
  outline: 3px solid var(--vtwp-galerie-farbe, #333);
  outline-offset: 2px;
}

@media (max-width: 600px) {

  .galerie-slider__bildchen { width: 3.5rem; height: 3.5rem; }
}

/* Blocksatz (justified): Zeilen gleicher Höhe. Jede Figur wächst im Verhältnis ihres
   Seitenverhältnisses (--vtwp-verhaeltnis, vom Server je Bild), dadurch bleiben alle Bilder einer
   Zeile gleich hoch und füllen die Breite. Die Breite steuert flex-basis wie beim Slider (Vorrang
   vor den width-Regeln der Spalten). Der Platzhalter am Ende wächst wie ein Bild im Format 2,5:1
   mit – nur in der letzten Zeile, die damit nicht auf volle Breite gezogen wird (ein einzelnes
   Bild würde sonst riesig). Auf schmalen Bildschirmen höchstens ein Viertel der Fensterbreite hoch (zwei Bilder je
   Zeile auf dem Handy). */
.wp-block-gallery.has-nested-images.is-style-blocksatz {
  --vtwp-zeile: min(var(--vtwp-zeilenhoehe, 240px), 25vw);
  flex-wrap: wrap;
}

.wp-block-gallery.has-nested-images.is-style-blocksatz::after {
  content: "";
  flex: 2500 1 0;
}

/* „Letzte Zeile auffüllen“ (Panel „Darstellung“): ohne Platzhalter */
.wp-block-gallery.has-nested-images.is-style-blocksatz.vtwp-fuellen::after { content: none; }

.wp-block-gallery.has-nested-images.is-style-blocksatz figure.wp-block-image:not(#individual-image) {
  flex: calc(var(--vtwp-verhaeltnis, 1.5) * 1000) 1 calc(var(--vtwp-verhaeltnis, 1.5) * var(--vtwp-zeile));
  min-width: 0; /* sonst mindestens so breit wie das Bild selbst (Editor: eine Zeile je Bild) */
  max-width: 100%;
  margin: 0;
  aspect-ratio: var(--vtwp-verhaeltnis, 1.5);
  container-type: inline-size; /* für die Bildunterschrift, unten */
}

.wp-block-gallery.has-nested-images.is-style-blocksatz figure.wp-block-image:not(#individual-image) > :not(figcaption, button),
.wp-block-gallery.has-nested-images.is-style-blocksatz figure.wp-block-image:not(#individual-image) img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100% !important;
  object-fit: cover;
  border-radius: var(--vtwp-galerie-radius, 0);
}

/* Bildunterschriften (Panel „Darstellung“). Ohne Einstellung bleibt es beim Stil: Raster und
   Blocksatz wie WordPress auf dem Bild, Slider darunter (oben). */
.wp-block-gallery.has-nested-images.vtwp-unterschrift-unter figure.wp-block-image:has(figcaption)::before,
.wp-block-gallery.has-nested-images.vtwp-unterschrift-auf figure.wp-block-image:has(figcaption)::before,
.wp-block-gallery.has-nested-images.vtwp-unterschrift-lightbox figure.wp-block-image:has(figcaption)::before { content: none; }

.wp-block-gallery.has-nested-images.vtwp-unterschrift-unter figure.wp-block-image {
  flex-direction: column;
  justify-content: flex-start;
}

.wp-block-gallery.has-nested-images.vtwp-unterschrift-unter figure.wp-block-image figcaption {
  position: static;
  flex: none;
  max-height: none;
  margin: 0;
  padding: .5rem 0 0;
  background: none;
  color: var(--vtwp-galerie-text, #4a4a4a);
  text-shadow: none;
  font-size: .9rem;
  text-align: left;
  overflow: visible;
}

/* Auf dem Bild: dunkler Balken statt des Verlaufs von WordPress – weiß auf mindestens 70 %
   Schwarz ist auf jedem Foto lesbar */
.wp-block-gallery.has-nested-images.vtwp-unterschrift-auf figure.wp-block-image figcaption {
  position: absolute;
  inset: auto 0 0;
  box-sizing: border-box;
  max-height: 60%;
  margin: 0;
  padding: .4em .75em;
  overflow: auto;
  background: rgba(0, 0, 0, .72);
  color: #fff;
  text-shadow: none;
  font-size: .9rem;
  line-height: 1.35;
  text-align: left;
  border-radius: 0 0 var(--vtwp-galerie-radius, 0) var(--vtwp-galerie-radius, 0);
}

/* Blocksatz: Bilder können schmal sein (Hochformat, Handy) – kleinere Schrift, lange Wörter
   brechen um; ist das Bild schmaler als etwa 9 em, steht die Unterschrift nur in der Lightbox
   (und für Screenreader), sonst deckte sie das ganze Bild zu (container-type oben). */
.wp-block-gallery.has-nested-images.is-style-blocksatz.vtwp-unterschrift-auf figure.wp-block-image figcaption {
  font-size: .8rem;
  overflow-wrap: anywhere;
  hyphens: auto;
}

@container (max-width: 9rem) {

  .wp-block-gallery.has-nested-images.is-style-blocksatz.vtwp-unterschrift-auf figure.wp-block-image figcaption {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}

/* Slider: Balken unten im Bildrahmen, nicht unter der ganzen Figur */
.wp-block-gallery.has-nested-images.is-style-slider.vtwp-unterschrift-auf figure.wp-block-image:not(#individual-image) figcaption {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
  align-self: end;
  z-index: 1;
}

/* Nur in der Lightbox: auf der Seite unsichtbar, für Screenreader und die Lightbox bleibt der Text */
.wp-block-gallery.has-nested-images.vtwp-unterschrift-lightbox figure.wp-block-image figcaption,
.wp-block-gallery.has-nested-images.vtwp-nachweis-lightbox .isc-source-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (prefers-reduced-motion: reduce) {

  .wp-block-gallery.is-style-slider { scroll-behavior: auto; }

  .galerie-slider__bildchen { transition: none; }
}

/* Bildunterschrift und Bildnachweis in der Lightbox (vtwp-galerie.js). Über Bild (2000001)
   und Hintergrund, unter den Knöpfen; weiß auf fast schwarz, unabhängig vom Theme. */
.wp-lightbox-overlay .vtwp-lightbox-text {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom) + 16px);
  left: 50%;
  z-index: 2000002;
  box-sizing: border-box;
  max-width: min(60rem, calc(100% - 32px));
  margin: 0 !important;
  padding: .5em 1em;
  transform: translateX(-50%);
  border-radius: 4px;
  background: rgba(0, 0, 0, .8);
  color: #fff;
  font-size: 1rem;
  line-height: 1.4;
  text-align: center;
  cursor: auto;
}

.wp-lightbox-overlay .vtwp-lightbox-text[hidden] { display: none; }

.wp-lightbox-overlay .vtwp-lightbox-text__nachweis {
  display: block;
  font-size: .8em;
  opacity: .85;
}

.wp-lightbox-overlay .vtwp-lightbox-text__nachweis:empty { display: none; }