/* ==========================================================================
   Home semplificata (#1769) — ANTEPRIMA
   Caricato solo da anteprima-home.html (generata da index.html con
   ~/var/1769-home-semplice/genera_anteprima.py). Ogni regola è sotto
   .home-semplice: index.html non ne è toccato.
   Idea: prima la risposta (adesso, oggi, domani), poi le porte agli
   approfondimenti. Da telefono la pagina passa da ~11 a ~4-5 schermate.
   ========================================================================== */

/* --- Hero: identità in una riga, niente numeri d'infrastruttura ---------- */
.home-semplice .home-hero__lead,
.home-semplice .home-hero__micro,
.home-semplice .home-hero__textlink,
.home-semplice .home-hero__badges,
.home-semplice .home-hero__trust { display: none; }

.home-semplice .hs-firma {
  margin: 4px 0 0;
  font-size: 0.95rem;
  opacity: 0.85;
}

/* --- Avvisi del sito (Novità, app, eclissi): una riga, dopo le previsioni -- */
.home-semplice .hs-avvisi { padding: 0 16px; }
.home-semplice .hs-avvisi:empty { display: none; }
.home-semplice .hs-avvisi > * { max-width: 1200px; margin: 8px auto; }
.home-semplice #home-novita-sotto { display: none; }
.home-semplice #app-test-invito ul,
.home-semplice #app-test-invito p { display: none; }

/* --- Prossimi giorni: link alla previsione completa ----------------------- */
.home-semplice .hs-tutti-giorni {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 8px;
  font-weight: 600;
  text-decoration: none;
}

/* Colori: SOLO le variabili del sito (app.css), che il tema scuro ridefinisce:
   --bg-primary, --border, --text-primary, --text-secondary. Il 07/11 qui c'erano
   --card-bg e --border-color, che non esistono: valeva sempre il bianco di riserva
   e col tema scuro schede, «Approfondisci» ed elenco dei giorni restavano chiari. */

/* --- Mappe: una sola mappa, quattro schede -------------------------------------
   «Temperatura e vento» · Pioggia · Anomalia · Estremi. Su un telefono vanno a
   capo in due righe che si dividono lo spazio; da computer stanno in una. */
