/* RC88 · Tutti i banner di sezione: un solo riquadro, una sola larghezza.
   Prima ogni sezione aveva la sua misura: chi a tutta pagina (Tesori,
   Tradizioni, Viaggi, Eventi, Film), chi dentro un guscio più stretto
   (Arte, Opere, Bambini, Borghi). Qui vale una misura sola, la stessa dei
   riquadri della Home: 1120px con 24px di margine, che su telefono diventano
   12px. Il foglio si carica per ultimo, quindi vince sulle misure sparse
   negli altri fogli senza riscriverli. */

:root {
  --rc88-band-max: 1120px;
  --rc88-band-gutter: 24px;
  --rc88-band-radius: 22px;
  --rc88-band-pad-x: clamp(18px, 3vw, 32px);
  --rc88-band-pad-y: clamp(22px, 3.4vw, 40px);
  --rc88-band-line: rgba(23, 63, 53, .16);
  --rc88-band-surface: #fffdf8;
}

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

/* ── 1 · Stessa larghezza, stesso posto in pagina ─────────────────────── */
#cinemaPage .cinema-hero-home-banner,
#videoPage .video-section-banner-link,
#feedPage .events-hero-link,
#feedPage .feed-hero,
#monumentsPage .monuments-hero,
#traditionsPage .traditions-hero,
#travelPage .travel-page-intro-link,
#narrativeAtlasPage .narrative-atlas-head {
  display: block;
  width: min(var(--rc88-band-max), calc(100% - var(--rc88-band-gutter) * 2)) !important;
  max-width: var(--rc88-band-max) !important;
  margin: 22px auto 8px !important;
  border-radius: var(--rc88-band-radius);
  box-sizing: border-box;
}

/* Quando il banner è dentro un collegamento, riempie tutto lo spazio
   cliccabile: il riquadro e il dito coincidono. */
#cinemaPage .cinema-hero-home-banner > .cinema-hero,
#travelPage .travel-page-intro-link > .travel-page-intro,
#feedPage .events-hero-link > .events-hero {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: inherit;
  box-sizing: border-box;
}

/* ── 2 · Stessa forma: riquadro con angoli, bordo e ombra ─────────────── */
#cinemaPage .cinema-hero,
#videoPage .video-section-banner,
#feedPage .events-hero,
#feedPage .feed-hero,
#monumentsPage .monuments-hero,
#traditionsPage .traditions-hero,
#travelPage .travel-page-intro,
#narrativeAtlasPage .narrative-atlas-head {
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-radius: var(--rc88-band-radius) !important;
  overflow: hidden;
  box-shadow: 0 16px 38px rgba(24, 20, 14, .16);
  padding: var(--rc88-band-pad-y) var(--rc88-band-pad-x) !important;
}

/* La misura è del riquadro: i contenitori interni non ne aggiungono altra. */
#videoPage .video-section-banner-inner,
#feedPage .events-hero-inner,
#monumentsPage .monuments-hero-inner,
#traditionsPage .traditions-hero-inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

#feedPage .feed-hero-copy {
  width: 100%;
  max-width: none;
}

/* ── 3 · Le testate che non erano riquadri ora lo sono ────────────────── */
#fuoriRottaPage .fr-page-head,
#vicinoPage .vicino-head,
#operePage .opere-head,
#opereRegistryPage .opere-head,
#borghiPage .borghi-page-head,
#borgoPage .borgo-page-head,
#guidePage .gb-page-head {
  width: 100% !important;
  margin: 18px 0 16px !important;
  padding: var(--rc88-band-pad-y) var(--rc88-band-pad-x) !important;
  border: 1px solid var(--rc88-band-line) !important;
  border-radius: var(--rc88-band-radius) !important;
  background: var(--rc88-band-surface);
  box-shadow: 0 10px 26px rgba(35, 31, 22, .07);
  box-sizing: border-box;
}

/* Arte, Bambini e SEO avevano già il loro riquadro: resta il loro colore,
   cambia solo la misura, che ora è la stessa di tutte le altre sezioni. */
#artePage .arte-head,
#seoPage .seo-hero,
#kidsPage .kids-hero {
  width: 100% !important;
  border-radius: var(--rc88-band-radius) !important;
  box-sizing: border-box;
}

/* ── 4 · Le colonne delle sezioni seguono la stessa misura ────────────── */
#cinemaPage .cinema-main,
#videoPage .video-main,
#feedPage .feed-body,
#feedPage .events-toolbar,
#feedPage .events-status,
#feedPage .events-grid,
#monumentsPage .monuments-content-shell,
#traditionsPage .traditions-content-shell,
#travelPage .travel-page-shell,
#fuoriRottaPage .fuori-rotta-shell,
#artePage .arte-shell,
#operePage .opere-shell,
#opereRegistryPage .opere-shell,
#seoPage .seo-shell,
#kidsPage .kids-shell,
#borghiPage .borghi-page-shell,
#borgoPage .borgo-page-shell {
  width: min(var(--rc88-band-max), calc(100% - var(--rc88-band-gutter) * 2)) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

/* Il catalogo non deve più scivolare sotto la testata: ora la testata è un
   riquadro chiuso, non una fascia a tutta pagina. */
#monumentsPage .monuments-content-shell,
#traditionsPage .traditions-content-shell {
  margin-top: 10px !important;
}

/* ── 5 · Telefono: nessun banner sborda ───────────────────────────────── */
@media (max-width: 700px) {
  #cinemaPage .cinema-hero-home-banner,
  #videoPage .video-section-banner-link,
  #feedPage .events-hero-link,
  #feedPage .feed-hero,
  #monumentsPage .monuments-hero,
  #traditionsPage .traditions-hero,
  #travelPage .travel-page-intro-link,
  #narrativeAtlasPage .narrative-atlas-head {
    margin-top: 14px !important;
    border-radius: 18px;
  }

  #cinemaPage .cinema-hero,
  #videoPage .video-section-banner,
  #feedPage .events-hero,
  #feedPage .feed-hero,
  #monumentsPage .monuments-hero,
  #traditionsPage .traditions-hero,
  #travelPage .travel-page-intro,
  #narrativeAtlasPage .narrative-atlas-head,
  #fuoriRottaPage .fr-page-head,
  #vicinoPage .vicino-head,
  #operePage .opere-head,
  #opereRegistryPage .opere-head,
  #borghiPage .borghi-page-head,
  #borgoPage .borgo-page-head,
  #guidePage .gb-page-head,
  #artePage .arte-head,
  #seoPage .seo-hero,
  #kidsPage .kids-hero {
    border-radius: 18px !important;
  }
}