/**
 * meteo.sm Homepage — home.css
 * Page-specific styles for the new data-driven homepage
 * Depends on app.css for variables, .app-header, .bottom-nav, .btn, .chip
 */

/* Font stack di sistema moderna — nessuna dipendenza Google Fonts (Inter rimosso).
   Override scoped alla sola home: app.css resta con Inter per le altre pagine.
   ui-sans-serif/system-ui prima = look "native app", coerente cross-platform, niente FOUT. */
body.page-home {
  --font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* #90 WCAG AA: --text-hint globale (#9aa0a6) = 2.5:1 su bianco, fallisce su tutte
     le ~20 etichette secondarie della home (hour-card vento/pioggia, note). Override
     scoped a #6b7176 (~4.8:1, stesso grigio già scelto per la search-bar a riga ~1301):
     resta più chiaro di --text-secondary (#5f6368) → gerarchia "hint" preservata. */
  --text-hint: #6b7176;
}
/* Dark mode invariato: in tema scuro l'hint resta quello globale (#757575 su #121212). */
[data-theme="dark"] body.page-home {
  --text-hint: #757575;
}

/* ============================================================
   A) HEADER NAV EXTENSION
   ============================================================ */

.home-header {
  position: sticky;
  top: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding: 0 var(--spacing-md);
  /* #90 WCAG AA: --primary (#1a73e8) è troppo chiaro per reggere il bianco
     attenuato di nav/tagline (3.7:1 / 2.99:1). Blu header dedicato più profondo
     (#0b57d0, stessa famiglia Material Blue 700) → nav/tagline a opacity passano
     ~5:1. Il brand #1a73e8 resta su link/accenti altrove. */
  background-color: #0b57d0;
  color: white;
  box-shadow: var(--shadow-md);
}

.home-header__brand {
  font-size: var(--font-size-lg);
  font-weight: 500;
  text-decoration: none;
  color: white;
  flex-shrink: 0;
}

.home-header__nav {
  display: none;
  list-style: none;
  gap: var(--spacing-xs);
  margin: 0 var(--spacing-lg);
}

.home-header__nav a {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  color: rgba(255, 255, 255, 0.85); /* #90 WCAG AA: 5.08:1 sul blu header #0b57d0 (falliva 3.7:1 su #1a73e8) */
  text-decoration: none;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.home-header__nav a:hover,
.home-header__nav a:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.home-header__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-shrink: 0;
}

/* Bottone Accedi sull'header blu: auth.css lo stila per fondo bianco
   (testo/bordo --auth-primary = blu su blu, illeggibile). Stesso fix
   contrasto già usato per .app-header in auth.css:856. */
.home-header .auth-login-btn {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}
.home-header .auth-login-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border-color: #fff;
}

/* Hamburger button */
.home-header__hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: background var(--transition-fast);
}

.home-header__hamburger:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Pulsante tema chiaro/scuro nell'header (condiviso home + clima) */
.home-header__theme {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: background var(--transition-fast);
  flex-shrink: 0;
}
.home-header__theme:hover {
  background: rgba(255, 255, 255, 0.15);
}
.home-header__theme svg {
  width: 22px;
  height: 22px;
}

/* Mobile nav panel */
.home-header__mobile-nav {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  z-index: 1099;
  background: var(--bg-primary);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-sm) 0;
  list-style: none;
}

.home-header__mobile-nav.open {
  display: block;
}

.home-header__mobile-nav a {
  display: block;
  padding: 12px var(--spacing-lg);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--font-size-md);
  transition: background var(--transition-fast);
}

.home-header__mobile-nav a:hover {
  background: var(--bg-secondary);
}

/* Hide search and auth on mobile — they're in the mobile nav panel */
.home-header #home-search,
.home-header .auth-header-container {
  display: none;
}

@media (min-width: 768px) {
  .home-header__nav {
    display: flex;
  }
  .home-header__hamburger {
    display: none;
  }
  .home-header #home-search,
  .home-header .auth-header-container {
    display: block;
  }
}

/* ============================================================
   B) HERO — "San Marino adesso" (mappa interattiva)
   ============================================================ */

/* --- Hero map layout --- */
.home-hero--map {
  position: relative;
  background: #1a2032;
  color: white;
  padding: 0;
}

.home-hero__map-wrap {
  position: relative;
  height: 65vh;
  max-height: 750px;
  overflow: hidden;
  /* Gradient placeholder durante caricamento mappa */
  background: linear-gradient(135deg, #1a3a5c 0%, #0d1f30 100%);
}

.home-hero__map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.home-hero__map--loaded + .home-hero__map-wrap {
  background: none;
}

/* --- Glassmorphism overlays --- */
.home-hero__overlay {
  position: absolute;
  z-index: 2;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  color: #fff;
  pointer-events: auto;
}

.home-hero__overlay--tl {
  top: 16px;
  left: 16px;
}

.home-hero__overlay--bl {
  bottom: 16px;
  left: 16px;
  max-width: calc(100% - 32px);
}

.home-hero__overlay--br {
  bottom: 16px;
  right: 16px;
  padding: 8px 12px;
  font-size: 12px;
  opacity: 0.85;
}

/* --- Hero map view toggle --- */
.home-hero__overlay--tr {
  top: 16px;
  right: 16px;
  z-index: 20;
  padding: 4px;
}
.hero-view-toggle {
  display: flex;
  gap: 2px;
}
.hero-view-toggle__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.hero-view-toggle__btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.9);
}
.hero-view-toggle__btn--active {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* Maschera sfumatura per vista regionale: dissolve i bordi non coperti dall'overlay */
.hero-map--regional {
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, black var(--fade-l, 5%), black var(--fade-r, 95%), transparent 100%),
    linear-gradient(to bottom, transparent 0%, black var(--fade-t, 5%), black var(--fade-b, 95%), transparent 100%);
  mask-image:
    linear-gradient(to right,  transparent 0%, black var(--fade-l, 5%), black var(--fade-r, 95%), transparent 100%),
    linear-gradient(to bottom, transparent 0%, black var(--fade-t, 5%), black var(--fade-b, 95%), transparent 100%);
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
}

/* --- Temperature + station in top-left overlay --- */
.home-hero__current-temp {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1px;
}

.home-hero__current-station {
  font-size: var(--font-size-sm);
  opacity: 0.75;
  margin-top: 2px;
}

.home-hero__current-badge {
  margin-top: 4px;
}

/* --- KPI grid (on map) --- */
.home-kpi--map {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0;
}

.home-kpi--map .home-kpi__card {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 12px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.home-kpi__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  opacity: 0.85;
  margin-bottom: 4px;
}

.home-kpi__label svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.home-kpi__value {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
}

.home-kpi__detail {
  font-size: var(--font-size-xs);
  opacity: 0.75;
  margin-top: 2px;
}

/* --- Below map: summary, tips, meta --- */
/* Hero __below rimosso: NLG e tips ora nel blocco testuale sopra la mappa */
/* Gli stili __text, __summary, __tips, __meta-bar sono nel critical CSS inline */

.home-hero__tip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.home-hero__tip--ok {
  background: rgba(76, 175, 80, 0.12);
  color: #2e7d32;
}

.home-hero__tip--info {
  background: rgba(255, 193, 7, 0.12);
  color: #e65100;
}

.home-hero__tip--warn {
  background: rgba(244, 67, 54, 0.12);
  color: #c62828;
}

[data-theme="dark"] .home-hero__tip--ok {
  background: rgba(76, 175, 80, 0.2);
  color: #81c784;
}

[data-theme="dark"] .home-hero__tip--info {
  background: rgba(255, 193, 7, 0.2);
  color: #ffb74d;
}

[data-theme="dark"] .home-hero__tip--warn {
  background: rgba(244, 67, 54, 0.2);
  color: #ef9a9a;
}

.home-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* --- Timestamp --- */
.home-hero__timestamp {
  font-size: var(--font-size-xs);
  opacity: 0.7;
}

/* --- Mobile KPI (below map) --- */
.home-hero__kpi-mobile {
  display: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 12px 16px;
}

.home-hero__kpi-mobile .home-hero__timestamp {
  text-align: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* --- Responsive hero --- */
@media (max-width: 767px) {
  .home-hero__map-wrap {
    height: 50vh;
    max-height: 450px;
  }
  .home-hero__overlay--tl {
    top: 8px;
    left: 8px;
    padding: 10px 12px;
  }
  .home-hero__overlay--tr {
    top: 8px;
    right: 8px;
  }
  .hero-view-toggle__btn {
    width: 32px;
    height: 32px;
  }
  /* Nascondo KPI e timestamp dalla mappa su mobile */
  .home-hero__overlay--desktop-only {
    display: none;
  }
  /* Mostro KPI sotto la mappa */
  .home-hero__kpi-mobile {
    display: block;
  }
  .home-hero__current-temp {
    font-size: 40px;
  }
  .home-kpi__value {
    font-size: 20px;
  }
}

@media (min-width: 768px) {
  .home-hero__current-temp {
    font-size: 56px;
  }
  .home-kpi--map {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
  }
  .home-kpi__value {
    font-size: 28px;
  }
  .home-hero__overlay--bl {
    max-width: 680px;
  }
}

/* --- Dark theme adjustments --- */
[data-theme="dark"] .home-hero__below {
  background: linear-gradient(135deg, #1a2a3e 0%, #0d1520 100%);
}

[data-theme="light"] .home-hero__overlay {
  background: rgba(0, 0, 0, 0.35);
}

/* Demo badge */
.home-badge-demo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  background: var(--warning);
  color: #1a1a00;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-left: var(--spacing-sm);
}

/* ============================================================
   SATELLITE & RADAR PREVIEW
   ============================================================ */

.home-remote-sensing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.home-rs-card {
  display: block;
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.home-rs-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.home-rs-card__img-wrap {
  aspect-ratio: 3 / 2;
  background: #1a2032;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-rs-card__img-wrap--radar {
  background: linear-gradient(135deg, #1a2032 0%, #0d1520 100%);
}

.home-rs-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-rs-card__body {
  padding: var(--spacing-sm) var(--spacing-md);
}

.home-rs-card__title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.home-rs-card__title svg {
  color: var(--primary);
  flex-shrink: 0;
}

.home-rs-card__desc {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: 1.4;
}

@media (max-width: 599px) {
  .home-remote-sensing {
    grid-template-columns: 1fr;
  }
}

/* --- Castello Button (generato da castelli-ui.js) --- */
.castello-btn__icon {
  flex-shrink: 0;
  line-height: 0;
}
.castello-btn__icon svg {
  display: block;
}

/* --- Castello Weather Marker (icona meteo sulla mappa) --- */
/* NB: maplibre-gl.css è lazy-loaded e potrebbe non essere pronto quando i marker
   vengono creati. Duplichiamo le proprietà essenziali di .maplibregl-marker qui. */
.castello-wx-marker.maplibregl-marker {
  position: absolute !important;
  top: 0;
  left: 0;
  z-index: 20 !important;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  padding: 4px;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6));
}
.castello-wx-marker svg {
  display: block;
}

/* --- Castello Card (popover, usato nell'hero map) --- */
.castello-card {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-primary);
  border-top: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  padding: 20px;
  z-index: 100;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.castello-card[data-open] {
  transform: translateY(0);
}
.castello-card__close {
  position: absolute;
  top: 12px; right: 16px;
  background: none;
  border: none;
  font-size: 20px;
  color: var(--text-secondary);
  cursor: pointer;
}
.castello-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.castello-card__icon {
  flex-shrink: 0;
  line-height: 0;
}
.castello-card__name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}
.castello-card__temp {
  font-size: 32px;
  font-weight: 700;
}
.castello-card__row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.castello-card__row:last-child {
  border-bottom: none;
}
.castello-card__label {
  color: var(--text-secondary);
}
.castello-card__value {
  font-weight: 600;
}

