/* Restyle grafico 2026-11: slider, cornici gallerie, pulsante WhatsApp, icone camere.
   Caricato per ultimo prima di </head>. Per disattivarlo basta togliere il <link> dai layout. */

:root {
  --ho-blu: #094ea2;
  --ho-blu-scuro: #073671;
  --ho-bordo: #dde3ea;
  --ho-tinta: #eef3f9;
}

/* ---------- Slider: dissolvenza incrociata (home) e comparsa morbida (pagine interne) ---------- */
@keyframes ho-dissolvi { from { opacity: 1; } to { opacity: 0; } }
@keyframes ho-compari  { from { opacity: 0; } to { opacity: 1; } }

#index12 .owl-item.animated.ho-dissolvi {
  animation: ho-dissolvi 1.8s cubic-bezier(.45, 0, .55, 1) both;
}
.section-slider.height-v { background: var(--ho-blu-scuro); }
#pageslide .item > img { animation: ho-compari 1.2s ease-out both; }

/* ---------- Home, sezione di benvenuto: entrata, zoom lento, parallasse (home-benvenuto.js) ---------- */
.about.about-v4 .ho-benv {
  overflow: hidden;
  isolation: isolate;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(7, 54, 113, .16);
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease;
}
.about.about-v4 .ho-benv-centro { margin-bottom: 26px; }
.about.about-v4 .ho-benv:hover { box-shadow: 0 14px 34px rgba(7, 54, 113, .28); }
.about.about-v4 .ho-benv img { width: 100%; will-change: transform; }

/* stato iniziale: solo se lo script e' partito, senza JS le foto restano visibili */
.ho-benv-pronta { overflow: hidden; } /* le foto laterali partono fuori colonna: niente scroll orizzontale */
.ho-benv-pronta .ho-benv { opacity: 0; }
.ho-benv-pronta .ho-benv-sx { transform: translateX(-70px); }
.ho-benv-pronta .ho-benv-dx { transform: translateX(70px); }
.ho-benv-pronta .ho-benv-centro { transform: translateY(40px) scale(.95); }
.ho-benv-pronta.ho-benv-entrata .ho-benv { opacity: 1; transform: none; }
.ho-benv-pronta.ho-benv-entrata .ho-benv-sx,
.ho-benv-pronta.ho-benv-entrata .ho-benv-dx { transition-delay: .25s, .25s, 0s; }
.ho-benv-pronta .ho-benv-sx,
.ho-benv-pronta .ho-benv-dx { translate: 0 var(--ho-parallasse, 0); }

@keyframes ho-zoom-sx { from { transform: scale(1); } to { transform: scale(1.12) translate(2%, -1%); } }
@keyframes ho-zoom-centro { from { transform: scale(1.1) translateY(-1%); } to { transform: scale(1); } }
@keyframes ho-zoom-dx { from { transform: scale(1); } to { transform: scale(1.12) translate(-2%, 1%); } }
.ho-benv-pronta .ho-benv img { animation: 16s ease-in-out infinite alternate paused; }
.ho-benv-pronta .ho-benv-sx img { animation-name: ho-zoom-sx; animation-duration: 17s; }
.ho-benv-pronta .ho-benv-centro img { animation-name: ho-zoom-centro; animation-duration: 21s; }
.ho-benv-pronta .ho-benv-dx img { animation-name: ho-zoom-dx; animation-duration: 19s; }
.ho-benv-pronta.ho-benv-invista .ho-benv img { animation-play-state: running; }