.home-semplice .hs-maptabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
.home-semplice .hs-maptabs > .hs-maptab { flex: 1 1 auto; }
@media (max-width: 380px) {
  .home-semplice .hs-maptab { font-size: 0.82rem; }
}
/* Estremi riservati a chi ha fatto l'accesso: lucchetto come nel palco */
.home-semplice .hs-maptab.is-locked::after { content: " 🔒"; font-size: 0.75em; }
.home-semplice .hs-maptabs[hidden] { display: none; }
.home-semplice .hs-maptab {
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border, #d5dde8);
  background: var(--bg-primary, #fff);
  color: var(--text-primary, #202124);
  font: inherit;
  padding: 0 14px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.home-semplice .hs-maptab[aria-selected="true"] {
  background: #1a73e8;
  border-color: #1a73e8;
  color: #fff;
}
/* il palco è l'unico riquadro: occupa tutta la larghezza a ogni misura
   (home.css lo affianca al vento da 600 px in su) */
.home-semplice .home-obslive.hs-una-mappa { display: grid; grid-template-columns: minmax(0, 1fr); }
/* Da 600 px in su la zona mappa ha le proporzioni ESATTE della finestra del palco
   (VIEW 896×515 in home-territory-stage.js, «xMidYMid slice»): più larga di così
   il ritaglio taglierebbe la punta nord e il sud di San Marino (segnalato da Marco
   il 07/11 con la mappa a 2:1). Il riquadro si allunga quanto serve per mappa e
   didascalia. Sul telefono la zona è più alta che larga: il ritaglio è solo ai
   lati, sul contesto fuori confine, e resta com'è. */
@media (min-width: 600px) {
  .home-semplice .home-obslive.hs-una-mappa .home-obslive__card--hero { aspect-ratio: auto; }
  .home-semplice .home-obslive.hs-una-mappa .home-obslive__mapzone { flex: 0 0 auto; aspect-ratio: 896 / 515; }
}
/* Telefono: la zona mappa ha le proporzioni di quella della home attuale (a 390 px
   356×283: card 9:10 meno chip e didascalia). Prima stava dentro una card a altezza
   fissa e la didascalia più alta (riga del vento) la schiacciava a 259 px: San
   Marino veniva l'8% più piccolo (segnalato da Marco il 07/11 dallo smartphone).
   Ora la card si allunga e la mappa resta grande come oggi. */
@media (max-width: 599px) {
  .home-semplice .home-obslive.hs-una-mappa .home-obslive__card--hero { aspect-ratio: auto; }
  .home-semplice .home-obslive.hs-una-mappa .home-obslive__mapzone { flex: 0 0 auto; aspect-ratio: 356 / 283; }
  /* la fila dei chip del palco è nascosta (ci sono le schede sopra): la sua fascia
     resta solo se mostra la sotto-scelta degli Estremi o l'avviso delle raffiche */
  .home-semplice .hs-una-mappa .ts-chipbar:not(:has(.ts-subtoggle:not([hidden]))):not(:has(.ts-gust-badge)) { display: none; }
}
/* da computer mappa e schede si fermano a 1000 px, centrate: a tutta larghezza la
   mappa sarebbe alta quasi quanto lo schermo */
@media (min-width: 900px) {
  .home-semplice .hs-maptabs,
  .home-semplice .home-obslive.hs-una-mappa { max-width: 1000px; margin-left: auto; margin-right: auto; }
}
/* le schede sostituiscono i chip del palco (tutti e quattro: Temperatura, Pioggia, Anomalia,
   Estremi); la sotto-scelta degli Estremi, Ieri/Oggi e Massime/Minime, è fuori da .ts-chips
   e resta visibile */
.home-semplice .hs-una-mappa .ts-chips { display: none; }

/* --- Vento sulla mappa delle temperature ------------------------------------------
   Il motore delle scie (home-wind-gl.js) è agganciato alla zona mappa del palco da
   home-semplice.js con l'opzione senzaUI (niente Scala vento, Centraline, confine;
   scie bianche: il colore della mappa è già la temperatura). La tela non intercetta
   i tocchi sui pin e si nasconde sulle altre schede o col cursore del tempo indietro. */
.home-semplice [data-territory-stage] .home-obslive__mapzone > canvas { pointer-events: none; }
.home-semplice [data-territory-stage] .home-obslive__mapzone.hs-senza-scie > canvas { visibility: hidden; }
.home-semplice .hs-vento-sorgente { display: none !important; }
.home-semplice .home-obslive__card--stage .home-obslive__footer .hs-vento-riga { margin-top: 4px; -webkit-line-clamp: 3; }
.home-semplice .hs-vento-riga[hidden] { display: none; }


/* --- Approfondisci ---------------------------------------------------------- */
.home-semplice .hs-approf__lista {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.home-semplice .hs-approf__lista a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--border, #e3e8ef);
  background: var(--bg-primary, #fff);
  font-weight: 600;
  text-decoration: none;
}
@media (min-width: 768px) {
  .home-semplice .hs-approf__lista { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* --- Servizi e rete: compressi ------------------------------------------------ */
.home-semplice .home-pro__note,
.home-semplice .home-pro__hero-preview,
.home-semplice .home-services-cta__sub,
.home-semplice .home-network__visual { display: none; }

/* ==========================================================================
   Solo telefono
   ========================================================================== */
@media (max-width: 767px) {
  /* Hero compatto: titolo, card LIVE, pulsanti */
  .home-semplice .home-hero--map { min-height: 0; padding-top: 14px; padding-bottom: 16px; }
  .home-semplice .home-hero__inner { gap: 12px; }
  .home-semplice .home-hero__h1 { font-size: 1.45rem; line-height: 1.2; margin: 0; }
  .home-semplice .hs-firma { font-size: 0.9rem; }
  .home-semplice #kpi-press,
  .home-semplice #hero-units { display: none !important; }
  .home-semplice .home-hero--map .home-hero__inner > .home-hero__cta {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 8px;
    margin: 0;
    width: 100%;
    max-width: none;
    flex-wrap: nowrap;
  }
  .home-semplice .home-hero--map .home-hero__cta .btn {
    min-width: 0;
    width: 100%;
    flex: none;
    min-height: 44px;
    padding: 8px 6px;
    font-size: 0.88rem;
    line-height: 1.15;
    white-space: normal;
    text-align: center;
    justify-content: center;
  }

  /* Sezioni più strette */
  .home-semplice .home-section { padding-top: 22px; padding-bottom: 22px; }
  .home-semplice .home-section__subtitle,
  .home-semplice .home-obslive__note,
  .home-semplice .home-webcams__note { display: none; }
  .home-semplice #home-tips { display: none !important; }

  /* Prossimi giorni: in verticale, una riga per giorno, 5 giorni */
  .home-semplice #home-daily.home-daily--week {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: visible;
    scroll-snap-type: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border, #e3e8ef);
    border-radius: 16px;
    background: var(--bg-primary, #fff);
  }
  .home-semplice #home-daily .home-daily-card {
    display: grid;
    grid-template-columns: 58px 36px minmax(0, 1fr) auto;
    grid-template-areas: "day icon text temps" "day icon precip temps";
    align-items: center;
    column-gap: 8px;
    row-gap: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: 60px;
    flex: none;
    margin: 0;
    padding: 8px 14px;
    border: 0;
    border-top: 1px solid var(--border, #eef2f7);
    border-radius: 0;
    box-shadow: none;
    text-align: left;
    scroll-snap-align: none;
  }
  .home-semplice #home-daily .home-daily-card:first-child { border-top: 0; }
  .home-semplice #home-daily .home-daily-card:nth-child(n+6) { display: none; }
  .home-semplice .home-daily-card__day { grid-area: day; font-weight: 700; }
  .home-semplice .home-daily-card__icon { grid-area: icon; margin: 0; }
  .home-semplice .home-daily-card__text { grid-area: text; margin: 0; text-align: left; }
  .home-semplice .home-daily-card__precip { grid-area: precip; margin: 0; justify-content: flex-start; text-align: left; }
  .home-semplice .home-daily-card__temps { grid-area: temps; margin: 0; white-space: nowrap; }
  .home-semplice .home-daily-card__temps-range,
  .home-semplice .home-daily-card__pmax,
  .home-semplice .home-daily-card__rel,
  .home-semplice #home-daily [class*="home-daily-card__band"] { display: none; }
  .home-semplice .home-daily-card__storm-row:empty { display: none; }
  .home-semplice .home-daily-card__storm-row { grid-column: 3 / 5; }
  .home-semplice .home-castelli-ora { font-size: 0.85rem; }
  /* intestazione dei giorni: titolo e frase «oggi e domani»; i collegamenti stanno in «Approfondisci» */
  .home-semplice section[aria-labelledby="daily-title"] .home-section__header-chips { display: none; }
  .home-semplice section[aria-labelledby="daily-title"] .home-section__header { margin-bottom: 10px; }
  /* temporali: sul telefono solo quando c'è un segnale */
  .home-semplice #home-storm-outlook:has(#home-storm-outlook-dot[data-lv="0"]) { display: none; }
  .home-semplice #home-storm-outlook { margin: 10px 0 0; }

  /* «domani» nella card LIVE */
  .home-semplice .hs-domani { font-size: 0.95rem; opacity: 0.92; margin-top: 2px; }

  /* calendario delle webcam: una riga */
  .home-semplice .home-wcal__strip,
  .home-semplice .home-wcal__txt > span { display: none; }
  .home-semplice .home-wcal { padding: 12px 16px; min-height: 0; }

  /* servizi: titolo e una riga per voce */
  .home-semplice .home-pro__hero-body > :not(.home-pro__hero-title):not(.home-pro__hero-desc),
  .home-semplice .home-pro__card > :not(.home-pro__card-title):not(.home-pro__card-desc),
  .home-semplice .home-services-cta__lead { display: none; }
  .home-semplice .home-pro__hero-title,
  .home-semplice .home-pro__card-title { font-size: 1.05rem; margin: 0; }
  .home-semplice .home-pro__hero-desc,
  .home-semplice .home-pro__card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* rete: niente riquadro dei numeri, testo in 4 righe */
  .home-semplice .home-network__proof { display: none; }
  .home-semplice .home-network__manifesto {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Prossime ore: senza la riga del vento */
  .home-semplice .home-hour-card__wind { display: none; }

  /* Webcam: una fila che si scorre di lato, la seconda si intravede */
  .home-semplice .home-webcams {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .home-semplice .home-webcams::-webkit-scrollbar { display: none; }
  .home-semplice .home-webcams > * { flex: 0 0 78%; scroll-snap-align: start; margin: 0; }
  .home-semplice .home-wcal { margin-top: 12px; }

  /* Servizi: tre righe */
  .home-semplice .home-pro { display: flex; flex-direction: column; gap: 8px; }
  .home-semplice .home-pro__hero,
  .home-semplice .home-pro__card { min-height: 0; padding: 14px 16px; }
  .home-semplice .home-pro__hero-desc,
  .home-semplice .home-pro__card-desc { font-size: 0.88rem; margin: 2px 0 0; }
  .home-semplice .home-services-cta { padding: 8px 0 0; }

  /* Rete: titolo, un paragrafo, i pulsanti */
  .home-semplice .home-network__manifesto { font-size: 0.95rem; }
}
