/* =============================================================
   Drink Scroll – CSS v3.4
   Struttura layer (z-index):
     ds-bg              (z:0)  — sfondo colore per slide
     ds-portal          (z:1)  — sagoma logo con foto dentro
     ds-headline        (z:2)  — titolo (sopra foto, sotto barra)
     ds-content         (z:3)  — descrizione laterale
     ds-portal-bar-outer(z:50) — barra wipe (sopra tutto)
   ============================================================= */

body { overflow-x: hidden; }

/* ── Fix catena Elementor ─────────────────────────────────── */
/* IMPORTANTE: display:block !important SOLO sull'inner (.elementor-widget-container),
   NON sull'outer (.elementor-widget-drink_scroll) — altrimenti Elementor non riesce
   a nascondere il widget con i controlli Responsive (Nascondi su Mobile/Tablet). */
.elementor-widget-drink_scroll > .elementor-widget-container {
  display: block !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.e-con:has(.ds-wrap),
.e-con-inner:has(.ds-wrap) {
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
}

/* ── ds-wrap ──────────────────────────────────────────────── */
.ds-wrap {
  position: relative;
  width: 100%;
}

/* ── ds-camera ────────────────────────────────────────────── */
.ds-camera {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  overflow: hidden !important;
  isolation: isolate;           /* stacking context pulito: z:50 barra batte z:2 headline */
}

/* ── ds-bg: sfondo colore (z:0) ──────────────────────────── */
/* background-color fallback prima che JS setti il colore per-slide.
   JS usa el.style.setProperty(...,'important') che batte questo CSS !important. */
.ds-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background-color: #555C39;   /* no !important — JS usa setProperty(...,'important') per override per-slide */
}

/* ── ds-portal: sagoma logo fissa (z:1) — solo foto ─────── */
.ds-portal {
  position: absolute !important;
  left: 50% !important;
  z-index: 1 !important;
  overflow: hidden !important;
}

/* ── ds-portal-bar-outer: wrapper barra (z:50, sopra tutto) ──
   Stesse dimensioni/posizione/clip del portale (inline da PHP).
   z-index:50 >> ds-headline(z:2) e ds-content(z:3).
   will-change:transform: promuove a GPU layer PRIMA dell'animazione
     (non viene sovrascritta dall'inline transform del PHP).
   Posizionato DOPO headline/content nel DOM come ulteriore rinforzo. */
.ds-portal-bar-outer {
  position: absolute !important;
  left: 50% !important;
  z-index: 50 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  will-change: transform;       /* GPU layer esplicito — non overridable da inline style */
}

/* ── ds-portal-bar: striscia wipe animata da GSAP ─────────── */
/* Scorre dal basso all'alto clippata dalla sagoma SVG
   (overflow:hidden su ds-portal-bar-outer).
   height/background SENZA !important: GSAP (inline style) può sovrascrivere.
   !important qui bloccherebbe la variazione colore per-slide da Elementor. */
.ds-portal-bar {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 20px;                 /* fallback — sovrascrivibile da GSAP */
  background-color: #555C39;   /* fallback — sovrascrivibile da GSAP (data-bar-color) */
  pointer-events: none !important;
  /* y, height, background: animati da GSAP */
}

/* ── ds-photo-wrap: foto impilate dentro il portale ─────── */
/* will-change: clip-path — GPU layer per l'animazione wipe (clip-path da GSAP).
   Migliora fluidità su mobile e dispositivi lenti. */
.ds-photo-wrap {
  position: absolute !important;
  inset: 0 !important;
  will-change: clip-path;
}

