/* =================================================================
   Miriam Imbrogno Makeup Artist — pages/galleria.css
   Galleria: intro, barra filtri, grid masonry, lightbox. Dipende da main.css.
   ================================================================= */

/* ---------- Intro ---------- */
.gallery-intro {
  background-color: var(--color-cream);
  padding-top: calc(64px + var(--space-7));
  padding-bottom: var(--space-6);
  text-align: center;
}
.gallery-intro__script {
  display: block;
  font-family: var(--font-script);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--color-nude-dark);
}
.gallery-intro__title {
  font-size: var(--fs-hero);
  margin-top: var(--space-2);
}
.gallery-intro__text {
  max-width: 60ch;
  margin: var(--space-4) auto 0;
  color: var(--text-soft);
  line-height: 1.8;
}
.gallery-intro__text + .gallery-intro__text { margin-top: var(--space-3); }
@media (min-width: 1024px) {
  .gallery-intro { padding-top: calc(72px + var(--space-8)); }
}

/* ---------- Avviso contenuti sensibili ---------- */
.sensitive-notice {
  background-color: var(--color-nude-light);
  border-block: 1px solid rgba(199, 152, 115, 0.3);
  padding-block: var(--space-5);
}
.sensitive-notice__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4) var(--space-6);
  text-align: center;
}
.sensitive-notice__text {
  max-width: 62ch;
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
.sensitive-notice__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  flex-shrink: 0;
}
.btn--sm { padding: 0.55rem 1.2rem; font-size: var(--fs-xs); }
.btn--ghost-dark {
  border: 1.5px solid rgba(20, 20, 20, 0.35);
  color: var(--color-ink-soft);
  background-color: transparent;
}
.btn--ghost-dark:hover {
  background-color: var(--color-ink);
  border-color: var(--color-ink);
  color: var(--color-white);
}
.sensitive-notice.is-dismissed { display: none; }

/* Pillola persistente per cambiare idea dopo la scelta iniziale */
.sensitive-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) auto 0;
  padding: 0.5rem 1rem;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: 0.03em;
  color: var(--text-soft);
  background-color: var(--color-cream);
  border: 1px solid rgba(199, 152, 115, 0.3);
  border-radius: var(--radius-pill);
}
.sensitive-toggle svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; }
.sensitive-toggle:hover { color: var(--accent-hover); border-color: var(--accent); }
.sensitive-toggle[hidden] { display: none; }

/* ---------- Barra filtri ---------- */
.gallery-filter {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: rgba(250, 246, 239, 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(199, 152, 115, 0.18);
  padding-block: var(--space-3);
}
.gallery-filter__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-3);
}
.filter-btn {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--text-soft);
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  white-space: nowrap;
}
.filter-btn:hover { color: var(--accent-hover); }
.filter-btn.is-active {
  color: var(--color-white);
  background-color: var(--accent);
  border-color: var(--accent);
}
.filter-btn__count {
  font-size: 0.7em;
  opacity: 0.7;
  margin-left: 0.35em;
  vertical-align: super;
}

/* ---------- Grid masonry (CSS columns) ---------- */
.gallery-wrap { padding-block: var(--space-7); }
.gallery-grid {
  column-count: 2;
  column-gap: var(--space-3);
}
@media (min-width: 600px)  { .gallery-grid { column-count: 3; column-gap: var(--space-4); } }
@media (min-width: 992px)  { .gallery-grid { column-count: 4; } }

.gallery-item {
  display: block;
  position: relative;
  break-inside: avoid;
  margin-bottom: var(--space-3);
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--color-sand);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 600px) { .gallery-item { margin-bottom: var(--space-4); } }

/* ---------- Reveal allo scroll (1) ----------
   Con JS il tile parte sollevato e trasparente; .is-revealed lo porta a posto.
   IntersectionObserver in gallery.js aggiunge la classe quando entra in viewport. */
