/* ==========================================================================
   Hotel e villaggi (/hotel-e-villaggi), dal mockup di Gaia (8/10/2026).
   Si carica dopo prodotto.css: usa i suoi colori (--sh-*), i fondi
   (.fondo-*), l'hero d'area e le spunte (.spunte-n). Prefisso hv-.
   ========================================================================== */

/* --- A chi è rivolto ------------------------------------------------------- */
.hv-target {
  list-style: none;
  margin: clamp(2rem, 3.5vw, 2.75rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
.hv-target li { display: flex; flex-direction: column; gap: 0.875rem; padding: 1.75rem 1.625rem; border-top: 6px solid var(--teal-scuro); border-radius: 22px; background: #fff; }
.hv-target .card__icona { width: 34px; height: 34px; border-radius: 10px; background: var(--teal-scuro); color: #fff; }
.hv-target h3 { font-size: 1.5rem; font-weight: 800; line-height: 1.15; }
.hv-target p { font-size: 0.9375rem; line-height: 1.6; color: var(--teal-profondo); }
@media (max-width: 1000px) { .hv-target { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .hv-target { grid-template-columns: minmax(0, 1fr); } }

.hv-segnali {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  margin-top: 1.5rem;
  padding: 1.875rem 2.125rem;
  border-radius: 22px;
  background: var(--sh-scuro);
}
.hv-segnali__riga { display: grid; grid-template-columns: 13.75rem minmax(0, 1fr); gap: 1.5rem; align-items: center; }
.hv-segnali__titolo { font-size: 1.625rem; font-weight: 800; line-height: 1.15; color: #fff; }
.hv-segnali__titolo span { color: var(--sh-arancio); }
.hv-segnali__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem 1.5rem; }
.hv-segnali__lista li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; font-weight: 600; line-height: 1.35; color: #fff; }
.hv-segnali__lista svg { flex: none; width: 16px; height: 16px; color: var(--sh-arancio); }
.hv-segnali__pm { padding-top: 1rem; border-top: 1px solid #2a5a61; font-size: 0.9375rem; color: #cfe3e5; }
.hv-segnali__pm a { font-weight: 600; color: #f6b26b; text-decoration: none; }
.hv-segnali__pm a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
@media (max-width: 1000px) {
  .hv-segnali__riga { grid-template-columns: minmax(0, 1fr); }
  .hv-segnali__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .hv-segnali { padding: 1.5rem 1.25rem; }
  .hv-segnali__lista { grid-template-columns: minmax(0, 1fr); }
}

.hv-motto {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  font-family: var(--font-titoli);
  font-size: clamp(1.75rem, 2vw + 1rem, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  color: var(--teal-profondo);
  text-wrap: balance;
}
.hv-motto span { color: var(--sh-arancio); }

/* --- I problemi ------------------------------------------------------------ */
.hv-problemi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
}
.hv-problemi__gruppo {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
  padding: 2.25rem 2.375rem;
  border-top: 6px solid var(--area);
  border-radius: 24px;
  background: var(--area-tinta);
}
.hv-problemi__gruppo.area-pms { background: #e6e9f2; }
.hv-problemi__gruppo h3 { font-size: clamp(1.5rem, 1vw + 1.1rem, 2rem); font-weight: 700; line-height: 1.15; }
.hv-problemi__gruppo dl { display: grid; gap: 1.375rem; margin: 0; }
.hv-problemi__gruppo dt { font-size: 1.0625rem; font-weight: 700; color: var(--teal-profondo); }
.hv-problemi__gruppo dd { margin: 0.375rem 0 0; font-size: 1rem; line-height: 1.6; color: var(--grigio); }
@media (max-width: 900px) { .hv-problemi { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .hv-problemi__gruppo { padding: 1.75rem 1.375rem; } }

/* --- Casi studio ----------------------------------------------------------- */
.hv-casi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: start;
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
}
.hv-caso { overflow: hidden; border-radius: 24px; background: #fff; box-shadow: var(--sh-ombra); }
.hv-caso__struttura { display: flex; flex-direction: column; gap: 0.875rem; padding: 2rem 2.125rem; background: var(--sh-scuro); color: #cfe3e5; font-size: 1rem; line-height: 1.6; }
.hv-caso__etichetta { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #7fd0d7; }
.hv-caso__numero { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.875rem; font-size: 1.125rem; }
.hv-caso__numero b { font-family: var(--font-titoli); font-size: clamp(3rem, 3vw + 1.5rem, 4rem); font-weight: 800; line-height: 1; color: #fff; }
.hv-caso__complessita { color: #fff; }
.hv-caso__complessita b { color: var(--sh-arancio); }
.hv-caso__soluzione { padding: 1.625rem 2.125rem 1.875rem; }
.hv-caso__soluzione h3 { padding-bottom: 0.625rem; font-size: 1.375rem; font-weight: 700; }
.hv-caso__soluzione dl { margin: 0; }
.hv-caso__soluzione dl > div { padding: 0.75rem 0; border-top: 1px solid #e6eceb; }
.hv-caso__soluzione dt { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-scuro); }
.hv-caso__soluzione dd { margin: 0.125rem 0 0; font-size: 1rem; line-height: 1.5; color: var(--teal-profondo); }
@media (max-width: 900px) { .hv-casi { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .hv-caso__struttura, .hv-caso__soluzione { padding-inline: 1.375rem; }
}

/* --- Spiaggia, parcheggio, attrezzature ------------------------------------ */
.hv-mare {
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.hv-mare li { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.75rem 1.625rem; border-radius: 20px; background: #fff; }
.hv-mare .card__icona { width: 34px; height: 34px; border-radius: 10px; background: var(--area-oms-colore); color: #fff; }
.hv-mare__etichetta { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; color: var(--sh-ruggine); }
.hv-mare h3 { font-size: 1.375rem; font-weight: 700; line-height: 1.2; }
@media (max-width: 760px) { .hv-mare { grid-template-columns: minmax(0, 1fr); } }

/* --- In stagione ----------------------------------------------------------- */
.hv-stagione {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 18.75rem);
  gap: 3.5rem;
  align-items: center;
  padding: clamp(1.75rem, 3.5vw, 3rem) clamp(1.5rem, 3.5vw, 3.25rem);
  border-radius: 28px;
  background: #fff;
}
.hv-stagione__testo { display: flex; flex-direction: column; gap: 1.125rem; align-items: flex-start; }
.hv-stagione__testo h2 { font-size: clamp(1.875rem, 1.6vw + 1.25rem, 2.75rem); line-height: 1.1; }
.hv-stagione__testo p:not(.etichetta) { font-size: clamp(1rem, 0.3vw + 0.95rem, 1.125rem); line-height: 1.65; color: var(--teal-profondo); }
.hv-stagione__testo p.hv-stagione__frase { font-family: var(--font-titoli); font-size: clamp(1.25rem, 0.6vw + 1rem, 1.5rem); font-weight: 700; line-height: 1.35; color: var(--sh-arancio); }
.hv-stagione__dato { display: flex; flex-direction: column; gap: 0.375rem; padding-top: 1.125rem; border-top: 4px solid var(--sh-arancio); }
.hv-stagione__dato b { font-family: var(--font-titoli); font-size: clamp(3rem, 3vw + 1.5rem, 4.5rem); font-weight: 800; line-height: 1; color: var(--teal-scuro); }
.hv-stagione__dato span { font-size: 1rem; color: var(--grigio); }
@media (max-width: 900px) { .hv-stagione { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }