/*
 * I blocchi con foto multiple e terze parti del sito nuovo di www.kitebeachcaboverde.com: la galleria e il
 * suo visore, la mappa, il meteo (Windguru), l'elenco dei camp. Passo 3.10 di
 * docs/rifacimento-2026-09-24/PIANO.md, corsia M-c; l'HTML lo scrivono kb/modelli/blocchi/ (galleria.php,
 * mappa.php, meteo.php, elenco-camp.php), il comportamento sta in kb-media.js. Le variabili (colori,
 * caratteri, --kb-contenuto, --kb-margine) sono quelle di kb-layout.css. Nei commenti di questo foglio
 * nessun percorso comincia con la barra: tools/verifica_asset.py legge ogni indirizzo di assets/ scritto qui.
 *
 * LA GEOMETRIA DELLE MINIATURE e' scritta anche in kb/modelli/blocchi/_media.php (KBM_GALLERIA,
 * KBM_SCHEDA_CAMP), da cui escono i sizes delle immagini: se cambia qui, cambia li'. La misura
 * tools/verifica_media.js nel browser, foto per foto: nessuna miniatura piu' piccola di come e' mostrata.
 *   galleria  contenuto 1140 px, 10 px fra le celle, 4 colonne 3:2 al computer e a 1024 px (3 colonne 4:3 con
 *             tre foto, come il ristorante di oggi), 2 colonne da 1023 px in giu' (oggi una al telefono: PIANO 12)
 *   camp      schede 3 per riga con 20 px fra l'una e l'altra, 2 al tablet, 1 al telefono, foto quadrata
 *   foto      (le foto grandi, dal 24/09/2026) da sola fino a 1024 px, due in fila da 550 px con 20 px fra le
 *             due, come oggi; al telefono una per riga, larghe quanto il contenuto (non come oggi, che cambia con
 *             la pagina e la lingua: la differenza e' dichiarata in tools/differenze-volute.json). KBM_FOTO in
 *             _media.php; tools/verifica_media.js le misura contro il congelato e contro quelle righe
 *
 * Punti di rottura come kb-layout.css: 1024 px (tablet) e 767 px (telefono); la galleria come oggi passa a due
 * colonne a 1023 px (a 1024 e' ancora quella del computer). Niente animazioni che nascondono (PIANO 12); tutto
 * fermo con prefers-reduced-motion.
 */

/* --- Il contenitore: largo quanto il contenuto, 20 px di margine, 20 px fra un blocco e l'altro (4); il meteo ha
   misure sue, nella sua sezione --- */

.kb-galleria,.kb-foto,.kb-mappa,.kb-camp-elenco{max-width:calc(var(--kb-contenuto) + 2 * var(--kb-margine));margin:0 auto;padding:20px var(--kb-margine)}

/* --- La galleria (12) --------------------------------------------------------------------------------- */

