/* Home: tutti i riquadri seguono un'unica misura.
   Stessa larghezza di colonna, stessa altezza minima e stesso raggio: su
   desktop la Home diventa una pila ordinata di riquadri identici, su telefono
   ogni riquadro prende tutta la larghezza senza sbordare.
   Questo foglio si carica per ultimo e quindi vince sulle misure sparse
   negli altri fogli. */

:root {
  --home-box-max: 1120px;
  --home-box-gutter: 24px;
  --home-box-gap: 24px;
  --home-box-radius: 24px;
  --home-box-min: 300px;
  --home-card-min: 150px;
  --home-note-min: 200px;
}

/* Colonna unica: ogni riquadro della Home ha la stessa larghezza e sta
   centrato rispetto agli altri. */
main#top > .video-hero-header,
main#top > .public-export-quick-actions,
main#top > .home-player-embed,
main#top > .archive-banner-new,
main#top > .culture-compass,
main#top > .live-section,
main#top > .main-live-section,
main#top > .channels-banner-section,
main#top > .feed-banner-bare,
main#top > .topics-section,
main#top > .cartolina-launch,
main#top > .stanza-banner,
main#top > .today-destination,
main#top > .lia-launch-card,
main#top > .editorial-section,
main#top > .travel-home-banner,
main#top > .search-panel,
main#top > .nearby-banner-host,
main#top > .my-route-panel,
main#top > .collections-panel,
main#top > .routes-panel,
main#top > .results-toolbar,
main#top > .content-section,
main#top > .home-banner-spot {
  width: min(var(--home-box-max), calc(100% - (var(--home-box-gutter) * 2)));
  max-width: var(--home-box-max);
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* Riquadri editoriali: stessa altezza minima e stesso raggio d'angolo.
   Se il contenuto è più alto il riquadro cresce, ma non scende mai sotto
   questa misura: è ciò che li fa sembrare tutti uguali. */
main#top > .archive-banner-new,
main#top > .culture-compass,
main#top > .channels-banner-section,
main#top > .feed-banner-bare,
main#top > .cartolina-launch,
main#top > .today-destination,
main#top > .editorial-section,
main#top > .travel-home-banner,
main#top > .home-banner-spot {
  min-height: var(--home-box-min);
  /* Il contenuto resta al suo posto e centrato: i riquadri con poco testo
     non si allungano a dismisura per riempire l'altezza comune. */
  align-content: center;
  border-radius: var(--home-box-radius);
}

/* Questi due inviti hanno poco testo: restano barre basse, proporzionate
   alla loro riga. Forzare l'altezza comune li riempiva di vuoto. */
main#top > .lia-launch-card,
main#top > .stanza-banner {
  min-height: 0;
  height: auto;
  align-content: normal;
  border-radius: var(--home-box-radius);
}

main#top > .lia-launch-card {
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Il banner Archivio Video ha ora titolo e schermo soltanto: una misura
   più bassa, così non resta mezzo vuoto. */
main#top > .archive-banner-new {
  min-height: 248px;
}

main#top > .stanza-banner {
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Anche il player e la fascia dei risultati restano nella stessa colonna. */
main#top > .home-player-embed,
main#top > .content-section,
main#top > .search-panel,
main#top > .routes-panel {
  border-radius: var(--home-box-radius);
}

/* Ritmo verticale uniforme: tutti i riquadri respirano allo stesso modo. */
main#top > .archive-banner-new,
main#top > .culture-compass,
main#top > .channels-banner-section,
main#top > .feed-banner-bare,
main#top > .cartolina-launch,
main#top > .stanza-banner,
main#top > .today-destination,
main#top > .lia-launch-card,
main#top > .editorial-section,
main#top > .travel-home-banner,
main#top > .search-panel,
main#top > .routes-panel,
main#top > .content-section,
main#top > .home-banner-spot {
  margin-top: var(--home-box-gap) !important;
  margin-bottom: var(--home-box-gap) !important;
}

/* Le due vetrine affiancate (tesori e tradizioni) hanno la stessa altezza:
   sono in griglia, quindi si allineano e riempiono la riga per intero. */
main#top > .culture-compass .culture-compass-feature-banners {
  align-items: stretch;
}

main#top > .culture-compass .culture-compass-feature-banners > section {
  display: grid;
  align-content: start;
  height: 100%;
  min-height: var(--home-box-min);
  border-radius: var(--home-box-radius);
}

/* Le otto schede tematiche e gli itinerari: riquadri tutti uguali. */
main#top > .culture-compass .culture-compass-grid > .culture-card,
main#top > .routes-panel .route-grid > .route-card {
  min-height: var(--home-card-min);
  height: 100%;
  border-radius: var(--home-box-radius);
}

/* Le tre schede informative di "Chi siamo" restano della stessa altezza. */
main#top > .editorial-section .editorial-card {
  min-height: var(--home-note-min);
  height: 100%;
}

/* Su schermi medi la colonna si stringe e le vetrine si impilano. */
@media (max-width: 900px) {
  :root {
    --home-box-gutter: 16px;
    --home-box-gap: 20px;
  }

  main#top > .culture-compass .culture-compass-feature-banners {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Su telefono: piena larghezza, angoli più stretti e riquadri un po' più
   bassi, così la pagina non diventa una sequenza di vuoti. */
@media (max-width: 700px) {
  :root {
    --home-box-gutter: 12px;
    --home-box-gap: 16px;
    --home-box-radius: 20px;
    --home-box-min: 230px;
    --home-card-min: 124px;
    --home-note-min: 0px;
  }

  main#top > .video-hero-header,
  main#top > .public-export-quick-actions,
  main#top > .home-player-embed,
  main#top > .archive-banner-new,
  main#top > .culture-compass,
  main#top > .live-section,
  main#top > .main-live-section,
  main#top > .channels-banner-section,
  main#top > .feed-banner-bare,
  main#top > .topics-section,
  main#top > .cartolina-launch,
  main#top > .stanza-banner,
  main#top > .today-destination,
  main#top > .lia-launch-card,
  main#top > .editorial-section,
  main#top > .travel-home-banner,
  main#top > .search-panel,
  main#top > .nearby-banner-host,
  main#top > .my-route-panel,
  main#top > .collections-panel,
  main#top > .routes-panel,
  main#top > .results-toolbar,
  main#top > .content-section,
  main#top > .home-banner-spot {
    width: calc(100% - (var(--home-box-gutter) * 2));
    max-width: none;
  }

  main#top > .home-player-embed iframe {
    width: 100%;
    min-width: 0;
  }

  main#top > .editorial-section .editorial-card {
    min-height: 0;
  }

  /* Su telefono il banner si impila (titolo sopra, schermo sotto): segue
     l'altezza del suo contenuto. */
  main#top > .archive-banner-new {
    min-height: 0;
  }
}

/* Su schermi molto stretti niente margini residui orizzontali. */
@media (max-width: 430px) {
  :root {
    --home-box-gutter: 10px;
  }
}