/* Home: un asse unico per hero, diretta e banner editoriali. */
:root {
  --home-feature-max-width: 1120px;
  --home-feature-gutter: 24px;
}

main#top > .video-hero-header,
main#top > .live-section,
main#top > .main-live-section,
main#top > .home-player-embed,
main#top > .archive-banner,
main#top > .archive-banner-new,
main#top > .monuments-home-banner,
main#top > .traditions-home-banner,
main#top > .culture-compass,
main#top > .channels-banner-section,
main#top > .editorial-section,
main#top > .lia-launch-card,
main#top > .travel-home-banner,
main#top > .feed-banner-bare,
main#top > .search-panel,
main#top > .topics-section,
main#top > .collections-panel,
main#top > .routes-panel,
main#top > .results-toolbar,
main#top > .content-section {
  width: min(var(--home-feature-max-width), calc(100% - (var(--home-feature-gutter) * 2)));
  max-width: var(--home-feature-max-width);
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* Il player segue esattamente la stessa colonna dei box editoriali. */
main#top > .home-player-embed {
  margin-top: 28px;
  overflow: hidden;
}

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

main#top > .video-hero-header {
  /* Il padding del banner Video era la causa dei margini laterali visibili. */
  padding: 28px 0 34px;
}

main#top > .video-hero-header .video-home-hero-inner,
main#top > .video-hero-header .video-home-heading,
main#top > .video-hero-header .home-heading-proposal {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

main#top > .video-hero-header .video-home-hero-inner {
  margin: 0;
}

main#top > .video-hero-header .home-heading-proposal {
  padding-left: clamp(18px, 3vw, 38px);
  padding-right: clamp(18px, 3vw, 38px);
  padding-top: clamp(24px, 3.4vw, 36px);
  padding-bottom: clamp(22px, 3.2vw, 32px);
}

/* Gruppo logo + scritte: più grande, ma con un piccolo respiro interno. */
main#top > .video-hero-header .hero-brand-row {
  width: min(1040px, 100%);
  margin-left: auto;
  margin-right: auto;
}

main#top > .video-hero-header .home-cinema-banner {
  flex-basis: 1040px;
  width: min(1040px, 100%);
  max-width: 100%;
}

main#top > .video-hero-header .home-cinema-banner .hero-logo-mark {
  display: block;
  width: 100%;
  max-width: 1040px;
  height: auto;
}

/* Nuova pelle fashion per il banner-logo della Home: il contenuto resta
   identico, cambia solo la superficie che lo ospita. */
main#top > .video-hero-header .home-heading-proposal {
  border-color: rgba(246, 190, 109, .42);
  background:
    radial-gradient(circle at 5% 0%, rgba(237, 111, 91, .34) 0, transparent 31%),
    radial-gradient(circle at 96% 100%, rgba(244, 169, 69, .24) 0, transparent 35%),
    radial-gradient(circle at 68% 42%, rgba(95, 77, 139, .22) 0, transparent 42%),
    linear-gradient(132deg, #0b1020 0%, #17172b 43%, #2a1b2e 76%, #321d2d 100%);
  box-shadow:
    0 24px 56px rgba(10, 12, 25, .28),
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 -1px 0 rgba(246, 190, 109, .16);
}

main#top > .video-hero-header .home-heading-proposal::after {
  content: "";
  position: absolute;
  inset: 15% 8% 12%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, .055), transparent 68%);
  filter: blur(18px);
  pointer-events: none;
}

main#top > .video-hero-header .home-heading-proposal::before {
  background: linear-gradient(90deg, #ed6f5b 0%, #f6be6d 48%, #ed6f5b 100%);
  box-shadow: 0 0 18px rgba(246, 190, 109, .48);
}

/* La prima riga di diciture del logo era scura sul fondo crema originale:
   resta la stessa scritta, ora con un tono chiaro leggibile sul nuovo fondo. */
main#top > .video-hero-header .hero-logo-mark > g:nth-of-type(2) {
  fill: #f6eadf;
}

main#top > .video-hero-header .home-heading-lead {
  color: #f5eee8;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .28);
}

main#top > .video-hero-header .event-highlight {
  color: #ffc06a;
  text-shadow: 0 0 8px rgba(255, 194, 106, .42), 0 0 20px rgba(255, 194, 106, .2);
}

main#top > .video-hero-header .event-highlight::after {
  background: rgba(255, 194, 106, .24);
}

main#top > .feed-banner-bare {
  padding-left: 0;
  padding-right: 0;
}

main#top > .feed-banner-bare .feed-slideshow-bare,
main#top > .feed-banner-bare .feed-feature,
main#top > .feed-banner-bare .feed-feature-card {
  width: 100%;
  box-sizing: border-box;
}

main#top > .archive-banner,
main#top > .channels-banner-section,
main#top > .travel-home-banner,
main#top > .feed-banner-bare .feed-feature-card {
  min-height: 180px;
}

@media (max-width: 700px) {
  :root {
    --home-feature-gutter: 12px;
  }

  main#top > .video-hero-header,
  main#top > .live-section,
  main#top > .main-live-section,
  main#top > .home-player-embed,
  main#top > .archive-banner,
  main#top > .archive-banner-new,
  main#top > .monuments-home-banner,
  main#top > .traditions-home-banner,
  main#top > .culture-compass,
  main#top > .channels-banner-section,
  main#top > .editorial-section,
  main#top > .lia-launch-card,
  main#top > .travel-home-banner,
  main#top > .feed-banner-bare,
  main#top > .search-panel,
  main#top > .topics-section,
  main#top > .collections-panel,
  main#top > .routes-panel,
  main#top > .results-toolbar,
  main#top > .content-section {
    width: calc(100% - (var(--home-feature-gutter) * 2));
    max-width: none;
  }

  main#top > .video-hero-header {
    padding: 18px 0 24px;
  }

  main#top > .video-hero-header .home-heading-proposal {
    padding: 18px 10px 20px;
  }

  main#top > .video-hero-header .hero-brand-row,
  main#top > .video-hero-header .home-cinema-banner {
    width: 100%;
  }

  main#top > .video-hero-header .home-cinema-banner .hero-logo-mark {
    max-width: none;
  }

  main#top > .feed-banner-bare .feed-feature-card {
    min-height: 0;
  }

  main#top > .travel-home-banner {
    min-height: 180px;
  }
}