/* Desktop: card come popover centrato */
@media (min-width: 768px) {
  .castello-card {
    position: absolute;
    bottom: auto; left: 50%; right: auto;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0;
    width: 300px;
    border-radius: 12px;
    border-top: none;
    border: 1px solid var(--border);
    background: var(--bg-primary);
    box-shadow: var(--shadow-lg);
    transition: all 0.2s ease;
    pointer-events: none;
  }
  .castello-card[data-open] {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
  }
}

/* ============================================================
   C) PROSSIME ORE — Timeline orizzontale
   ============================================================ */

.home-section {
  padding: var(--spacing-lg) var(--spacing-md);
}

.home-section__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.home-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

/* Raggruppa più chip a destra dell'header senza rompere lo space-between */
.home-section__header-chips {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.home-section__title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text-primary);
}

/* Timeline scroll container */
.home-timeline {
  display: flex;
  gap: var(--spacing-sm);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--spacing-sm);
  scrollbar-width: thin;
}

/* B14.6: scroll hint quasi invisibile finché non scrolli */
.home-timeline { scrollbar-color: rgba(120,120,120,0.16) transparent; }
.home-timeline::-webkit-scrollbar {
  height: 3px;
}
.home-timeline::-webkit-scrollbar-track {
  background: transparent;
}
.home-timeline::-webkit-scrollbar-thumb {
  background: rgba(120, 120, 120, 0.16);
  border-radius: 3px;
}

.home-hour-card {
  flex: 0 0 auto;
  width: 72px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--spacing-sm) var(--spacing-xs);
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  text-align: center;
}

.home-hour-card__time {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-secondary);
}

.home-hour-card__icon {
  width: 28px;
  height: 28px;
  color: var(--primary);
}

.home-hour-card__temp {
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--text-primary);
}

.home-hour-card__precip {
  width: 100%;
  height: 4px;
  background: var(--bg-tertiary);
  border-radius: 2px;
  overflow: hidden;
}

.home-hour-card__precip-bar {
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
  transition: width var(--transition-normal);
}

.home-hour-card__wind {
  font-size: 11px;
  color: var(--text-hint);
  white-space: nowrap;
}

/* Loading state for timeline */
.home-timeline--loading {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   D) MAPPE — Preview card
   ============================================================ */

.home-maps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
}

.home-map-card {
  display: block;
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.home-map-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.home-map-card__img-wrap {
  aspect-ratio: 16 / 9;
  background: var(--bg-secondary);
  overflow: hidden;
}

.home-map-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-map-card__img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-hint);
}

.home-map-card__img-placeholder svg {
  width: 48px;
  height: 48px;
  opacity: 0.4;
}

.home-map-card__body {
  padding: var(--spacing-md);
}

.home-map-card__title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.home-map-card__desc {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}

@media (min-width: 600px) {
  .home-maps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .home-maps {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   F) SERVIZI PROFESSIONALI
   ============================================================ */

/* STEP B11 — non "3 card SaaS" ma infrastruttura: bento 1 hero + 2 capability,
   grammatica dark premium coerente con .home-obslive / .home-webcams. */
.home-pro__note {
  font-size: var(--font-size-xs);
  color: var(--text-hint);
  margin: 4px 0 0;
  max-width: 620px;
}

/* Mobile-first: stack verticale Calore Sicuro → API → Sistemi dedicati */
.home-pro {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}
/* Tablet: hero a tutta larghezza, le due capability affiancate sotto */
@media (min-width: 600px) {
  .home-pro { grid-template-columns: 1fr 1fr; }
  .home-pro__hero { grid-column: 1 / -1; }
}
/* Desktop: bento — hero dominante a sinistra, due capability impilate a destra */
@media (min-width: 900px) {
  .home-pro {
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .home-pro__hero { grid-column: 1; grid-row: 1 / span 2; }
}

/* --- HERO: Calore Sicuro (dark premium, "mini-hero") --- */
.home-pro__hero {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(155deg, #123a5e 0%, #0c2438 55%, #081320 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-md);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.home-pro__hero:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.home-pro__hero-body { padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md); }

.home-pro__tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #cfe4ff;
  background: rgba(120, 170, 255, 0.16);
  border: 1px solid rgba(120, 170, 255, 0.28);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  margin-bottom: var(--spacing-sm);
}
.home-pro__hero-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 8px;
}
.home-pro__hero-desc {
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  margin: 0 0 var(--spacing-sm);
  max-width: 46ch;
}
.home-pro__hero-foot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-xs);
  color: rgba(255, 255, 255, 0.62);
}
.home-pro__hero-foot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4ea1ff;
  flex: none;
}

/* Preview reale: chart WBGT in versione "home" dark a sfondo trasparente,
   si fonde nel gradiente della card — niente box bianco, niente cornice. */
.home-pro__hero-preview {
  margin: auto var(--spacing-md) var(--spacing-sm);
}
.home-pro__hero-preview img { display: block; width: 100%; height: auto; }

/* --- CAPABILITY: card secondarie (stessa famiglia dark, più calme) --- */
.home-pro__card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  text-decoration: none;
  padding: var(--spacing-lg);
  background: linear-gradient(160deg, #1b2a3a 0%, #131e2a 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.home-pro__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(120, 170, 255, 0.3);
}
.home-pro__card-kicker {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7fb0ef;
  margin-bottom: 10px;
}
.home-pro__card-title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
}
.home-pro__card-title::after {
  content: " \2192";
  color: #7fb0ef;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.home-pro__card:hover .home-pro__card-title::after { opacity: 1; }
.home-pro__card-desc {
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 auto; /* spinge la riga di micro-riferimenti in basso */
}
.home-pro__stat {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.78); /* B11.5: contrasto micro-riga leggermente alzato */
  font-variant-numeric: tabular-nums;
}

/* B11.5: su mobile la card hero non deve allungarsi troppo — preview WBGT più compatta */
@media (max-width: 599px) {
  .home-pro__hero-body { padding: var(--spacing-md) var(--spacing-md) var(--spacing-xs); }
  .home-pro__hero-preview { margin: 4px var(--spacing-sm) var(--spacing-sm); }
  /* grafico slim: cap altezza, mostra il concetto (picchi/soglia) non la legenda */
  .home-pro__hero-preview img { max-height: 96px; width: 100%; object-fit: cover; object-position: center; }
}

/* ============================================================
   G) RETE TERRITORIALE
   ============================================================ */

/* STEP B12 (2026-05-23) — manifesto dell'infrastruttura territoriale.
   Non più KPI/footer corporate: colonna editoriale (manifesto + prove + accessi)
   accanto a una "finestra viva" sul territorio (crossfade lento di 3 layer reali).
   Mobile-first; su mobile l'ordine è titolo → manifesto → visual → prove → accessi. */

.home-network {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "lead"
    "visual"
    "proof"
    "cta";
  gap: var(--spacing-lg);
}
.home-network__lead   { grid-area: lead; }
.home-network__visual { grid-area: visual; }
.home-network__proof  { grid-area: proof; }
.home-network__cta    { grid-area: cta; }

/* --- Manifesto (colonna editoriale) --- */
.home-network__title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 var(--spacing-sm);
}
.home-network__manifesto {
  font-size: var(--font-size-md);
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 52ch;
  margin: 0;
}

/* --- Prove dell'infrastruttura (ex KPI) ---
   Niente big-number marketing: valori sobri, hairline a legarli, label-evidenza. */
.home-network__proof {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;                        /* la cornice/hairline emerge dallo sfondo */
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 0;
}
.home-network__proof-item {
  background: var(--bg-primary);
  padding: var(--spacing-md);
}
.home-network__proof-value {
  font-size: 25px;
  font-weight: 600;                /* meno "sparato" del 700 */
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
/* B12.5: il "+" non deve gridare più degli altri valori → tono sobrio, recede */
.home-network__proof-plus { color: var(--text-secondary); font-weight: 400; }
.home-network__proof-label {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--text-secondary);
}

/* --- Accessi all'infrastruttura --- */
.home-network__cta {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}
.home-network__cta-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
}
.home-network__cta-ghost:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* --- Finestra viva sul territorio ---
   Crossfade lentissimo di 3 layer osservativi reali (temp / radar / vento),
   leggera deriva di scala (ken-burns impercettibile). Niente UI, niente legenda. */
