/*
 * L'elenco dei tour (/tours-list/) del sito nuovo di www.quadzone-boavista.com: le fasce dei tour. Passo 3.8
 * del piano del 23/09/2026 (QuadZone/docs/rifacimento-2026-09-23/PIANO.md); l'HTML lo scrivono
 * qz/modelli/elenco.php e qz/modelli/parti/carta-tour.php (forma elenco).
 *
 * Le misure vengono da docs/rifacimento-2026-09-23/analisi-aspetto.md, sezione 9 (e 3.3 per i caratteri): fondo
 * #F7F4F4, fasce bianche larghe il 95% con l'ombra, 20 px fra l'una e l'altra, tre colonne uguali (foto, testo,
 * prezzo), la foto 406x342 sul computer. Sul telefono una colonna, e la prima fascia NON sale sulla barra del
 * menu (19.2: oggi ha un margine negativo e copre il logo). Le controlla tools/verifica_aspetto.js, voci
 * "elenco-" di tools/aspetto-atteso.json. I colori sono le variabili di qz-layout.css.
 */

.qz-elenco{padding:10px 10px 30px;background:var(--qz-fondo-elenco)}

/* il titolo della pagina: per la sintesi vocale, non si vede (la pagina di oggi non ne ha uno) */
.qz-elenco__titolo{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);border:0;white-space:nowrap}

.qz-elenco__lista{display:grid;gap:20px;margin:0;padding:0;list-style:none}

.qz-carta--elenco{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:20px;width:95%;margin:0 auto;padding:10px;background:var(--qz-bianco);box-shadow:1px 6px 10px -1px rgba(0,0,0,.5)}
.qz-carta--elenco .qz-carta__foto{display:block;width:100%;height:auto;aspect-ratio:720/606;object-fit:cover}
.qz-carta--elenco .qz-carta__testo{min-width:0;padding:27px 10px 10px}
.qz-carta--elenco .qz-carta__titolo{margin:0;font:700 21px/27px var(--qz-oxygen);color:var(--qz-testo-elenco)}
.qz-carta--elenco .qz-carta__sommario{margin:18px 0 0;font:400 14px/27px var(--qz-roboto);color:var(--qz-testo-elenco)}
.qz-carta--elenco .qz-carta__prezzo{display:flex;flex-direction:column;align-items:center;padding:62px 10px 10px;text-align:center}
.qz-carta--elenco .qz-carta__cifra{margin:0 0 22px;font:700 23px/23px var(--qz-poppins);color:var(--qz-rosa)}
.qz-carta--elenco .qz-carta__etichetta{margin:0 0 25px;font:700 13px/27px var(--qz-roboto);color:#7F7777}
.qz-carta--elenco .qz-carta__bottone{display:inline-block;padding:12px 24px;border-radius:36px;background:var(--qz-blu-pillola);font:500 13px/14px var(--qz-roboto);color:#fff;text-decoration:none}
.qz-carta--elenco .qz-carta__bottone:hover,.qz-carta--elenco .qz-carta__bottone:focus{background:var(--qz-blu);text-decoration:none}

/* --- Tablet (fino a 1024 px): le tre colonne restano, testo e prezzo piu' piccoli (9, 3.3) ---------------- */

@media (max-width:1024px){
  .qz-carta--elenco .qz-carta__sommario{font-size:12px}
  .qz-carta--elenco .qz-carta__cifra{font-size:16px;line-height:16px}
}

/* --- Telefono (fino a 767 px): una colonna, a tutta larghezza (9) -------------------------------------- */

@media (max-width:767px){
  .qz-carta--elenco{grid-template-columns:minmax(0,1fr);width:100%}
  .qz-carta--elenco .qz-carta__testo{padding:15px 10px 0}
  .qz-carta--elenco .qz-carta__titolo{font-size:18px}
  .qz-carta--elenco .qz-carta__sommario{margin-top:15px}
  .qz-carta--elenco .qz-carta__prezzo{padding:20px 10px 15px}
  .qz-carta--elenco .qz-carta__cifra{margin-bottom:6px}
  .qz-carta--elenco .qz-carta__etichetta{margin-bottom:15px;font-size:14px}
  .qz-carta--elenco .qz-carta__bottone{font-size:12px;line-height:13px}
}