/* =========================================================
   PRIA AURORA — CSS v2.4
   - Hero full-bleed 100svh + effetto cinema
   - Logo più grande
   - Dock UNICO in basso a SINISTRA (prenota + booking/airbnb + social)
   - WhatsApp flottante fisso in basso a destra (non toccato)
   ========================================================= */

/* ---------- Variabili ---------- */
:root{
  --rope: url('../rope.svg');
  --rope-height: 12px;

  /* Hero */
  --hero-min-h-mobile: 100svh;
  --hero-min-h-desktop: 100svh;
  --hero-top-shift: 37%;     /* più piccolo = più in alto lo stack */

  /* Logo */
  --brand-w-sm: 210px;
  --brand-w-md: 260px;
  --brand-w-lg: 320px;

  /* Bottoni / icone */
  --btn-radius: 999px;
  --text-shadow: 0 2px 14px rgba(0,0,0,.35);

  /* Dimensioni icone tonde (Airbnb/Booking/Social) */
  --icon-size-mobile: 30px;
  --icon-size-tablet: 34px;
  --icon-size-desktop: 38px;

  /* Spazi dock */
  --dock-gap: 10px;
  --dock-inset-x: 12px;      /* quanto dista dal bordo sinistro su mobile */
  --dock-inset-y: 16px;      /* quanto dista dal bordo basso su mobile */
}
@media (min-width:640px){
  :root{ --dock-inset-x: 22px; --dock-inset-y: 24px; }
}
@media (min-width:1024px){
  :root{ --dock-inset-x: 34px; --dock-inset-y: 34px; }
}

/* ---------- HERO + cinema ---------- */
/*.hero{
  position:relative;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  min-height: var(--hero-min-h-mobile);
}
@media (min-width:1024px){ .hero{ min-height: var(--hero-min-h-desktop); } }*/

/* HERO full screen robusto per mobile/desktop */
.hero{
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Fallback + nuovi unit dinamici */
  min-height: 100vh;    /* fallback vecchi browser */
  min-height: 100svh;   /* small viewport height (iOS) */
  min-height: 100lvh;   /* large viewport height */
  min-height: 100dvh;   /* dynamic viewport height (Chrome moderno) */
}

/* se usi la variante desktop separata, puoi lasciarla: non serve più, ma non fa danni */
@media (min-width:1024px){
  .hero{ min-height: 100dvh; }
}

.hero{
  min-height: calc(var(--vh, 1vh) * 100);
}

.hero::before{
  content:""; position:absolute; inset:0;
  background: rgba(0,0,0,.30); pointer-events:none;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 140% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.14) 78%, rgba(0,0,0,.25) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.48), rgba(0,0,0,0) 22%, rgba(0,0,0,0) 78%, rgba(0,0,0,.46));
  pointer-events:none;
}
.hero__stage{ position:relative; min-height:inherit; }

/* ---------- Stack centrale ---------- */
.hero__center{
  position:absolute; left:50%; top:var(--hero-top-shift);
  transform:translate(-50%,-50%);
  text-align:center; color:#fff; text-shadow:var(--text-shadow);
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.hero__brand{
  width:var(--brand-w-sm); height:auto; object-fit:contain;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.35));
   margin-bottom: 7px;
}
@media(min-width:640px){ .hero__brand{ width:var(--brand-w-md); } }
@media(min-width:1024px){ .hero__brand{ width:var(--brand-w-lg); } }

.hero__title{ font-weight:800; line-height:1.06; font-size:clamp(28px,4.4vw,56px); margin-top:6px; margin-bottom: 4px; }

.hero__subtitle {
  margin-top: 0.75rem; /* spaziatura mobile */
}

@media (min-width: 1024px) {
  .hero__subtitle {
    margin-top: 3rem;     /* sposta più in basso */
    font-size: 1.75rem;    /* ingrandisce il testo */
    line-height: 1.4;     /* più respiro tra le righe */
  }
}.hero__cta{ display:flex; justify-content:center; gap:10px; margin-top:10px; }

/* Link lingua in alto a DESTRA, attaccato all’angolo */
.hero__lang{
  position:absolute !important;
  right:0 !important;
  top:0 !important;
  padding:12px 14px !important;
  z-index:110 !important;
}
.hero__lang a{
  color:#fff; text-decoration:underline; text-shadow:var(--text-shadow);
}

