/* Home · vetrina dei TESORI.
   La cultura è il soggetto dell'app: questo riquadro la mette in testa alla
   Home, con titolo grande e un blocco di venti schede fotografiche: i tesori
   stanno tutti insieme, senza filtri. Su desktop diventa una griglia, su telefono
   una fila che si scorre col pollice. Veste chiara color crema, oro e
   spigoli netti: leggibile anche in pieno sole. */

.treasures-showcase {
  --tr-panel: #fffdf5;
  --tr-panel-2: #fdf5e4;
  --tr-card: #ffffff;
  --tr-ink: #241c12;
  --tr-ink-soft: rgba(36, 28, 18, .66);
  --tr-gold: #8f6710;
  --tr-gold-soft: #e6c15c;
  --tr-gold-deep: #a87a17;
  --tr-red: #b23a2b;
  --tr-line: rgba(143, 103, 16, .2);
  --tr-muted: rgba(36, 28, 18, .66);
  --tr-font-display: 'Archivo Narrow', 'Oswald', 'Arial Narrow', system-ui, sans-serif;

  position: relative;
  display: grid;
  gap: 18px;
  padding: 28px 24px 26px;
  color: var(--tr-ink);
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(230, 193, 92, .22), transparent 62%),
    linear-gradient(158deg, var(--tr-panel), var(--tr-panel-2));
  border: 1px solid var(--tr-line);
  border-radius: var(--home-box-radius, 24px);
  box-shadow: 0 12px 26px rgba(96, 68, 12, .09);
  overflow: hidden;
}

/* Filo dorato in testa: segnala che questo è il riquadro del patrimonio. */
.treasures-showcase::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--tr-gold-soft), var(--tr-red) 55%, transparent);
}

.treasures-showcase-head {
  display: grid;
  gap: 8px;
  max-width: 68ch;
}

.treasures-kicker {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tr-gold);
}

.treasures-showcase h2 {
  margin: 0;
  font-family: var(--tr-font-display);
  font-size: clamp(1.3rem, 4.6vw, 2rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--tr-ink);
}

.treasures-showcase h2 .treasures-word {
  color: var(--tr-gold);
}

.treasures-lead {
  margin: 0;
  font-size: .98rem;
  line-height: 1.45;
  color: var(--tr-muted);
}

.treasures-rail {
  display: flex;
  gap: 14px;
  padding: 2px 2px 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.treasures-rail::-webkit-scrollbar {
  height: 6px;
}

.treasures-rail::-webkit-scrollbar-thumb {
  background: var(--tr-line);
  border-radius: 999px;
}

.treasure-card {
  flex: 0 0 clamp(232px, 68vw, 290px);
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 0;
  text-align: left;
  color: inherit;
  background: var(--tr-card);
  border: 1px solid rgba(36, 28, 18, .1);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
  box-shadow: 0 6px 14px rgba(96, 68, 12, .08);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.treasure-card:hover,
.treasure-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--tr-gold-deep);
  box-shadow: 0 12px 22px rgba(96, 68, 12, .18);
}

.treasure-card-media {
  position: relative;
  /* Fotografia più alta: la scheda la mostra per intero, il testo resta sotto. */
  aspect-ratio: 3 / 2;
  background: linear-gradient(145deg, #f7eeda, #efe1c4);
  overflow: hidden;
}

.treasure-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* La fotografia compare con una breve dissolvenza appena è pronta: la scheda
   non resta mai con un riquadro vuoto o con l'icona di immagine mancante. */
.treasure-card-photo {
  opacity: 0;
  transition: opacity .3s ease;
}

.treasure-card-photo.is-ready {
  opacity: 1;
}

/* Finché la foto è in arrivo il riquadro mostra una trama chiara in movimento. */
.treasure-card-media.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, #f4ead3 18%, #fdf7e8 40%, #f4ead3 62%);
  background-size: 220% 100%;
  animation: treasure-shimmer 1.5s linear infinite;
}

@keyframes treasure-shimmer {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .treasure-card-media.is-loading::after {
    animation: none;
  }
}

.treasure-card-type {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 3px 7px;
  font-family: var(--tr-font-display);
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tr-ink);
  background: linear-gradient(160deg, var(--tr-gold-soft), #d3a52c);
  border-radius: 2px;
}

.treasure-card-body {
  display: grid;
  gap: 3px;
  align-content: start;
  padding: 8px 10px 10px;
}

.treasure-card-body h3 {
  margin: 0;
  font-family: var(--tr-font-display);
  /* Testo contenuto: la fotografia deve restare la parte forte della scheda. */
  font-size: .8rem;
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--tr-ink);
}

.treasure-card-place {
  margin: 0;
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tr-gold);
}

.treasure-card-short {
  margin: 0;
  font-size: .66rem;
  line-height: 1.35;
  color: var(--tr-muted);
  display: -webkit-box;
  /* Tre righe: il sommario del monumento più la riga che ne spiega la
     famiglia (chiesa, castello, museo, area archeologica…). */
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.treasures-empty {
  margin: 0;
  padding: 18px 4px;
  font-size: .92rem;
  color: var(--tr-muted);
}

.treasures-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 16px 22px;
  font-family: var(--tr-font-display);
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tr-ink);
  background: linear-gradient(160deg, var(--tr-gold-soft), #cfa128);
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(150, 108, 16, .26);
  transition: filter .18s ease, transform .18s ease;
}

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

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

/* Da tablet in su la fila diventa una griglia: tutti i tesori visibili. */
@media (min-width: 900px) {
  .treasures-showcase {
    padding: 34px 32px 30px;
  }

  .treasures-rail {
    display: grid;
    /* Colonne un poco più larghe: la fotografia cresce, il testo resta uguale. */
    grid-template-columns: repeat(auto-fill, minmax(244px, 1fr));
    overflow: visible;
    padding-bottom: 2px;
  }

  .treasure-card {
    flex: none;
    width: auto;
  }

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

/* Telefono: titolo e numero grandi, schede che si scorrono col pollice. */
@media (max-width: 700px) {
  .treasures-showcase {
    padding: 22px 16px 20px;
    gap: 14px;
  }

  .treasures-showcase h2 {
    font-size: clamp(2rem, 10.5vw, 2.8rem);
  }

  .treasure-card {
    flex: 0 0 76vw;
  }

  .treasure-card-body h3 {
    font-size: .78rem;
  }

  .treasure-card-short {
    font-size: .64rem;
  }

  .treasures-cta {
    width: 100%;
    font-size: .96rem;
    letter-spacing: .1em;
  }
}

/* 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;
}