/*
 * I blocchi dei prezzi del sito nuovo di www.kitebeachcaboverde.com: corso, tabella, prezzo-da, orari,
 * avvertenze, downwind (kb/modelli/blocchi/). Passo 3.9 di docs/rifacimento-2026-09-24/PIANO.md, corsia M-b.
 * Usa le variabili di :root di kb-layout.css, che si carica prima, e il bottone .kb-bottone di kb-blocchi.css
 * (corsia M-a), che la pagina carica prima di questo (KBM_PREZZI di blocchi/_prezzi.php). Nei commenti di
 * questo foglio nessun percorso comincia con la barra: tools/verifica_asset.py legge ogni indirizzo di assets/
 * scritto qui dentro e lo cerca sul disco.
 *
 * Le misure vengono da docs/rifacimento-2026-09-24/analisi-aspetto.md (sezioni 3.4, 7, 8.2, 10); le differenze
 * volute: 10 px di imbottitura in tutte le celle (oggi 0 nelle tabelle delle lezioni: il testo toccava il filo),
 * il titolo e la prima colonna fermi quando la tabella scorre di lato al telefono, i titoli dei corsi che al
 * telefono scendono (clamp). Le controlla tools/verifica_prezzi.js sul banco tools/banco_prezzi.php, e alcune
 * regole qui sotto sono le stringhe che i suoi sabotaggi guastano: se ne cambi la forma, cambia anche SABOTAGGI
 * di quel file (la prova se ne accorge: un sabotaggio che non trova la sua stringa e' rosso).
 *
 * Punti di rottura quelli del layout: 767 px il telefono.
 */

/* --- La cornice: la larghezza del contenuto (1140 px, 20 px ai lati al telefono), lo spazio fra i blocchi */

.kb-pr-corso,.kb-pr-tabella,.kb-pr-da,.kb-pr-orari,.kb-pr-avvertenze,.kb-pr-downwind{max-width:calc(var(--kb-contenuto) + 2 * var(--kb-margine));margin:40px auto;padding:0 var(--kb-margine);scroll-margin-top:90px}

/* per chi legge con la voce: fuori dallo schermo, ma nella pagina */
.kb-pr-nascosto{position:absolute!important;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}

/* la linea azzurra dei titoli a divisore (8.2): 3 px, 2 nelle note sottili */
.kb-pr-linea{flex:1 1 0;min-width:20px;height:3px;background:var(--kb-azzurro)}

/* --- La tabella (10.2): una <table> vera nel suo contenitore, che scorre di lato se non ci sta ------------ */

.kb-pr-scorre{overflow-x:auto;container-type:inline-size;-webkit-overflow-scrolling:touch}
.kb-pr-scorre:focus-visible{outline:2px solid var(--kb-blu);outline-offset:2px}
.kb-pr-listino{width:100%;margin:0;border-collapse:separate;border-spacing:0;border-top:1px solid var(--kb-filo);border-left:1px solid var(--kb-filo);font:300 16px/25.6px var(--kb-outfit);color:var(--kb-testo-tabelle)}
/* le celle */
.kb-pr-listino th,.kb-pr-listino td{padding:10px;border-right:1px solid var(--kb-filo);border-bottom:1px solid var(--kb-filo);text-align:left;vertical-align:middle;white-space:nowrap}
.kb-pr-listino thead th,.kb-pr-listino thead td{background:var(--kb-blu);color:var(--kb-chiaro);font-weight:700}
/* la prima colonna resta al bordo quando la tabella scorre (il fondo copre le celle che le passano sotto) */
.kb-pr-listino tbody th{position:sticky;left:0;z-index:1;min-width:7em;background:var(--kb-bianco);font-weight:700;white-space:normal}
.kb-pr-listino thead td:first-child{position:sticky;left:0;z-index:2}
/* nelle lezioni solo le ore in grassetto: "2h (1 session)" */
.kb-pr-listino--lezioni tbody th{font-weight:300}
.kb-pr-ore{font-weight:700}
/* nel noleggio la parentesi in fondo alla voce in tondo: "Accessories (helmet, leash...)" (verifica_colori.js) */
.kb-pr-parentesi{font-weight:300}

