/* ============================================================
   Conero Sea — Galleria Page
   pages/galleria.css
   ============================================================ */

/* --- FILTERS --- */
.gal-filters {
  display: flex;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding: 2.5rem clamp(1.2rem,5vw,4rem) 1rem;
  max-width: 900px;
  margin: 0 auto;
}

.gal-f {
  padding: 9px 22px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.82);
  font-family: 'DM Sans', sans-serif;
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .3s;
  -webkit-tap-highlight-color: transparent;
}

.gal-f:hover {
  border-color: rgba(229,179,64,.4);
  color: var(--gold2);
  background: rgba(229,179,64,.06);
}

.gal-f.active {
  border-color: var(--gold);
  color: var(--ink);
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  font-weight: 600;
  box-shadow: 0 2px 14px rgba(229,179,64,.25);
}

/* --- GALLERY GRID (masonry-like) --- */
.gal-section {
  padding: 1.5rem clamp(1.2rem,5vw,4rem) clamp(3rem,6vw,6rem);
  overflow: clip;
}

.gal-grid {
  max-width: 1300px;
  margin: 0 auto;
  columns: 3;
  column-gap: 6px;
}

@media (max-width: 900px) { .gal-grid { columns: 2; } }
@media (max-width: 500px) { .gal-grid { column-gap: 4px; } }   /* 2 colonne anche su mobile: meno scroll, più "galleria" */

.gal-item {
  break-inside: avoid;
  margin-bottom: 6px;
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  cursor: pointer;
  background: var(--navy);
  outline: none;
}
.gal-item:focus-visible {
  outline: 2px solid var(--gold2);
  outline-offset: 3px;
}

.gal-item img {
  width: 100%;
  display: block;
  transition: transform .7s cubic-bezier(.25,.46,.45,.94), filter .5s;
  will-change: transform;
}

.gal-item:hover img {
  transform: scale(1.05);
  filter: brightness(1.08);
}

/* overlay */
.gal-item::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(2,2,15,.72) 0%, transparent 45%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}

.gal-item:hover::before { opacity: 1; }

/* caption */
.gal-cap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 1.2rem 1rem .9rem;
  transform: translateY(8px);
  opacity: 0;
  transition: transform .4s cubic-bezier(.25,.46,.45,.94), opacity .35s;
  pointer-events: none;
}

.gal-item:hover .gal-cap { transform: translateY(0); opacity: 1; }

.gal-cap-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 400;
  font-style: italic;
  color: var(--white);
  margin-bottom: .2rem;
}

.gal-cap-tag {
  font-size: .5rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold2);
}

/* reveal animation */
.gal-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease, box-shadow .4s ease;
}

.gal-item.in { opacity: 1; transform: translateY(0); }
.gal-item.hidden { display: none; }

/* elevazione all'hover: ombra + sottile cornice dorata */
.gal-item.in:hover {
  box-shadow: 0 22px 46px -18px rgba(2,2,15,.8), 0 0 0 1px rgba(229,179,64,.35);
}

/* stagger — ciclico ogni 6 elementi, così regge un numero qualsiasi di foto */
.gal-item:nth-child(6n+1) { transition-delay: .02s; }
.gal-item:nth-child(6n+2) { transition-delay: .1s; }
.gal-item:nth-child(6n+3) { transition-delay: .18s; }
.gal-item:nth-child(6n+4) { transition-delay: .26s; }
.gal-item:nth-child(6n+5) { transition-delay: .34s; }
.gal-item:nth-child(6n+6) { transition-delay: .42s; }

/* aspect ratio */
.gal-item[data-aspect="tall"]   img { aspect-ratio: 3/4; object-fit: cover; }
.gal-item[data-aspect="wide"]   img { aspect-ratio: 4/3; object-fit: cover; }
.gal-item[data-aspect="square"] img { aspect-ratio: 1/1; object-fit: cover; }

/* --- COUNTER --- */
.gal-counter {
  text-align: center;
  padding: 0 1.2rem 2rem;
  font-size: .58rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.28);
}

.gal-counter span { color: var(--gold2); font-weight: 500; }

