/* =========================================================
   GALLERY — photos only
   ========================================================= */
.ghero {
  position: relative; min-height: 88vh; min-height: 88svh; overflow: clip;
  padding: calc(var(--gutter) * 2 + 3.6rem) var(--gutter) var(--gutter);
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;
}
.ghero__top { display: flex; gap: 1rem; align-items: center; position: relative; z-index: 2; }
.ghero__star { position: absolute; right: -8vw; top: 8vh; width: min(48vw, 56vh); height: auto; z-index: 0; }
.ghero__title { position: relative; z-index: 1; font-size: min(15.5vw, 26vh); }
html[lang="it"] .ghero__title { font-size: min(11.5vw, 24vh); }
.ghero__sub { position: relative; z-index: 2; font-size: clamp(.95rem, 1.35vw, 1.3rem); font-weight: 700; padding-right: 90px; }
@media (max-width: 800px) {
  .ghero__title { font-stretch: 72%; font-size: min(24vw, 19vh); line-height: .86; }
  html[lang="it"] .ghero__title { font-size: min(20vw, 17vh); }
  .ghero__star { width: 80vw; right: -30vw; top: 12vh; }
}

.band { padding: clamp(1rem, 2vw, 2rem) 0; overflow: hidden; }
.cta { padding: clamp(1.5rem, 4vw, 4rem) 0; overflow: hidden; }
.cta__link { display: block; transition: color .3s; }
.cta__link:hover { color: var(--paper); }

/* ---------- Photo columns (built by js/pages/gallery.js) ---------- */
.gal { padding: clamp(3rem, 8vw, 8rem) var(--gutter); }
.gal__src { display: none; }
.gal__cols { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.gal__col { display: grid; gap: var(--gutter); will-change: transform; }
.no-js .gal__src, html:not(.js) .gal__src { display: grid; gap: var(--gutter); }

.shot {
  position: relative; aspect-ratio: var(--r, 4 / 5); overflow: hidden; background: transparent;
  clip-path: inset(0 0 100% 0); transition: opacity .5s, filter .5s;
}
html:not(.js) .shot { clip-path: none; }
.shot__in { position: absolute; inset: -12% 0; will-change: transform; }
.shot__in img, .shot__in svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot__in .art { position: absolute; inset: 0; }
@media (hover: hover) {
  /* only while a photo itself is hovered — empty space between photos does nothing */
  .gal__cols:has(.shot:hover) .shot:not(:hover) { opacity: .22; filter: blur(7px) grayscale(1); }
  .shot img, .shot svg { transition: transform .9s var(--out); }
  .shot:hover img, .shot:hover svg { transform: scale(1.06); }
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 400; background: var(--black); visibility: hidden;
  display: grid; padding: calc(var(--gutter) + 3rem) var(--gutter) var(--gutter);
  cursor: zoom-out;
}
/* the frame fills the screen; the photo is object-fit: contain, so it is always shown whole */
.lightbox__fig { position: relative; width: 100%; height: 100%; min-height: 0; }
.lightbox__fig > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.lightbox__fig svg { object-fit: contain; }
.lightbox__x { position: absolute; top: var(--gutter); right: var(--gutter); z-index: 2; color: var(--red); font-weight: 900; text-transform: uppercase; font-size: .8rem; }