/* ==========================================================================
   core/web-app/assets/lightbox.css — warstwa wizualna lightboxa silnika (WAS-21), OPT-IN.
   Markup dialogu tworzy assets/lightbox.js; ten arkusz linkuje head.twig (silnika albo instancji) TYLKO
   gdy strona ma sekcję z `lightbox: true` (zmienna `_lightbox` z layout.twig).
   Źródło formy: clients/plon/design-hub/assets/lightbox.css (DSK-25) — MT-DIVERGENCE: tokeny rodziny --c-*
   silnika (docs/sections-tokens.md) zamiast --plon-*, klasy BEM .lightbox__* zamiast id, strzałki przy
   krawędziach (desktop) / pod obrazem (mobile), bez linku pobierania (LBM-17).
   KONTRAKT jak sections.css: kolory WYŁĄCZNIE var(--token, fallback); instancja stroi przez
   --lightbox-bg / --lightbox-fg (tło nakładki / pismo i ikony) albo w swoim site.css.
   ========================================================================== */

/* Trigger — sygnał powiększenia na miniaturze: kursor + znaczek lupy w prawym dolnym rogu linku.
   :where() = zerowa specyficzność — instancja nadpisuje bez walki o kaskadę. */
:where([data-lightbox]) {
  cursor: zoom-in;
}
:where(a[data-lightbox]) {
  position: relative;
  display: block;
}
a[data-lightbox]::before,
a[data-lightbox]::after {
  content: "";
  position: absolute;
  inset-inline-end: var(--space-xs, 0.5rem);
  inset-block-end: var(--space-xs, 0.5rem);
  width: 2.25rem;
  height: 2.25rem;
  pointer-events: none;
}
a[data-lightbox]::before {
  border-radius: 50%;
  background: var(--lightbox-bg, var(--c-heading, #111));
  opacity: 0.78;
  transition: opacity 140ms ease;
}
a[data-lightbox]::after {
  background: var(--lightbox-fg, var(--c-bg, #fff));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20 20l-4.3-4.3M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E") center / 1.25rem 1.25rem no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6'/%3E%3Cpath d='M20 20l-4.3-4.3M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E") center / 1.25rem 1.25rem no-repeat;
}
a[data-lightbox]:hover::before,
a[data-lightbox]:focus-visible::before {
  opacity: 1;
}
[data-lightbox]:focus-visible {
  outline: 2px solid var(--c-focus, currentColor);
  outline-offset: 3px;
}

/* Dialog */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4.5rem 5rem;
  background: var(--lightbox-bg, var(--c-heading, #111)); /* fallback bez color-mix: nakładka pełna */
  background: color-mix(in srgb, var(--lightbox-bg, var(--c-heading, #111)) 94%, transparent);
  color: var(--lightbox-fg, var(--c-bg, #fff));
  font-family: var(--font-body, inherit);
}
.lightbox[hidden] {
  display: none;
}

/* Reset defensywny: figure/figcaption/p bywają stylowane gołymi selektorami w arkuszu instancji. */
.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm, 0.75rem);
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.lightbox__img {
  display: block;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  flex: 0 1 auto;
  object-fit: contain;
  border: 0;
}
.lightbox__meta {
  flex: none;
  margin: 0;
  padding: 0;
  text-align: center;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: normal;
  color: inherit;
}
.lightbox__caption,
.lightbox__counter {
  margin: 0;
  color: inherit;
  font-size: var(--fs-sm, 0.875rem);
}
.lightbox__counter {
  margin-block-start: 0.25rem;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}
.lightbox__caption[hidden],
.lightbox__counter[hidden] {
  display: none;
}

/* Przyciski sterujące — pole ≥ 44 × 44 px (WCAG 2.5.5). */
.lightbox__btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  font: inherit;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--lightbox-fg, var(--c-bg, #fff));
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}
.lightbox__btn:hover {
  color: var(--lightbox-bg, var(--c-heading, #111));
  background: var(--lightbox-fg, var(--c-bg, #fff));
}
.lightbox__btn:focus-visible {
  outline: 2px solid var(--lightbox-fg, var(--c-bg, #fff));
  outline-offset: 3px;
}
.lightbox__btn[hidden] {
  display: none;
}
.lightbox__close {
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
}
.lightbox__prev,
.lightbox__next {
  inset-block-start: 50%;
  transform: translateY(-50%);
}
.lightbox__prev { inset-inline-start: 1rem; }
.lightbox__next { inset-inline-end: 1rem; }

/* Wąski ekran: obraz na całą szerokość, strzałki pod obrazem obok siebie (nie zasłaniają kadru). */
@media (max-width: 720px) {
  .lightbox {
    padding: 4rem 0.5rem 5rem;
  }
  .lightbox__close {
    inset-block-start: 0.5rem;
    inset-inline-end: 0.5rem;
  }
  .lightbox__prev,
  .lightbox__next {
    inset-block-start: auto;
    inset-block-end: 1rem;
    transform: none;
  }
  .lightbox__prev { inset-inline-start: calc(50% - 3.25rem); }
  .lightbox__next { inset-inline-end: calc(50% - 3.25rem); }
}

@media (prefers-reduced-motion: reduce) {
  a[data-lightbox]::before,
  .lightbox__btn {
    transition: none;
  }
}