/* ============================================================
   Casa per Ferie San Luigi — Design system tokens
   Palette istituzionale bordeaux. Estratti dal prototipo Claude Design.
   ============================================================ */
:root {
  --brand:#6E1A2B; --brand-hover:#581421; --brand-press:#460F1A;
  --brand-dark:#37101A; --brand-deep:#280B12;
  --brand-tint:#F4E8EA; --brand-wash:#FBF1F2; --brand-soft:#C58A92; --brand-line:#E6CFD3;
  --paper:#FBF8F3; --surface:#FFFFFF; --sand:#F1E9DE; --sand-2:#EAE0D2;
  --line:#E7DECF; --line-soft:#EFE8DC;
  --ink:#241E1C; --ink-2:#564C47; --ink-3:#8B807A;
  --ok:#3F6B4F; --ok-tint:#E7F0E9; --warn:#9A6A24; --warn-tint:#F7EEDB;
  --font-display:'Spectral',Georgia,serif; --font-body:'Hanken Grotesk',system-ui,sans-serif;
  --r-sm:7px; --r-md:13px; --r-lg:20px; --r-xl:30px;
  --sh-sm:0 1px 2px rgba(55,16,26,.08), 0 1px 1px rgba(55,16,26,.05);
  --sh-md:0 14px 34px -16px rgba(55,16,26,.28);
  --sh-lg:0 34px 70px -28px rgba(55,16,26,.34);
  --maxw:1200px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--surface);
  color: var(--ink);
  line-height: 1.5;
}
img { display: block; }
a { color: inherit; }
::selection { background: var(--brand); color: #fff; }

/* reveal on scroll */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in { opacity: 1; transform: none; }

/* hover lift */
.lift { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s cubic-bezier(.2,.7,.2,1); }
.lift:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }

/* inline icons inherit color/size */
.ico { display:inline-flex; line-height:0; vertical-align:middle; }
.ico svg { display:block; }

/* generic image placeholder (per slot foto ancora vuoti nel prototipo) */
.photo-ph {
  position:absolute; inset:0; width:100%; height:100%;
  background:radial-gradient(120% 120% at 18% 0%, rgba(110,26,43,.10), transparent 52%), linear-gradient(135deg,#efe2db,#e4d0c9 60%,#d7bdb6);
  display:flex; align-items:center; justify-content:center;
  color:var(--brand);
}
.photo-ph span { font-size:12px; font-weight:600; color:var(--brand-deep); background:rgba(255,255,255,.82); padding:4px 10px; border-radius:999px; }

button { font-family: var(--font-body); }
input, textarea { font-family: var(--font-body); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { scroll-behavior: auto !important; }
}

/* ---- Responsive: i layout desktop del prototipo erano a 1440px.
   Qui li rendiamo fluidi e impilabili sotto i 900px. ---- */
@media (max-width: 980px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
  .detail-grid { grid-template-columns: 1fr !important; }
  .detail-grid aside { position: static !important; }
  .gallery { grid-template-columns: 1fr !important; grid-template-rows: none !important; height: auto !important; }
  .gallery > div { height: 240px; }
  .gallery > div:first-child { grid-row: auto !important; }
  .hero-h1 { font-size: 44px !important; }
  .searchbar { flex-wrap: wrap; border-radius: var(--r-lg) !important; }
  .searchbar > * { flex: 1 1 100% !important; }
  .nav-links { display: none !important; }
  .santo-room { flex-direction: column !important; }
  .santo-room > div:first-child { width: 100% !important; height: 200px; }
  [data-carousel] > div:first-child { height: 340px !important; }
  [data-carousel] [data-track] [style*="font-size:34px"] { font-size: 22px !important; }
}