/* ===== Galleria ===== */

/* Banda intro scura full-bleed (niente pin: è in cima alla pagina, la
   headline non deve mai partire invisibile — reveal leggero come il resto). */
.pl-gallery-intro { display: flex; align-items: center; overflow: hidden; }
.pl-gallery-intro__bg {
  position: absolute; inset: -10% 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 30% 15%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 60%);
}
.pl-gallery-intro__inner { position: relative; z-index: 2; padding-block: var(--space-8); }
.pl-gallery-intro h1 { font-size: var(--fs-h2); margin: 0 0 var(--space-3); }
.pl-gallery-intro__lead { font-size: var(--fs-lead); color: var(--ink-soft); max-width: 46ch; margin: 0; }

/* Bento grid chiaro */
.pl-gallery { padding-block: var(--space-6) var(--space-8); }
.pl-gallery__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: var(--space-3);
  grid-auto-flow: dense; /* niente celle vuote quando --0/--3/--4 non chiudono la riga */
}
.pl-gallery__cell { margin: 0; }
.pl-gallery__cell--0 { grid-column: span 2; grid-row: span 2; }
.pl-gallery__cell--3 { grid-row: span 2; }
.pl-gallery__cell--4 { grid-column: span 2; }
.pl-gallery__item {
  display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; overflow: hidden; border-radius: var(--radius);
}
.pl-gallery__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 400ms var(--ease-out);
}
.pl-gallery__item:hover .pl-gallery__img { transform: scale(1.04); }
.pl-gallery__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.pl-gallery__empty { color: var(--ink-soft); font-size: var(--fs-lead); }

@media (max-width: 780px) {
  .pl-gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .pl-gallery__cell--0 { grid-column: span 2; grid-row: span 1; }
  .pl-gallery__cell--3,
  .pl-gallery__cell--4 { grid-column: span 1; grid-row: span 1; }
  .pl-gallery-intro__inner { padding-block: var(--space-7); }
}

@media (prefers-reduced-motion: reduce) {
  .pl-gallery__img { transition: none; }
}

/* Lightbox */
.pl-lightbox { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; }
.pl-lightbox[hidden] { display: none; }
.pl-lightbox__scrim { position: absolute; inset: 0; background: rgba(20, 18, 16, 0.88); }
.pl-lightbox__figure { position: relative; z-index: 1; margin: 0; max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.pl-lightbox__img { max-width: 92vw; max-height: 82vh; object-fit: contain; border-radius: var(--radius); background: var(--surface); }
.pl-lightbox.is-opening .pl-lightbox__figure { opacity: 0; transform: scale(0.96); }
.pl-lightbox__figure { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
.pl-lightbox__counter { color: var(--bg); font-size: var(--fs-eyebrow); letter-spacing: 0.15em; text-shadow: 0 1px 6px rgba(20, 18, 16, 0.9); }
/* pill scuro: i controlli cadono sopra la foto (non solo lo scrim), serve un
   fondo proprio per garantire il contrasto AA su foto chiare */
.pl-lightbox__btn {
  position: absolute; z-index: 2; border: 0; color: var(--bg);
  font-size: 1.75rem; line-height: 1; cursor: pointer;
  width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(20, 18, 16, 0.62);
}
.pl-lightbox__btn:hover { background: rgba(20, 18, 16, 0.82); }
.pl-lightbox__btn:focus-visible { outline: 2px solid var(--bg); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(20, 18, 16, 0.9); }
.pl-lightbox__btn--prev { left: clamp(0.5rem, 1vw, 1rem); top: 50%; transform: translateY(-50%); }
.pl-lightbox__btn--next { right: clamp(0.5rem, 1vw, 1rem); top: 50%; transform: translateY(-50%); }
.pl-lightbox__btn--close { right: clamp(0.5rem, 1vw, 1rem); top: clamp(0.5rem, 1vh, 1rem); }
@media (prefers-reduced-motion: reduce) {
  .pl-lightbox__figure { transition: none; }
  .pl-lightbox.is-opening .pl-lightbox__figure { opacity: 1; transform: none; }
}