/* =====================================================================
   GALLERIA — stili specifici della pagina (outdoor)
   Estende il design system condiviso (styles.css + tokens.css).
   NON duplica .gallery/.gallery__item: li riusa dalla Home.
   Qui: spaziatura tra album, intestazioni album, banner Fase 2,
   e un lightbox accessibile (vanilla JS inline nella pagina).
   ===================================================================== */

@layer sections {
  /* Distanza verticale tra un album e il successivo */
  .album + .album { margin-top: clamp(var(--sp-7), 6vw, var(--sp-8)); }

  .album__head { max-width: 60ch; }
  .album__count {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    margin-top: var(--sp-3); font-size: var(--fs-300); color: var(--c-muted);
  }
  .album__count svg { inline-size: 16px; block-size: 16px; color: var(--c-brand); }

  /* Banner discreto "Fase 2 CMS" */
  .cms-note {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    margin-top: var(--sp-6);
    padding: var(--sp-4) var(--sp-5);
    border-radius: var(--r-md);
    background: var(--c-surface-2, var(--c-surface));
    border: 1px dashed var(--c-line);
    color: var(--c-text-soft);
    font-size: var(--fs-300); line-height: var(--lh-snug);
  }
  .cms-note svg { inline-size: 20px; block-size: 20px; flex: none; color: var(--c-brand); margin-block-start: 2px; }
  .cms-note strong { color: var(--c-text); font-weight: var(--fw-bold); }

  /* L'item della galleria fa da bottone-lightbox: cursore coerente */
  .gallery__item[data-lightbox] { cursor: zoom-in; }
}

/* ============================================================ LIGHTBOX */
@layer overlay {
  .lightbox {
    position: fixed; inset: 0; z-index: 1000;
    display: none; place-items: center;
    padding: clamp(var(--sp-4), 4vw, var(--sp-7));
    background: rgba(6, 18, 12, 0.92);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  }
  .lightbox[data-open="true"] { display: grid; }

  .lightbox__figure {
    margin: 0; max-inline-size: min(1100px, 92vw); max-block-size: 86vh;
    display: flex; flex-direction: column; gap: var(--sp-3);
  }
  .lightbox__img {
    display: block; max-inline-size: 100%; max-block-size: 76vh;
    inline-size: auto; block-size: auto; margin-inline: auto;
    object-fit: contain; border-radius: var(--r-md);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
    background: var(--c-ink);
  }
  .lightbox__cap {
    color: rgba(255, 255, 255, 0.92); text-align: center;
    font-size: var(--fs-300); line-height: var(--lh-snug);
  }

  .lightbox__close {
    position: absolute; top: clamp(var(--sp-3), 3vw, var(--sp-5));
    right: clamp(var(--sp-3), 3vw, var(--sp-5));
    inline-size: 46px; block-size: 46px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.1); color: #fff;
    transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-spring);
  }
  .lightbox__close:hover { background: rgba(255, 255, 255, 0.22); transform: scale(1.06); }
  .lightbox__close svg { inline-size: 22px; block-size: 22px; }

  /* wrapper dialog: contiene figura + barra, riferimento per le frecce assolute */
  .lightbox__inner {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  }

  /* frecce prev / next, ai lati dell'immagine */
  .lightbox__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    inline-size: 52px; block-size: 52px; border-radius: 50%; z-index: 2;
    display: grid; place-items: center; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.1); color: #fff;
    transition: background var(--t-fast) var(--ease-out);
  }
  .lightbox__nav:hover { background: rgba(255, 255, 255, 0.24); }
  .lightbox__nav svg { inline-size: 26px; block-size: 26px; }
  .lightbox__nav--prev { left: clamp(calc(-1 * var(--sp-2)), -4vw, 0px); }
  .lightbox__nav--next { right: clamp(calc(-1 * var(--sp-2)), -4vw, 0px); }
  .lightbox__nav[hidden] { display: none; }

  /* barra inferiore: nome album + contatore */
  .lightbox__bar {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
    color: rgba(255, 255, 255, 0.85); font-size: var(--fs-300);
  }
  .lightbox__album { font-weight: var(--fw-semi); color: #fff; }
  .lightbox__album:not(:empty)::after { content: "·"; margin-inline-start: var(--sp-4); color: rgba(255,255,255,0.4); }
  .lightbox__counter { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.7); }

  /* Quando il lightbox è aperto blocchiamo lo scroll del body */
  body.lightbox-lock { overflow: hidden; }

  @media (max-width: 600px) {
    .lightbox__nav { inline-size: 44px; block-size: 44px; }
    .lightbox__nav--prev { left: 0; }
    .lightbox__nav--next { right: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .lightbox { -webkit-backdrop-filter: none; backdrop-filter: none; }
    .lightbox__close:hover { transform: none; }
  }
}