/* ============================================================================
   HERO LIGHTBOX — modal fullscreen per Hero gallery
   ----------------------------------------------------------------------------
   Layout: backdrop fixed full-viewport con stage centrale grande media,
   prev/next ai lati, thumbs+counter in basso, close in alto a destra.
   Animation cinematica: scale-in dal centro (sensazione "il media si stacca
   dal viewer e cresce a tutto schermo").
   ============================================================================ */

/* ── Body lock quando lightbox aperto (no doppio scrollbar) ─────────── */
html.ds-hl-locked,
body.ds-hl-locked{
  overflow: hidden !important;
}
/* ⚠️ V-63 — SU MOBILE IL LOCK BLOCCAVA L'ELEMENTO SBAGLIATO.
   In regime app (`ds-vp-app`) la pagina NON scorre nel documento: `html` e
   `body` sono gia' alti quanto lo schermo, e chi scorre e' `main.page-shell`
   (misurato: scrollHeight 3881 contro clientH 844, mentre il documento sta
   fermo a 844 su 844).
   ⇒ La classe metteva `overflow:hidden` su due elementi che non scorrevano, e
   il vero scroller restava libero: col pannello aperto la pagina DIETRO
   continuava a muoversi sotto il dito, e all'uscita ci si ritrovava altrove.
   E' «la pagina si incricca» segnalato da David.
   🔑 Il lock non e' sbagliato: e' puntato a un elemento che in questa fascia
   non ha quel ruolo. Vale per tutti e tre i componenti che riusano la classe
   — lightbox, photometrics-maximize, specs-maximize — perche' il difetto sta
   nella classe, non in chi la chiama.
   📌 `overscroll-behavior` ferma anche la catena di scroll verso il padre:
   senza, su iOS il trascinamento a fine corsa passa comunque dietro. */
body.ds-vp-app.ds-hl-locked main.page-shell{
  overflow: hidden !important;
  overscroll-behavior: none;
}

/* ── Root container fixed full viewport ─────────────────────────────── */
.ds-hl{
  position: fixed;
  inset: 0;
  z-index: 9000;             /* sopra tutto, anche kf-modal-host (1500) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 40px);

  /* hidden default — JS toggle .is-open per fade-in/scale */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 220ms ease,
    visibility 0s linear 220ms;
}

.ds-hl.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 280ms ease,
    visibility 0s linear 0s;
}

/* Closing state: fade-out senza visibility delay (immediate hide all'end) */
.ds-hl.is-closing{
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

/* ── Backdrop nero con blur leggero ─────────────────────────────────── */
.ds-hl-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(8, 6, 4, .82);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
          backdrop-filter: blur(14px) saturate(120%);
  cursor: pointer;
}

/* ── Frame: contiene stage + nav + foot.
      Animation: scale-in dal centro (effetto "il media cresce dal viewer").
      transform-origin center per il "respiro" dal centro pagina. */
.ds-hl-frame{
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: min(1400px, 96vw);
  max-height: min(900px, 92vh);
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "prev stage next"
    "foot foot foot";
  align-items: center;
  gap: 16px;

  /* Animation initial state */
  transform: scale(.92);
  transform-origin: center;
  transition: transform 360ms cubic-bezier(.22, 1, .36, 1);
}

.ds-hl.is-open .ds-hl-frame{
  transform: scale(1);
}

.ds-hl.is-closing .ds-hl-frame{
  transform: scale(.96);
  transition: transform 220ms cubic-bezier(.22, 1, .36, 1);
}

/* ── Stage centrale: grande media area ──────────────────────────────── */
.ds-hl-stage{
  grid-area: stage;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(255,255,255,.02);
  position: relative;
}

