/*
 * Le pagine di testo (Team, Boa Vista, cookie policy), la 404 e la pagina dei risultati della ricerca del
 * sito nuovo di www.quadzone-boavista.com. Passo 3.10 del piano del 23/09/2026
 * (QuadZone/docs/rifacimento-2026-09-23/PIANO.md); l'HTML lo scrivono qz/modelli/testo.php, errore.php e
 * ricerca.php, le variabili (colori, caratteri, larghezze) stanno in qz-layout.css.
 *
 * Le misure vengono da docs/rifacimento-2026-09-23/analisi-aspetto.md (11 Boa Vista, 12 Team, 13 404,
 * ricerca e cookie policy); i difetti di oggi che qui NON si copiano sono della sezione 19 (la 404 larga
 * 3366 px che copre la barra, le pagine del tema attaccate al bordo sinistro). Le misura
 * tools/verifica_aspetto.js con tools/aspetto-atteso-testo.json, e tools/prova_testo.py sabota questo
 * foglio su una copia: se una regola misurata cambia, la prova lo dice.
 * Punti di rottura come il layout: telefono fino a 767 px, tablet fino a 1024.
 */

/* --- La colonna del testo: 1150 px al centro (--qz-contenuto), 20 px di margine ------------------------ */

.qz-testo__dentro,.qz-ricerca{box-sizing:border-box;max-width:calc(var(--qz-contenuto) + 40px);margin:0 auto;padding:50px 20px 60px}

/* --- La testata: una foto a tutta larghezza al posto degli slider di oggi (500 px come quello di Boa
       Vista, 325 sul telefono), il titolo in basso su una velatura, come le schede --------------------- */