.home-network__visual { min-height: 280px; }
.home-network__stage {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #07111c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  isolation: isolate;
}
.home-network__layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  will-change: opacity, transform;
  animation: home-net-cross 27s infinite ease-in-out;
}
.home-network__layer--temp { animation-delay: 0s; }
.home-network__layer--rain { animation-delay: 9s; }
.home-network__layer--wind { animation-delay: 18s; }

@keyframes home-net-cross {
  0%   { opacity: 0; transform: scale(1.04); }
  4%   { opacity: 1; }
  29%  { opacity: 1; }
  34%  { opacity: 0; transform: scale(1.09); }
  100% { opacity: 0; transform: scale(1.04); }
}

/* Vignettatura cinematica + leggibilità del micro-tag */
.home-network__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(7, 17, 28, 0.34) 0%,
    rgba(7, 17, 28, 0) 28%,
    rgba(7, 17, 28, 0) 58%,
    rgba(7, 17, 28, 0.58) 100%
  );
}

.home-network__stage-tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* B12.5: annotazione editoriale, non pill UI → niente pillola/bordo,
     testo più soft, leggibilità affidata alla vignettatura + ombra del testo */
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.78);
  background: transparent;
  padding: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.home-network__stage-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(120, 170, 255, 0.85);
  flex: none;
  animation: home-net-pulse 3.2s infinite;
}
@keyframes home-net-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(78, 161, 255, 0.35); }
  70%  { box-shadow: 0 0 0 5px rgba(78, 161, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(78, 161, 255, 0); }
}

/* Desktop: due colonne — manifesto/prove/accessi a sinistra, finestra viva a destra.
   La finestra attraversa in verticale tutte e tre le righe della colonna editoriale. */
@media (min-width: 768px) {
  .home-network {
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-areas:
      "lead   visual"
      "proof  visual"
      "cta    visual";
    column-gap: var(--spacing-xl);
    row-gap: var(--spacing-lg);
    align-items: start;
  }
  .home-network__visual { align-self: stretch; }
  /* B12.5: più impatto verticale e taglio cinematico (no "banner"); mobile invariato */
  .home-network__visual,
  .home-network__stage { min-height: 380px; }
}

/* Accessibilità: niente movimento se l'utente lo disattiva → mostra il primo layer fisso */
@media (prefers-reduced-motion: reduce) {
  .home-network__layer { animation: none; }
  .home-network__layer--temp { opacity: 1; }
  .home-network__layer--rain,
  .home-network__layer--wind { opacity: 0; }
  .home-network__stage-dot { animation: none; }
}

/* ============================================================
   H) FOOTER
   ============================================================ */

/* STEP B13 (2026-05-23) — footer rifinito: chiusura sobria/autorevole, non "vecchio internet".
   Stesso contenuto e stessi link di prima, solo gerarchia tipografica + respiro + hover soft.
   Mood: pulito, istituzionale ma caldo; niente colonne enterprise, niente dark pesante. */
.home-footer {
  padding: var(--spacing-xl) var(--spacing-md);
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
}
.home-footer__inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-md);
}

/* Riga 1 — identità: il brand guida, la riga di posizionamento lo sostiene */
.home-footer__identity {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.home-footer__brand {
  font-size: var(--font-size-md);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.home-footer__brand-sep {
  color: var(--text-hint);
  font-weight: 400;
}
.home-footer__tagline {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Riga 2 — navigazione sobria (non elenco generico): link ariosi, hover soft blu */
.home-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
}
.home-footer__nav a {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.18s ease;
}
.home-footer__nav a:hover { color: var(--primary); }

/* Riga 3 — fonti + legale: la coda quieta, separata da un sottile respiro */
.home-footer__base {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  margin-top: 2px;
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border);
}
.home-footer__sources {
  margin: 0;
  max-width: 62ch;
  font-size: var(--font-size-xs);
  line-height: 1.6;
  /* WCAG AA: #6b7176 ≈ 4.8:1 su --bg-secondary (var globale --text-hint #9aa0a6 = 2.5:1, fallisce) */
  color: #6b7176;
}
.home-footer__legal {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-size-xs);
}
.home-footer__legal a {
  color: #6b7176; /* WCAG AA ≈ 4.8:1 (vedi .home-footer__sources) */
  text-decoration: none;
  transition: color 0.18s ease;
}
.home-footer__legal a:hover { color: var(--primary); }
.home-footer__legal-sep { color: var(--border); }

/* ============================================================
   SECTION ALTERNATING BACKGROUNDS
   ============================================================ */

.home-section--alt {
  background: var(--bg-secondary);
}

/* ============================================================
   UTILITY: page bottom padding for bottom-nav
   ============================================================ */

.home-main {
  padding-bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom));
}

/* ============================================================
   SKELETON LOADERS
   ============================================================ */

.skeleton {
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton--text {
  height: 1em;
  width: 60%;
}

.skeleton--kpi {
  height: 36px;
  width: 80px;
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ============================================================
   FOCUS RING
   ============================================================ */

.home-header a:focus-visible,
.home-header button:focus-visible,
.home-map-card:focus-visible,
.home-hour-card:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
}

.home-section a:focus-visible,
.home-section button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ============================================================
   BRANDING TAGLINE (#12)
   ============================================================ */

.home-header__tagline {
  display: none;
  font-size: 10px;
  opacity: 0.8; /* #90 WCAG AA: 0.7 = 2.99:1; a 0.8 su header #0b57d0 = 4.65:1 (resta più tenue della nav a 0.85) */
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  margin-top: 1px;
}

@media (min-width: 768px) {
  .home-header__tagline { display: block; }
  .home-header__brand { display: flex; flex-direction: column; }
}

/* ============================================================
   HERO — TITLE, SUBTITLE, LIVE BADGE (#1A, #1B)
   ============================================================ */

.home-hero__subtitle {
  font-size: var(--font-size-sm);
  opacity: 0.8;
  margin-top: 2px;
  margin-bottom: var(--spacing-md);
  font-weight: 400;
}

.home-badge-live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(76, 175, 80, 0.9);
  color: white;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-left: var(--spacing-sm);
  vertical-align: middle;
}

.home-badge-live__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
  animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Temperature card value — larger font */
#kpi-temp .home-kpi__value,
#kpi-temp-value {
  font-size: 32px;
}

@media (min-width: 768px) {
  #kpi-temp .home-kpi__value,
  #kpi-temp-value {
    font-size: 38px;
  }
}

/* Timestamp — higher contrast (#1B) */
.home-hero__timestamp {
  opacity: 0.85;
  font-size: var(--font-size-sm);
  font-weight: 500;
}

/* ============================================================
   ALERTS BANNER (#2)
   ============================================================ */

/* (Vecchio modulo .home-alerts/--ok/--info/--warn rimosso in B15:
   sostituito dal modulo "Avviso meteo operativo" più in basso.) */

/* ============================================================
   RELIABILITY PILL (#3)
   ============================================================ */

.home-reliability {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-xs);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.home-reliability__label {
  opacity: 0.8;
}

.home-reliability__level {
  font-weight: 500;
  text-transform: capitalize;
}

/* B14.6: nota di contesto editoriale, non "stato sistema" → toni desaturati,
   sfondo tenue, basso contrasto. Coerente coi pallini affidabilità daily. */
/* #90 WCAG AA: i toni desaturati originali (#6f9277/#a8862f/#b5734e) falliscono
   come testo sui rispettivi sfondi tenui (2.95 / 3.43 / 3.80:1). Scuriti mantenendo
   la tinta (verde·ambra·terracotta); misurati in pagina (sfondo badge su bg #f8f9fa):
   high 4.59:1, medium 4.7:1, low 4.72:1. */
.home-reliability--high {
  background: rgba(125, 157, 131, 0.12);
  color: #4d7355;
}

.home-reliability--medium {
  background: rgba(194, 161, 78, 0.12);
  color: #79601b;
}

.home-reliability--low {
  background: rgba(191, 138, 107, 0.12);
  color: #9c5631;
}

.home-reliability__tip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: var(--text-primary);
  color: var(--bg-primary);
  font-size: var(--font-size-xs);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}

.home-reliability:hover .home-reliability__tip {
  display: block;
}

/* ============================================================
   B15) AVVISO METEO OPERATIVO — modulo contestuale fra Hero e Prossime ore.
   Nascosto di default; reso visibile da home-app.js SOLO se rilevante.
   Grammatica editoriale (nota operativa, non banner allarmistico),
   palette desaturata per categoria. Niente rosso/giallo/arancio alert.
   ============================================================ */
.home-alerts-section { display: none; padding-top: var(--spacing-md); padding-bottom: 0; }
.home-alerts-section.is-visible { display: block; }