/* il titolo della tabella: la caption col disegno del divisore (8.2), ferma sopra la parte che si vede */
.kb-pr-titolo{caption-side:top;padding:15px 0;text-align:left}
.kb-pr-titolo__dentro{position:sticky;left:0;display:flex;align-items:center;gap:10px;width:100cqw;max-width:100%}
.kb-pr-titolo__etichetta{flex:0 1 auto;font:600 15px/15px var(--kb-roboto);text-transform:uppercase;text-align:center;color:var(--kb-azzurro)}

/* sotto la tabella: la descrizione, le note del noleggio (un elenco), la nota sottile delle lezioni */
.kb-pr-descrizione,.kb-pr-note,.kb-pr-avvertenze__elenco,.kb-pr-corso__testo,.kb-pr-percorso__testo,.kb-pr-percorso__prezzi,.kb-pr-da__testo{font:400 16px/25.6px var(--kb-roboto);text-align:left;color:var(--kb-testo)}
.kb-pr-descrizione{margin:20px 0 0}
.kb-pr-note{margin:20px 0 0;padding-left:1.5em}
.kb-pr-nota{display:flex;align-items:center;gap:10px;margin:0;padding:10px 0}
.kb-pr-nota .kb-pr-linea{height:2px}
/* iniziali maiuscole come oggi ("Equipment Included") */
.kb-pr-nota__testo{flex:0 1 auto;font:600 15px/15px var(--kb-roboto);text-align:center;text-transform:capitalize;color:var(--kb-azzurro)}

/* il bottone grande (7): quello di kb-blocchi.css, a 20 px e alto 50, col calendario a sinistra */
.kb-pr-azione{margin:30px 0 0;text-align:center}
.kb-pr-bottone{font-size:20px;line-height:20px}
.kb-pr-bottone .kb-icona{width:20px;height:20px}

/* i testi che vengono dal catalogo */
.kb-pr-descrizione p,.kb-pr-corso__testo p,.kb-pr-percorso__testo p,.kb-pr-percorso__testo ul,.kb-pr-percorso__testo ol{margin:0 0 32px}
.kb-pr-percorso__testo ul,.kb-pr-percorso__testo ol{padding-left:1.5em}
.kb-pr-descrizione>:last-child,.kb-pr-corso__testo>:last-child,.kb-pr-percorso__testo>:last-child{margin-bottom:0}
.kb-pr-corso__testo strong,.kb-pr-percorso__testo strong,.kb-pr-descrizione strong{font-weight:700}
.kb-pr-corso__testo a,.kb-pr-percorso__testo a,.kb-pr-descrizione a{color:var(--kb-scuro)}

/* --- Il corso (10.1): la scheda da 550 px; due corsi di fila si affiancano ------------------------------ */

.kb-pr-corso{max-width:calc(550px + 2 * var(--kb-margine))}
.kb-pr-corso__foto{display:block;width:100%;height:auto;margin:0 0 20px}
.kb-pr-corso__titolo{margin:0 0 20px;font:600 clamp(28px,2vw + 13px,40px)/1 var(--kb-roboto);text-transform:uppercase;text-align:center;color:var(--kb-azzurro)}
.kb-pr-corso__testo{margin:0 0 20px}
@media (min-width:768px){
  .kb-pr-corso--primo,.kb-pr-corso--secondo{float:left;width:calc(min(100%, var(--kb-contenuto) + 2 * var(--kb-margine)) / 2);max-width:none;margin:40px 0}
  .kb-pr-corso--primo{margin-left:max(0px, calc((100% - var(--kb-contenuto) - 2 * var(--kb-margine)) / 2))}
  /* le due colonne di oggi: 10 px dentro per lato, i corsi a 123 e 693 px a 1366 */
  .kb-pr-corso--primo{padding-left:calc(var(--kb-margine) + 10px);padding-right:10px}
  .kb-pr-corso--secondo{padding-left:10px;padding-right:calc(var(--kb-margine) + 10px)}
  .kb-pr-corso--secondo+*{clear:both}
}

/* --- Il prezzo "da" (10.1): la frase col prezzo in grassetto --------------------------------------------- */