.qz-testo__testata{position:relative;height:500px;overflow:hidden;background:var(--qz-nero)}
.qz-testo__testata-foto{position:absolute;inset:0;width:100%;max-width:none;height:100%;object-fit:cover}
.qz-testo__testata::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.45),rgba(0,0,0,0) 60%)}
.qz-testo__testata .qz-testo__titolo{position:absolute;left:0;right:0;bottom:0;z-index:1;box-sizing:border-box;max-width:calc(var(--qz-contenuto) + 40px);margin:0 auto;padding:0 20px 40px;font:600 35px/1.2 var(--qz-roboto);color:#fff;overflow-wrap:anywhere}
.qz-testo__titolo--semplice{margin:0 0 30px;font:700 30px/1.3 var(--qz-oxygen);color:var(--qz-titolo);overflow-wrap:anywhere}

/* --- La galleria (Team): griglia di 5 colonne, 3 sul tablet, 2 sul telefono, 10 px fra le foto -------- */

.qz-testo__galleria{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 50px;padding:0;list-style:none}
.qz-testo__galleria-link{display:block;line-height:0}
.qz-testo__galleria-link img{display:block;width:100%;height:auto}
.qz-testo__galleria-link:focus-visible{outline:3px solid var(--qz-blu);outline-offset:2px}

/* --- Le sezioni di Team e Boa Vista: titolo Roboto 30px col filo rosso a destra, testo Roboto 14px grigio;
       quelle senza foto a due a due sul computer, una sotto l'altra quando la colonna e' stretta --------- */

.qz-testo__sezioni{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:40px}
.qz-testo__sezione{min-width:0}
.qz-testo--sezioni .qz-testo__sezione-titolo{display:flex;align-items:center;gap:20px;margin:0 0 20px;font:500 30px/1.3 var(--qz-roboto);color:var(--qz-titolo);overflow-wrap:anywhere}
.qz-testo--sezioni .qz-testo__sezione-titolo::after{content:"";flex:1 1 30%;min-width:40px;border-top:1px solid var(--qz-rosso-linea)}
.qz-testo--sezioni .qz-testo__sezione-testo{font:400 14px/27px var(--qz-roboto);color:var(--qz-testo-tenue)}
.qz-testo__sezione-testo p{margin:0 0 15px}
.qz-testo__sezione-testo>:last-child{margin-bottom:0}
.qz-testo__sezione-testo a{color:var(--qz-link)}
/* in fondo alla pagina, il filo rosso a tutta larghezza del testo (Team, analisi-aspetto 12) */
.qz-testo--sezioni .qz-testo__dentro::after{content:"";display:block;margin-top:50px;border-top:1px solid var(--qz-rosso-linea)}
.qz-testo--sezioni .qz-testo__dentro>*+*{margin-top:50px}
.qz-testo--sezioni .qz-testo__dentro>.qz-testo__galleria+*{margin-top:0}

/* le righe con la foto (Boa Vista): foto 344 px accanto al testo, una volta a sinistra e una a destra;
   il titolo piccolo, Roboto 14px 600 nero, maiuscolo */
.qz-testo__sezione--foto{display:grid;grid-template-columns:344px minmax(0,1fr);gap:40px;align-items:start}
.qz-testo__sezione--foto-destra{grid-template-columns:minmax(0,1fr) 344px}
.qz-testo__sezione--foto-destra .qz-testo__sezione-foto{order:2}
.qz-testo__sezione-foto{display:block;width:100%;height:auto}
.qz-testo--sezioni .qz-testo__sezione--foto .qz-testo__sezione-titolo{display:block;margin:0 0 10px;font:600 14px/1.5 var(--qz-roboto);color:#000;text-transform:uppercase}
.qz-testo--sezioni .qz-testo__sezione--foto .qz-testo__sezione-titolo::after{content:none}

/* --- La cookie policy ("documento"): il testo del tema, Oxygen 15px #333, h2 22.5px, h3 17.55px ------- */

.qz-testo--documento .qz-testo__sezioni{display:block}
.qz-testo--documento .qz-testo__sezione-testo{font:400 15px/27px var(--qz-oxygen);color:var(--qz-testo)}
.qz-testo--documento .qz-testo__sezione-titolo{margin:30px 0 12px;font-family:var(--qz-oxygen);font-weight:700;line-height:1.3;color:var(--qz-testo);overflow-wrap:anywhere}
.qz-testo--documento h2.qz-testo__sezione-titolo{font-size:22.5px}
.qz-testo--documento h3.qz-testo__sezione-titolo{font-size:17.55px}
.qz-testo--documento .qz-testo__sezione:first-child>.qz-testo__sezione-titolo:first-child{margin-top:0}
.qz-testo--documento .qz-testo__sezione-testo+.qz-tabella,.qz-testo--documento .qz-testo__sezione-titolo+.qz-tabella{margin-top:15px}
.qz-testo--documento .qz-testo__sezione+.qz-testo__sezione{margin-top:15px}

/* --- Le tabelle della policy: sul computer una tabella vera col bordo 1 px #ccc e 5 px di margine
       (il tema di oggi); sul telefono (sotto) ogni riga diventa un riquadro ------------------------------ */

.qz-tabella{width:100%;margin:0 0 15px;border-collapse:collapse;border:1px solid #ccc;text-align:left;font-size:15px;line-height:24px}
.qz-tabella th,.qz-tabella td{padding:5px;border:1px solid #ccc;vertical-align:top;overflow-wrap:anywhere}
.qz-tabella th{font-weight:700}
.qz-tabella__etichetta{display:none}

/* --- La 404: una fascia #47A0FF larga quanto lo schermo, sotto la barra, la frase e la casella --------- */

.qz-errore{margin:0;padding:180px 20px;background:var(--qz-blu);text-align:center;color:#fff}
/* il titolo, se errore.json ne ha uno (oggi la 404 ha solo la frase) */
.qz-errore__titolo{margin:0 auto 15px;max-width:900px;font:700 36px/1.2 var(--qz-oxygen);color:#fff;text-shadow:0 2px 2px rgba(0,0,0,.2);overflow-wrap:anywhere}
.qz-errore__testo{margin:0 auto;max-width:900px;font:400 22px/1.4 var(--qz-oxygen);color:#fff;text-shadow:0 2px 2px rgba(0,0,0,.2);overflow-wrap:anywhere}

/* --- La casella di ricerca (404 e risultati): il campo a pillola e il bottone con la parola ------------ */

.qz-cerca{display:flex;gap:10px;max-width:460px;margin:40px auto 0}
.qz-cerca__etichetta{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.qz-cerca__campo{flex:1 1 auto;min-width:0;height:60px;margin:0;padding:0 25px;border:2px solid #fff;border-radius:30px;background:transparent;font:400 16px var(--qz-oxygen);color:#fff}
.qz-cerca__campo::placeholder{color:#fff;opacity:.9}
.qz-cerca__bottone{flex:none;height:60px;margin:0;padding:0 25px;border:2px solid #fff;border-radius:30px;background:#fff;font:700 15px var(--qz-oxygen);text-transform:uppercase;color:var(--qz-blu);cursor:pointer}
.qz-cerca__campo:focus-visible,.qz-cerca__bottone:focus-visible{outline:3px solid var(--qz-nero);outline-offset:2px}
/* nei risultati il fondo e' chiaro: il campo grigio della barra laterale di oggi (#F3F3F3, raggio 30 px) */
.qz-cerca--ricerca{max-width:560px;margin:0 0 40px}
.qz-cerca--ricerca .qz-cerca__campo{height:55px;border:0;background:#F3F3F3;color:var(--qz-testo)}
.qz-cerca--ricerca .qz-cerca__campo::placeholder{color:var(--qz-testo-tenue);opacity:1}
.qz-cerca--ricerca .qz-cerca__bottone{height:55px;border-color:var(--qz-blu);background:var(--qz-blu);color:#fff}
.qz-cerca--ricerca .qz-cerca__campo:focus-visible,.qz-cerca--ricerca .qz-cerca__bottone:focus-visible{outline-color:var(--qz-blu)}

/* --- I risultati: riquadri bianchi del tema (raggio 3 px, ombra leggera), la paginazione --------------- */

.qz-ricerca__titolo{margin:0 0 25px;font:700 30px/1.3 var(--qz-oxygen);color:var(--qz-testo);overflow-wrap:anywhere}
.qz-ricerca__elenco{display:flex;flex-direction:column;gap:20px;margin:0;padding:0;list-style:none}
.qz-ricerca__voce{padding:30px 50px;border-radius:3px;background:var(--qz-bianco);box-shadow:0 2px 3px rgba(0,0,0,.09)}
.qz-ricerca__voce-titolo{margin:0;font:700 22px/1.3 var(--qz-oxygen);overflow-wrap:anywhere}
.qz-ricerca__voce-titolo a{color:var(--qz-testo)}
.qz-ricerca__voce-titolo a:hover{color:var(--qz-link)}
.qz-ricerca__estratto{margin:10px 0 0;color:var(--qz-testo-tenue)}
.qz-ricerca__nessuno{margin:0;padding:30px 50px;border-radius:3px;background:var(--qz-bianco);box-shadow:0 2px 3px rgba(0,0,0,.09)}
.qz-paginazione{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:40px 0 0}
.qz-paginazione__numero,.qz-paginazione__freccia,.qz-paginazione__puntini{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 10px;border-radius:22px;font-weight:700;color:var(--qz-testo)}
.qz-paginazione__numero,.qz-paginazione__freccia{background:var(--qz-bianco);box-shadow:0 2px 3px rgba(0,0,0,.09)}
a.qz-paginazione__numero:hover,a.qz-paginazione__freccia:hover{color:var(--qz-link);text-decoration:none}
.qz-paginazione__numero--qui{background:var(--qz-blu);color:#fff}
.qz-paginazione__freccia--spenta{opacity:.35}
.qz-paginazione .qz-icona{width:14px;height:14px}

/* --- Tablet (fino a 1024 px) ------------------------------------------------------------------------ */

@media (max-width:1024px){
  .qz-testo__galleria{grid-template-columns:repeat(3,minmax(0,1fr))}
  .qz-testo__sezione--foto,.qz-testo__sezione--foto-destra{grid-template-columns:260px minmax(0,1fr);gap:30px}
  .qz-testo__sezione--foto-destra .qz-testo__sezione-foto{order:0}
}

/* --- Telefono (fino a 767 px) ---------------------------------------------------------------------- */

@media (max-width:767px){
  .qz-testo__dentro,.qz-ricerca{padding:30px 20px 40px}
  .qz-testo__testata{height:325px}
  .qz-testo__testata .qz-testo__titolo{padding-bottom:25px;font-size:28px}
  .qz-testo__galleria{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qz-testo--sezioni .qz-testo__sezione-titolo{font-size:24px}
  .qz-testo__sezione--foto,.qz-testo__sezione--foto-destra{grid-template-columns:minmax(0,1fr);gap:15px}
  .qz-errore{padding:80px 20px}
  .qz-errore__titolo{font-size:28px}
  .qz-errore__testo{font-size:20px}
  .qz-cerca__campo,.qz-cerca__bottone{padding:0 18px}
  .qz-ricerca__voce,.qz-ricerca__nessuno{padding:20px}
  .qz-ricerca__titolo{font-size:24px}
}

/* le tabelle della policy al telefono: un riquadro per riga (bordo #ccc), in ogni cella l'etichetta della
   sua colonna sopra il valore, cosi' il valore ha tutta la larghezza del riquadro (un nome di cookie
   lungo come VISITOR_PRIVACY_METADATA sta su una riga) qualunque sia la lingua dell'etichetta;
   l'intestazione non serve piu' (ogni valore ha la sua etichetta) */
@media (max-width:767px){
  .qz-tabella,.qz-tabella tbody,.qz-tabella tr,.qz-tabella td{display:block;width:100%}
  .qz-tabella{border:0}
  .qz-tabella thead{display:none}
  .qz-tabella tr{margin:0 0 12px;border:1px solid #ccc}
  .qz-tabella td{padding:8px 10px;border:0;border-top:1px solid #ccc}
  .qz-tabella td:first-child{border-top:0}
  .qz-tabella__etichetta{display:block;font-size:13px;line-height:20px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--qz-testo-tenue)}
}