/* ============================================================
   La Sacrestia — stili condivisi
   ============================================================ */

/* overflow-x: clip (NON hidden): evita lo scroll orizzontale senza creare uno
   scroll-container, così position:sticky dell'header continua a funzionare. */
html, body { overflow-x: clip; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Filo dorato decorativo */
.golden-rule { width: 60px; height: 2px; background-color: #C5A059; }
.golden-rule.center { margin-left: auto; margin-right: auto; }

/* Gradiente hero */
.hero-gradient {
  background: linear-gradient(to bottom, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.45) 45%, rgba(0,0,0,0.68) 100%);
}

/* Navbar */
.nav-scrolled { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.10); }

/* Card hover */
.tonal-card { background:#fff; box-shadow:0 4px 20px -2px rgba(28,16,5,.05); transition:transform .35s ease, box-shadow .35s ease; }
.tonal-card:hover { transform: translateY(-4px); box-shadow:0 10px 30px -5px rgba(28,16,5,.08); }
.luxury-card { transition: transform .3s ease, box-shadow .3s ease; }
.luxury-card:hover { transform: translateY(-4px); box-shadow:0 10px 30px -10px rgba(28,16,5,.05); }

/* ============================================================
   HERO a tutta schermata — entra esatto in una schermata
   (la sezione successiva non spunta). --header-h misurato da JS.
   ============================================================ */
:root { --header-h: 76px; }
.hero-full {
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
}
/* Landscape molto basso (telefoni ruotati): niente hero gigante vuoto */
@media (orientation: landscape) and (max-height: 560px) {
  .hero-full { min-height: auto; padding-top: 3rem; padding-bottom: 3rem; }
}

/* ============================================================
   Menu mobile a tendina
   ============================================================ */
/* Tendina mobile: sovrapposta (absolute), così NON spinge giù l'hero */
#mobile-menu {
  position: absolute;
  top: 100%; left: 0; right: 0;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .3s ease-out, opacity .3s ease-out;
  box-shadow: 0 14px 24px -10px rgba(28,16,5,.22);
}
#mobile-menu.menu-open { max-height: calc(100svh - var(--header-h, 76px)); opacity: 1; overflow-y: auto; }

/* ============================================================
   Toggle lingua IT / EN
   ============================================================ */
.lang-toggle { display:inline-flex; align-items:center; gap:2px; font-family:Manrope, sans-serif; font-weight:700; font-size:12px; letter-spacing:.08em; }
.lang-toggle button { padding:2px 6px; border-radius:6px; color:#4e453e; opacity:.55; transition:opacity .2s, color .2s, background .2s; cursor:pointer; }
.lang-toggle button:hover { opacity:.85; }
.lang-toggle button.active { color:#1e1b17; opacity:1; }
.lang-toggle .sep { opacity:.3; }

/* ============================================================
   Reveal on scroll — lo stato nascosto vive SOLO dietro html.anim
   (così senza JS il contenuto è sempre visibile).
   ============================================================ */
html.anim .reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.23,1,.32,1), transform .9s cubic-bezier(.23,1,.32,1);
  will-change: opacity, transform;
}
html.anim .reveal.is-revealed { opacity: 1; transform: none; }

/* Stagger hero al load */
html.anim .hero-content > .reveal:nth-child(1) { transition-delay: .05s; }
html.anim .hero-content > .reveal:nth-child(2) { transition-delay: .15s; }
html.anim .hero-content > .reveal:nth-child(3) { transition-delay: .25s; }
html.anim .hero-content > .reveal:nth-child(4) { transition-delay: .35s; }
html.anim .hero-content > .reveal:nth-child(5) { transition-delay: .45s; }

/* Mappa Google embed */
.map-embed { width:100%; height:100%; border:0; display:block; filter: saturate(.92); }

/* ============================================================
   Banda citazione — ricalca la grafica del menù di stampa:
   texture pietra reale (estratta dal PDF) + virgolette giganti.
   ============================================================ */
.quote-band{
  background-color:#33241e;
  background-image:url('stone.webp?v=2');
  background-size:900px auto;
  background-position:center;
}
.quote-band::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 90% 100% at center, rgba(28,16,5,.08) 30%, rgba(28,16,5,.5) 100%);
}
.quote-mark{
  display:block; font-family:'Playfair Display', serif; font-weight:700;
  color:#f5ecd7; font-size:64px; line-height:.55; user-select:none;
}
.quote-mark-close{ line-height:1.1; }
@media (min-width:768px){ .quote-mark{ font-size:88px; } }

/* Reset immagini: con gli attributi width/height (anti-CLS) serve height:auto,
   altrimenti l'aspect ratio viene schiacciato. Le classi Tailwind (h-full,
   h-12...) hanno specificita' maggiore e continuano a vincere dove serve. */
img { display: block; max-width: 100%; height: auto; }

