/* Stile della pagina unica: apertura, i cinque appartamenti con il loro
   calendario, contatti, piè di pagina.
   Direzione: tra lago e montagna. L'acqua profonda del lago per le fasce
   scure, la pietra chiara per la pagina, l'ardesia per il testo; i titoli in
   Marcellus, capitali da iscrizione incisa nella pietra. Il segno della
   pagina è un crinale con il suo riflesso sull'acqua, nell'apertura.
   Colori, font e misure stanno SOLO nel blocco :root qui sotto (comprese le
   --cal-* del widget): il resto del file legge tutto da lì.
   Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 */

@font-face {
  font-family: "Marcellus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/marcellus-400.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/hanken-grotesk-400.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/hanken-grotesk-600.woff2") format("woff2");
}

:root {
  /* Colori — acqua */
  --colore-lago-profondo: #0d222b;
  --colore-lago: #173843;
  --colore-lago-medio: #2b5a66;
  --colore-riflesso: #9cc8c8;
  --colore-acqua-chiara: #d6e6e4;
  /* Colori — pietra */
  --colore-pietra-levigata: #f4f3ef;
  --colore-pietra-chiara: #e8e6e0;
  --colore-pietra: #c9c5bc;
  --colore-pietra-scura: #6b6760;
  --colore-ardesia: #1f2629;
  --colore-ardesia-tenue: #545c60;
  --colore-su-lago: #eef2f1;
  --colore-su-lago-tenue: #a9bcbd;
  /* Un solo accento caldo: la luce sulla roccia. Solo per il fuoco tastiera */
  --colore-fuoco: #c8763a;
  /* Segnaposto (testi e foto da completare): uno stile unico, riconoscibile */
  --colore-segnaposto-sfondo: #fbf3dc;
  --colore-segnaposto-bordo: #b8892a;
  --colore-segnaposto-testo: #6b5418;
  --colore-foto-vuota: #dcdad3;
  --colore-foto-etichetta: #5f5b55;

  /* Font */
  --font-titoli: "Marcellus", "Trajan Pro", Georgia, "Times New Roman", serif;
  --font-testo: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Misure */
  --larghezza-max: 1200px;
  --margine-laterale: 20px;
  --spazio-sezione: 72px;
  --raggio: 3px;

  /* Movimento (motion-locali, MOTION-SPEC §2-3) */
  --durata-veloce: 180ms;
  --durata-entrata: 680ms;
  --curva-uscita: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 900px) {
  :root {
    --margine-laterale: 40px;
    --spazio-sezione: 120px;
  }
}

/* Widget calendario: accordato al sito senza toccare assets/calendario.css.
   Il calendario è una lastra di pietra levigata: le notti occupate sono
   pietra scura (con il barrato del widget), la selezione è acqua. */
.cal-disponibilita {
  --cal-font: var(--font-testo);
  --cal-dimensione: 16px;
  --cal-testo: var(--colore-ardesia);
  --cal-testo-tenue: var(--colore-ardesia-tenue);
  --cal-sfondo: var(--colore-pietra-levigata);
  --cal-bordo: var(--colore-pietra);
  --cal-raggio: var(--raggio);
  --cal-libero-sfondo: var(--colore-pietra-levigata);
  --cal-libero-testo: var(--colore-ardesia);
  --cal-occupato-sfondo: var(--colore-pietra-scura);
  --cal-occupato-testo: var(--colore-pietra-levigata);
  --cal-passato-sfondo: var(--colore-pietra-chiara);
  --cal-passato-testo: var(--colore-ardesia-tenue);
  --cal-oggi-bordo: var(--colore-lago-medio);
  --cal-fuoco: var(--colore-fuoco);
  --cal-pulsante-sfondo: var(--colore-lago);
  --cal-pulsante-testo: var(--colore-su-lago);
  --cal-selezione-sfondo: var(--colore-acqua-chiara);
  --cal-selezione-testo: var(--colore-lago-profondo);
  --cal-selezione-segno: var(--colore-lago);
  --cal-avviso-testo: var(--colore-lago-medio);
}

