/* Home — stili di pagina (redesign 09/2026). Diventera' site/css/home.css.
   Solo layout dei blocchi della home: i componenti stanno in ui.css, i valori in tokens.css. */

/* --- hero: lo strumento e' il titolo --- */
.hero { padding: var(--sp-6) 0 var(--sp-5); }
.hero__in { display: grid; gap: var(--sp-5); }
.hero h1 { margin-bottom: var(--sp-2); text-wrap: balance; }
.hero .lead { max-width: 34em; }
.finder { display: grid; gap: var(--sp-3); padding: var(--sp-4); }
.finder__row { display: grid; gap: var(--sp-3); }
.finder__go { min-height: 3.25rem; font-size: var(--fs-3); }
.finder__note { margin: 0; }
@media (min-width: 48em) {
  .hero { padding: var(--sp-8) 0 var(--sp-6); }
  .hero__in { grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 1fr); align-items: center; gap: var(--sp-7); }
  .finder { padding: var(--sp-5); }
}
@media (min-width: 30em) { .finder__row { grid-template-columns: 1fr 1fr; } }

/* barra compatta che sostituisce il form dopo la prima ricerca */
.ctx { position: sticky; top: 3.5rem; z-index: calc(var(--z-sticky) - 1); background: var(--bg); border-bottom: 1px solid var(--line); padding: var(--sp-2) 0; }
.ctx__in { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.ctx__what { font-weight: var(--w-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx__what small { font-weight: var(--w-regular); color: var(--ink-3); }

/* --- pubblicate oggi --- */
.oggi { padding: var(--sp-5) 0; }
.oggi .gara { cursor: pointer; }
@media (min-width: 64em) { .oggi .gare { grid-template-columns: repeat(3, 1fr); } }

/* --- risultato anteprima --- */
.res { padding: var(--sp-5) 0 var(--sp-6); }
.res__sum { font-size: var(--fs-3); margin: 0 0 var(--sp-4); max-width: 40em; }
.res__sum strong { color: var(--ink); }
.res__num { display: inline-flex; align-items: baseline; gap: .3em; padding: 0 .35em; background: var(--accent); color: var(--accent-ink); border-radius: var(--r-sm); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
.res__grid { display: grid; gap: var(--sp-5); }
.res__grid > * { min-width: 0; }
@media (min-width: 64em) { .res__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }
.res .stat__n { font-size: var(--fs-4); }
/* i numeri dell'anteprima: griglia 2x2 a ogni larghezza. La striscia a scorrimento tagliava il
   terzo numero su telefono e il quarto su desktop (colonna stretta accanto alle gare). */
.res__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
.res__stats > .card { flex: auto; min-width: 0; padding: var(--sp-3); }
.res__stats .stat__n { font-size: var(--fs-3); overflow-wrap: anywhere; }
.res .rows td:first-child { color: var(--ink-2); }
.res .rows .og { color: var(--ink); font-weight: var(--w-medium); }
.res__more { display: flex; justify-content: center; }

/* --- fiducia --- */
.trust { padding: var(--sp-5) 0; }
.trust__in { display: grid; gap: var(--sp-4); }
.trust__item { display: grid; gap: .15rem; }
.trust__item strong { font-size: var(--fs-3); }
@media (min-width: 48em) { .trust__in { grid-template-columns: repeat(3, 1fr); } }

/* --- cosa vedi --- */
.vedi { padding: var(--sp-7) 0; }
.vedi .card { display: grid; gap: var(--sp-3); grid-row: span 3; grid-template-rows: subgrid; }   /* subgrid: anteprima, titolo e testo allineati fra le tre card anche se le anteprime hanno altezze diverse */
.shot { min-height: 12rem; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); overflow: hidden;
  display: grid; align-content: start; gap: var(--sp-2); padding: var(--sp-3); font-size: .78rem; line-height: 1.35; pointer-events: none; user-select: none; }
.shot__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3); display: grid; gap: .3rem; }
.shot__card--key { border-color: var(--cta); box-shadow: 0 0 0 3px var(--accent); }
.shot__top { display: flex; justify-content: space-between; gap: var(--sp-2); align-items: center; }
.shot__top .badge { font-size: .65rem; padding: .1em .5em; }
.shot__ente { color: var(--ink-3); font-size: .74rem; }
.shot__ogg { margin: 0; font-weight: var(--w-bold); color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shot__meta { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.shot__scad { color: var(--ok); font-weight: var(--w-medium); }
.shot__scad--warn { color: var(--danger); }
.shot__row { display: grid; gap: .15rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.shot__row:last-child { border-bottom: 0; }
.shot__row .shot__ogg { font-weight: var(--w-medium); -webkit-line-clamp: 1; }
.shot__win { color: var(--ink-3); }
.shot__win b { color: var(--ok); font-weight: var(--w-bold); }
.shot__pec { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.shot__meta .btn { font-size: .72rem; min-height: 1.9rem; padding: 0 .7rem; }
.shot__link { color: var(--cta); text-decoration: underline; }

/* --- come funziona --- */
.passi { padding: var(--sp-7) 0; }
.passi ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); counter-reset: p; }
.passi li { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--sp-3); align-items: start; counter-increment: p; }
.passi li::before { content: counter(p); display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--ink); color: var(--bg); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
.passi li strong { display: block; }
@media (min-width: 48em) { .passi ol { grid-template-columns: repeat(3, 1fr); } .passi li { grid-template-columns: 1fr; } }

/* --- prezzi --- */
.piani { padding: var(--sp-7) 0; }
.price { display: grid; gap: var(--sp-5); padding: var(--sp-5); }
.price__amt { display: flex; align-items: baseline; gap: .25rem; }
.price__amt .n { font-size: var(--fs-7); font-weight: var(--w-bold); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.price__amt small { color: var(--ink-3); font-size: var(--fs-2); }
.toggle { display: inline-grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--line); border-radius: var(--r-pill); padding: 3px; background: var(--surface); }
.toggle button { border: 0; background: transparent; border-radius: var(--r-pill); min-height: 2.4rem; padding: 0 var(--sp-4); font-weight: var(--w-medium); color: var(--ink-2); cursor: pointer; }
.toggle button.is-on { background: var(--ink); color: var(--bg); font-weight: var(--w-bold); }
.price__feats { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); }
.price__feats li { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--sp-2); }
.price__feats li::before { content: "✓"; color: var(--ok); font-weight: var(--w-bold); }
@media (min-width: 48em) { .price { grid-template-columns: 1fr 1fr; align-items: start; padding: var(--sp-6); } }
.quote { display: grid; grid-template-columns: 3rem 1fr; gap: var(--sp-3); align-items: start; }
.quote img { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; }
.quote p { margin: 0 0 var(--sp-1); }
.onesto { border-left: 3px solid var(--ink); padding-left: var(--sp-4); }