/* link ai video, accanto al contatore foto */
.gal-vlink {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  margin-left: 14px; padding-left: 14px;
  border-left: 1px solid var(--gbr);
  color: var(--gold2); text-decoration: none;
  font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
  transition: color .3s, gap .3s;
  -webkit-tap-highlight-color: transparent;
}
.gal-vlink svg { width: 11px; height: 11px; fill: currentColor; }
.gal-vlink:hover { color: var(--white); gap: 9px; }
@media (max-width: 520px) {
  .gal-vlink {
    display: flex; justify-content: center;
    margin: .7rem auto 0; padding-left: 0; border-left: none;
  }
}

/* --- VIDEO: RIPRESE AEREE --- */
.gal-video {
  max-width: 1300px;
  margin: 0 auto;
  padding: clamp(2.5rem,6vw,5rem) clamp(1.2rem,5vw,4rem) clamp(1rem,3vw,2rem);
  text-align: center;
}
.gal-video-h { margin-bottom: clamp(1.8rem,4vw,2.8rem); }
.gal-video-sub {
  max-width: 560px; margin: 1rem auto 0;
  font-size: .82rem; line-height: 1.8; color: var(--txt-muted); font-weight: 300;
}
.gal-video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 920px) { .gal-video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gal-video-grid { grid-template-columns: 1fr; } }

/* --- PAGINA VIDEO DEDICATA --- */
.gal-video-page { padding-top: clamp(1.25rem,3vw,2rem); padding-bottom: clamp(1rem,3vw,2rem); scroll-margin-top: 64px; }
.gal-video-link { margin-top: clamp(2rem,5vw,3.5rem); }

/* --- HERO VIDEO: reel a tutto schermo --- */
.video-hero {
  position: relative;
  min-height: clamp(440px, 82vh, 800px);
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
  background: var(--deep);
}
.video-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  /* leggero grading per coerenza con le clip + maggiore profondità */
  filter: saturate(1.04) contrast(1.02);
}
.video-hero-ov {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; display: block;
  /* velo scuro uniforme + rinforzo dietro al testo (centro) e in basso,
     così il titolo bianco resta sempre leggibile sul mare chiaro */
  background:
    radial-gradient(95% 75% at 50% 50%, rgba(2,2,15,.44) 0%, rgba(2,2,15,.18) 70%, transparent 100%),
    linear-gradient(0deg, rgba(2,2,15,.82) 0%, rgba(2,2,15,.24) 50%, rgba(2,2,15,.34) 100%);
}
.video-hero-c {
  position: relative; z-index: 2;
  max-width: 760px;
  padding: clamp(2rem,6vw,4rem) clamp(1.2rem,5vw,4rem);
}
.video-hero-c .sec-lbl {
  display: flex; justify-content: center;
  animation: fU .7s ease .1s both;
}
.video-hero-c .sec-ttl {
  font-size: clamp(2.6rem,7vw,5.4rem);
  margin-bottom: .9rem; text-align: center;
  text-shadow: 0 6px 50px rgba(2,2,15,.6);
  animation: fU .8s ease .2s both;
}
.video-hero-c .page-hero-sub { animation: fU .9s ease .35s both; }

/* pulsante "reel completo" nell'hero — compatto */
.video-hero-btns {
  margin-top: clamp(1.3rem,3vw,1.9rem);
  animation: fU 1s ease .5s both;
}
.video-hero-reel {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 24px;
  font-size: .62rem; letter-spacing: .14em;
  cursor: pointer;
}
.video-hero-reel svg { width: 13px; height: 13px; fill: currentColor; margin-left: -2px; }

@media (prefers-reduced-motion: reduce) {
  .video-hero-c .sec-lbl,
  .video-hero-c .sec-ttl,
  .video-hero-c .page-hero-sub,
  .video-hero-btns { animation: none; }
}

/* --- LIGHTBOX VIDEO (reel completo) --- */
.vlb {
  position: fixed; inset: 0; z-index: 8000;
  background: rgba(2,2,15,.96);
  -webkit-backdrop-filter: blur(32px); backdrop-filter: blur(32px);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem,4vw,3rem);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s, visibility .35s;
}
.vlb.on { opacity: 1; visibility: visible; pointer-events: auto; }
.vlb-frame { display: flex; flex-direction: column; align-items: center; justify-content: center; width: auto; max-width: 100%; }
.vlb-video {
  display: block;
  max-width: min(1100px, 92vw); max-height: 78vh; width: auto; height: auto;
  border-radius: var(--r); background: #000;
  box-shadow: 0 16px 80px rgba(0,0,0,.7);
  transform: scale(.96); transition: transform .4s cubic-bezier(.25,.46,.45,.94);
}
.vlb.on .vlb-video { transform: scale(1); }
.vlb-close { position: absolute; top: 1.5rem; right: 1.5rem; z-index: 6; }
@media (max-width: 600px) { .vlb-close { top: 1rem; right: 1rem; } }

