/* Home · riquadro dei TESORI.
   Non è più una vetrina di schede: è un banner d'ingresso. Sta nella stessa
   colonna e ha la stessa misura degli altri riquadri della Home (larghezza,
   raggio, margine: li detta home-boxes.css), ma si veste di arancio, corallo
   e miele — tinte chiare, luminose — per farsi trovare al primo sguardo.
   Dentro, dall'alto: la scelta del canale
   della diretta, il titolo del patrimonio e un unico grande invito che porta
   alla sezione completa dei tesori. Nessuna fotografia da scaricare: la Home
   si apre subito. */

.treasures-showcase {
  --tr-cream: #fff8ea;
  --tr-gold: #ffd98a;
  --tr-gold-deep: #8f6710;
  --tr-red: #a5301f;
  --tr-ink: #2b1206;
  /* Inchiostro molto scuro: più il fondo si schiarisce, più il testo deve
     essere deciso. È questa coppia a far leggere bene la scritta. */
  --tr-title: #120d09;
  --tr-art: #8a3d15;
  --tr-font-display: 'Archivo Narrow', 'Oswald', 'Arial Narrow', system-ui, sans-serif;

  position: relative;
  display: grid;
  gap: 16px;
  padding: 24px 22px;
  color: var(--tr-title);
  /* Tinte ancora più chiare: pesca, albicocca e panna. Il riquadro è luminoso,
     quasi una carta colorata, e il testo scuro si legge senza sforzo. */
  background:
    radial-gradient(120% 130% at 88% -18%, rgba(255, 255, 255, .95), transparent 60%),
    linear-gradient(142deg, #ffd9b0 0%, #ffe6c4 46%, #fff6e2 100%);
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: var(--home-box-radius, 24px);
  box-shadow: 0 16px 34px rgba(150, 96, 44, .18);
  overflow: hidden;
  isolation: isolate;
}

/* Tutto il contenuto sta sopra il disegno dei borghi. */
.treasures-showcase > :not(.treasures-banner-art) {
  position: relative;
  z-index: 1;
}

/* Rete di sicurezza. Il riquadro dei tesori non è più una griglia di schede ma
   un banner d'ingresso. Se in una copia della pagina non ancora aggiornata
   restasse la vecchia griglia, non deve comunque più comparire: meglio un
   riquadro pulito che schede mezze vecchie e mezze nuove. */
.treasures-showcase .treasures-rail,
.treasures-showcase .treasure-card,
.treasures-showcase [data-treasures-rail] {
  display: none !important;
}

/* Il disegno dei borghi riempie la fascia bassa del banner: è decorazione,
   non riceve tocchi e non copre mai il testo. */
.treasures-banner-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  color: var(--tr-art);
  pointer-events: none;
}

.treasures-art-hill { fill: currentColor; opacity: .07; }
.treasures-art-hill-2 { fill: currentColor; opacity: .09; }
.treasures-art-town { fill: currentColor; opacity: .14; }

/* Scelta del canale della diretta: un testo e tre pulsanti, uno per
   dispositivo, ognuno del suo colore. Stanno sempre su una riga sola, anche
   sul telefono più stretto: non si impilano mai, così il pollice li trova
   subito. Il pannello è bianco, per staccare dal fondo chiaro. */
.treasures-live-picker {
  display: grid;
  gap: 10px;
  padding: 13px 14px 15px;
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 16px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 8px 20px rgba(150, 96, 44, .16);
}

.treasures-live-title {
  margin: 0;
  color: #6b2f06;
  font-size: clamp(.66rem, 2.9vw, .78rem);
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
}

.treasures-live-buttons {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
}

.treasures-live-button {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 48px;
  padding: 0 6px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  font: 900 clamp(.54rem, 2.43vw, .74rem)/1.15 system-ui, sans-serif;
  letter-spacing: .035em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform .16s ease, filter .16s ease;
}

.treasures-live-button:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}

.treasures-live-button:active {
  transform: translateY(1px);
}

.treasures-live-button:focus-visible {
  outline: 3px solid rgba(143, 103, 16, .55);
  outline-offset: 2px;
}

