/* ==========================================================================
   CARDS — At Home
   Stili per le tre sezioni della homepage:
   1. Appartamenti (card Mestre / Mogliano)
   2. Vantaggi (perché prenotare diretto — sezione scura)
   3. Recensioni (testimonianze ospiti)
   Mobile-first. Solo var(), nessun valore hardcoded.
   ========================================================================== */


/* ==========================================================================
   1. SEZIONE APPARTAMENTI
   ========================================================================== */

.appartamenti {
  background-color: var(--colore-sfondo);
}

/* Intestazione: label + titolo, con respiro prima della griglia */
.appartamenti__intestazione {
  margin-bottom: var(--space-2xl);
}

.appartamenti__label {
  color: var(--colore-salvia);
  margin-bottom: var(--space-md);
}

.appartamenti__titolo {
  font-family: var(--font-display);
  font-weight: var(--peso-light);
  font-size: var(--dim-h2-mobile);
  line-height: var(--interlinea-titolo);
  color: var(--colore-pietra);
}

/* Griglia: 1 colonna su mobile, 2 colonne da 768px */
.appartamenti__griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

/* --------------------------------------------------------------------------
   Card singolo appartamento
   -------------------------------------------------------------------------- */
.card-appart {
  display: flex;
  flex-direction: column;
  border: var(--border-standard);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--colore-bg-card);
  /* Ombra appena percettibile, mai pesante */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: box-shadow var(--transition-base);
}

/* Contenitore immagine: proporzione fissa, ritaglio pulito */
.card-appart__immagine-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.card-appart__link-immagine {
  display: block;
}

/* Immagine che riempie il wrapper, con zoom leggero in hover */
.card-appart__immagine {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.card-appart:hover .card-appart__immagine {
  transform: scale(1.03);
}

/* Corpo: contenuti testuali della card */
.card-appart__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  /* Permette al piede di spingersi in fondo quando le card hanno altezze diverse */
  flex: 1;
}

.card-appart__label {
  color: var(--colore-salvia);
}

.card-appart__nome {
  font-family: var(--font-body);
  font-weight: var(--peso-medium);
  font-size: var(--dim-h3);
  color: var(--colore-laguna);
}

/* Elenco dotazioni: una voce per riga, tono attenuato */
.card-appart__dotazioni {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: var(--dim-label);
  color: var(--colore-laguna);
  opacity: 0.6;
}

/* Piede: prezzo a sinistra, CTA a destra, ancorato in basso */
.card-appart__piede {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  /* Respiro sopra il piede per separarlo dalle dotazioni */
  padding-top: var(--space-sm);
}

.card-appart__prezzo {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-xs);
}

.card-appart__prezzo-da,
.card-appart__prezzo-notte {
  color: var(--colore-accento);
}

.card-appart__prezzo-valore {
  font-family: var(--font-display);
  font-size: var(--dim-h2-mobile);
  color: var(--colore-laguna);
}


/* ==========================================================================
   2. SEZIONE VANTAGGI (sezione scura)
   ========================================================================== */

/* Fondo scuro — contrasta con le sezioni chiare adiacenti */
.vantaggi {
  background-color: var(--colore-sfondo);
  color: var(--colore-laguna);
  padding-bottom: var(--space-xl);
}

/* Intestazione */
.vantaggi__intestazione {
  margin-bottom: var(--space-2xl);
  color: var(--colore-laguna);
}

.vantaggi__intestazione .label {
  color: var(--colore-salvia);
  margin-bottom: var(--space-md);
}

.vantaggi__intestazione h2 {
  font-family: var(--font-display);
  font-weight: var(--peso-light);
  font-size: var(--dim-h2-mobile);
  line-height: var(--interlinea-titolo);
  color: var(--colore-laguna);
}

/* Lista vantaggi: 1 colonna mobile, 3 colonne da 768px */
.vantaggi__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

/* Singolo vantaggio: icona, titolo, testo impilati — bordo come raggiungerci-card */
.vantaggio {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  border: var(--border-standard);
  border-radius: var(--radius-lg);
}

/* Icona lineare */
.vantaggio__icona {
  width: 40px;
  height: 40px;
  color: var(--colore-salvia);
}

.vantaggio__icona svg {
  width: 100%;
  height: 100%;
  display: block;
}

.vantaggio__titolo {
  font-family: var(--font-body);
  font-weight: var(--peso-medium);
  font-size: var(--dim-h3);
  color: var(--colore-laguna);
}

.vantaggio__testo {
  color: var(--colore-laguna);
  opacity: 0.6;
  line-height: var(--interlinea-corpo);
}


/* ==========================================================================
   3. SEZIONE RECENSIONI — slider marquee infinito
   ========================================================================== */

.recensioni {
  background-color: var(--colore-sfondo);
  overflow-x: hidden;
}

.recensioni__intestazione {
  margin-bottom: var(--space-2xl);
}

.recensioni__intestazione .label {
  margin-bottom: var(--space-md);
}

.recensioni__intestazione h2 {
  font-family: var(--font-display);
  font-weight: var(--peso-light);
  font-size: var(--dim-h2-mobile);
  line-height: var(--interlinea-titolo);
  color: var(--colore-pietra);
}

