/* ==========================================================================
   SKM Pumpen-Center — Lightbox

   Gehoert zu skm-lightbox.js. Das Markup erzeugt das Skript, gestylt wird
   hier. Basis ist das Bootstrap-Modal — dessen Backdrop, Scroll-Sperre und
   Fokus-Falle bleiben unangetastet, ueberschrieben wird nur die Optik.

   Tokens stammen aus styles.css (:root).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Dialog — randlos ueber die volle Breite, das Bild bestimmt die Groesse
   -------------------------------------------------------------------------- */
.skm-lightbox-modal .skm-lightbox__dialog {
  max-width: min(1600px, 95vw);
  margin-inline: auto;
}

.skm-lightbox-modal .skm-lightbox__content {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Bootstrap faerbt den Backdrop mit 50 % Deckkraft. Fuer eine Bildansicht ist
   das zu hell — die Umgebung bliebe sichtbar und konkurrierte mit dem Motiv.
   Ausserdem haengt der Kontrast von Zaehler und Bedienelementen an diesem Wert:
   bei 0.5 faellt der Zaehler auf 2,7:1 und verfehlt 1.4.3.

   Gesteuert wird das ueber eine Klasse an <body>, die das Skript setzt, solange
   die Lightbox offen ist. Zwei naheliegende Wege scheiden aus:

   - ".skm-lightbox-modal + .modal-backdrop" traegt nur, solange unser Dialog
     das vorletzte Kind von <body> ist. Ein Cookie-Banner oder ein zweites Modal
     wuerde den Selektor still aushebeln und den Kontrast mitnehmen.
   - Die Variable am Modal zu setzen wirkt gar nicht: Bootstrap deklariert
     --bs-backdrop-opacity auf .modal-backdrop selbst, und der Backdrop ist ein
     Geschwister des Modals, kein Nachfahre — die Variable erreicht ihn nicht.

   Die Klasse an <body> ist von der DOM-Position unabhaengig, ihre Spezifitaet
   (0,2,1) schlaegt Bootstraps (0,1,0), und sie wirkt nur fuer diesen Dialog. */
body.skm-lightbox-open .modal-backdrop {
  --bs-backdrop-opacity: 0.92;
}

/* --------------------------------------------------------------------------
   Kopfzeile — Zaehler links, Schliessen rechts
   -------------------------------------------------------------------------- */
.skm-lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 2.75rem;
  margin-bottom: var(--space-3);
}

.skm-lightbox__counter {
  margin: 0;
  color: var(--color-gray-300);
  font-size: 0.875rem;
}

.skm-lightbox__close {
  display: flex;
  align-items: center;
  justify-content: center;

  /* 44 x 44 px — Mindestgroesse fuer Zeigereingaben nach WCAG 2.2 (2.5.8). */
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: rgb(255 255 255 / 0.1);
  color: var(--color-white);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

.skm-lightbox__close:hover {
  background: rgb(255 255 255 / 0.2);
}

/* --------------------------------------------------------------------------
   Buehne — Bild mittig, Navigation daneben
   -------------------------------------------------------------------------- */
.skm-lightbox__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

/* object-fit: contain haelt das ganze Bild sichtbar; 85vh laesst Platz fuer
   Kopfzeile und Unterschrift, ohne dass der Dialog scrollen muss. */
.skm-lightbox__image {
  max-width: 100%;
  max-height: 85vh;
  border-radius: var(--radius-md);
  object-fit: contain;
  background: var(--color-gray-900);
}

.skm-lightbox__nav {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: rgb(255 255 255 / 0.1);
  color: var(--color-white);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.skm-lightbox__nav:hover {
  background: rgb(255 255 255 / 0.2);
}

/* Das Skript blendet die Navigation bei Einzelbildern per hidden-Eigenschaft
   aus. Ohne diese Regel haengt das an einer Nebenwirkung: display:flex oben
   wuerde die UA-Regel [hidden]{display:none} schlagen, und dass es trotzdem
   greift, liegt allein an Bootstraps Reboot, der [hidden] mit !important
   setzt. Wird die Bootstrap-CSS je getauscht oder umgehaengt, staenden sonst
   zwei tote Knoepfe im Dialog. */
.skm-lightbox__nav[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   Bildunterschrift — traegt den Alternativtext, bleibt bei dekorativen
   Bildern leer und wird dann per hidden ausgeblendet
   -------------------------------------------------------------------------- */
.skm-lightbox__caption {
  margin: var(--space-3) 0 0;
  color: var(--color-gray-200);
  font-size: 0.9375rem;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Fokus — heller Ring, weil der Hintergrund hier dunkel ist. Der globale
   Ring aus styles.css nutzt --color-primary und waere auf dem abgedunkelten
   Backdrop kaum zu erkennen.

   Der dunkle box-shadow dahinter ist kein Zierrat: Unterhalb von 576px liegen
   die Navigationsknoepfe auf dem Bild (siehe unten). Der Ring steht durch den
   outline-offset ausserhalb der dunklen Buttonflaeche, also direkt auf dem
   Motiv — und die Produktfotos sind ueberwiegend auf weissem Grund
   freigestellt. Weiss auf Weiss ergaebe 1:1, der Fokus waere schlicht weg.
   Zweifarbig getragen bleibt er auf jedem Untergrund sichtbar.
   -------------------------------------------------------------------------- */
.skm-lightbox-modal :focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgb(0 0 0 / 0.85);
}

/* --------------------------------------------------------------------------
   Schmale Viewports — die Navigation rueckt auf das Bild, damit ihm die
   volle Breite bleibt
   -------------------------------------------------------------------------- */
@media (max-width: 575px) {
  .skm-lightbox__nav {
    position: absolute;
    z-index: 1;
    background: rgb(0 0 0 / 0.55);
  }

  .skm-lightbox__nav--prev {
    left: var(--space-2);
  }

  .skm-lightbox__nav--next {
    right: var(--space-2);
  }
}