/* ── ds-photo ─────────────────────────────────────────────── */
.ds-photo {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ── ds-overlay ──────────────────────────────────────────── */
.ds-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* ── ds-headline: contenitore titolo (z:2) ───────────────── */
/* z:2 > ds-portal(z:1): titolo sopra le foto.
   z:2 < ds-portal-bar-outer(z:50): barra wipe sopra il titolo.
   align-items: flex-start: il gruppo si ancora al top del container,
     così gY = portalTop + barH + spacing posiziona il testo SOTTO la barra.
   NO will-change: evita GPU layer che confonde il compositing order. */
.ds-headline {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* ── ds-headline-group: wrapper testo titolo (animato) ──── */
/* y: settato da GSAP in base a portalBottom.
   NO will-change: evita promozione GPU layer che batte z:50 bar-outer. */
.ds-headline-group {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

/* ── ds-headline-bar: linea decorativa sopra il titolo ────── */
/* height e background-color: settati inline da PHP per controllo per-slide */
.ds-headline-bar {
  display: block;
  width: 100%;
  height: 2px;                      /* fallback — override da PHP */
  background-color: #555C39 !important;
  margin-bottom: 0.45em;
}

/* ── ds-headline-inner: testo titolo enorme ──────────────── */
.ds-headline-inner {
  font-size: clamp(3.5rem, 15vw, 13rem);
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: 82px;             /* distanza dal top del portale → titolo posizionato correttamente */
}

/* ── ds-content: descrizione laterale (z:3) ──────────────── */
/* justify-content: settato inline (flex-start=sx, flex-end=dx) */
.ds-content {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 5% !important;
  box-sizing: border-box !important;
  pointer-events: none !important;
}

/* ── ds-content-inner: max-width e text-align inline ──────── */
.ds-content-inner {
  display: flex;
  flex-direction: column;
}

.ds-label {
  display: block;
  font-size: clamp(0.65rem, 1.2vw, 0.85rem);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

/* ── ds-description ──────────────────────────────────────── */
.ds-description {
  font-size: clamp(0.85rem, 1.4vw, 1.1rem);
  line-height: 1.6;
  margin: 0;
}

.ds-description p {
  margin: 0 0 0.5em;
}

.ds-description p:last-child {
  margin-bottom: 0;
}

/* ── ds-svg-defs: SVG clipPath invisible ─────────────────── */
.ds-svg-defs {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE LAYOUT (≤ 767px)
   Silhouette ancorata in alto (width 85vw, aspect-ratio auto),
   titolo che parte dal basso della silhouette,
   descrizione sotto la silhouette.
   JS setta --ds-portal-h (offsetHeight in px) sulla camera
   così gli elementi sanno dove finisce il portale.
   Desktop: invariato (tutto questo CSS non si applica).
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Portal + bar-outer: anchorati in alto, 85vw ────────
     width:85vw + aspect-ratio (inline 0.7825) → height auto.
     transform: solo centering orizzontale (no vertical offset).
     clip-path objectBoundingBox scala automaticamente. */
  .ds-portal,
  .ds-portal-bar-outer {
    top: 0 !important;
    transform: translate(-50%, 0) !important;
    width: 85vw !important;
    height: auto !important;       /* aspect-ratio (inline PHP) determina l'altezza */
  }

  /* ── Headline: clippata all'area portale, stessa larghezza del portale ──
     left/width/right: allineamento orizzontale = portale 85vw centrato.
     Usa left:calc() invece di transform:translateX per non confliggere con
     il translateY che GSAP gestisce per il wipe del titolo.
     overflow:hidden (base CSS) clippa sia in altezza (portalH) che larghezza (85vw). */
  .ds-headline {
    left: calc(50% - 42.5vw) !important;
    right: auto !important;
    width: 85vw !important;
    bottom: auto !important;
    height: var(--ds-portal-h, 60vh) !important;
  }

  /* ── Titolo: font ridotto, può andare a capo ────────────
     margin-top ridotto proporzionalmente al portale più piccolo. */
  .ds-headline-inner {
    font-size: clamp(1.6rem, 9vw, 2.8rem);
    white-space: normal;
    text-align: center;
    margin-top: 20px;
  }

  /* ── Descrizione: sotto il portale ─────────────────────
     top: var(--ds-portal-h) → JS calcola l'altezza reale del portale.
     fallback 60vh se JS non ancora eseguito.
     inset:0 imposta left/right/bottom: li teniamo (0).
     align-items:flex-start → testo parte dall'alto dell'area descrizione. */
  .ds-content {
    top: var(--ds-portal-h, 60vh) !important;
    align-items: flex-start !important;
    padding: 20px 24px !important;
  }

  /* ── Content-inner: full width su mobile ────────────────
     max-width inline PHP (es. 30%) → override a 100%. */
  .ds-content-inner {
    max-width: 100% !important;
  }

  /* ── Label e descrizione: font scale mobile ─────────── */
  .ds-label {
    font-size: clamp(0.65rem, 3vw, 0.85rem);
  }

  .ds-description {
    font-size: clamp(0.85rem, 3.5vw, 1rem);
  }
}