/* Contenitore slider: taglia fuori il track, sfuma i bordi */
.recensioni__slider {
  overflow: hidden;
  /* clip-path: inset(0) clippa in modo affidabile su iOS Safari anche per
     elementi animati su layer GPU — overflow:hidden da solo non basta su WebKit */
  clip-path: inset(0);
  transform: translateZ(0);
  /* Fade laterale: rende naturale l'entrata e uscita delle card */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
  padding: var(--space-md) 0 var(--space-sm);
}

/* Track: flex row con le 14 card (7 reali + 7 copie) */
.recensioni__track {
  display: flex;
  gap: var(--space-lg);
  width: max-content;
  will-change: transform;
}

/* Singola card recensione */
.recensione {
  flex-shrink: 0;
  width: 300px;
  padding: var(--space-lg);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background-color: var(--colore-bg-card);
  margin: 0;
}

/* Stelle: caratteri Unicode, colore salvia */
.recensione__stelle {
  font-size: 0.9rem;
  color: var(--colore-salvia);
  letter-spacing: 2px;
}

.recensione__testo {
  font-family: var(--font-body);
  font-weight: var(--peso-light);
  font-size: var(--dim-body);
  line-height: var(--interlinea-corpo);
  color: var(--colore-pietra);
  opacity: 0.75;
  flex: 1;
  margin: 0;
}

.recensione__autore {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  gap: var(--space-sm);
}

.recensione__nome {
  font-family: var(--font-body);
  font-weight: var(--peso-medium);
  font-size: var(--dim-label);
  color: var(--colore-pietra);
}

.recensione__piattaforma {
  color: var(--colore-vetro);
}

/* Riduce motion: scroll orizzontale tocco al posto del marquee */
@media (prefers-reduced-motion: reduce) {
  .recensioni__slider {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .recensioni__track {
    animation: none;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  /* Nasconde il set duplicato */
  .recensioni__track .recensione[aria-hidden="true"] {
    display: none;
  }

  .recensione {
    scroll-snap-align: start;
  }
}

@media (min-width: 768px) {
  .recensioni__intestazione h2 {
    font-size: var(--dim-h2);
  }

  .recensione {
    width: 340px;
  }
}


/* ==========================================================================
   BREAKPOINT — da 768px
   Griglie a più colonne per tablet e desktop.
   ========================================================================== */
@media (min-width: 768px) {

  /* Titoli sezione alla dimensione desktop */
  .appartamenti__titolo,
  .vantaggi__intestazione h2 {
    font-size: var(--dim-h2);
  }

  /* Appartamenti: due card affiancate */
  .appartamenti__griglia {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Vantaggi: tre colonne */
  .vantaggi__lista {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ==========================================================================
   CONTATTI HOME — form inline sulla homepage, ispirato alla reference
   2 colonne: info sinistra, form destra. Input bottom-border.
   ========================================================================== */

.contatti-home {
  background-color: var(--colore-bg-scuro);
}

.contatti-home__info {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.contatti-home__label {
  color: var(--colore-salvia);
  margin-bottom: var(--space-md);
}

.contatti-home__titolo {
  font-family: var(--font-display);
  font-weight: var(--peso-light);
  font-size: var(--dim-h2-mobile);
  line-height: var(--interlinea-titolo);
  color: var(--colore-laguna);
  margin-bottom: var(--space-3xl);
}

@media (min-width: 768px) {
  .contatti-home__titolo {
    font-size: var(--dim-h2);
  }
}

.contatti-home__canali {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

@media (max-width: 600px) {
  .contatti-home__canali {
    grid-template-columns: 1fr;
    max-width: 260px;
    margin: 0 auto;
  }
}

.contatti-home__canale {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.contatti-home__icona {
  width: 48px;
  height: 48px;
  border: 1px solid var(--colore-bordo);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--colore-salvia);
}

.contatti-home__icona svg {
  width: 18px;
  height: 18px;
  display: block;
}

.contatti-home__canale-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-laguna);
  margin: 0 0 var(--space-xs) 0;
}

.contatti-home__canale-valore {
  font-family: var(--font-body);
  font-size: var(--dim-body);
  color: var(--colore-laguna);
  opacity: 0.65;
  margin: 0;
}

.contatti-home__canale-link {
  display: block;
  font-family: var(--font-body);
  font-size: var(--dim-body);
  color: var(--colore-laguna);
  opacity: 0.65;
  text-decoration: none;
  transition: opacity var(--transition-base);
}

.contatti-home__canale-link:hover {
  opacity: 1;
  color: var(--colore-vetro);
}

/* Form destra — stile bottom-border, niente box completo */
.contatti-home__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.contatti-home__form-riga {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

@media (max-width: 479px) {
  .contatti-home__form-riga {
    grid-template-columns: 1fr;
  }
}

.contatti-home__campo {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.contatti-home__campo-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-laguna);
  opacity: 0.5;
}

/* Input e textarea: sfondo trasparente, solo linea inferiore */
.contatti-home__input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--colore-bordo);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--dim-body);
  color: var(--colore-laguna);
  padding: var(--space-sm) 0;
  width: 100%;
  outline: none;
  transition: border-color var(--transition-base);
  -webkit-appearance: none;
}

.contatti-home__input:focus {
  border-bottom-color: var(--colore-salvia);
}

.contatti-home__input::placeholder {
  color: var(--colore-laguna);
  opacity: 0.3;
}

.contatti-home__textarea {
  resize: vertical;
  min-height: 110px;
}

/* Bottone invio */
.contatti-home__submit {
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}