/* Google Maps click-to-load (niente banner: la mappa parte solo al click) */
.map-consent-ph{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;background:#26190c;color:#e8e1da;border:0;cursor:pointer;
  padding:16px;text-align:center;font-family:'Manrope',sans-serif}
.map-consent-ph .material-symbols-outlined{font-size:34px;color:#C5A059}
.map-consent-ph-t{font-size:13px;opacity:.85}
.map-consent-ph-b{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#1c1005;background:#C5A059;padding:8px 16px;border-radius:.5rem;margin-top:4px}
.map-consent-ph:hover .map-consent-ph-b{filter:brightness(1.08)}

/* ============================================================
   Navbar responsive su tablet (evita crowding 768–1023px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  header nav .navlink { font-size: 11px; letter-spacing: .07em; }
  header nav .nav-links { gap: 1.1rem; }
  .btn-prenota { display: none !important; }
}

/* Footer su tablet stretto */
@media (min-width: 640px) and (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .footer-grid > .footer-brand { grid-column: span 2 !important; }
}

/* Booking: stato "chiuso stagionale" */
.season-closed-card { background: linear-gradient(180deg,#26190c 0%, #1c1005 100%); color:#f7f0e8; }

/* Placeholder per foto mancanti (demo) — pulito e intenzionale, niente "rotto" */
.photo-ph {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.45rem;
  background-color:#f4ede5;
  background-image: repeating-linear-gradient(45deg, rgba(197,160,89,.05) 0, rgba(197,160,89,.05) 12px, transparent 12px, transparent 24px);
  color:#a4937e;
}
.photo-ph .material-symbols-outlined { font-size:42px; color:#C5A059; opacity:.6; }
.photo-ph .photo-ph-label { font-family:Manrope,sans-serif; font-weight:700; font-size:10px; letter-spacing:.14em; text-transform:uppercase; }

/* Blocchi lingua (testi lunghi): evita flash del blocco EN prima del JS */
html:not(.i18n-ready) [data-lang-block="en"] { display: none; }

/* ============================================================
   Menu — stile editoriale
   ============================================================ */
.menu-cat-head { display:flex; align-items:center; gap:.75rem; border-bottom:1px solid rgba(197,160,89,.30); padding-bottom:.75rem; margin-bottom:1.5rem; }
.menu-kicker { display:block; font-family:Manrope,sans-serif; font-weight:700; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:#C5A059; }
.menu-cat-title { font-family:"Playfair Display",serif; font-weight:700; line-height:1.1; font-size:24px; }
@media (min-width:768px){ .menu-cat-title{ font-size:32px; } }

.menu-item { min-width: 0; }
.menu-item-sig { background:rgba(197,160,89,.07); border-left:2px solid #C5A059; border-radius:.25rem; padding:.6rem .8rem; }
.menu-row { display:flex; align-items:baseline; gap:.4rem; }
.menu-name { font-weight:700; font-size:15px; line-height:1.3; }
@media (min-width:768px){ .menu-name{ font-size:17px; } }
.menu-name sup { color:#C5A059; font-size:.7em; }
.menu-tag { font-style:normal; margin-left:.5rem; display:inline-block; vertical-align:middle; color:#C5A059; background:rgba(197,160,89,.12); padding:.1rem .5rem; border-radius:9999px; font-family:Manrope,sans-serif; font-weight:700; font-size:9px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
@media (min-width:768px){ .menu-tag{ font-size:10px; } }
.menu-leader { flex:1 1 auto; min-width:1.2rem; align-self:flex-end; border-bottom:1px dotted rgba(78,69,62,.40); transform:translateY(-4px); }
.menu-price { font-family:"Playfair Display",serif; color:#C5A059; font-size:16px; white-space:nowrap; }
@media (min-width:768px){ .menu-price{ font-size:19px; } }
.menu-desc { font-size:12.5px; line-height:1.55; font-style:italic; color:#4e453e; margin-top:.15rem; }
@media (min-width:768px){ .menu-desc{ font-size:13.5px; } }

/* Quick-nav a chip */
#menu-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:.45rem; }
.menu-chip { font-family:Manrope,sans-serif; font-weight:700; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:#4e453e; border:1px solid rgba(197,160,89,.45); border-radius:9999px; padding:.35rem .8rem; white-space:nowrap; transition:background .2s,color .2s,border-color .2s; }
.menu-chip:hover { background:#C5A059; color:#1c1005; border-color:#C5A059; }

/* Prosa pagine legali */
.legal-prose h2 { font-family:"Playfair Display",serif; font-weight:700; font-size:22px; line-height:1.3; margin:2rem 0 .75rem; }
.legal-prose h3 { font-weight:700; font-size:15px; margin:1.5rem 0 .4rem; }
.legal-prose p, .legal-prose li { font-size:14.5px; line-height:1.7; color:#4e453e; }
.legal-prose ul { list-style:disc; padding-left:1.25rem; margin:.5rem 0; }
.legal-prose a { color:#755b00; text-decoration:underline; }
.legal-prose .lead { font-size:16px; color:#1e1b17; }