/* ============================================================================
   LA FASCIA DELLA CARTA
   Il blocco scuro con i tre numeri: omologazione, durata, bisfenoli.

   Nasce in home, dove chiude il racconto, e da ottobre 2026 chiude anche
   ogni pagina di categoria dei rotoli, dove risponde all'ultima obiezione
   prima del carrello. Un foglio suo e non un pezzo di home.css perche'
   home.css si carica solo in home: lasciarlo li' avrebbe voluto dire o
   caricare tutta la home su ogni categoria, o avere il markup giusto senza
   il suo stile — che e' peggio di non averlo.
   ========================================================================= */

/* Il punto in cui la pagina cambia respiro: fondo scuro, una fotografia
   sola a tutta larghezza sotto, tre numeri sopra. E' l'unica sezione scura
   della pagina, e funziona proprio perche' e' l'unica: metterne una
   seconda la renderebbe un fondo, non un momento. */

.rt-carta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(4rem, 9vw, 8rem);
  background: var(--rt-ink);
  color: var(--rt-superficie);
}

.rt-carta__sfondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.rt-carta__sfondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}
/* Il velo: senza, il testo bianco sulla carta bianchissima non si legge.
   In diagonale, cosi' il lato dove sta il testo e' il lato scuro. */
.rt-carta__sfondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(104deg,
    color-mix(in srgb, var(--rt-ink) 92%, transparent) 0%,
    color-mix(in srgb, var(--rt-ink) 72%, transparent) 46%,
    color-mix(in srgb, var(--rt-ink) 34%, transparent) 100%);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rt-carta__sfondo img {
      animation: rt-carta-scorre linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes rt-carta-scorre {
      from { transform: scale(1.18) translateY(-3%); }
      to   { transform: scale(1.18) translateY(3%); }
    }
  }
}

.rt-testa--chiara h2 { color: var(--rt-superficie); }
.rt-testa--chiara p { color: color-mix(in srgb, var(--rt-superficie) 72%, transparent); }
.rt-testa--chiara .rt-occhiello { color: color-mix(in srgb, var(--rt-superficie) 64%, transparent); }
.rt-testa--chiara .rt-occhiello::before { background: var(--rt-blu-chiaro, #6A9BFF); }

/* auto-fit e non un numero fisso di colonne: i dati qui dentro sono tre
   oggi e possono essere quattro domani, e una griglia a quattro colonne
   fisse con tre dati lascia un buco in fondo alla riga. */
.rt-carta__dati {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin: 0;
}
.rt-carta__dati > div {
  padding-block-start: var(--rt-s5);
  border-block-start: 1px solid color-mix(in srgb, var(--rt-superficie) 22%, transparent);
}
.rt-carta__dati dt {
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: var(--rt-peso-forte);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--rt-superficie);
}
.rt-carta__dati dt small { font-size: 0.45em; letter-spacing: -0.02em; opacity: 0.65; }
.rt-carta__dati dd {
  margin: var(--rt-s3) 0 0;
  font-size: var(--rt-t-sm);
  line-height: 1.5;
  color: color-mix(in srgb, var(--rt-superficie) 66%, transparent);
}

.rt-carta__nota {
  max-width: 52ch;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  font-size: var(--rt-t-testo);
  line-height: 1.5;
  color: color-mix(in srgb, var(--rt-superficie) 78%, transparent);
}

@media (max-width: 480px) { .rt-carta__dati { gap: var(--rt-s5); } }

/* ── Quando la fascia chiude la pagina ───────────────────────────────────
   In home la fascia sta in mezzo e sotto continua il racconto. In fondo a
   una categoria e' l'ultima cosa, e il piede ci arrivava ottanta pixel
   sotto con una striscia chiara in mezzo: la fascia sembrava finita male
   invece che chiusa.

   :has() sul <main> e non una classe sul <body>: la fascia la decide
   inc/usi.php categoria per categoria, e una classe in piu' nel PHP
   sarebbe una seconda condizione da tenere allineata alla prima. Il
   filetto del piede si toglie con il margine: su fondo scuro una riga
   chiara di un pixel e' un errore, non una separazione.

   DISCENDENTE E NON FIGLIO DIRETTO. La prima versione scriveva
   "main > .rt-archivio > .rt-carta" e in produzione non agganciava
   niente: li' in mezzo c'e' il <div class="rt-woo"> di woocommerce.php,
   che al banco non c'era. Lo stacco e' rimasto in pagina un giorno
   intero mentre il banco lo misurava zero. */
main:has(.rt-archivio > .rt-carta:last-child) + .rt-footer {
  margin-top: 0;
  border-top: 0;
}