/* --- faq --- */
.faq { padding: var(--sp-7) 0; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: var(--sp-4) 0; font-weight: var(--w-bold); list-style: none; display: flex; justify-content: space-between; gap: var(--sp-3); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ink-3); font-weight: var(--w-regular); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 var(--sp-4); color: var(--ink-2); max-width: 60ch; }

/* --- guide e footer --- */
.guide { padding: var(--sp-6) 0; }
.guide ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.guide li a { color: var(--ink); }
@media (min-width: 48em) { .guide ul { grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-5); } }
.footer { padding: var(--sp-6) 0 var(--sp-7); border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--fs-1); }
.footer__in { display: grid; gap: var(--sp-3); }
.footer a { color: var(--ink-2); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); }

/* --- assistente (sheet) --- */
.chat { display: grid; gap: var(--sp-3); }
.chat__msg { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); max-width: 92%; min-width: 0; overflow-wrap: anywhere; }
.chat__msg--bot { background: var(--surface-2); }
.chat__msg--me { background: var(--ink); color: var(--bg); justify-self: end; }
.ok-box { padding: var(--sp-5); border-radius: var(--r-lg); background: var(--ok-bg); color: var(--ok); }
.ok-box h3 { color: inherit; }

/* stato "dopo la ricerca": il hero si comprime */
.is-searched .hero { display: none; }
.is-searched .ctx { display: block; }
.ctx { display: none; }

@media (max-width: 47.99em) { .ctx__what small { display: none; } }   /* su telefono '· ultimi 30 giorni' finiva fuori dallo schermo: meglio lasciare spazio a zona e settore */
.guide__tutte { margin-top: var(--sp-3); }
.guide__tutte summary { cursor: pointer; }
.guide__tutte ul { margin-top: var(--sp-2); }