/* Lightbox a retino (6/11, scelta di Andrea: progetto/brand/scelte/lightbox.md). Mappa: js/lightbox.md.
   Le foto del racconto si aprono a tutto schermo e si compongono dal retino (disegnato nel canvas da js/lightbox.js). */

.pg-galleria .pg-quadro__img, .pg-foto .pg-quadro__img { cursor: zoom-in; }
.pg-quadro__img[data-lb]:focus-visible { outline: 2px solid var(--malva); outline-offset: 2px; }
html.lb-aperto { overflow: hidden; }

.lb { position: fixed; inset: 0; z-index: 40;
  background: var(--vuoto); color: var(--polvere-200);   /* pieno: con un velo la pagina sotto si leggeva ancora */
  opacity: 0; visibility: hidden; transition: opacity 360ms ease-out, visibility 0s linear 360ms;
  /* spazio attorno alla foto per la riga sopra e la didascalia sotto (6/11 sera: comandi attaccati alla foto) */
  --lb-sopra: calc(64px + env(safe-area-inset-top, 0px)); --lb-sotto: calc(104px + env(safe-area-inset-bottom, 0px));
  --lb-lato: max(clamp(48px, 7vw, 120px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); }
.lb.is-aperto { opacity: 1; visibility: visible; transition: opacity 240ms ease-out, visibility 0s; }
.lb.is-subito { transition: none; }

/* la tela è tutto lo schermo: un clic fuori dalla foto chiude (js/lightbox.js) */
.lb__tela { position: absolute; inset: 0; touch-action: none; }
.lb__tela canvas { position: absolute; top: var(--lb-sopra); bottom: var(--lb-sotto); left: var(--lb-lato); right: var(--lb-lato);
  width: calc(100% - 2 * var(--lb-lato)); height: calc(100% - var(--lb-sopra) - var(--lb-sotto)); display: block; }
.lb__cornice { position: absolute; }   /* sopra la foto: la misura la scrive il JS */

.lb__barra, .lb__piede { position: absolute; left: 0; right: 0; display: flex; justify-content: space-between; gap: var(--passo-4); }
.lb__barra { bottom: 100%; align-items: center; padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--polvere-900); }
.lb__piede { top: 100%; align-items: flex-start; padding-top: 14px; }
.lb__conta { font: 400 11px/1 var(--font-dato); letter-spacing: 0.08em; text-transform: uppercase; color: var(--osso); font-variant-numeric: tabular-nums; }
.lb__dida { margin: 0; min-width: 0; font: 400 13px/1.45 var(--font-testo); color: var(--polvere-200); max-width: 60ch; text-wrap: pretty; }
/* frecce ferme ai lati dello schermo, a metà dello spazio della foto (6/11 sera: non seguono più la foto) */
.lb__frecce { position: absolute; left: 0; right: 0; top: var(--lb-sopra); bottom: var(--lb-sotto); pointer-events: none;
  display: flex; align-items: center; justify-content: space-between; padding: 0 max(8px, calc((var(--lb-lato) - 36px) / 2)); }
.lb__frecce[hidden] { display: none; }
.lb__frecce .lb__btn { pointer-events: auto; }
.lb__punti { display: none; gap: 6px; flex: none; }
.lb__punti i { width: 5px; height: 5px; border-radius: var(--raggio-punto); background: var(--polvere-700); }
.lb__punti i.is-on { background: var(--scintilla); box-shadow: var(--bagliore); }

/* bottoni: 36 px a vista, 44 px di tocco */
.lb__btn, .lb__chiudi { appearance: none; border: 0; padding: 0; cursor: pointer; position: relative; color: var(--osso); background: transparent;
  -webkit-tap-highlight-color: transparent; transition: transform 160ms ease-out; }
.lb__btn::after, .lb__chiudi::after { content: ""; position: absolute; inset: -6px; }
.lb__btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--raggio-1);
  box-shadow: inset 0 0 0 1px var(--polvere-700); transition: box-shadow var(--dur-ui, 220ms) ease, transform 160ms ease-out; }
.lb__chiudi { display: inline-flex; align-items: center; gap: 10px; height: 32px; font: 400 11px/1 var(--font-dato); letter-spacing: 0.08em; text-transform: uppercase; }
.lb__x { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--raggio-1);
  box-shadow: inset 0 0 0 1px var(--polvere-700); transition: box-shadow var(--dur-ui, 220ms) ease; }
.lb__btn:active, .lb__chiudi:active { transform: scale(0.97); }
.lb__btn:focus-visible, .lb__chiudi:focus-visible { outline: 2px solid var(--malva); outline-offset: 2px; }
.lb__btn svg, .lb__x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; }
@media (hover: hover) and (pointer: fine) {
  .lb__btn:hover, .lb__chiudi:hover .lb__x { box-shadow: inset 0 0 0 1px var(--osso); }
}

/* telefono: niente frecce (si scorre col dito), punti sotto la didascalia */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .lb { --lb-lato: max(var(--passo-4), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
    --lb-sopra: calc(72px + env(safe-area-inset-top, 0px)); --lb-sotto: calc(120px + env(safe-area-inset-bottom, 0px)); }
  .lb__piede { flex-direction: column; gap: var(--passo-3); }
  .lb__frecce { display: none; }
  .lb__punti { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .lb, .lb.is-aperto { transition: opacity 200ms ease, visibility 0s linear 200ms; }
  .lb.is-aperto { transition: opacity 200ms ease, visibility 0s; }
}