/* ==========================================================================
   MAIN — At Home
   Layout globale, tipografia base, pulsanti e utility.
   I componenti specifici vivono in css/components/.
   I font Google sono importati nell'HTML, non qui.
   Mobile-first: le media query aggiungono stili al crescere dello schermo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

/* Offset per lo sticky header quando si naviga verso sezioni ancorate */
.intro-brand,
.appartamenti,
.recensioni,
.contatti-home,
.faq {
  scroll-margin-top: 70px;
}

@media (min-width: 768px) {
  .intro-brand,
  .appartamenti,
  .recensioni,
  .contatti-home,
  .faq {
    scroll-margin-top: 80px;
  }
}

body {
  background-color: var(--colore-sfondo);
  font-family: var(--font-body);
  font-weight: var(--peso-light);
  font-size: var(--dim-body);
  line-height: var(--interlinea-base);
  color: var(--colore-testo);
}

/* --------------------------------------------------------------------------
   LAYOUT — Contenitori
   .container centra il contenuto e applica il padding laterale.
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Variante stretta per testo narrativo */
.container--narrow {
  max-width: var(--max-width-narrow);
}

/* Da tablet in su: padding laterale più ampio */
@media (min-width: 768px) {
  .container {
    padding-left: var(--container-padding-desktop);
    padding-right: var(--container-padding-desktop);
  }
}

/* --------------------------------------------------------------------------
   TIPOGRAFIA BASE
   Titoli display serif, sottotitoli sans, corpo leggibile.
   -------------------------------------------------------------------------- */
h1,
h2 {
  font-family: var(--font-display);
  font-weight: var(--peso-light);
}

h1 {
  font-size: var(--dim-h1-mobile);
  line-height: var(--interlinea-stretta);
}

h2 {
  font-size: var(--dim-h2-mobile);
  line-height: var(--interlinea-titolo);
}

/* Da tablet in su: titoli alla dimensione desktop */
@media (min-width: 768px) {
  h1 {
    font-size: var(--dim-h1);
  }

  h2 {
    font-size: var(--dim-h2);
  }
}

h3,
h4 {
  font-family: var(--font-body);
  font-weight: var(--peso-medium);
}

h3 {
  font-size: var(--dim-h3);
  line-height: var(--interlinea-titolo);
}

p {
  line-height: var(--interlinea-corpo);
}

/* Etichetta UI: piccola, uppercase, spaziata */
.label {
  font-family: var(--font-body);
  font-weight: var(--peso-medium);
  font-size: var(--dim-label);
  text-transform: uppercase;
  letter-spacing: var(--spaziatura-label);
  color: var(--colore-accento);
}

/* --------------------------------------------------------------------------
   PULSANTI
   .btn è la base; i modificatori definiscono la variante.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-body);
  font-weight: var(--peso-medium);
  font-size: var(--dim-label);
  text-transform: uppercase;
  letter-spacing: var(--spaziatura-label);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-base);
}

/* Primario — vetro su scuro */
.btn--primario {
  background-color: var(--colore-vetro);
  color: var(--colore-bg-scuro);
}

.btn--primario:hover {
  background-color: var(--colore-pietra);
  color: var(--colore-bg-scuro);
}

/* Secondario — ghost con bordo */
.btn--secondario {
  background-color: transparent;
  border: var(--border-standard);
  color: var(--colore-laguna);
}

.btn--secondario:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--colore-laguna);
}

/* Ghost — solo testo */
.btn--ghost {
  background-color: transparent;
  border: none;
  color: var(--colore-vetro);
}

.btn--ghost:hover {
  color: var(--colore-laguna);
}

/* --------------------------------------------------------------------------
   UTILITY
   -------------------------------------------------------------------------- */

/* Accessibilità: nasconde visivamente ma resta leggibile dagli screen reader */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Spaziatura verticale di sezione */
.section-padding {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

@media (min-width: 768px) {
  .section-padding {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
  }
}

/* --------------------------------------------------------------------------
   VISIBILITÀ LINGUA
   Gestita via attributi data-it / data-en sugli elementi (vedi js/lang.js).
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   ANIMAZIONI DI SCROLL
   Gli elementi con .reveal partono invisibili e scivolano su quando
   entrano nel viewport. L'observer JS aggiunge .visible al momento giusto.
   prefers-reduced-motion: nessuna animazione per chi la richiede.
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Solo fade-in, senza slide up */
.reveal--fade {
  transform: none;
}
.reveal--fade.visible {
  transform: none;
}

/* Ritardi per animazioni a cascata (figli in griglia) */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   TORNA SU — pulsante fisso in basso a destra, visibile dopo lo scroll
   -------------------------------------------------------------------------- */