.kb-galleria__griglia{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.kb-galleria--3 .kb-galleria__griglia{grid-template-columns:repeat(3,minmax(0,1fr))}
.kb-galleria__posto{min-width:0}
.kb-galleria__voce{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:var(--kb-chiaro)}
.kb-galleria--3 .kb-galleria__voce{aspect-ratio:4/3}
.kb-galleria__voce img{display:block;width:100%;max-width:none;height:100%;object-fit:cover}
/* al passaggio il velo scuro di oggi, che compare (non nasconde niente) */
.kb-galleria__voce::after{content:"";position:absolute;inset:0;background:#000;opacity:0;transition:opacity .3s}
.kb-galleria__voce:hover::after,.kb-galleria__voce:focus-visible::after{opacity:.5}
.kb-galleria__voce:focus-visible{outline:3px solid var(--kb-blu);outline-offset:2px}
@media (max-width:1023px){
  .kb-galleria__griglia,.kb-galleria--3 .kb-galleria__griglia{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- La foto grande (dal 24/09/2026): una o due foto sciolte, larghe come oggi al computer, senza link ne' visore
   Da sola la colonna arriva a 1024 px e la foto intera non va oltre i suoi pixel; in due, due colonne da 550 px
   centrate, 20 px fra l'una e l'altra (al computer a 123 e 693 px dal bordo, come oggi). La quadrata riempie la
   sua colonna, ritagliata al centro. */

.kb-foto__griglia{display:grid;grid-template-columns:minmax(0,1024px);justify-content:center;justify-items:center;gap:20px}
.kb-foto--2 .kb-foto__griglia{grid-template-columns:repeat(2,minmax(0,550px))}
.kb-foto__immagine{display:block;max-width:100%;height:auto}
.kb-foto--quadrata .kb-foto__immagine{width:100%;aspect-ratio:1/1;object-fit:cover}
@media (max-width:767px){
  .kb-foto--2 .kb-foto__griglia{grid-template-columns:minmax(0,1fr)}
}

/* --- Il tablet (da 768 a 1024 px), come oggi: gallerie e mappe 10 px dal bordo, 66 le gallerie del ristorante, del
   kite camp e delle pagine portoghesi; la mappa della home in una colonna di 592 px (336 a 768: e' nella sezione della
   mappa, dopo la regola che la porta a tutta larghezza); le due foto in fila 30 px dal bordo (il meteo sta nella sua
   sezione). Le mappe di oggi che cambiano con la pagina e la lingua (x 0, 56 e 66) sono nella riga 153 di
   tools/differenze-volute.json */

@media (min-width:768px) and (max-width:1024px){
  .kb-galleria,.kb-mappa{padding-left:10px;padding-right:10px}
  .kb-galleria--3,.kb-b-colonne~.kb-galleria,.kb-modello-pagina .kb-galleria:lang(pt){padding-left:66px;padding-right:66px}
  .kb-foto--2 .kb-foto__griglia{padding:0 10px}
}

/* --- Il visore: il <dialog> della galleria aperto da kb-media.js, a tutto schermo (da QuadZone, passo 3.9) */

html.kb-visore-aperto{overflow:hidden}
.kb-visore{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(0,0,0,.92);color:var(--kb-bianco);overflow:hidden}
.kb-visore::backdrop{background:rgba(0,0,0,.92)}
.kb-visore__figura{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;margin:0;padding:60px 80px 30px}
.kb-visore__foto{display:block;max-width:100%;max-height:calc(100% - 40px);width:auto;height:auto;object-fit:contain}
.kb-visore__conta{margin-top:12px;font:400 14px/20px var(--kb-roboto);color:#ddd}
.kb-visore__bottone{position:absolute;display:flex;align-items:center;justify-content:center;width:50px;height:50px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.45);color:var(--kb-bianco);cursor:pointer}
.kb-visore__bottone .kb-icona{width:26px;height:26px}
.kb-visore__bottone:hover,.kb-visore__bottone:focus-visible{background:rgba(255,255,255,.2)}
.kb-visore__bottone:focus-visible{outline:2px solid var(--kb-bianco);outline-offset:2px}
/* la freccia dello sprite guarda in giu': girata, fa da sinistra e da destra */
.kb-visore__prec .kb-icona{transform:rotate(90deg)}
.kb-visore__succ .kb-icona{transform:rotate(-90deg)}
.kb-visore__prec{top:50%;left:15px;margin-top:-25px}
.kb-visore__succ{top:50%;right:15px;margin-top:-25px}
.kb-visore__chiudi{top:15px;right:15px}
@media (max-width:767px){
  .kb-visore__figura{padding:60px 10px 80px}
  .kb-visore__prec,.kb-visore__succ{top:auto;bottom:15px;margin-top:0}
}

/* --- La mappa (13): l'iframe di Google, alto 300 px, e sotto "Apri in Google Maps" ------------------- */

.kb-mappa__posto{height:300px;background:var(--kb-chiaro)}
.kb-mappa__iframe{display:block;width:100%;height:300px;border:0}
.kb-mappa__sotto,.kb-meteo__sotto{margin:10px 0 0;font:300 16px/1.6 var(--kb-outfit)}
.kb-mappa__apri,.kb-meteo__apri{color:var(--kb-blu)}
/* sulla home a tutta larghezza (come oggi), il link sotto resta nel contenuto; al telefono 24 px dal bordo, come oggi
   (342 px a 390: tools/verifica_impaginazione.js, parte mappa) */
.kb-mappa--larga{max-width:none;padding-left:0;padding-right:0}
.kb-mappa--larga .kb-mappa__sotto{max-width:calc(var(--kb-contenuto) + 2 * var(--kb-margine));margin:10px auto 0;padding:0 var(--kb-margine)}
@media (min-width:768px) and (max-width:1024px){
  .kb-mappa--larga{padding-left:216px;padding-right:216px}
  .kb-mappa--larga .kb-mappa__sotto{padding:0}
}
@media (max-width:767px){
  .kb-mappa--larga{padding-left:24px;padding-right:24px}
  .kb-mappa--larga .kb-mappa__sotto{padding:0}
}

/* --- Il meteo (14): il widget di Windguru largo, alto e al posto di oggi, lingua per lingua (ondata I, 29/09/2026).
   Misure e perche' nel commento di kb/modelli/blocchi/meteo.php. I margini si fondono con quelli della testata sopra
   e del blocco dopo. --kb-meteo-alto e' il riquadro che Windguru disegna a quella larghezza: il posto riservato, e la
   pagina non salta. Arrivato il widget il posto perde altezza minima e fondo, e il link al centro non si vede. */

.kb-meteo{position:relative;container-type:inline-size;max-width:none;margin:60px 0 -20px;padding:0}
.kb-meteo:lang(it){margin:-20px 10px 80px}
.kb-meteo:lang(pt){margin:-20px 10px 60px}
@media (max-width:1024px){
  .kb-meteo{margin-left:24px;margin-right:24px}
  .kb-meteo:lang(it),.kb-meteo:lang(pt){margin-left:34px;margin-right:34px}
}
@media (max-width:767px){
  .kb-meteo{margin-bottom:40px}
  .kb-meteo:lang(it){margin-top:-10px;margin-bottom:100px}
  .kb-meteo:lang(pt){margin-top:-10px;margin-bottom:80px}
}
.kb-meteo>*{--kb-meteo-alto:379.6px}
@container (max-width:579.98px){.kb-meteo>*{--kb-meteo-alto:389.6px}}
@container (max-width:499.98px){.kb-meteo>*{--kb-meteo-alto:386.6px}}
@container (max-width:419.98px){.kb-meteo>*{--kb-meteo-alto:391.6px}}
.kb-meteo__widget{min-height:var(--kb-meteo-alto);overflow-x:auto;background:var(--kb-chiaro)}
.kb-meteo__widget:has(>iframe){min-height:0;background:none}
.kb-meteo__sotto{position:absolute;top:calc(var(--kb-meteo-alto) / 2 - 12.8px);left:0;right:0;margin:0;padding:0 20px;text-align:center}
.kb-meteo:has(.kb-meteo__widget>iframe) .kb-meteo__sotto{visibility:hidden}

/* --- L'elenco dei camp (11.4): schede bianche, filo sottile, foto quadrata, titolo, estratto ---------- */

.kb-camp-elenco__griglia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.kb-camp-scheda{display:flex;flex-direction:column;min-width:0;border:1px solid rgba(0,0,0,.1);background:var(--kb-bianco)}
.kb-camp-scheda__foto{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--kb-chiaro)}
.kb-camp-scheda__foto img{display:block;width:100%;max-width:none;height:100%;object-fit:cover}
.kb-camp-scheda__testo{padding:15px 15px 20px}
.kb-camp-scheda__titolo{margin:0 0 10px;font:600 19.2px/1.3 var(--kb-roboto);color:#303133}
.kb-camp-scheda__titolo a{color:inherit;text-decoration:none}
.kb-camp-scheda__titolo a:hover,.kb-camp-scheda__titolo a:focus-visible{color:var(--kb-blu)}
.kb-camp-scheda__sommario{margin:0;font:400 14px/1.6 var(--kb-roboto);color:var(--kb-scuro)}
/* senza camp in vetrina: la frase e il bottone verso la prenotazione (il bottone normale di oggi, 7) */
.kb-camp-elenco__vuoto{margin:0 0 20px;font:400 16px/1.6 var(--kb-roboto);color:var(--kb-testo)}
.kb-camp-elenco__prenota{margin:0}
.kb-camp-elenco__link{display:inline-flex;align-items:center;min-height:46px;padding:15px 50px;border:0;border-radius:0;background:var(--kb-blu);font:500 16px/16px var(--kb-roboto);color:var(--kb-bianco);text-decoration:none;transition:transform .3s,background-color .3s}
.kb-camp-elenco__link:hover,.kb-camp-elenco__link:focus-visible{background:var(--kb-azzurro);transform:scale(1.1)}
@media (max-width:1024px){
  .kb-camp-elenco__griglia{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .kb-camp-elenco__griglia{grid-template-columns:minmax(0,1fr)}
}

@media (prefers-reduced-motion:reduce){
  .kb-galleria__voce::after,.kb-camp-elenco__link{transition:none}
  .kb-camp-elenco__link:hover,.kb-camp-elenco__link:focus-visible{transform:none}
}