.gallery-grid.js .gallery-item {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.gallery-grid.js .gallery-item.is-revealed {
  opacity: 1;
  transform: none;
}

/* ---------- Transizione filtro (2) ----------
   In uscita gli item sfumano e si restringono leggermente prima del display:none. */
.gallery-grid.js .gallery-item.is-leaving {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-grid.js .gallery-item,
  .gallery-grid.js .gallery-item.is-leaving {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Placeholder: filigrana col logo finché la foto non è caricata */
.gallery-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../img/logo-color.png") center center / 46% auto no-repeat;
  opacity: 0.16;
  pointer-events: none;
}
.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  position: relative; /* sopra la filigrana */
  transition: transform 0.6s var(--ease);
}
/* Con JS: la foto parte invisibile (niente alt a vista) e sfuma all'arrivo */
.gallery-grid.js .gallery-item img {
  opacity: 0;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.gallery-grid.js .gallery-item img.is-loaded { opacity: 1; }
.gallery-item:hover img,
.gallery-item:focus-visible img { transform: scale(1.05); }

/* overlay elegante all'hover: occhiello categoria + icona lente */
.gallery-item__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: linear-gradient(180deg, rgba(20,18,16,0) 40%, rgba(20,18,16,0.55) 100%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.gallery-item:hover .gallery-item__overlay,
.gallery-item:focus-visible .gallery-item__overlay { opacity: 1; }
.gallery-item__cat {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-3);
  color: var(--color-cream);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.gallery-item__zoom {
  width: 44px; height: 44px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  transform: scale(0.8);
  transition: transform var(--dur) var(--ease);
}
.gallery-item:hover .gallery-item__zoom { transform: scale(1); }
.gallery-item__zoom svg { width: 20px; height: 20px; fill: var(--color-ink); }

/* ---------- Contenuti sensibili (cinema/FX): sfocati e bloccati finché non si sceglie ----------
   Stato di default (anche senza JS): sfocato e non cliccabile, per sicurezza. */
.gallery-item--sensitive {
  pointer-events: none;
  cursor: default;
}
.gallery-item--sensitive img {
  filter: blur(24px) saturate(0.9);
  transform: scale(1.08); /* nasconde i bordi sfocati */
}
.gallery-item--sensitive:hover img,
.gallery-item--sensitive:focus-visible img { transform: scale(1.08); }
.gallery-item--sensitive .gallery-item__overlay,
.gallery-item--sensitive .gallery-item__zoom { display: none; }
.gallery-item__sensitive-badge {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  text-align: center;
  padding: var(--space-3);
  background: rgba(20, 18, 16, 0.32);
  color: var(--color-cream);
}
.gallery-item__sensitive-badge svg { width: 26px; height: 26px; fill: var(--color-cream); }
.gallery-item__sensitive-badge span {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: 0.03em;
  max-width: 14ch;
}

/* Dopo la scelta "Mostra comunque": nessuna sfocatura, click riabilitato */
.gallery-grid.sensitive-revealed .gallery-item--sensitive {
  pointer-events: auto;
  cursor: pointer;
}
.gallery-grid.sensitive-revealed .gallery-item--sensitive img {
  filter: none;
  transform: none;
}
.gallery-grid.sensitive-revealed .gallery-item--sensitive:hover img,
.gallery-grid.sensitive-revealed .gallery-item--sensitive:focus-visible img { transform: scale(1.05); }
.gallery-grid.sensitive-revealed .gallery-item--sensitive .gallery-item__overlay,
.gallery-grid.sensitive-revealed .gallery-item--sensitive .gallery-item__zoom { display: flex; }
.gallery-grid.sensitive-revealed .gallery-item__sensitive-badge { display: none; }

@media (prefers-reduced-motion: reduce) {
  .gallery-item--sensitive img { transition: none; }
}

/* "Carica altro" */
.gallery-more { text-align: center; margin-top: var(--space-6); }
.gallery-more[hidden] { display: none; }

/* Nessun risultato (teorico) */
.gallery-empty { text-align: center; color: var(--color-muted); padding-block: var(--space-7); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(14, 12, 11, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__stage {
  max-width: min(92vw, 1200px);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* rientro morbido dopo un drag annullato (impostato/azzerato da JS durante il trascinamento) */
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
  touch-action: pan-y;
}

/* Contatore "3 / 132" */
.lightbox__counter {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  color: rgba(250, 246, 239, 0.7);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
@media (max-width: 600px) {
  .lightbox__counter { top: var(--space-3); left: var(--space-3); }
}
.lightbox__img {
  max-width: 100%;
  max-height: 80vh;
  width: auto; height: auto;
  display: block;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  background-color: #1c1a18;
}
.lightbox__caption {
  margin-top: var(--space-3);
  color: rgba(250, 246, 239, 0.85);
  font-size: var(--fs-sm);
  text-align: center;
}
.lightbox__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.12);
  color: var(--color-cream);
  display: flex; align-items: center; justify-content: center;
  transition: background-color var(--dur) var(--ease);
}
.lightbox__btn:hover { background-color: var(--accent); color: var(--color-white); }
.lightbox__btn svg { width: 24px; height: 24px; fill: currentColor; }
.lightbox__prev { left: var(--space-4); }
.lightbox__next { right: var(--space-4); }
.lightbox__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 48px; height: 48px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.12);
  color: var(--color-cream);
  display: flex; align-items: center; justify-content: center;
  transition: background-color var(--dur) var(--ease);
}
.lightbox__close:hover { background-color: var(--accent); color: var(--color-white); }
.lightbox__close svg { width: 22px; height: 22px; fill: currentColor; }
@media (max-width: 600px) {
  .lightbox__prev { left: var(--space-2); }
  .lightbox__next { right: var(--space-2); }
  .lightbox__btn { width: 44px; height: 44px; }
}