/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-testo);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--colore-ardesia);
  background: var(--colore-pietra-chiara);
}

img { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-titoli);
  font-weight: 400;
  font-style: normal;
  line-height: 1.08;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
  min-width: 0;
}
h1 { font-size: clamp(2.75rem, 10vw, 6.5rem); letter-spacing: -0.005em; }
h2 { font-size: clamp(2rem, 5vw, 3.25rem); }

:focus-visible {
  outline: 3px solid var(--colore-fuoco);
  outline-offset: 3px;
}

/* Le ancore non finiscono sotto il bordo dello schermo */
[id] { scroll-margin-top: 16px; }

.salta {
  position: absolute;
  left: -9999px;
}
.salta:focus {
  left: var(--margine-laterale);
  top: 8px;
  z-index: 10;
  padding: 8px 14px;
  background: var(--colore-pietra-levigata);
}

.contenitore {
  width: 100%;
  max-width: var(--larghezza-max);
  margin: 0 auto;
  padding: 0 var(--margine-laterale);
}

.sopratitolo {
  font-family: var(--font-testo);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--colore-lago-medio);
  margin-bottom: 12px;
}

/* ---------- Segnaposto di testo ---------- */
/* Ogni testo che manca è un .segnaposto: riquadro tratteggiato e la dicitura
   "da completare". Si trovano tutti con grep (vedi CLAUDE.md). */
.segnaposto {
  display: block;
  padding: 14px 16px;
  border: 2px dashed var(--colore-segnaposto-bordo);
  border-radius: var(--raggio);
  background: var(--colore-segnaposto-sfondo);
  color: var(--colore-segnaposto-testo);
  font-family: var(--font-testo);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
}
span.segnaposto {
  display: inline-block;
  padding: 0 8px;
  border-width: 1.5px;
  line-height: 1.6;
}

/* ---------- Foto con segnaposto ---------- */
/* La cornice riserva lo spazio (proporzioni fisse) e mostra l'etichetta della
   foto attesa. Se il file c'è, l'immagine la copre; se manca, script.js la
   nasconde e resta l'etichetta, mai l'icona dell'immagine rotta. */
.foto {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--raggio);
  background: var(--colore-foto-vuota);
}
.foto::before {
  content: attr(data-etichetta);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--colore-foto-etichetta);
  border: 1.5px dashed var(--colore-pietra);
  border-radius: var(--raggio);
}
.foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: transparent; /* niente testo alternativo sopra l'etichetta */
}
.foto img.mancante { display: none; }
.foto--copertina { aspect-ratio: 16 / 10; }

/* ---------- Pulsanti e link ---------- */
.pulsante {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border: 1.5px solid var(--colore-lago);
  border-radius: var(--raggio);
  background: var(--colore-lago);
  color: var(--colore-su-lago);
  font-family: var(--font-testo);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--durata-veloce) var(--curva-uscita),
              border-color var(--durata-veloce) var(--curva-uscita),
              color var(--durata-veloce) var(--curva-uscita);
}
.pulsante:hover { background: var(--colore-lago-profondo); border-color: var(--colore-lago-profondo); }
.pulsante:active { background: var(--colore-lago-medio); }

/* Sulle fasce di lago: pulsante chiaro */
.pulsante--chiaro {
  background: var(--colore-su-lago);
  border-color: var(--colore-su-lago);
  color: var(--colore-lago-profondo);
}
.pulsante--chiaro:hover { background: var(--colore-riflesso); border-color: var(--colore-riflesso); }
.pulsante--chiaro:active { background: var(--colore-acqua-chiara); }

.collegamento-chiaro {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--colore-su-lago);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--colore-riflesso);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
  white-space: nowrap;
}
.collegamento-chiaro:hover { color: var(--colore-riflesso); }

