/* ==========================================================================
   PAGINE SECONDARIE — At Home
   Stili condivisi per: Come raggiungerci, Contatti, Conferma prenotazione,
   Privacy Policy, Cookie Policy.
   Mobile-first. Nessun valore hardcoded: sempre var().
   ========================================================================== */

/* --------------------------------------------------------------------------
   PAGINA INTERNA — contenitore generico
   min-height per evitare il footer a metà schermo su pagine corte.
   -------------------------------------------------------------------------- */
.pagina-interna {
  min-height: calc(100vh - 72px);
}

.pagina-interna .label {
  display: block;
  margin-bottom: var(--space-md);
}

.pagina-interna h1 {
  font-family: var(--font-display);
  font-weight: var(--peso-light);
  font-size: var(--dim-h1-mobile);
  line-height: var(--interlinea-stretta);
  color: var(--colore-laguna);
  margin-bottom: var(--space-xl);
}

/* Intro narrativa sotto al titolo */
.pagina-interna__intro {
  max-width: 600px;
  line-height: var(--interlinea-corpo);
  margin-bottom: var(--space-2xl);
}

/* Variante centrata — usata dalla pagina di conferma */
.pagina-interna--centrata {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* --------------------------------------------------------------------------
   COME RAGGIUNGERCI — griglia di card informative
   -------------------------------------------------------------------------- */
.raggiungerci-griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

.raggiungerci-card {
  padding: var(--space-lg);
  border: var(--border-standard);
  border-radius: var(--radius-lg);
}

.raggiungerci-card__icona {
  width: 40px;
  height: 40px;
  color: var(--colore-salvia);
  margin-bottom: var(--space-md);
}

.raggiungerci-card__icona svg,
.raggiungerci-card__icona img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.raggiungerci-card__icona img {
  filter: brightness(0) invert(51%) sepia(100%) hue-rotate(96deg) saturate(27%) brightness(87%);
}

.raggiungerci-card h3 {
  font-family: var(--font-body);
  font-weight: var(--peso-medium);
  font-size: var(--dim-h3);
  color: var(--colore-laguna);
  margin-bottom: var(--space-sm);
}

.raggiungerci-card p {
  color: var(--colore-laguna);
  opacity: 0.7;
  line-height: var(--interlinea-corpo);
}

/* --------------------------------------------------------------------------
   CONTATTI — layout info + form
   -------------------------------------------------------------------------- */
.contatti-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.contatti-info h1 {
  margin-bottom: var(--space-md);
}

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

.contatti-canali {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.contatti-canale {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--colore-laguna);
  font-weight: var(--peso-medium);
  text-decoration: none;
  transition: color var(--transition-base);
}

.contatti-canale:hover {
  color: var(--colore-vetro);
}

.contatti-canale svg {
  width: 20px;
  height: 20px;
  color: var(--colore-salvia);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   FORM CONTATTI
   -------------------------------------------------------------------------- */
.form-contatti {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

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

.form-contatti__input,
.form-contatti__textarea {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: var(--border-standard);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--dim-body);
  color: var(--colore-laguna);
  transition: border-color var(--transition-base);
}

.form-contatti__textarea {
  resize: vertical;
}

.form-contatti__input:focus,
.form-contatti__textarea:focus {
  outline: none;
  border-color: var(--colore-laguna);
}

.form-contatti__submit {
  align-self: start;
}

/* --------------------------------------------------------------------------
   CONTATTI DIRETTI — pagina minimalista, solo canali di contatto
   -------------------------------------------------------------------------- */
.contatti-diretti {
  min-height: calc(100vh - 72px);
  background-color: var(--colore-bg-seczione);
}

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

.contatti-diretti__intestazione h1 {
  font-family: var(--font-display);
  font-weight: var(--peso-light);
  font-size: var(--dim-h1-mobile);
  line-height: var(--interlinea-stretta);
  color: var(--colore-laguna);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.contatti-diretti__intro {
  font-size: var(--dim-body);
  line-height: var(--interlinea-corpo);
  color: var(--colore-laguna);
  opacity: 0.65;
  max-width: 520px;
}

/* Lista dei canali — vertical stack */
.contatti-canali-lista {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contatti-canali-lista > li:first-child .contatto-canale {
  border-top: 1px solid rgba(31, 48, 53, 0.12);
}

/* Singolo canale — riga cliccabile */
.contatto-canale {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid rgba(31, 48, 53, 0.12);
  text-decoration: none;
  color: var(--colore-laguna);
  transition: background-color var(--transition-base), padding var(--transition-base);
}

.contatto-canale:hover {
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
  border-radius: var(--radius-md);
  background-color: rgba(31, 48, 53, 0.04);
}

.contatto-canale:hover .contatto-canale__freccia {
  transform: translateX(4px);
}

.contatto-canale__icona {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--colore-salvia);
}

.contatto-canale__icona svg {
  width: 100%;
  height: 100%;
}

.contatto-canale__testo {
  flex: 1;
  min-width: 0;
}

.contatto-canale__tipo {
  display: block;
  color: var(--colore-vetro);
  margin-bottom: 2px;
}

.contatto-canale__valore {
  font-family: var(--font-body);
  font-weight: var(--peso-medium);
  font-size: var(--dim-body);
  color: var(--colore-laguna);
  word-break: break-word;
}

.contatto-canale__freccia {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--colore-laguna);
  opacity: 0.35;
  transition: transform var(--transition-base);
}

.contatto-canale__freccia svg {
  width: 100%;
  height: 100%;
}

/* Nota in fondo — link alle pagine appartamento */
.contatti-diretti__nota {
  margin-top: var(--space-2xl);
  font-size: var(--dim-label);
  color: var(--colore-laguna);
  opacity: 0.55;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}

.contatti-diretti__link {
  color: var(--colore-laguna);
  text-underline-offset: 3px;
  text-decoration: underline;
  font-weight: var(--peso-medium);
  opacity: 1;
  transition: opacity var(--transition-base);
}

.contatti-diretti__link:hover {
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   CONFERMA PRENOTAZIONE
   -------------------------------------------------------------------------- */
.conferma {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
  padding: var(--space-2xl) 0;
}

.conferma__icona {
  width: 64px;
  height: 64px;
  color: var(--colore-salvia);
}

.conferma__icona svg {
  width: 100%;
  height: 100%;
}

.conferma h1 {
  font-family: var(--font-display);
  font-weight: var(--peso-light);
  font-size: var(--dim-h2-mobile);
  color: var(--colore-laguna);
  margin-bottom: 0;
}

.conferma p {
  max-width: 480px;
  color: var(--colore-laguna);
  opacity: 0.7;
  line-height: var(--interlinea-corpo);
}

/* --------------------------------------------------------------------------
   TESTO LEGALE — Privacy Policy / Cookie Policy
   -------------------------------------------------------------------------- */
.pagina-legale__data {
  display: block;
  margin-bottom: var(--space-2xl);
}

.pagina-legale h2 {
  font-family: var(--font-body);
  font-weight: var(--peso-medium);
  font-size: var(--dim-h3);
  color: var(--colore-laguna);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
}

.pagina-legale p {
  line-height: var(--interlinea-corpo);
  margin-bottom: var(--space-md);
}

/* --------------------------------------------------------------------------
   BREAKPOINT — da 768px in su (tablet/desktop)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .pagina-interna h1 {
    font-size: var(--dim-h1);
  }

  /* Come raggiungerci: 3 colonne */
  .raggiungerci-griglia {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Contatti: due colonne affiancate */
  .contatti-layout {
    grid-template-columns: 1fr 1fr;
  }

  /* Conferma: H1 a dimensione desktop H2 */
  .conferma h1 {
    font-size: var(--dim-h2);
  }

  /* Contatti diretti: H1 a dimensione desktop */
  .contatti-diretti__intestazione h1 {
    font-size: var(--dim-h1);
  }
}