.kb-pr-da__testo{margin:0}
.kb-pr-prezzo{font-weight:700}

/* --- Gli orari (10.3): tre orari Roboto 600 40 px azzurri, in fila in tre colonne uguali come oggi, e il bottone -- */

.kb-pr-orari__elenco{display:flex;justify-content:center;margin:0;padding:0;list-style:none}
.kb-pr-orari__voce{flex:1 1 0;text-align:center}
.kb-pr-orari__ora{font:600 40px/40px var(--kb-roboto);color:var(--kb-azzurro)}

/* --- Le condizioni (10.3): l'elenco puntato ---------------------------------------------------------------- */

.kb-pr-avvertenze__elenco{margin:0;padding-left:1.5em}

/* --- Il downwind (10.4): nome e km nel divisore, due foto affiancate, testo, minimo e scaglioni ---------- */

.kb-pr-percorso{margin:0 0 40px}
.kb-pr-percorso:last-child{margin-bottom:0}
.kb-pr-percorso__titolo{display:flex;align-items:center;gap:10px;margin:0 0 20px;padding:15px 0;font:600 15px/15px var(--kb-roboto);text-transform:uppercase;color:var(--kb-azzurro)}
.kb-pr-percorso__nome{flex:0 1 auto;text-align:center}
/* sotto il titolo come oggi: 10 px dentro per lato, le due foto a 123 e 693 px a 1366 */
.kb-pr-percorso>:not(h3){padding:0 10px}
.kb-pr-percorso__foto{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0 0 20px}
.kb-pr-percorso__foto--1{grid-template-columns:minmax(0,550px);justify-content:center}
.kb-pr-percorso__immagine{display:block;width:100%;height:auto}
.kb-pr-percorso__testo{margin:0 0 32px}
.kb-pr-percorso__minimo{margin:0}
.kb-pr-percorso__scaglioni{margin:0;padding:0;list-style:none}
.kb-pr-percorso__scaglioni li::before{content:"\2013\00A0"}

/* --- Il tablet (da 768 a 1024 px), come oggi: i titoli dei corsi a 40 px come al computer; i corsi, il downwind e
   gli orari a 20 px dal bordo (76 in portoghese, come la frase del prezzo del Go PRO), 20 px fra gli orari; gli
   elenchi rientrati di 32 px (al computer e al telefono 24: riga 153 di tools/differenze-volute.json) ----------------- */

@media (min-width:768px){.kb-pr-corso__titolo{font-size:40px}}
@media (min-width:768px) and (max-width:1024px){
  .kb-pr-corso--primo{padding-left:var(--kb-margine)}
  .kb-pr-corso--secondo{padding-right:var(--kb-margine)}
  .kb-pr-percorso>:not(h3){padding:0}
  .kb-pr-orari__elenco{gap:20px}
  .kb-pr-corso--primo:lang(pt){padding-left:76px}
  .kb-pr-corso--secondo:lang(pt){padding-right:76px}
  .kb-pr-downwind:lang(pt),.kb-pr-orari:lang(pt),.kb-pr-da:lang(pt){padding-left:76px;padding-right:76px}
  .kb-pr-note,.kb-pr-avvertenze__elenco,.kb-pr-percorso__testo ul,.kb-pr-percorso__testo ol{padding-left:32px}
  /* le celle vanno a capo come oggi: a 768 px ogni tabella sta nella sua colonna (senza, il noleggio e i corsi
     portoghesi uscivano fino a 37 px e scorrevano) */
  .kb-pr-listino th,.kb-pr-listino td{white-space:normal}
}

/* --- Il telefono (fino a 767 px) --------------------------------------------------------------------------- */

@media (max-width:767px){
  .kb-pr-corso,.kb-pr-tabella,.kb-pr-da,.kb-pr-orari,.kb-pr-avvertenze,.kb-pr-downwind{margin-top:30px;margin-bottom:30px;scroll-margin-top:60px}
  .kb-pr-orari__elenco{flex-direction:column;align-items:center;gap:20px}
  .kb-pr-orari__voce{flex:none}
  .kb-pr-percorso__foto{grid-template-columns:minmax(0,1fr)}
  .kb-pr-percorso>:not(h3){padding:0}
}