/* didascalia + contatore */
.vlb-cap { margin-top: .9rem; text-align: center; }
.vlb-title {
  display: block; font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 1.15rem; color: rgba(255,255,255,.82);
}
.vlb-count {
  display: block; font-size: .52rem; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255,255,255,.4); margin-top: .35rem;
}
/* frecce avanti/indietro (nascoste se un solo video) */
.vlb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: pointer; transition: border-color .3s, background .3s, transform .3s;
  -webkit-tap-highlight-color: transparent;
}
.vlb-prev { left: clamp(.5rem, 3vw, 2.2rem); }
.vlb-next { right: clamp(.5rem, 3vw, 2.2rem); }
.vlb-nav svg { width: 22px; height: 22px; stroke: rgba(255,255,255,.72); stroke-width: 2; fill: none; }
.vlb-nav:hover { border-color: var(--gold); background: rgba(229,179,64,.12); transform: translateY(-50%) scale(1.07); }
.vlb-nav:hover svg { stroke: var(--gold2); }
.vlb:not(.has-nav) .vlb-nav { display: none; }
@media (max-width: 600px) { .vlb-nav { width: 42px; height: 42px; } }

/* cue "ingrandisci" sulle clip aeree in griglia: il pulsante appare in hover */
.gal-vid .gal-vid-play { opacity: 0; }
.gal-vid:hover .gal-vid-play { opacity: 1; }
.gal-vid.is-playing:hover .gal-vid-play { opacity: 1; }

.gal-vid {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  aspect-ratio: 16 / 9;
  background: var(--navy);
  cursor: pointer;
  margin: 0;
  transition: box-shadow .5s cubic-bezier(.16,1,.3,1);
}
.gal-vid-el {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.25,.46,.45,.94);
}
.gal-vid:hover .gal-vid-el { transform: scale(1.05); }
.gal-vid:hover {
  box-shadow: 0 24px 50px -18px rgba(2,2,15,.8), 0 0 0 1px rgba(229,179,64,.38);
}
.gal-vid-ov {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(2,2,15,.78) 0%, transparent 48%);
}
/* pulsante play: visibile sul poster, sfuma quando il video parte */
.gal-vid-play {
  position: absolute; top: 50%; left: 50%; z-index: 3;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(2,2,15,.4);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: opacity .4s, transform .4s cubic-bezier(.16,1,.3,1), background .3s, border-color .3s;
}
.gal-vid-play svg { width: 26px; height: 26px; fill: #fff; margin-left: 3px; }
.gal-vid-play:hover {
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  border-color: var(--gold2);
  transform: translate(-50%, -50%) scale(1.08);
}
.gal-vid-play:hover svg { fill: var(--ink); }
.gal-vid.is-playing .gal-vid-play {
  opacity: 0; pointer-events: none;
  transform: translate(-50%, -50%) scale(.7);
}
.gal-vid-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1.3rem 1.4rem; text-align: left; pointer-events: none;
}
.gal-vid-title {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem; font-style: italic; color: var(--white);
  margin-bottom: .15rem;
}
.gal-vid-tag {
  font-size: .5rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold2);
}