/* ---------- Il lago: testata e apertura ---------- */
.lago {
  background: var(--colore-lago-profondo);
  color: var(--colore-su-lago);
}
.lago .segnaposto { font-size: 0.9375rem; }

.testata .contenitore {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 76px;
}
.marchio {
  font-family: var(--font-titoli);
  font-size: 1.375rem;
  text-decoration: none;
  min-width: 0;
}
.marchio .segnaposto { font-size: 0.875rem; }
.menu { display: none; }
.testata .pulsante { min-height: 42px; padding: 8px 18px; font-size: 0.9375rem; }

@media (min-width: 1100px) {
  .menu {
    display: flex;
    gap: 26px;
    margin-left: auto;
    font-size: 0.9375rem;
  }
  .menu a {
    color: var(--colore-su-lago-tenue);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--durata-veloce) var(--curva-uscita);
  }
  .menu a:hover { color: var(--colore-su-lago); }
}

.apertura { padding-top: 48px; }
.apertura h1 { max-width: 11ch; margin-bottom: 28px; }
.apertura p.segnaposto { max-width: 46ch; margin-bottom: 32px; }
.azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
}

/* Il crinale e il riflesso: tratto pieno sopra la riva, spezzato sotto */
.crinale {
  display: block;
  width: 100%;
  height: clamp(90px, 16vw, 200px);
  margin-top: 56px;
}
.crinale path,
.crinale line {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.crinale-monte { stroke: var(--colore-riflesso); stroke-width: 1.5; }
.crinale-riva { stroke: var(--colore-lago-medio); stroke-width: 1; }
.crinale-riflesso {
  stroke: var(--colore-lago-medio);
  stroke-width: 1.5;
  stroke-dasharray: 18 9 4 9;
}

/* Indice: i cinque appartamenti, sul pelo dell'acqua */
.indice { padding-bottom: 28px; }
.indice ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--colore-lago-medio);
}
.indice li { border-bottom: 1px solid var(--colore-lago); }
.indice a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 52px;
  padding: 14px 4px;
  color: var(--colore-su-lago-tenue);
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--durata-veloce) var(--curva-uscita);
}
.indice a:hover { color: var(--colore-su-lago); }
.indice-numero {
  font-family: var(--font-titoli);
  font-size: 1.375rem;
  color: var(--colore-riflesso);
}
@media (min-width: 900px) {
  .indice ol { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .indice li + li { border-left: 1px solid var(--colore-lago); }
  .indice a { padding: 18px 16px; }
}

@media (min-width: 900px) {
  .apertura { padding-top: 72px; }
  .crinale { margin-top: 72px; }
}

/* ---------- Gli appartamenti ---------- */
/* Ogni blocco tiene insieme la casa e il suo calendario. Su desktop: testa
   in alto, foto e testo a sinistra, calendario a destra (fermo mentre si
   scorrono le foto). Sotto i 900 px tutto in colonna, nello stesso blocco. */
.appartamento {
  padding: var(--spazio-sezione) 0;
  border-top: 1px solid var(--colore-pietra);
}
.appartamento:first-child { border-top: 0; }
.appartamento:nth-child(even) { background: var(--colore-pietra-levigata); }

.appartamento-griglia {
  display: grid;
  gap: 32px;
}

.appartamento-testa {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: end;
  gap: 4px 20px;
}
/* Il numero inciso: grande, in pietra, accanto al nome */
.numero {
  grid-row: 1 / 3;
  font-family: var(--font-titoli);
  font-size: clamp(5rem, 16vw, 9rem);
  line-height: 0.8;
  color: var(--colore-pietra);
}
.caratteristiche {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 10px;
  font-size: 0.9375rem;
  color: var(--colore-ardesia-tenue);
}
.caratteristiche li { white-space: nowrap; }
.caratteristiche .segnaposto { font-size: 0.8125rem; }

.galleria {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.galleria .foto--copertina { grid-column: 1 / -1; }

.casa > .segnaposto { margin-top: 24px; max-width: 62ch; }
.cin {
  margin-top: 16px;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--colore-ardesia-tenue);
}
.cin .segnaposto { letter-spacing: normal; text-transform: none; font-size: 0.8125rem; }

.disponibilita {
  border-top: 2px solid var(--colore-lago);
  padding-top: 20px;
}
.istruzione {
  margin-bottom: 16px;
  max-width: 46ch;
  font-size: 0.9375rem;
  color: var(--colore-ardesia-tenue);
}
/* Fallback statico del widget (anche senza JavaScript): stessa lastra */
.disponibilita .cal-disponibilita:not(.cal-attivo) {
  padding: 20px;
  border: 1px solid var(--colore-pietra);
  border-radius: var(--raggio);
  background: var(--colore-pietra-levigata);
}
.disponibilita .cal-disponibilita > p { margin-bottom: 16px; max-width: 46ch; }
.disponibilita .cal-disponibilita .cal-caricamento { margin-bottom: 0; }
/* Il pulsante WhatsApp del widget prende la voce dei pulsanti del sito */
.disponibilita .cal-whatsapp {
  min-height: 48px;
  padding: 13px 24px;
  letter-spacing: 0.02em;
  transition: background-color var(--durata-veloce) var(--curva-uscita);
}
.disponibilita .cal-whatsapp:hover { background: var(--colore-lago-profondo); }

@media (min-width: 900px) {
  .appartamento-griglia {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-areas:
      "testa testa"
      "casa  calendario";
    column-gap: 56px;
    row-gap: 40px;
    align-items: start;
  }
  .appartamento-testa { grid-area: testa; }
  .casa { grid-area: casa; }
  .disponibilita {
    grid-area: calendario;
    position: sticky;
    top: 24px;
  }
  .galleria { gap: 12px; }
}

/* ---------- Contatti ---------- */
.contatti {
  padding: var(--spazio-sezione) 0;
  background: var(--colore-lago);
  color: var(--colore-su-lago);
}
.contatti .sopratitolo { color: var(--colore-riflesso); }
.contatti h2 { max-width: 18ch; margin-bottom: 24px; }
.contatti .segnaposto { max-width: 46ch; margin-bottom: 32px; }

/* ---------- Piè di pagina ---------- */
.piede {
  padding: 48px 0 32px;
  background: var(--colore-lago-profondo);
  color: var(--colore-su-lago);
  font-size: 0.9375rem;
}
.piede .contenitore {
  display: grid;
  gap: 24px;
}
.piede .segnaposto { max-width: 52ch; }
.piede-legale { display: grid; gap: 10px; }
.realizzato {
  padding-top: 20px;
  border-top: 1px solid var(--colore-lago-medio);
  color: var(--colore-su-lago-tenue);
}
.realizzato a { color: var(--colore-su-lago); font-weight: 600; text-underline-offset: 4px; }

/* ---------- Movimento ---------- */
/* Apertura: fade-in-up al caricamento, tre elementi in stagger (motion-locali).
   Solo CSS: senza JavaScript il contenuto c'è comunque. */
@keyframes sale {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
.apertura h1,
.apertura .segnaposto,
.apertura .azioni {
  animation: sale var(--durata-entrata) var(--curva-uscita) both;
}
.apertura .segnaposto { animation-delay: 80ms; }
.apertura .azioni { animation-delay: 160ms; }
.crinale { animation: sale var(--durata-entrata) var(--curva-uscita) 240ms both; }

/* Blocchi che entrano scrollando (scroll-reveal), sempre dal basso.
   Si nascondono solo se script.js ha aggiunto .movimento a <html>: senza
   script, o con il movimento ridotto, si vede tutto subito. */
.movimento [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--durata-entrata) var(--curva-uscita),
              transform var(--durata-entrata) var(--curva-uscita);
  transition-delay: var(--reveal-delay, 0ms);
}
.movimento [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

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