html { scroll-padding-top: 88px; }
html, body { max-width:100%; overflow-x:hidden; }
body { font-family:'Jost',sans-serif; background:#FAFAF7; color:#262F3A; }
*, *::before, *::after { min-width:0; }
img, svg, video { max-width:100%; }
h1, h2, h3, p { overflow-wrap:break-word; }
.font-display { font-family:'Marcellus',serif; }
.eyebrow { font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:#A98E63; }
.arch { border-radius: 999px 999px 18px 18px; }
#site-header { color:#FAFAF7; }
#site-header .nav-link, #site-header .hamburger { color:#FAFAF7; }
#site-header .lang-wrap { border-color:rgba(250,250,247,.4); }
#site-header.solid { background:rgba(250,250,247,.92); backdrop-filter:blur(8px); border-bottom:1px solid #E3E1DA; color:#262F3A; }
#site-header.solid .nav-link, #site-header.solid .hamburger { color:#262F3A; }
#site-header.solid .lang-wrap { border-color:#E3E1DA; }
#site-header .book-btn { background:#FAFAF7; color:#262F3A; }
#site-header .book-btn:hover { background:#A98E63; color:#FAFAF7; }
#site-header.solid .book-btn { background:#262F3A; color:#FAFAF7; }
#site-header.solid .book-btn:hover { background:#A98E63; }
/* Menu mobile: sempre leggibile su fondo chiaro, a prescindere dallo stato dell'header */
#mobile-menu, #mobile-menu a { color:#262F3A !important; }
#mobile-menu a.book-btn-m { color:#FAFAF7 !important; }

/* Comportamento responsive della navbar (indipendente dal CDN Tailwind) */
#site-header nav.navbar-inner { display:flex; align-items:center; justify-content:space-between; gap:.75rem; height:76px; }
#site-header nav.navbar-inner > a.brand { display:flex; align-items:center; gap:.7rem; flex-shrink:0; text-decoration:none; }
#site-header nav.navbar-inner > .nav-right { display:flex; align-items:center; gap:.75rem; }
#nav-desktop { display:none; }
#site-header .book-btn { display:none; }
#menu-btn { display:inline-flex; }
#mobile-menu.hidden { display:none; }
#mobile-menu { display:block; }
#mobile-menu > div { display:flex; flex-direction:column; gap:1.1rem; padding:1.4rem; }
#mobile-menu a { text-decoration:none; }
@media (min-width:1024px){
  #nav-desktop { display:flex; }
  #menu-btn { display:none; }
  #mobile-menu { display:none !important; }
}
@media (min-width:1280px){
  #site-header .book-btn { display:inline-block; }
}
.nav-link { position:relative; }
.nav-link::after { content:''; position:absolute; left:0; bottom:-4px; width:0; height:1px; background:#A98E63; transition:width .35s ease; }
.nav-link:hover::after, .nav-link.active::after { width:100%; }
.nav-link.active { color:#A98E63; }
.fade-up { opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }
.faq-answer { max-height:0; overflow:hidden; transition:max-height .5s ease; }
.faq-open .faq-answer { max-height:400px; }
.faq-open .faq-icon { transform:rotate(45deg); }
.faq-icon { transition:transform .3s ease; }
input:focus, select:focus, textarea:focus { border-color:#A98E63 !important; outline:none; }
:focus-visible { outline:2px solid #A98E63; outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { .fade-up { opacity:1; transform:none; transition:none; } html { scroll-behavior:auto; } }

/* Griglia camere home: 1 col mobile, 2 tablet, 4 desktop */
.rooms-grid { grid-template-columns:repeat(1,1fr); }
@media (min-width:640px){ .rooms-grid { grid-template-columns:repeat(2,1fr) !important; } }
@media (min-width:1024px){ .rooms-grid { grid-template-columns:repeat(4,1fr) !important; } }
.room-card { transition:transform .4s ease, box-shadow .4s ease; }
.room-card img { transition:transform .6s ease; }
.room-card:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(38,47,58,.12) !important; }
.room-card:hover img { transform:scale(1.05); }

/* Badge/chip nelle schede camere (pagina Camere) */
.room-badge {
  display:inline-flex; align-items:center;
  font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:#3A4452; background:#F1F0EC; border:1px solid #E3E1DA;
  border-radius:999px; padding:.35rem .8rem; white-space:nowrap;
}

/* ---- Gallery: griglia masonry (pagina Gallery) ---------------------------- */
/* column-count invece di grid: le foto mantengono le proporzioni native e il
   browser bilancia da solo l'altezza delle colonne. Nessun ritaglio. */
.gallery-grid { column-count:1; column-gap:1rem; }
@media (min-width:640px){ .gallery-grid { column-count:2; column-gap:1.25rem; } }
@media (min-width:1024px){ .gallery-grid { column-count:3; column-gap:1.5rem; } }

.gallery-item {
  display:block; width:100%; padding:0; border:0; margin:0 0 1rem;
  background:#F1F0EC; border-radius:14px; overflow:hidden; cursor:zoom-in;
  /* evita che una foto venga spezzata tra due colonne */
  break-inside:avoid; -webkit-column-break-inside:avoid; page-break-inside:avoid;
  transition:box-shadow .4s ease;
}
@media (min-width:640px){ .gallery-item { margin-bottom:1.25rem; } }
@media (min-width:1024px){ .gallery-item { margin-bottom:1.5rem; } }
.gallery-item img { display:block; width:100%; height:auto; transition:transform .6s ease, opacity .4s ease; }
.gallery-item:hover { box-shadow:0 18px 40px rgba(38,47,58,.16); }
.gallery-item:hover img { transform:scale(1.04); }
.gallery-item:focus-visible { outline:2px solid #A98E63; outline-offset:3px; }

/* ---- Gallery: lightbox ---------------------------------------------------- */
.lightbox {
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:3.5rem 1rem;
  background:rgba(38,47,58,.94);
  /* Sfoca la pagina sottostante: senza, il testo della navbar traspare. */
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  opacity:0; transition:opacity .3s ease;
}
.lightbox[hidden] { display:none; }
.lightbox.open { opacity:1; }
.lightbox-figure { margin:0; max-width:100%; display:flex; flex-direction:column; align-items:center; gap:.9rem; }
.lightbox-figure img {
  max-width:100%; max-height:76vh; width:auto; height:auto;
  object-fit:contain; border-radius:8px; background:#3A4452;
}
.lightbox-figure figcaption {
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:.5rem 1.2rem;
  color:rgba(250,250,247,.75); font-size:.85rem; font-weight:300; text-align:center; max-width:60ch;
}
/* Didascalia nascosta: la descrizione resta comunque nell'alt dell'immagine,
   quindi gli screen reader continuano a leggerla. Resta visibile il contatore. */
#lightbox-caption { display:none; }
.lightbox-counter { font-size:.72rem; letter-spacing:.22em; color:#A98E63; white-space:nowrap; }

.lightbox-close, .lightbox-nav {
  position:absolute; display:inline-flex; align-items:center; justify-content:center;
  color:#FAFAF7; background:rgba(250,250,247,.1); border:1px solid rgba(250,250,247,.22);
  border-radius:999px; cursor:pointer; transition:background .3s ease, border-color .3s ease;
}
.lightbox-close:hover, .lightbox-nav:hover { background:#A98E63; border-color:#A98E63; }
.lightbox-close { top:1rem; right:1rem; width:44px; height:44px; }
.lightbox-nav { top:50%; transform:translateY(-50%); width:48px; height:48px; }
.lightbox-prev { left:.75rem; }
.lightbox-next { right:.75rem; }
@media (min-width:1024px){
  .lightbox-prev { left:2rem; }
  .lightbox-next { right:2rem; }
  .lightbox-close { top:1.5rem; right:2rem; }
}
/* Blocca lo scroll della pagina sotto al lightbox aperto.
   Va messo anche su <html>: qui html ha già overflow-x:hidden, quindi
   l'overflow di body non viene propagato al viewport e da solo non basta. */
html.lightbox-open, body.lightbox-open { overflow:hidden; }
@media (prefers-reduced-motion: reduce){
  .lightbox { transition:none; }
  .gallery-item img, .gallery-item { transition:none; }
  .gallery-item:hover img { transform:none; }
}

/* ---- Banner cookie -------------------------------------------------------- */
/* z-index 55: sopra la navbar (50), sotto il lightbox (60). */
.cookie-banner {
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  padding:1rem;
  background:rgba(250,250,247,.97); border-top:1px solid #E3E1DA;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 -10px 30px rgba(38,47,58,.10);
  animation:cookie-in .45s ease both;
}
.cookie-banner.hidden { display:none; }
.cookie-banner-inner {
  max-width:80rem; margin:0 auto; padding:.25rem .5rem;
  display:flex; flex-direction:column; align-items:flex-start; gap:1rem;
}
@media (min-width:768px){
  .cookie-banner { padding:1.15rem 1.5rem; }
  .cookie-banner-inner { flex-direction:row; align-items:center; justify-content:space-between; gap:2rem; }
}
@keyframes cookie-in { from { opacity:0; transform:translateY(100%); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .cookie-banner { animation:none; } }