/* === Forza i loghi in basso a SINISTRA sullo schermo === */
.hero__dockLeft{
  position: fixed !important;  /* rispetto alla finestra, non solo all'hero */
  left: 0 !important;
  bottom: 0 !important;
  padding: 12px 14px !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  z-index: 100 !important;
}

/* Se vuoi ordinare in due righe compatte su mobile */
.hero__dockLeft .row{
  display:flex; align-items:center; gap:var(--dock-gap);
}

/* ---------- Bottoni / Pill ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:var(--btn-radius);
  font-weight:600; font-size:15px; border:1px solid transparent;
  transition:.2s ease;
  box-shadow:0 6px 16px rgba(0,0,0,.22);
  backdrop-filter:saturate(120%) blur(2px);
}
.btn--primary{ background:#0ea5e9; color:#fff; }
.btn--primary:hover{ background:#0284c7; }
.btn--light{ background:rgba(255,255,255,.92); color:#0f172a; }
.btn--light:hover{ background:#fff; }

/* Icone rotonde (Airbnb, Booking e Social) */
.pill-icon, .social{
  width:var(--icon-size-mobile); height:var(--icon-size-mobile);
  border-radius:999px; display:grid; place-items:center;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 6px 16px rgba(0,0,0,.22);
  transition: transform .15s ease, background .2s ease;
}
.pill-icon img, .social img{ width:60%; height:auto; display:block; }
.pill-icon:hover, .social:hover{ transform:translateY(-2px); background:#fff; }

@media(min-width:640px){
  .pill-icon, .social{ width:var(--icon-size-tablet); height:var(--icon-size-tablet); }
}
@media(min-width:1024px){
  .pill-icon, .social{ width:var(--icon-size-desktop); height:var(--icon-size-desktop); }
}

/* ---------- Vari ---------- */
.shadow-text{ text-shadow: var(--text-shadow); }
.gallery img{ transition: transform .25s ease, opacity .25s ease; will-change: transform, opacity; }
.gallery a:hover img{ transform:scale(1.02); opacity:.95; }

/* NON nascondere il WA flottante globale. Se hai questa regola, eliminala:
   a.fixed.bottom-5.right-5{ display:none !important; } */
/* l'hero fa da riferimento per gli assoluti */
.hero{ position: relative; }

/* contenitore interno dell'hero (se lo usi) eredita l'altezza */
.hero__stage{ position: relative; min-height: inherit; }

/* ----- Dock basso sinistra: loghi + social + whatsapp ----- */
.hero__dockLeft{
  position: absolute;
  left: clamp(12px, 4vw, 40px);
  bottom: clamp(16px, 4vw, 40px);
  /* annulla qualunque "top" o "right" che possa arrivare da altrove */
  top: auto !important;
  right: auto !important;

  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  z-index: 10;
  /* un filo di spazio extra sopra la corda */
  padding-bottom: 8px;
}

/* pill e social (dimensioni comode su desktop) */
.pill-icon,
.social{
  width: 42px; height: 42px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
  transition: transform .15s ease, background .2s ease;
}
.pill-icon img, .social img{ width:22px; height:22px; display:block; }
.pill-icon:hover, .social:hover{ transform: translateY(-2px); background:#fff; }

/* misure più contenute su mobile, per evitare “icone giganti” */
@media (max-width: 640px){
  .pill-icon, .social{ width:36px; height:36px; box-shadow:0 4px 12px rgba(0,0,0,.2); }
  .pill-icon img, .social img{ width:20px; height:20px; }
}

/* (opzionale) se qualcosa lo rende sticky/fixed o gli imposta top inline */
.hero__dockLeft[style*="top"]{ top:auto !important; }
/* ============================================
   Comportamento social/WhatsApp solo su mobile
   ============================================ */
@media (max-width: 768px) {
  /* Nasconde WA finché non scrolli */
  .wa-fixed {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .wa-fixed.visible {
    opacity: 1;
    pointer-events: auto;
  }

  /* Social inizialmente visibili, poi nascosti dopo scroll */
  .hero__dockLeft {
    transition: opacity 0.3s ease;
  }
  .hero__dockLeft.hidden {
    opacity: 0;
    pointer-events: none;
  }
}
/* --- altri stili del sito --- */

/* --- Gallery slider --- */
.gallery .swiper {
  --tw-border-opacity: 1;
  border: 1px solid rgba(226,232,240,var(--tw-border-opacity));
}
.gallery__thumbs .swiper-slide {
  opacity: .6;
  cursor: pointer;
}
.gallery__thumbs .swiper-slide-thumb-active {
  opacity: 1;
}
/* ====== Rope divider (cima + nodo Savoia centrato) ====== */
:root{
  /* percorsi ai file */
  --rope-url: url('/Galleria/cima.png');
  --knot-url: url('/Galleria/savoia.png');

  /* dimensioni base */
  --rope-h: 12px;   /* spessore cima */
  --knot-w: 132px;  /* larghezza nodo */
}

/* variante più sottile, se la vuoi usare: <div class="rope-divider rope-divider--slim"></div> */
.rope-divider--slim{
  --rope-h: 10px;
  --knot-w: 110px;
}

.rope-divider{
  position: relative;
  width: 100%;
  /* altezza “slot” sufficiente a contenere il nodo */
  height: max(var(--rope-h), calc(var(--knot-w) * 0.55));
  margin: 20px 0;              /* spazio sopra/sotto la corda */
  pointer-events: none;        /* puro decoro */
}

/* linea di cima ripetuta orizzontalmente */
.rope-divider::before{
  content:"";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: var(--rope-h);
  background-image: var(--rope-url);
  background-repeat: repeat-x;
  background-position: center;
  background-size: auto var(--rope-h); /* scala l’altezza, ripete in larghezza */
  image-rendering: -webkit-optimize-contrast;
}
:root{
  --rope-url: url('/Galleria/cima.png');
  --knot-url: url('/Galleria/savoia.png');

  --rope-h: 36px;   /* come stai usando ora */
  --knot-w: 220px;  /* regola finché il nodo “abbraccia” bene le cime */

  /* NUOVO: micro‑allineamenti delle due texture */
  --left-phase: 6px;   /* prova 6px, poi +/- 1px finché sparisce lo “scalino” */
  --right-phase: -4px; /* puoi usare valori negativi */
  /* NUOVO: lunghezza dissolvenza ai bordi interni (vicino al nodo) */
  --blend: 12px;       /* 10–14px funziona bene con rope-h ~ 36px */
}

.rope-divider{
  position: relative;
  width: 100%;
  height: max(var(--rope-h), calc(var(--knot-w) * .6));
  margin: 22px 0;
  pointer-events: none;
}

/* mezze cime */
.rope-divider .rope{
  position: absolute;
  top: 50%;
  height: var(--rope-h);
  transform: translateY(-50%);
  background-image: var(--rope-url);
  background-repeat: repeat-x;
  background-size: auto var(--rope-h);
  image-rendering: -webkit-optimize-contrast;
}

/* sinistra: fino a metà meno mezzo nodo */
.rope-divider .rope--left{
  left: 0;
  width: calc(50% - var(--knot-w) / 2);
  /* allineamento fase: sposto la texture verso destra */
  background-position: calc(100% + var(--left-phase)) 50%;
  /* dissolvenza sul bordo destro (verso il nodo) */
  -webkit-mask-image: linear-gradient(to right, #000 0 calc(100% - var(--blend)), transparent 100%);
          mask-image: linear-gradient(to right, #000 0 calc(100% - var(--blend)), transparent 100%);
}

/* destra: da metà più mezzo nodo alla fine */
.rope-divider .rope--right{
  right: 0;
  width: calc(50% - var(--knot-w) / 2);
  /* allineamento fase: sposto la texture verso sinistra */
  background-position: var(--right-phase) 50%;
  /* dissolvenza sul bordo sinistro (verso il nodo) */
  -webkit-mask-image: linear-gradient(to right, transparent 0 var(--blend), #000 var(--blend) 100%);
          mask-image: linear-gradient(to right, transparent 0 var(--blend), #000 var(--blend) 100%);
}

/* nodo al centro sopra tutto */
.rope-divider .knot{
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--knot-w);
  transform: translate(-50%, -50%);
  aspect-ratio: 2.2 / 1;     /* ok per il tuo PNG; regola se serve */
  background: var(--knot-url) center / contain no-repeat;
  z-index: 2;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.14)); /* leggero 3D */
}