.home-alert {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  text-decoration: none;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--alert-accent, #5a6b80);
  border-radius: var(--radius-md);
  background: var(--alert-bg, rgba(90, 107, 128, 0.06));
  animation: home-alert-in 0.4s ease both;
}
@keyframes home-alert-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.home-alert__mark {
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--alert-accent, #5a6b80);
  opacity: 0.85;
}
.home-alert__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.home-alert__title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
}
.home-alert__text {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  line-height: 1.35;
}
.home-alert__cta {
  flex: none;
  font-size: var(--font-size-xs);
  font-weight: 500;
  /* #90 WCAG AA: l'opacity 0.9 diluiva l'accento sotto soglia (es. wind → 3.94:1).
     Opacity piena + accento-testo dedicato per categoria (--alert-accent-text):
     storm/wind/rain già passano come testo (6.8/5.5/5.4:1) e usano il fallback
     sull'accento; heat/heat-sun/snow definiscono un accento più scuro solo-testo. */
  color: var(--alert-accent-text, var(--alert-accent, #5a6b80));
  white-space: nowrap;
  text-decoration: none;
}
.home-alert:hover .home-alert__cta { text-decoration: underline; }

/* Palette per categoria — desaturata, editoriale */
.home-alert--storm { --alert-accent: #4a5699; --alert-bg: rgba(74, 86, 153, 0.06); }
.home-alert--wind  { --alert-accent: #5a6b80; --alert-bg: rgba(90, 107, 128, 0.06); }
.home-alert--rain  { --alert-accent: #3f6f93; --alert-bg: rgba(63, 111, 147, 0.06); }
/* #90: --alert-accent resta la tinta "brillante" per bordo+sfondo (decorativi, nessun
   requisito di contrasto); --alert-accent-text è la versione scura usata SOLO dal CTA-testo. */
.home-alert--heat     { --alert-accent: #a8742f; --alert-accent-text: #8a5e22; --alert-bg: rgba(168, 116, 47, 0.07); } /* opprimente all'ombra: arancio terra denso */
.home-alert--heat-sun { --alert-accent: #d9a229; --alert-accent-text: #836111; --alert-bg: rgba(217, 162, 41, 0.07); } /* sole pericoloso: ocra dorato brillante */
.home-alert--snow  { --alert-accent: #5f8190; --alert-accent-text: #4f6f7e; --alert-bg: rgba(95, 129, 144, 0.07); }

/* Mobile: stack compatto, CTA su riga propria allineata al testo */
@media (max-width: 599px) {
  .home-alert { flex-wrap: wrap; gap: 8px 10px; }
  .home-alert__body { flex-basis: calc(100% - 18px); }
  .home-alert__cta { width: 100%; padding-left: 18px; }
}

/* ============================================================
   TIMELINE SECTION — updated title (#6)
   ============================================================ */

.home-section__header {
  position: relative;
}

.home-section__header-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

/* ============================================================
   EXPLORE CARDS — hover improvements (#7)
   ============================================================ */

.home-map-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  border: 1px solid transparent;
}

.home-map-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  border-color: var(--border);
}

.home-map-card__img-placeholder svg {
  width: 56px;
  height: 56px;
  opacity: 0.5;
}

/* ============================================================
   SERVICES — bigger CTA (#9)
   ============================================================ */

.home-services-cta {
  text-align: center;
  margin-top: var(--spacing-lg);
}

.home-services-cta .btn {
  font-size: var(--font-size-lg);
  padding: 14px 32px;
}

/* B11.6: CTA navy premium — "accesso a un servizio professionale", non promo SaaS.
   Navy profondo, bordo sottile luminoso, testo chiaro, hover lievemente più chiaro. */
.home-services-cta__btn {
  background: linear-gradient(155deg, #143a5c 0%, #0e2c46 100%);
  color: #eaf2fb;
  border: 1px solid rgba(120, 170, 255, 0.4);
  box-shadow: 0 2px 10px rgba(8, 19, 32, 0.35);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.home-services-cta__btn:hover {
  background: linear-gradient(155deg, #1a486e 0%, #123a5c 100%);
  border-color: rgba(150, 195, 255, 0.6);
  box-shadow: 0 4px 16px rgba(8, 19, 32, 0.45);
  color: #fff;
}

/* B11.5: frase-ponte sobria sopra la CTA (infrastruttura → casi d'uso) */
.home-services-cta__lead {
  max-width: 56ch;
  margin: 0 auto var(--spacing-md);
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: var(--text-secondary);
}

.home-services-cta__sub {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: var(--spacing-sm);
}

/* ============================================================
   NETWORK VISUAL — map preview (#10)
   ============================================================ */

.home-network__visual-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: var(--text-hint);
  overflow: hidden;
  border-radius: var(--radius-lg);
  position: relative;
}

.home-network__visual-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  transition: transform 0.3s ease;
}

.home-network__visual-link:hover img {
  transform: scale(1.03);
}

.home-network__visual-label {
  position: absolute;
  bottom: var(--spacing-sm);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.6);
  color: white;
  font-size: var(--font-size-xs);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* ============================================================
   FADE-IN ON SCROLL (#11)
   ============================================================ */

[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-animate].home-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Disable motion for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   SECTION SUBTITLE (shared)
   ============================================================ */

.home-section__subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin: 0;
}

/* ============================================================
   ICON MAPS CAROUSEL — Previsioni territoriali
   ============================================================ */

.home-icon-maps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.home-icon-maps__days {
  display: flex;
  gap: var(--spacing-xs);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.home-icon-maps__days::-webkit-scrollbar { display: none; }

.home-icon-maps__day-tab {
  flex: 0 0 auto;
  padding: 6px 14px;
  font-size: var(--font-size-sm);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.home-icon-maps__day-tab.active {
  background: var(--primary);
  color: white;
}

.home-icon-maps__day-tab:hover:not(.active) {
  background: var(--bg-secondary);
}

.home-icon-maps__viewer {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.home-icon-maps__img-container {
  flex: 1;
  position: relative;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  max-width: 500px;
  margin: 0 auto;
}

.home-icon-maps__img-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.home-icon-maps__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: var(--font-size-xs);
  text-align: center;
}

.home-icon-maps__nav {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-size: 20px;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.home-icon-maps__nav:hover {
  background: var(--bg-secondary);
}

.home-icon-maps__thumbs {
  display: flex;
  gap: var(--spacing-xs);
  justify-content: center;
  flex-wrap: wrap;
}

.home-icon-maps__thumb {
  padding: 4px 12px;
  font-size: var(--font-size-xs);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.home-icon-maps__thumb.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.home-icon-maps__thumb:hover:not(.active) {
  border-color: var(--primary);
}

.home-icon-maps__empty {
  text-align: center;
  padding: var(--spacing-lg);
  color: var(--text-hint);
  font-size: var(--font-size-sm);
}

@media (min-width: 768px) {
  .home-icon-maps__img-container {
    max-width: 600px;
  }
  .home-icon-maps__nav {
    width: 44px;
    height: 44px;
    font-size: 24px;
  }
}

/* ============================================================
   LOCATION MAP — Mappa localita' interattiva
   ============================================================ */

.home-location-map {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.home-location-map__time-tabs {
  display: flex;
  gap: var(--spacing-xs);
  overflow-x: auto;
  scrollbar-width: none;
}

.home-location-map__time-tabs::-webkit-scrollbar { display: none; }

.home-location-map__tab {
  flex: 0 0 auto;
  padding: 6px 14px;
  font-size: var(--font-size-sm);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.home-location-map__tab.active {
  background: var(--primary);
  color: white;
}

.home-location-map__tab:hover:not(.active) {
  background: var(--bg-secondary);
}

.home-location-map__container {
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 300px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-secondary);
  position: relative;
}

.home-location-map__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  color: var(--text-hint);
  font-size: var(--font-size-sm);
}

@media (min-width: 768px) {
  .home-location-map__container {
    aspect-ratio: 16 / 9;
    min-height: 400px;
  }
}

/* ============================================================
   WEATHER MARKERS (MapLibre)
   ============================================================ */

.wx-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  cursor: pointer;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.3));
  transition: transform 0.15s ease;
}

.wx-marker:hover {
  transform: scale(1.1);
}

.wx-marker__icon {
  width: 28px;
  height: 28px;
}

.wx-marker__temp {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--bg-primary);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  line-height: 1.2;
  border: 1px solid var(--border);
}

.wx-marker__name {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-primary);
  padding: 0 4px;
  border-radius: var(--radius-sm);
  line-height: 1.3;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid var(--border);
}

/* Popup styling */
.wx-popup {
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--text-primary);
}

.wx-popup strong {
  font-size: var(--font-size-md);
}

/* MapLibre popup overrides */
.home-location-map__container .maplibregl-popup-content {
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  box-shadow: var(--shadow-md);
  background: var(--bg-primary);
  border: 1px solid var(--border);
}

/* ============================================================
   MICRO-POLISH
   ============================================================ */

/* Reliability pill gap */
.home-section__header-right {
  gap: 16px;
}

/* Explore cards dark hover */
[data-theme="dark"] .home-map-card:hover {
  border-color: rgba(100, 181, 246, 0.3);
}

/* Network visual border */
.home-network__visual {
  border: 1px solid var(--border);
}

/* Services CTA arrow */
.home-services-cta .btn::after {
  content: ' \2192';
}

/* ============================================================
   DAILY FORECAST — 5-day cards
   ============================================================ */

.home-daily {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.home-daily-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--spacing-md) var(--spacing-sm);
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  text-align: center;
  transition: box-shadow var(--transition-normal);
}

.home-daily-card:hover {
  box-shadow: var(--shadow-md);
}

.home-daily-card--today {
  border-color: var(--primary);
  border-width: 2px;
}

.home-daily-card__day {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.home-daily-card__icon {
  width: 40px;
  height: 40px;
  color: var(--primary);
}

.home-daily-card__text {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  text-transform: capitalize;
  line-height: 1.2;
  min-height: 2.4em;
}

.home-daily-card__temps {
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

.home-daily-card__temps-min {
  font-weight: 400;
  opacity: 0.6;
}

.home-daily-card__precip {
  font-size: var(--font-size-xs);
  color: var(--primary);
  white-space: nowrap;
}

.home-daily-card__precip--zero {
  color: var(--text-hint);
}

.home-daily-card__sun {
  font-size: 11px;
  color: var(--text-hint);
  white-space: nowrap;
}

/* Mobile: horizontal scroll instead of grid */
@media (max-width: 599px) {
  .home-daily {
    grid-template-columns: none;
    display: flex;
    gap: var(--spacing-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--spacing-xs);
    scrollbar-width: thin;
    scrollbar-color: rgba(120,120,120,0.16) transparent; /* B14.6: quasi invisibile */
  }
  .home-daily::-webkit-scrollbar { height: 3px; }
  .home-daily::-webkit-scrollbar-track { background: transparent; }
  .home-daily::-webkit-scrollbar-thumb { background: rgba(120,120,120,0.16); border-radius: 3px; }
  .home-daily-card {
    flex: 0 0 130px;
    scroll-snap-align: start;
  }
}

/* ============================================================
   WEBCAM — teaser editoriale cinematico (STEP B10)
   1 hero (Titano) dominante + 2 complementari (costa, Appennino).
   Mood dark/premium, NON una griglia/lista. Coerente con "Osservazioni live".
   ============================================================ */

.home-webcams__note {
  font-size: var(--font-size-xs);
  color: var(--text-hint);
  margin: 4px 0 0;
  max-width: 640px;
}

/* Mobile-first: stack verticale, le webcam "respirano" (niente carosello/miniature) */
.home-webcams {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}
/* Tablet: hero a tutta larghezza, le due complementari affiancate sotto */
@media (min-width: 600px) {
  .home-webcams { grid-template-columns: 1fr 1fr; }
  .home-webcam-card--hero { grid-column: 1 / -1; }
}
/* Desktop: hero dominante a sinistra (16:9), due card impilate a destra */
@media (min-width: 900px) {
  .home-webcams {
    grid-template-columns: 1.6fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .home-webcam-card--hero {
    grid-column: 1;
    grid-row: 1 / span 2;
    aspect-ratio: auto;  /* riempie l'altezza delle due card a destra: bordi allineati */
  }
}

.home-webcam-card {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  background: #0d1b2a;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.home-webcam-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.home-webcam-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, opacity 0.45s ease;
}
.home-webcam-card:hover .home-webcam-card__img { transform: scale(1.04); }

/* Overlay cinematico in basso */
.home-webcam-card__overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 18px 16px 14px;
  color: #fff;
  background: linear-gradient(0deg, rgba(5,12,20,0.86) 0%, rgba(5,12,20,0.40) 55%, rgba(5,12,20,0) 100%);
}
.home-webcam-card__headline {
  font-size: var(--font-size-md);
  font-weight: 700;
  line-height: 1.15;
  text-shadow: 0 1px 6px rgba(0,0,0,0.45);
}
.home-webcam-card--hero .home-webcam-card__headline { font-size: var(--font-size-xl); }
.home-webcam-card__meta {
  font-size: var(--font-size-xs);
  opacity: 0.85;
  margin-top: 3px;
}

/* Freschezza discreta (alto-destra): pallino verde + testo, niente "LIVE" aggressivo */
.home-webcam-card__fresh {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(8,18,28,0.45);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding: 3px 9px;
  border-radius: var(--radius-full);
}
.home-webcam-card__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #43d17a;
  box-shadow: 0 0 6px rgba(67,209,122,0.8);
}
.home-webcam-card__fresh--stale .home-webcam-card__dot { background: #f5b342; box-shadow: none; }

/* Pill temperatura (alto-sinistra): atmosferica, non tecnica */
.home-webcam-card__temp {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 3;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: #fff;
  background: rgba(8,18,28,0.45);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.home-webcam-card__temp[hidden] { display: none; }

/* Mobile: titolo hero un filo più contenuto */
@media (max-width: 599px) {
  .home-webcam-card__headline { font-size: var(--font-size-lg); }
}

/* ============================================================
   TIMELINE — "now" indicator on first card
   ============================================================ */

.home-hour-card--now {
  border-color: var(--primary);
  border-width: 2px;
}


/* ============================================================
   ICON MAPS — Expand button
   ============================================================ */

.home-icon-maps__expand {
  position: absolute;
  bottom: 32px;
  right: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border-radius: var(--radius-sm);
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
  z-index: 2;
}

.home-icon-maps__img-container:hover .home-icon-maps__expand {
  opacity: 1;
}

.home-icon-maps__expand:hover {
  background: rgba(0, 0, 0, 0.75);
}

/* Always visible on touch */
@media (hover: none) {
  .home-icon-maps__expand {
    opacity: 0.7;
  }
}

/* ============================================================
   WEATHER MARKERS — Halo + mobile hitbox
   ============================================================ */

.wx-marker__temp {
  text-shadow:
    0 0 3px var(--bg-primary),
    0 0 3px var(--bg-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.wx-marker__name {
  text-shadow:
    0 0 2px var(--bg-primary),
    0 0 2px var(--bg-primary);
}

[data-theme="dark"] .wx-marker__temp,
[data-theme="dark"] .wx-marker__name {
  text-shadow:
    0 0 3px var(--bg-primary),
    0 0 3px var(--bg-primary),
    0 0 6px rgba(0, 0, 0, 0.5);
}

@media (hover: none) and (pointer: coarse) {
  .wx-marker {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
}

/* ============================================================
   HERO — Data status micro-row
   ============================================================ */

.home-hero__data-status {
  font-size: var(--font-size-xs);
  opacity: 0.6;
  margin-top: 2px;
}

/* ============================================================
   RELIABILITY TOOLTIP — allow wrapping for dynamic content
   ============================================================ */

.home-reliability__tip {
  white-space: normal;
  max-width: 280px;
  text-align: left;
  line-height: 1.4;
}

/* ============================================================
   CLIMATE SECTION — Normali climatiche
   ============================================================ */

.home-climate {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.home-climate-card {
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: var(--spacing-md);
}

.home-climate-card__title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.home-climate-card__date {
  font-size: var(--font-size-xs);
  color: var(--text-hint);
  margin-bottom: var(--spacing-sm);
}

.home-climate-card__values {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.home-climate-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.home-climate-card__label {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

.home-climate-card__value {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.home-climate-card__value small {
  font-weight: 400;
  opacity: 0.7;
}

@media (max-width: 599px) {
  .home-climate {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ANOMALY — Daily card + Hero
   ============================================================ */

.home-daily-card__anomaly {
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}

.anomaly--warm {
  color: #e65100;
}

.anomaly--cold {
  color: #0277bd;
}

.anomaly--neutral {
  color: var(--text-hint);
}

.anomaly--strong.anomaly--warm {
  color: #bf360c;
  font-weight: 600;
}

.anomaly--strong.anomaly--cold {
  color: #01579b;
  font-weight: 600;
}

[data-theme="dark"] .anomaly--warm {
  color: #ff9800;
}

[data-theme="dark"] .anomaly--cold {
  color: #4fc3f7;
}

[data-theme="dark"] .anomaly--strong.anomaly--warm {
  color: #ffb74d;
}

[data-theme="dark"] .anomaly--strong.anomaly--cold {
  color: #81d4fa;
}

/* Hero anomaly line (ora in blocco testuale chiaro) */
.home-hero__current-anomaly {
  font-size: 12px;
  color: var(--text-hint);
  margin-top: 0;
  margin-bottom: 2px;
  text-align: center;
}

.home-hero__current-anomaly .anomaly--warm {
  color: #e65100;
}

.home-hero__current-anomaly .anomaly--cold {
  color: #0277bd;
}

.home-hero__current-anomaly .anomaly--neutral {
  opacity: 0.7;
}

[data-theme="dark"] .home-hero__current-anomaly .anomaly--warm {
  color: #ffcc80;
}

[data-theme="dark"] .home-hero__current-anomaly .anomaly--cold {
  color: #80d8ff;
}

/* ============================================================
   NEW SECTIONS — Ristrutturazione 2026-03-18
   ============================================================ */

/* Snow/weather alert banner */
.home-snow-alert {
  padding: 12px 16px;
  background: linear-gradient(135deg, #1565c0, #0d47a1);
  color: white;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

.home-snow-alert strong {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
}

/* Sezione Consigli "La tua giornata" */
.home-advice {
  display: grid;
  gap: 12px;
}

.home-advice__card {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.4;
}

.home-advice__icon {
  font-size: 20px;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}

.home-advice__body {
  flex: 1;
  min-width: 0;
}

.home-advice__title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
  color: var(--text-primary);
}

.home-advice__text {
  color: var(--text-secondary);
  font-size: 13px;
}

/* Aree omogenee (quota vs pianura) */
.home-advice__zones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.home-advice__zone {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.home-advice__zone-temp {
  font-weight: 700;
  font-size: 16px;
}

/* Comfort termico semaforo */
.home-advice__comfort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  margin-top: 4px;
}

/* Daily compact (3 cards) */
.home-daily--compact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
}

@media (max-width: 480px) {
  .home-daily--compact {
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
  }
}

/* Bollettino settimanale */
.home-weekly__text {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

/* Mappe full-width su mobile */
.home-icon-maps__viewer--fullwidth {
  margin-left: calc(-1 * var(--spacing-md));
  margin-right: calc(-1 * var(--spacing-md));
}

@media (min-width: 768px) {
  .home-icon-maps__viewer--fullwidth {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Sezione costa/mare */
.home-coast__card {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  align-items: center;
}

.home-coast__icon {
  font-size: 32px;
  flex-shrink: 0;
}

.home-coast__info {
  flex: 1;
  min-width: 0;
}

.home-coast__title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 4px;
}

.home-coast__detail {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Webcam + satellite merged section */
.home-webcams-sat {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
}

.home-sat-thumb {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  text-decoration: none;
  color: inherit;
}

.home-sat-thumb__img {
  width: 100%;
  height: auto;
  display: block;
}

.home-sat-thumb__label {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0,0,0,0.6);
  color: white;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

/* Banner servizi compatto */
.home-services-banner {
  padding: var(--spacing-md);
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
}

.home-services-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  max-width: 800px;
  margin: 0 auto;
  font-size: var(--font-size-sm);
}

.home-services-banner__desc {
  display: block;
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  margin-top: 2px;
}

@media (max-width: 600px) {
  .home-services-banner__inner {
    flex-direction: column;
    text-align: center;
  }
}

/* Footer enhancements */
.home-footer__stats {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xs);
}

.home-footer__brand {
  font-weight: 500;
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

/* Section inline subtitle (next to title) */
.home-section__subtitle-inline {
  font-size: var(--font-size-xs);
  color: var(--text-hint);
}

/* ============================================================
   B2) HERO "Titano" — two-column, background atmosferico (2026-05-23, STEP B)
   Estende/override la sezione B) per l'above-the-fold identitario.
   ============================================================ */

.home-hero--titano {
  position: relative;
  background: #0d1f30;
  color: #fff;
  overflow: hidden;
  padding: 0;
}

/* Sfondo Monte Titano (webp + fallback jpg) */
.home-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: image-set(
    url('/assets/img/hero-titano-day.webp') type('image/webp'),
    url('/assets/img/hero-titano-day.jpg')  type('image/jpeg'));
  background-image: -webkit-image-set(
    url('/assets/img/hero-titano-day.webp') type('image/webp'),
    url('/assets/img/hero-titano-day.jpg')  type('image/jpeg'));
  /* fallback per browser senza image-set */
  background-color: #0d1f30;
  background-size: cover;
  background-position: 72% center;
}

/* Overlay scuro per leggibilità: più denso a sinistra (dove c'è il copy) */
.home-hero--titano::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(7,17,28,0.80) 0%, rgba(7,17,28,0.50) 40%, rgba(7,17,28,0.08) 72%, rgba(7,17,28,0.26) 100%),
    linear-gradient(0deg,  rgba(7,17,28,0.40) 0%, rgba(7,17,28,0.0) 42%);
}

.home-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4.25rem) var(--spacing-md) clamp(1.5rem, 3vw, 2.5rem);
  display: grid;
  gap: var(--spacing-lg);
  grid-template-columns: 1fr;
  grid-template-areas: "copy" "live" "badges";
}

/* --- Copy (sinistra) --- */
.home-hero__copy { grid-area: copy; max-width: 620px; }

.home-hero__eyebrow {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8fc2ff;
  margin-bottom: var(--spacing-sm);
}

.home-hero__h1 {
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--spacing-md);
}

.home-hero__lead {
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.55;
  opacity: 0.94;
  margin: 0 0 var(--spacing-sm);
}

.home-hero__lead strong { color: #bcdcff; font-weight: 600; }

.home-hero__micro {
  font-size: var(--font-size-sm);
  line-height: 1.5;
  opacity: 0.72;
  margin: 0 0 var(--spacing-lg);
}

/* CTA */
.home-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.home-hero__cta .btn { padding: 12px 22px; font-size: var(--font-size-md); }

.home-hero__btn-ghost {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.home-hero__btn-ghost:hover { background: rgba(255,255,255,0.18); border-color: #fff; }

.home-hero__textlink {
  display: inline-block;
  color: rgba(255,255,255,0.62);
  text-decoration: none;
  font-size: var(--font-size-xs);
  font-weight: 400;
}
.home-hero__textlink:hover { color: #9fcbff; text-decoration: underline; }

/* --- Card live (destra) --- */
.home-hero__live {
  grid-area: live;
  align-self: start;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md) var(--spacing-lg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.28);
}

.home-hero__live-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-sm);
}
.home-hero__live-place { font-size: var(--font-size-md); font-weight: 600; }
.home-hero__live-alt { font-size: var(--font-size-xs); opacity: 0.7; margin-top: 2px; }

.home-hero__live-temp { font-size: 56px; font-weight: 700; line-height: 1.05; letter-spacing: -1px; margin-top: 6px; }
.home-hero__live-cond { font-size: var(--font-size-sm); opacity: 0.85; margin-bottom: var(--spacing-md); }

.home-hero__live-params {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid rgba(255,255,255,0.14);
}
.home-hero__param { display: flex; align-items: center; gap: 8px; }
.home-hero__param-ico { font-size: 18px; flex-shrink: 0; }
.home-hero__param-val { display: block; font-size: var(--font-size-md); font-weight: 600; line-height: 1.1; }
.home-hero__param-lbl { display: block; font-size: 11px; opacity: 0.65; }

.home-hero__live-status { font-size: var(--font-size-xs); opacity: 0.6; margin-top: var(--spacing-md); }

/* --- Badge proof (sotto il copy) --- */
.home-hero__badges {
  grid-area: badges;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}
.home-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.82);
  white-space: nowrap;
}

/* --- Riga fiducia --- */
.home-hero__trust {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-xs);
  opacity: 0.6;
}

/* --- Desktop: due colonne, card live a destra su due righe --- */
@media (min-width: 900px) {
  .home-hero__inner {
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-areas:
      "copy live"
      "badges live";
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
  }
  .home-hero__live { margin-top: 4px; }
  .home-hero__live-temp { font-size: 64px; }
}

/* --- Mobile: hero compatto, no micro, params 2x2 --- */
@media (max-width: 640px) {
  .home-hero__micro { display: none; }
  .home-hero__inner { gap: var(--spacing-md); padding-top: clamp(1.5rem, 6vw, 2rem); }
  .home-hero__h1 { margin-bottom: var(--spacing-sm); }
  .home-hero__lead { margin-bottom: var(--spacing-md); }
  .home-hero__cta { margin-bottom: 6px; }
  .home-hero__cta .btn { flex: 1 1 auto; text-align: center; }
  .home-hero__live { padding: var(--spacing-md); }
  .home-hero__live-temp { font-size: 44px; margin-top: 2px; }
  .home-hero__live-cond { margin-bottom: var(--spacing-sm); }
  .home-hero__live-params { gap: 8px var(--spacing-sm); }
  .home-hero__live-status { margin-top: var(--spacing-sm); }
  .home-hero__bg { background-position: 65% center; }
}

/* ============================================================
   C2) PROSSIME ORE — timeline oraria premium (2026-05-23, STEP B3)
   Estende la sezione C). Scope: solo la sezione "Prossime ore".
   ============================================================ */

.home-hours__note {
  font-size: var(--font-size-xs);
  color: var(--text-hint);
  margin: 4px 0 0;
}

/* Timeline: un filo più d'aria tra le card */
.home-timeline--hours { gap: 10px; padding-bottom: var(--spacing-xs); }

/* Card oraria: compatta, morbida, premium (no look enterprise) */
.home-timeline--hours .home-hour-card {
  width: 80px;
  gap: 6px;
  padding: 12px 8px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.home-timeline--hours .home-hour-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(26,115,232,0.25);
}

/* Slot "Adesso": accento primario leggero */
/* B14.5: "Adesso" = stato corrente, non tab selezionata → bordo/fill più sobri */
.home-timeline--hours .home-hour-card--now {
  border-color: rgba(26,115,232,0.38);
  background: linear-gradient(180deg, rgba(26,115,232,0.06), rgba(26,115,232,0));
}
.home-timeline--hours .home-hour-card--now .home-hour-card__time { color: var(--primary); font-weight: 600; }

/* Ora */
.home-timeline--hours .home-hour-card__time {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-secondary);
}

/* Icona meteo (SVG procedurale da WxIconEngine): contenitore che centra l'svg.
   L'svg ha width/height espliciti (size passato a render); qui si centra soltanto. */
.home-timeline--hours .home-hour-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  line-height: 0;
}

/* Temperatura */
.home-timeline--hours .home-hour-card__temp {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--text-primary);
}

/* Precipitazione (testo, non barra) */
.home-hour-card__rain {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
}
.home-hour-card__rain--zero { color: var(--text-hint); font-weight: 400; }

/* Vento sintetico */
.home-timeline--hours .home-hour-card__wind {
  font-size: 11px;
  color: var(--text-hint);
}

/* Mobile: card un filo più strette per vederne 4 subito */
@media (max-width: 599px) {
  .home-timeline--hours .home-hour-card { width: 70px; padding: 10px 6px; }
}

/* ============================================================
   D2) PROSSIMI GIORNI — sintesi settimanale compatta + affidabilità (2026-05-23, STEP B4)
   Scope: solo la sezione "Prossimi giorni".
   ============================================================ */

.home-daily__note {
  font-size: var(--font-size-xs);
  color: var(--text-hint);
  margin: 4px 0 0;
}

/* 7 giorni in riga su desktop ampio */
.home-daily--week {
  grid-template-columns: repeat(7, 1fr);
  gap: var(--spacing-sm);
}

/* Card più basse e dense (meno vuoto del wireframe iniziale) */
.home-daily--week .home-daily-card {
  gap: 4px;
  padding: 12px 8px;
}
.home-daily--week .home-daily-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; line-height: 0; }
.home-daily--week .home-daily-card__text { min-height: 0; }   /* via lo spazio vuoto forzato */
.home-daily--week .home-daily-card__temps { font-size: var(--font-size-md); }

/* Indicatore di affidabilità — discreto, informativo (no badge marketing) */
.home-daily-card__rel {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.home-daily-card__rel-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-hint);
}
/* B14.5: toni desaturati, "meteo editoriale" non "uptime monitor SaaS" */
.home-daily-card__rel--high .home-daily-card__rel-dot { background: #7d9d83; }
.home-daily-card__rel--med  .home-daily-card__rel-dot { background: #c2a14e; }
.home-daily-card__rel--low  .home-daily-card__rel-dot { background: #bf8a6b; }

/* Tablet (600–899px): scroll orizzontale invece di stringere 7 colonne */
@media (min-width: 600px) and (max-width: 899px) {
  .home-daily--week {
    display: flex;
    gap: var(--spacing-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--spacing-xs);
    scrollbar-width: thin;
  }
  .home-daily--week .home-daily-card { flex: 0 0 132px; scroll-snap-align: start; }
}

/* Mobile: card compatte, swipe-friendly */
@media (max-width: 599px) {
  .home-daily--week .home-daily-card { flex: 0 0 124px; padding: 10px 8px; }
}

/* ============================================================
   E2) OSSERVAZIONI TERRITORIALI LIVE — showcase osservativo (STEP B6, 2026-05-23)
   Scope: solo la sezione "Osservazioni territoriali live" (ex "Mappe previsionali").
   Layout bento: la temperatura è la hero-card; fulmini e vento la affiancano.
   Obiettivo: "finestra viva sul territorio", non libreria di mappe.
   ============================================================ */

.home-obslive__note {
  font-size: var(--font-size-xs);
  color: var(--text-hint);
  margin: 4px 0 0;
  max-width: 640px;
}

/* Mobile-first: stack verticale, preview grandi, ritmo forte */
.home-obslive {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
}
/* Tablet: due card affiancate (palco Temperatura + Vento) */
@media (min-width: 600px) {
  .home-obslive { grid-template-columns: 1fr 1fr; }
}
/* Desktop: 2-up — palco Temperatura protagonista a sinistra, Vento a destra.
   La hero fissa l'altezza; la card vento si allunga ad affiancarla.
   Aspect 3/2 (era 16/10): la card a due zone ha bisogno di un po' più d'altezza
   perché la ZONA MAPPA (sotto cui c'è il footer) contenga tutto il territorio —
   altrimenti con preserveAspectRatio=slice i Castelli più a sud venivano tagliati. */
@media (min-width: 900px) {
  .home-obslive { grid-template-columns: 1.6fr 1fr; align-items: stretch; }
  /* selettori a 2 classi: vincono sulla base .home-obslive__card { aspect-ratio: 4/3 }
     che sta più in basso nel file. La hero fissa l'altezza, il vento si allunga. */
  .home-obslive .home-obslive__card--hero { aspect-ratio: 3 / 2; }
  .home-obslive .home-obslive__card--wind { aspect-ratio: auto; }
}

.home-obslive__card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  background: #eaf2fb;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.home-obslive__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

.home-obslive__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.55s ease;
}
.home-obslive__card:hover .home-obslive__img { transform: scale(1.05); }
/* I nuclei radar/temporaleschi stanno sul lato destro/basso: inquadra lì */
.home-obslive__img--storm { object-position: 72% 62%; }

/* Micro-tag discreto in alto a sinistra (freschezza premium, niente countdown) */
.home-obslive__tag {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(13, 31, 48, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 3px 9px;
  border-radius: var(--radius-full);
}
.home-obslive__tag--live { background: rgba(46, 125, 50, 0.78); }

/* Overlay titolo in basso */
.home-obslive__overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 16px 14px 12px;
  color: #fff;
  background: linear-gradient(0deg, rgba(7,17,28,0.88) 0%, rgba(7,17,28,0.45) 55%, rgba(7,17,28,0) 100%);
}
.home-obslive__title { font-size: var(--font-size-lg); font-weight: 700; line-height: 1.1; }
.home-obslive__desc { font-size: var(--font-size-xs); opacity: 0.88; margin-top: 2px; }

/* Micro-sintesi territoriale "finita" (leggibile senza cliccare): una riga
   sempre-vera derivata dai dati live. Pittogramma a sinistra via ::before. */
.home-obslive__live {
  margin-top: 8px;
  position: relative;
  padding-left: 15px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  letter-spacing: 0.005em;
}
/* dot in absolute: il testo (misto a <b>) deve fluire e andare a capo come
   testo normale — display:flex lo spezzerebbe in colonne sui <b> inline */
.home-obslive__live::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(120,170,255,0.9);
  box-shadow: 0 0 0 3px rgba(120,170,255,0.18);
}
.home-obslive__card--hero .home-obslive__live { font-size: var(--font-size-sm); margin-top: 10px; }
.home-obslive__live b { font-weight: 700; }

/* La hero (temperatura) parla più forte: titolo più grande e overlay più alto */
.home-obslive__card--hero .home-obslive__overlay { padding: 22px 18px 16px; }
.home-obslive__card--hero .home-obslive__title { font-size: var(--font-size-xl); }
.home-obslive__card--hero .home-obslive__desc { font-size: var(--font-size-sm); }

/* Mobile: preview grandi e verticali, ritmo forte */
@media (max-width: 599px) {
  .home-obslive__card { aspect-ratio: 16 / 10; }
  /* Palco a due zone su mobile: card + ALTA (quasi quadrata) perché deve contenere
     mappa + striscia chip + footer impilati. Le card sono in colonna su mobile,
     quindi non serve l'allineamento con la card vento (che resta col suo formato). */
  .home-obslive__card--stage { aspect-ratio: 9 / 10; }
}

/* Card vento — canvas particelle (fallback 2D home-wind-particles.js; il motore
   WebGL si stila inline): sopra lo sfondo hillshade, sotto l'overlay testo */
.home-wind-canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* ============================================================
   PALCO TERRITORIALE (Release 1, round 6) — home-territory-stage.js
   La card "Temperatura osservata" diventa una mappa interattiva di SM:
   raster 100 m + 9 pin Castelli + chips (Temperatura·Pioggia·Anomalia) +
   scrubber discreto + popover. Tema dark, dentro .home-obslive__card--hero.
   ============================================================ */
/* Card a DUE ZONE (Marco + ChatGPT 2026-06-16): mappa immersiva sopra + footer
   narrativo sotto. Flex-column; l'aspect-ratio della card (16/10 desktop, 4/3
   mobile, da .home-obslive__card--hero) fissa l'altezza → la card vento resta
   allineata. La zona mappa prende lo spazio residuo, il footer è auto. */
.home-obslive__card--stage { background: #0d1422; cursor: default; display: flex; flex-direction: column; }
/* la mappa è interattiva: niente lift/scale da "link" */
.home-obslive__card--stage:hover { transform: none; box-shadow: var(--shadow-sm); }
.home-obslive__card--stage:hover .home-obslive__img { transform: none; }

/* ZONA MAPPA — contenitore relativo che ospita img fallback, tag, SVG e .ts-ui
   (tutti absolute al suo interno). overflow:hidden per il bordo arrotondato top. */
.home-obslive__mapzone { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }

/* ZONA FOOTER — titolo + sintesi + CTA. Pannello-didascalia DISTINTO sotto la
   mappa: fondo un filo più chiaro del campo mappa (#0d1422) + hairline + ombra
   morbida verso l'alto, così la mappa "galleggia" sopra il footer (separatore). */
.home-obslive__footer {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px;
  background: #111b2d;
  border-top: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 -12px 18px -14px rgba(0,0,0,0.6);
  color: #fff;
}
.home-obslive__footer-text { min-width: 0; flex: 1 1 auto; }
.home-obslive__card--stage .home-obslive__footer .home-obslive__title {
  font-size: var(--font-size-md); font-weight: 700; line-height: 1.15;
}
.home-obslive__card--stage .home-obslive__footer .home-obslive__live {
  margin-top: 4px; font-size: var(--font-size-xs);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
/* CTA del footer (rimpiazza la vecchia .ts-cta absolute) */
.home-obslive__cta {
  flex: 0 0 auto;
  font: 600 12px/1 var(--font-family, system-ui);
  color: #eaf2fb; text-decoration: none; white-space: nowrap;
  background: rgba(46,110,190,0.22);
  border: 1px solid rgba(120,170,255,0.45);
  padding: 8px 13px; border-radius: var(--radius-full);
  transition: background 0.2s ease;
}
.home-obslive__cta:hover { background: rgba(46,110,190,0.45); }

/* Commento "situazione attuale" — caption divulgativa full-width SOTTO le card:
   legge a parole il campo termico osservato (disagio UTCI + scarto dalla norma).
   Accento sinistro colorato per severità (--cap-accent, impostato dal palco). */
.home-obslive__caption {
  margin: 16px 0 0;
  padding: 12px 16px;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--text-secondary);           /* segue il tema (chiaro/scuro) */
  background: rgba(120,170,255,0.07);
  border: 1px solid rgba(120,170,255,0.16);
  border-left: 3px solid var(--cap-accent, rgba(120,170,255,0.7));
  border-radius: var(--radius-md, 12px);
}
.home-obslive__caption b { font-weight: 700; color: var(--text-primary); }

.ts-svg { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; }

.ts-ui { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ts-ui > * { pointer-events: auto; }

/* chipbar — colonna in alto a destra (il tag "Titano 100" è in alto a sinistra):
   riga chip + micro-toggle "Estremi ieri" + badge raffica, impilati e allineati a dx */
.ts-chipbar {
  position: absolute; top: 8px; right: 8px; z-index: 4;
  display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
  max-width: calc(100% - 110px);
}
.ts-chips {
  display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end;
  max-width: 100%;
}
.ts-chip {
  font: 600 10px/1 var(--font-family, system-ui);
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.82);
  background: rgba(13,31,48,0.55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 5px 9px; border-radius: var(--radius-full);
  cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ts-chip:hover { color: #fff; background: rgba(26,58,92,0.7); }
.ts-chip.on {
  color: #fff;
  background: rgba(46,110,190,0.85);
  border-color: rgba(120,170,255,0.55);
}

/* chip aggregato "Estremi ieri" — chiaramente di 2° livello (dati consolidati di
   ieri, non live): più piccolo, desaturato, bordo tratteggiato. Apre il micro-toggle. */
.ts-chip--estremi {
  font-size: 9.5px;
  color: rgba(255,255,255,0.62);
  background: rgba(13,31,48,0.4);
  border-style: dashed; border-color: rgba(255,255,255,0.2);
}
.ts-chip--estremi:hover { color: #fff; background: rgba(40,60,86,0.6); }
.ts-chip--estremi.on {
  color: #fff;
  background: rgba(72,92,120,0.85);
  border-style: solid; border-color: rgba(170,190,215,0.6);
}

/* micro-toggle Massime/Minime dentro la card — compare solo col chip "Estremi
   ieri" attivo. Segmented control compatto, 2° livello. */
.ts-subtoggle {
  display: inline-flex; gap: 2px; padding: 2px;
  border-radius: var(--radius-full);
  background: rgba(7,17,28,0.62);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.14);
}
.ts-subtoggle[hidden] { display: none; }
.ts-subtoggle__btn {
  font: 600 9.5px/1 var(--font-family, system-ui); letter-spacing: 0.02em;
  color: rgba(255,255,255,0.7); background: transparent; border: none;
  padding: 4px 9px; border-radius: var(--radius-full); cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.ts-subtoggle__btn:hover { color: #fff; }
.ts-subtoggle__btn.on { color: #0d1422; background: rgba(190,205,225,0.92); }

/* Badge CONTESTUALE "Raffiche forti" — appare solo in modalità vento forte.
   NON è un chip pari-grado (round 6 fix #2): più piccolo e staccato, tono ambra
   "attenzione" (niente rosso allerta). Cliccabile → apre il layer raffica. */
.ts-gust-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font: 700 9px/1 var(--font-family, system-ui); letter-spacing: 0.02em;
  color: #ffe6c2;
  background: rgba(120,72,18,0.5);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid rgba(230,165,74,0.55);
  padding: 4px 8px; border-radius: var(--radius-full);
  cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
}
.ts-gust-badge__icon { font-size: 9px; line-height: 1; }
.ts-gust-badge:hover { color: #fff; background: rgba(150,92,26,0.78); }
.ts-gust-badge.on {
  color: #2a1a08;
  background: rgba(230,165,74,0.95);
  border-color: rgba(255,210,150,0.85);
}
.ts-gust-badge.is-recent { opacity: 0.85; }

/* legenda minimale — in alto a sinistra sotto il tag, quasi invisibile */
.ts-legend {
  position: absolute; top: 38px; left: 10px;
  width: 116px;
  opacity: 0.78;
}
.ts-legend__bar { height: 5px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,0.3); }
.ts-legend__labels {
  display: flex; justify-content: space-between;
  margin-top: 3px;
  font: 500 8.5px/1 var(--font-family, system-ui);
  color: rgba(255,255,255,0.7);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* scrubber discreto — striscia sottile al bordo inferiore della zona mappa
   (il testo editoriale è nel footer sotto, non più sopra la mappa) */
.ts-scrub {
  position: absolute; left: 14px; right: 14px; bottom: 12px;
  display: flex; align-items: center; gap: 8px;
  opacity: 0.6; transition: opacity 0.2s ease;
}
/* l'attributo hidden deve vincere su display:flex (layer daily senza scrubber) */
.ts-scrub[hidden] { display: none; }
.ts-scrub:hover, .ts-scrub:focus-within { opacity: 1; }
.ts-scrub__range {
  flex: 1 1 auto; height: 3px; -webkit-appearance: none; appearance: none;
  background: rgba(255,255,255,0.25); border-radius: 3px; outline: none; cursor: pointer;
}
.ts-scrub__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border-radius: 50%;
  background: #cfe0f5; border: 2px solid rgba(46,110,190,0.9);
  box-shadow: 0 1px 3px rgba(0,0,0,0.5); cursor: pointer;
}
.ts-scrub__range::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: #cfe0f5; border: 2px solid rgba(46,110,190,0.9); cursor: pointer;
}
.ts-scrub__time {
  font: 600 10px/1 var(--font-family, system-ui);
  color: rgba(255,255,255,0.85); text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  min-width: 44px; text-align: right; white-space: nowrap;
}

/* CTA discreta "apri osservazioni" — in basso a destra, sopra l'overlay */
.ts-cta {
  position: absolute; right: 12px; bottom: 14px; z-index: 4;
  font: 600 11px/1 var(--font-family, system-ui);
  color: #eaf2fb; text-decoration: none;
  background: rgba(13,31,48,0.6);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid rgba(120,170,255,0.35);
  padding: 6px 11px; border-radius: var(--radius-full);
  transition: background 0.2s ease;
}
.ts-cta:hover { background: rgba(26,72,110,0.8); }

/* popover su tap pin */
.ts-pop {
  position: absolute; z-index: 5; transform: translate(-50%, -118%);
  min-width: 132px; max-width: 200px;
  background: rgba(7,17,28,0.96);
  border: 1px solid rgba(120,170,255,0.5);
  border-radius: 8px; padding: 8px 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  pointer-events: none;
}
.ts-pop__t { font: 700 12px/1.2 var(--font-family, system-ui); color: #eef2f8; margin-bottom: 4px; }
.ts-pop__t span { font-weight: 500; color: rgba(255,255,255,0.6); }
.ts-pop__r { font: 500 11px/1.5 var(--font-family, system-ui); color: rgba(255,255,255,0.82); }
.ts-pop__r b { font-weight: 700; color: #fff; }
.ts-pop__minmax { margin-top: 3px; padding-top: 3px; border-top: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.7); }

@media (prefers-reduced-motion: reduce) {
  .ts-chip, .ts-subtoggle__btn, .ts-gust-badge, .ts-scrub, .ts-cta { transition: none; }
}

/* mobile: chips e scrub leggermente più grandi per il tocco; overlay testo
   COMPATTATO sul palco (R1.1) così non copre i pin dei castelli più bassi:
   titolo più piccolo, desc nascosta (i chip dicono già il parametro), gradiente
   più corto, padding ridotto. Lo scrub si abbassa di conseguenza. */
@media (max-width: 599px) {
  .ts-chip { padding: 6px 10px; font-size: 11px; flex: 0 0 auto; }
  .ts-chip--estremi { font-size: 10px; padding: 5px 9px; }
  /* MOBILE: la chipbar NON è più sopra la mappa — diventa una STRISCIA statica
     tra zona mappa e footer (decisione Marco 2026-06-16). Così la mappa resta
     pulita e la punta nord non finisce sotto i chip. Carosello orizzontale. */
  .ts-chipbar {
    position: static; z-index: auto;
    flex-direction: column; align-items: flex-start; gap: 6px;
    max-width: none; width: 100%;
    padding: 8px 10px;
    /* la chip-strip è la cima del "pannello" sotto la mappa → porta il separatore
       (bordo + ombra), stesso fondo del footer così formano un pannello continuo */
    background: #111b2d;
    border-top: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 -12px 18px -14px rgba(0,0,0,0.6);
  }
  .ts-chips {
    width: 100%; max-width: 100%;
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 1px;
  }
  .ts-chips::-webkit-scrollbar { display: none; }
  .ts-subtoggle__btn { font-size: 10px; padding: 5px 10px; }
  /* legenda nascosta su mobile: i valori esatti sono sui pin, la mappa respira */
  .ts-legend { display: none; }
  /* footer del palco più compatto su mobile; il separatore lo porta già la
     chip-strip sopra → qui niente bordo/ombra (pannello continuo chip+footer) */
  .home-obslive__footer { padding: 9px 12px; gap: 10px; border-top: none; box-shadow: none; }
  .home-obslive__card--stage .home-obslive__footer .home-obslive__title { font-size: var(--font-size-sm); }
  /* la sintesi può andare a 2 righe su mobile (1 riga la troncava: "Più fresco San…") */
  .home-obslive__card--stage .home-obslive__footer .home-obslive__live { -webkit-line-clamp: 2; }
  .home-obslive__cta { padding: 7px 11px; font-size: 11px; }
  .ts-scrub { bottom: 10px; }
}

/* ============================================================
   RADAR · SATELLITE IN DIRETTA (Release 2, round 6) — home-radar-live.js
   Scena full-width dopo le osservazioni territoriali. Dark cinematica.
   ============================================================ */
.home-radar-section { background: var(--bg-secondary); }
.rs-stage {
  position: relative;
  width: 100%; max-width: 960px; margin: 18px auto 0;
  aspect-ratio: 600 / 360;
  background: #060b14;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.rs-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: fill;            /* coerente con SVG preserveAspectRatio=none */
}
.rs-img--sat { z-index: 1; }
.rs-img--radar { z-index: 2; }
.rs-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }

/* badge LIVE (alto sx) */
.rs-live {
  position: absolute; top: 10px; left: 10px; z-index: 4;
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 10px/1 var(--font-family, system-ui); letter-spacing: 0.04em;
  color: #eaf2fb; background: rgba(7,17,28,0.6);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  padding: 4px 9px; border-radius: var(--radius-full);
}
.rs-live .dot { width: 7px; height: 7px; border-radius: 50%; background: #3fb950; box-shadow: 0 0 0 3px rgba(63,185,80,0.22); }
.rs-live--stale { color: #d97757; }
.rs-live--stale .dot { background: #d97757; box-shadow: 0 0 0 3px rgba(217,119,87,0.22); }

/* contatore fulmini (alto dx) */
.rs-bolts {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  font: 700 10px/1 var(--font-family, system-ui); letter-spacing: 0.02em;
  color: #ffe14d; background: rgba(7,17,28,0.6);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  padding: 4px 9px; border-radius: var(--radius-full);
}

/* controlli (basso) */
.rs-controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 28px 12px 10px;
  background: linear-gradient(0deg, rgba(6,11,20,0.92) 0%, rgba(6,11,20,0.5) 60%, rgba(6,11,20,0) 100%);
}
.rs-channels { display: flex; gap: 4px; }
.rs-chan {
  font: 600 10px/1 var(--font-family, system-ui); letter-spacing: 0.02em;
  color: rgba(255,255,255,0.82); background: rgba(13,31,48,0.6);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 6px 11px; border-radius: var(--radius-full); cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.rs-chan:hover { color: #fff; background: rgba(26,58,92,0.7); }
.rs-chan.on { color: #fff; background: rgba(46,110,190,0.9); border-color: rgba(120,170,255,0.6); }
.rs-chan--off { opacity: 0.35; cursor: not-allowed; }

.rs-timeline { display: flex; align-items: center; gap: 9px; flex: 1 1 220px; min-width: 180px; }
.rs-play {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(46,110,190,0.9); color: #fff; border: none; cursor: pointer;
  font-size: 11px; line-height: 1; display: inline-flex; align-items: center; justify-content: center;
}
.rs-play:hover { background: rgba(66,130,210,1); }
.rs-range {
  flex: 1 1 auto; height: 3px; -webkit-appearance: none; appearance: none;
  background: rgba(255,255,255,0.25); border-radius: 3px; outline: none; cursor: pointer;
}
.rs-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 13px; height: 13px; border-radius: 50%; background: #cfe0f5; border: 2px solid rgba(46,110,190,0.9); cursor: pointer; }
.rs-range::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: #cfe0f5; border: 2px solid rgba(46,110,190,0.9); cursor: pointer; }
.rs-time { font: 600 11px/1 var(--font-family, system-ui); color: rgba(255,255,255,0.9); min-width: 76px; text-align: right; white-space: nowrap; }

/* micro-footer tecnico (sotto i controlli, dentro la stage) */
.rs-foot {
  position: absolute; left: 12px; bottom: 44px; z-index: 5;
  font: 500 9.5px/1.2 var(--font-family, system-ui); letter-spacing: 0.02em;
  color: rgba(255,255,255,0.62); text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  pointer-events: none;
}

@media (max-width: 599px) {
  .rs-stage { margin-top: 12px; }
  /* footer tecnico in ALTO (sotto il badge LIVE) per non accavallarsi ai chip
     canale dei controlli in basso (R2.1) */
  .rs-foot { top: 32px; bottom: auto; left: 10px; right: 10px; font-size: 8.5px; max-width: none; }
  .rs-controls { gap: 8px; padding: 24px 10px 9px; }
  .rs-time { min-width: 64px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-chan, .rs-play { transition: none; }
}