.treasures-live-button.is-computer {
  background: linear-gradient(135deg, #1f4f8f, #2f74c9);
  box-shadow: 0 6px 16px rgba(31, 79, 143, .26);
}

.treasures-live-button.is-phone {
  background: linear-gradient(135deg, #16795e, #1fa87f);
  box-shadow: 0 6px 16px rgba(22, 121, 94, .24);
}

.treasures-live-button.is-tv {
  background: linear-gradient(135deg, #a4401f, #d9632c);
  box-shadow: 0 6px 16px rgba(164, 64, 31, .24);
}

.treasures-showcase-head {
  display: grid;
  gap: 8px;
  /* Tutta la larghezza del riquadro: il titolo, che sta su una riga sola,
     può così restare grande anche su schermo largo. */
  max-width: 100%;
}

/* Nessuna scritta del banner può allargare il riquadro: le righe che non
   vanno a capo vengono rimpicciolite, non fatte sbordare. */
.treasures-showcase-head > * {
  min-width: 0;
}

.treasures-kicker {
  margin: 0;
  color: #6b2a05;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.treasures-showcase h2 {
  margin: 0;
  font-family: var(--tr-font-display);
  font-size: clamp(1.45rem, 5.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--tr-title);
  /* Alone bianco dietro le lettere: sul fondo chiaro il titolo stacca bene
     senza bisogno di un'ombra scura che lo sporcherebbe. */
  text-shadow: 0 1px 0 rgba(255, 255, 255, .95), 0 2px 12px rgba(255, 255, 255, .75);
  /* Nessuna parola spezzata a metà: la scritta va a capo solo fra una parola
     e l'altra. */
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

/* «TESORI» in ruggine scura: resta la parola che salta all'occhio, ma sul
   fondo chiaro è abbastanza scura da leggersi bene. */
.treasures-showcase h2 .treasures-word {
  color: #641b08;
}

/* Il titolo sta su una riga sola: la misura del carattere la calcola
   treasures-title-fit.js. Questa regola è la rete di sicurezza, così la
   scritta non torna mai a capo. */
.treasures-showcase h2[data-title-fit="1"] {
  white-space: nowrap;
}

.treasures-lead {
  margin: 0;
  /* Tutta la larghezza del riquadro: la riga di spiegazione sta su una riga
     sola e più spazio ha, più grande resta il carattere. */
  max-width: 100%;
  font-size: .99rem;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(43, 18, 6, .95);
}

/* Rete di sicurezza: la spiegazione non torna mai a capo. La misura la
   calcola treasures-title-fit.js. */
.treasures-lead[data-lead-fit="1"] {
  white-space: nowrap;
  /* Un filo di spazio in meno fra le lettere: la riga entra più larga e la
     misura del carattere resta un po' più grande. */
  letter-spacing: -.012em;
}

/* Il grande invito: un unico comando, crema su rosso, che porta alla sezione
   completa dei tesori. È la sola azione del riquadro, quindi si vede subito. */
.treasures-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 14px 20px;
  font-family: var(--tr-font-display);
  font-size: 1.02rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fffaf0;
  background: linear-gradient(160deg, #651d08, #8c2a11 58%, #b0500f);
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(84, 34, 10, .3), inset 0 0 0 1px rgba(255, 216, 148, .5);
  transition: transform .18s ease, filter .18s ease;
}

.treasures-cta:hover,
.treasures-cta:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.04);
}

.treasures-cta:active {
  transform: translateY(0);
}

.treasures-cta:focus-visible {
  outline: 3px solid rgba(74, 26, 6, .6);
  outline-offset: 3px;
}

.treasures-cta-arrow {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255, 250, 240, .24);
  font-size: 1rem;
  line-height: 1;
}

/* Da tablet in su il comando non occupa tutta la riga: resta un pulsante
   grande, ma il banner respira. */
@media (min-width: 760px) {
  .treasures-showcase {
    padding: 30px 30px 28px;
    gap: 18px;
  }

  .treasures-cta {
    justify-self: start;
    width: auto;
    min-width: 340px;
  }
}

@media (max-width: 700px) {
  .treasures-showcase {
    gap: 14px;
    padding: 20px 16px;
  }

  .treasures-banner-art {
    opacity: .7;
  }

  .treasures-cta {
    min-height: 56px;
    font-size: .96rem;
    letter-spacing: .08em;
  }
}

/* Il comando «Tesori» nella barra in basso è il più importante dell'app:
   resta riconoscibile anche quando non è la sezione aperta. */
.mobile-bottom-nav button[data-mobile-nav="monuments"] {
  color: var(--tr-gold-deep, #b8912a);
  background: linear-gradient(160deg, #fff6e0, #ffe9b8);
  /* Filo dorato disegnato all'interno: la barra non cambia misura. */
  box-shadow: inset 0 0 0 1px rgba(184, 145, 42, .45);
}

.mobile-bottom-nav button[data-mobile-nav="monuments"]:hover,
.mobile-bottom-nav button[data-mobile-nav="monuments"]:focus-visible {
  background: linear-gradient(160deg, #ffeec6, #ffdd9c);
}

.mobile-bottom-nav button[data-mobile-nav="monuments"][aria-current="page"] {
  color: #fff;
  background: linear-gradient(160deg, #c9942a, #9c6f16);
  box-shadow: inset 0 0 0 1px #9c6f16;
}

/* Correzione finale: il tema scuro globale assegna un colore chiaro a tutti
   gli h2. Questo banner resta volutamente su fondo chiaro, quindi il suo
   titolo deve mantenere un inchiostro molto scuro. L'ID rende la regola più
   specifica anche quando il foglio globale viene caricato dopo questo file. */
#treasuresShowcaseTitle,
#treasuresShowcaseTitle > span {
  color: #120d09 !important;
}

#treasuresShowcaseTitle > .treasures-word {
  color: #641b08 !important;
}