/* Media items dentro lo stage: max contain area, no upscale beyond original */
.ds-hl-media{
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

.ds-hl-image{
  object-fit: contain;
  border-radius: 8px;
}

.ds-hl-video{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
  background: #000;
}

.ds-hl-model{
  width: 100% !important;
  height: 100% !important;
}

.ds-hl-error{
  color: rgba(255,255,255,.65);
  font: 500 .9rem/1.4 "Oswald", system-ui, sans-serif;
  text-align: center;
  padding: 24px;
}

/* ── Close button in alto a destra ──────────────────────────────────── */
.ds-hl-close{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.50);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: rgba(255,255,255,.95);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    transform 120ms ease;
}
@media (hover: hover){
  .ds-hl-close:hover{
    background: rgba(0,0,0,.72);
    border-color: rgba(255,209,0,.65);
    color: #F4B532;
  }
}
.ds-hl-close:active{ transform: scale(.94); }
.ds-hl-close:focus-visible{
  outline: 2px solid #F4B532;
  outline-offset: 2px;
}

/* ── Nav buttons prev/next laterali ─────────────────────────────────── */
.ds-hl-nav{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.50);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: rgba(255,255,255,.95);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    transform 120ms ease;
}
.ds-hl-prev{ grid-area: prev; }
.ds-hl-next{ grid-area: next; }
@media (hover: hover){
  .ds-hl-nav:hover{
    background: rgba(0,0,0,.78);
    border-color: rgba(255,209,0,.65);
    color: #F4B532;
    transform: scale(1.05);
  }
}
.ds-hl-nav:active{ transform: scale(.96); }
.ds-hl-nav:focus-visible{
  outline: 2px solid #F4B532;
  outline-offset: 2px;
}

/* ── Foot: counter + thumbs ─────────────────────────────────────────── */
.ds-hl-foot{
  grid-area: foot;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 6px 0 0;
}

.ds-hl-counter{
  font: 600 .80rem/1 "Oswald", system-ui, sans-serif;
  letter-spacing: .08em;
  color: rgba(255,255,255,.62);
}

/* ── Thumbs strip (replica enhanced del hero dock) ──────────────────── */
.ds-hl-thumbs{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  max-width: min(900px, 90vw);
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.20) transparent;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.ds-hl-thumbs::-webkit-scrollbar{ height: 4px; }
.ds-hl-thumbs::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.20); border-radius: 2px; }

/* Thumb button: replica delle hero thumbs (88x56) ma con bordo amber per
   stato attivo brand-strong. */
.ds-hl-thumb{
  flex-shrink: 0;
  width: 88px;
  height: 56px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  background-color: rgba(255,255,255,.05);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
  position: relative;
  opacity: .65;
  transition:
    opacity 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}
@media (hover: hover){
  .ds-hl-thumb:hover{
    opacity: 1;
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.35);
  }
}
.ds-hl-thumb.is-active{
  opacity: 1;
  border-color: #F4B532;
  box-shadow:
    0 0 0 1px rgba(255,209,0,.55),
    0 6px 14px rgba(255,209,0,.35);
}

/* Badge tipo media (3D / VIDEO) sui thumbs — stesso pattern hero */
.ds-hl-thumb[data-media-type]::after{
  content: attr(data-media-type);
  position: absolute;
  bottom: 4px;
  right: 5px;
  font: 700 9px/1 "Oswald", system-ui, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0,0,0,.62);
  padding: 2px 5px 1px;
  border-radius: 3px;
  pointer-events: none;
}
.ds-hl-thumb[data-media-type="video"]::after{ background: rgba(180,20,20,.78); }
.ds-hl-thumb[data-media-type="3d"]::after{    background: rgba(20,80,180,.78); }

/* ── Mobile responsive (≤640px stack verticale, nav inline) ─────────── */
@media (max-width: 640px){
  .ds-hl{ padding: 12px; }
  .ds-hl-frame{
    grid-template-columns: 1fr;
    grid-template-areas:
      "stage"
      "foot";
    gap: 10px;
  }
  .ds-hl-nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    z-index: 4;
  }
  /* Tap feedback preserva translateY(-50%): altrimenti scale(.96) sostituisce
     il transform e la freccia scivola sotto il centro durante il tap */
  .ds-hl-nav:active{ transform: translateY(-50%) scale(.96); }
  .ds-hl-prev{ left: 4px; }
  .ds-hl-next{ right: 4px; }
  .ds-hl-thumb{ width: 64px; height: 40px; }
}