/* --- LIGHTBOX --- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: rgba(2,2,15,.96);
  backdrop-filter: blur(32px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s;
}

.lb.on { opacity: 1; pointer-events: auto; }

.lb-img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--r);
  box-shadow: 0 16px 80px rgba(0,0,0,.7);
  transform: scale(.92);
  transition: transform .4s cubic-bezier(.25,.46,.45,.94);
}

.lb.on .lb-img { transform: scale(1); }

.lb-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .3s;
  -webkit-tap-highlight-color: transparent;
}

.lb-close:hover { border-color: var(--gold); background: rgba(229,179,64,.1); }
.lb-close svg { width: 18px; height: 18px; stroke: rgba(255,255,255,.6); stroke-width: 2; fill: none; }
.lb-close:hover svg { stroke: var(--gold2); }

.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .3s;
  -webkit-tap-highlight-color: transparent;
}

.lb-nav:hover { border-color: var(--gold); background: rgba(229,179,64,.08); }
.lb-nav svg { width: 20px; height: 20px; stroke: rgba(255,255,255,.5); stroke-width: 2; fill: none; }
.lb-nav:hover svg { stroke: var(--gold2); }

.lb-prev { left: 1.5rem; }
.lb-next { right: 1.5rem; }

.lb-info {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.lb-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-style: italic;
  color: rgba(255,255,255,.7);
}

.lb-count {
  font-size: .52rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,255,255,.25);
  margin-top: .3rem;
}

@media (max-width: 600px) {
  .lb-prev { left: .5rem; }
  .lb-next { right: .5rem; }
  .lb-nav { width: 40px; height: 40px; }
  .lb-close { top: 1rem; right: 1rem; }
}

/* --- MOBILE --- */
@media (max-width: 860px) {
  .gal-f { min-height: unset; }
}

/* --- SEZIONE VERTICALE: carosello reel a scorrimento (9:16) --- */
.vreel-h { text-align: center; margin: clamp(2.8rem,6vw,4.5rem) 0 clamp(1.6rem,3vw,2.4rem); }
.vreel-stage { position: relative; }
.vreel {
  position: relative;
  overflow: hidden;
  padding: 18px 0;            /* spazio per il lift in hover */
  touch-action: pan-y;        /* swipe orizzontale gestito via JS, scroll verticale libero */
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.vreel.dragging { cursor: grabbing; }
.vreel-track {
  display: flex;
  width: max-content;
  will-change: transform;
}
/* frecce di navigazione manuale */
.vreel-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 6; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(2,2,15,.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .3s, border-color .3s, transform .3s;
}
.vreel-prev { left: 10px; }
.vreel-next { right: 10px; }
.vreel-nav svg { width: 20px; height: 20px; stroke: rgba(255,255,255,.82); stroke-width: 2; fill: none; }
.vreel-nav:hover { background: linear-gradient(135deg, var(--gold), var(--gold2)); border-color: var(--gold2); transform: translateY(-50%) scale(1.08); }
.vreel-nav:hover svg { stroke: var(--ink); }
@media (max-width: 600px) { .vreel-nav { width: 40px; height: 40px; } .vreel-prev { left: 4px; } .vreel-next { right: 4px; } }
.vreel-card {
  position: relative; flex: 0 0 auto;
  width: clamp(190px, 19vw, 248px); aspect-ratio: 9 / 16;
  margin-right: 14px;
  border: none; padding: 0; background: var(--navy);
  border-radius: var(--r); overflow: hidden; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 14px 34px -20px rgba(2,2,15,.8);
  transition: transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s;
}
.vreel-poster, .vreel-vid {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.vreel-vid { opacity: 0; transition: opacity .5s; }
.vreel-card.playing .vreel-vid { opacity: 1; }
.vreel-card:hover {
  transform: translateY(-8px) scale(1.04);
  box-shadow: 0 28px 56px -20px rgba(2,2,15,.92), 0 0 0 1px rgba(229,179,64,.55);
  z-index: 3;
}
.vreel-ov {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(2,2,15,.8) 0%, transparent 44%);
}
.vreel-play {
  position: absolute; top: 50%; left: 50%; z-index: 2;
  transform: translate(-50%,-50%);
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.6); background: rgba(2,2,15,.34);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  transition: opacity .4s, transform .4s cubic-bezier(.16,1,.3,1), background .3s, border-color .3s;
}
.vreel-play svg { width: 20px; height: 20px; fill: #fff; margin-left: 2px; }
.vreel-card:hover .vreel-play { background: linear-gradient(135deg, var(--gold), var(--gold2)); border-color: var(--gold2); }
.vreel-card:hover .vreel-play svg { fill: var(--ink); }
.vreel-card.playing .vreel-play { opacity: 0; transform: translate(-50%,-50%) scale(.6); }
.vreel-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: .9rem .95rem .85rem; text-align: left; pointer-events: none;
}
.vreel-title {
  display: block; font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: 1.05rem; line-height: 1.15; color: var(--white); margin-bottom: .1rem;
}
.vreel-tag { font-size: .46rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gold2); }