/* ---------- Gallerie: cornice sottile ---------- */
.gallery_product .box-img,
.gallery-item .inner-box .image-box,
.image-block .image-box {
  padding: 5px;
  background: #fff;
  border: 1px solid var(--ho-bordo);
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(7, 54, 113, .07);
  overflow: hidden;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.gallery_product .box-img:hover,
.gallery-item .inner-box .image-box:hover,
.image-block .image-box:hover {
  border-color: var(--ho-blu);
  box-shadow: 0 6px 18px rgba(7, 54, 113, .16);
}
.gallery_product .box-img a,
.gallery-item .inner-box .image-box a,
.image-block .image-box a {
  display: block;
  overflow: hidden;
  border-radius: 2px;
}
.gallery_product .box-img a img,
.gallery-item .inner-box .image-box a img,
.image-block .image-box a img {
  display: block;
  width: 100%;
  padding: 0; /* il vecchio tema dava 15px alle immagini di .image-box */
  transition: transform .5s ease;
}
.gallery_product .box-img:hover a img,
.gallery-item .inner-box .image-box:hover a img,
.image-block .image-box:hover a img { transform: scale(1.03); }
/* alcune pagine danno a figure.image-box un min-height: l'immagine lo riempie, senza vuoto sotto */
.image-block .image-box { display: flex; }
.image-block .image-box a { display: flex; flex: 1 1 100%; min-width: 0; }
.image-block .image-box a img { flex: 1 1 100%; min-width: 0; height: auto; align-self: stretch; object-fit: cover; }
.gallery-item.masonry-item { margin-bottom: 18px; }
.gallery_product,
.image-block { margin-bottom: 18px; }

/* ---------- WhatsApp: in basso a sinistra, sopra la barra del booking ---------- */
.ho-whatsapp {
  position: fixed;
  left: 20px;
  bottom: 96px; /* la barra del booking fissa e' alta 78px */
  z-index: 1000; /* sopra la barra (999), sotto modali e lightbox */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease, visibility .2s;
}
.ho-whatsapp:hover,
.ho-whatsapp:focus { color: #fff; transform: scale(1.08); box-shadow: 0 6px 20px rgba(0, 0, 0, .34); }
.ho-whatsapp:focus-visible { outline: 3px solid var(--ho-blu); outline-offset: 2px; }
.ho-whatsapp svg { width: 32px; height: 32px; fill: currentColor; }
/* pagine senza barra del booking (post, 404...) */
body:not(:has(.stickme)) .ho-whatsapp { bottom: 20px; }
@media (max-width: 767px) {
  /* qui il booking non e' fisso ma scorre con la pagina: lo script nel partial whatsapp sposta il pulsante */
  .ho-whatsapp { left: 14px; bottom: 16px; width: 52px; height: 52px; }
  .ho-whatsapp svg { width: 30px; height: 30px; }
  .ho-whatsapp.ho-sul-booking { opacity: 0; visibility: hidden; }
}

/* ---------- Camere: icone in evidenza ---------- */
.ho-icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ho-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ho-highlights {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 12px;
  margin: 34px 0 10px;
  padding: 30px 0;
  list-style: none;
  border-top: 1px solid var(--ho-bordo);
  border-bottom: 1px solid var(--ho-bordo);
}
.ho-highlights li {
  flex: 1 1 130px;
  max-width: 200px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ho-blu-scuro);
}
.ho-highlights .ho-tondo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--ho-tinta);
  color: var(--ho-blu);
  font-size: 26px;
  transition: background .25s ease, color .25s ease;
}
.ho-highlights li:hover .ho-tondo { background: var(--ho-blu); color: #fff; }

/* ---------- Camere: elenco equipaggiamenti con icone (costruito da room-amenities.js) ---------- */
ul.ho-amenities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px 26px;
  margin: 14px 0 26px;
  padding: 0;
  list-style: none;
}
ul.ho-amenities li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  line-height: 1.35;
  text-align: left;
}
ul.ho-amenities li::before { content: none; }
ul.ho-amenities .ho-tondo {
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ho-tinta);
  color: var(--ho-blu);
  font-size: 18px;
}

/* ---------- Pulsante "torna all'elenco" sopra la scheda ---------- */
.ho-torna { padding: 24px 0 0; }
a.ho-torna-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px 7px 10px;
  border: 1px solid var(--ho-bordo); border-radius: 20px;
  background: #fff; color: var(--ho-blu);
  font-size: 13px; font-weight: 500; line-height: 1.3;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
a.ho-torna-link:hover,
a.ho-torna-link:focus { background: var(--ho-blu); border-color: var(--ho-blu); color: #fff; }
a.ho-torna-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Indice delle schede (escursioni, offerte) ---------- */
.ho-indice { padding: 30px 0 40px; }
.ho-indice-testa { display: flex; align-items: center; justify-content: space-between; min-height: 32px; margin-bottom: 10px; }
.ho-indice-titolo { font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ho-blu-scuro); }
.ho-indice-frecce[hidden] { display: none; }
.ho-indice-frecce { display: flex; gap: 6px; }
.ho-indice-freccia {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--ho-bordo); border-radius: 50%;
  background: #fff; color: var(--ho-blu); cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.ho-indice-freccia svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ho-indice-freccia:hover:not(:disabled) { background: var(--ho-blu); color: #fff; }
.ho-indice-freccia:disabled { opacity: .35; cursor: default; }
ul.ho-indice-lista {
  display: flex; gap: 12px;
  margin: 0; padding: 0 0 8px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
ul.ho-indice-lista li { flex: 1 0 260px; max-width: 340px; margin: 0; padding: 0; scroll-snap-align: start; }
ul.ho-indice-lista li::before { content: none; }
.ho-indice-voce {
  display: flex; align-items: center; gap: 12px;
  height: 100%; padding: 6px 12px 6px 6px;
  background: #fff; color: #222;
  border: 1px solid var(--ho-bordo); border-radius: 4px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
a.ho-indice-voce:hover,
a.ho-indice-voce:focus { color: #222; border-color: var(--ho-blu); box-shadow: 0 4px 12px rgba(7, 54, 113, .14); }
.ho-indice-voce img { flex: 0 0 64px; width: 64px; height: 64px; object-fit: cover; border-radius: 2px; }
.ho-indice-nome {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  font-size: 13px; line-height: 1.35;
}
@media (max-width: 767px) {
  ul.ho-indice-lista li { flex-basis: 78%; max-width: none; }
  .ho-indice-frecce, .ho-indice-frecce:not([hidden]) { display: none; }
}

@media (max-width: 767px) {
  ul.ho-amenities { padding: 0 16px; } /* allineato ai paragrafi del testo */
}

@media (prefers-reduced-motion: reduce) {
  #index12 .owl-item.animated.ho-dissolvi { animation-duration: .01s; }
  #pageslide .item > img { animation: none; }
  .gallery_product .box-img:hover a img,
  .gallery-item .inner-box .image-box:hover a img,
  .image-block .image-box:hover a img,
  .ho-whatsapp:hover { transform: none; }
}