/* ============================================================
   STEP 3 (sess.23) — LIGHTBOX MOBILE Pattern A
   ============================================================
   Wrap: ds-vp-app + smartphone touch (<1400 + hover:none + pointer:coarse).
   - Counter "3/12" promosso a top-left (Apple Photos pattern)
   - Thumbs 64×64 squared (tappabili)
   - Nav buttons swipe-driven, frecce solo come fallback (più piccole)
   - Drag handle visibile in alto centro = swipe-down hint
   - Close 44×44 conferma top-right
   ============================================================ */
@media (max-width: 1399.98px) and (hover: none) and (pointer: coarse) {

  /* Padding minimo edge-to-edge (lascia il media respirare) */
  body.ds-vp-app .ds-hl{ padding: 0; }

  /* Frame full-screen senza max-width */
  body.ds-vp-app .ds-hl-frame{
    max-width: 100vw;
    max-height: 100vh;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "topbar"
      "stage"
      "foot";
    gap: 0;
    padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0);
  }

  /* Topbar virtuale: counter top-left + close top-right + drag handle centrale */
  body.ds-vp-app .ds-hl-frame::before{
    content: "";
    grid-area: topbar;
    height: 50px;
    pointer-events: none;
  }

  /* Counter "3 / 12" top-left (sopra lo stage) */
  body.ds-vp-app .ds-hl-counter{
    position: absolute;
    top: calc(env(safe-area-inset-top, 0) + 14px);
    left: 16px;
    z-index: 5;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0,0,0,.55);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    color: rgba(255,255,255,.92);
    font: 600 .82rem/1 "Oswald", system-ui, sans-serif;
    letter-spacing: .08em;
  }

  /* Drag handle (swipe-down hint) — top center */
  body.ds-vp-app .ds-hl-frame::after{
    content: "";
    position: absolute;
    top: calc(env(safe-area-inset-top, 0) + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.34);
    z-index: 5;
    pointer-events: none;
  }

  /* Stage: full-bleed, niente border-radius, niente background */
  body.ds-vp-app .ds-hl-stage{
    border-radius: 0;
    background: transparent;
  }

  /* Nav buttons più discreti (lo swipe è la gesture primaria) */
  body.ds-vp-app .ds-hl-nav{
    width: 44px;
    height: 44px;
    background: rgba(0,0,0,.42);
    border-color: rgba(255,255,255,.16);
    opacity: .82;
  }

  /* Foot: solo thumbs + safe area (counter è absolute top-left, esce dal flow) */
  body.ds-vp-app .ds-hl-foot{
    padding: 8px 0 calc(env(safe-area-inset-bottom, 0) + 10px);
  }

  /* Thumbs strip 64×64 squared con scroll-snap */
  body.ds-vp-app .ds-hl-thumbs{
    max-width: 100vw;
    border-radius: 0;
    background: rgba(0,0,0,.32);
    border: none;
    border-top: 1px solid rgba(255,255,255,.10);
    padding: 10px 12px;
    gap: 6px;
    scroll-snap-type: x proximity;
  }
  body.ds-vp-app .ds-hl-thumb{
    width: 64px;
    height: 64px;
    border-radius: 10px;
    scroll-snap-align: center;
  }

  /* Active thumb su mobile: glow più marcato per essere riconoscibile a colpo d'occhio */
  body.ds-vp-app .ds-hl-thumb.is-active{
    box-shadow:
      0 0 0 2px #F4B532,
      0 6px 16px rgba(255,209,0,.45);
  }

  /* Close button: confermato 44×44 in alto destra, sopra il counter */
  body.ds-vp-app .ds-hl-close{
    top: calc(env(safe-area-inset-top, 0) + 12px);
    right: 12px;
  }
}