/*
 * 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%;
}

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

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

/* 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; }