/*
 * Classi generiche e riusabili delle viste frontend del plugin: contenitori di
 * layout (griglia, gallery) e messaggi.
 *
 * A differenza degli stili specifici di un template (es. assets/css/homepage.css,
 * tutto sotto .kross-tpl-homepage), queste regole sono **universalmente valide**:
 * non sono legate a nessuna cartella di templates/ e possono essere riusate da
 * qualunque shortcode, blocco o template di override senza dover riportare la
 * classe contenitore del template.
 *
 * Nessuna dipendenza esterna. Vedi README.md, sezione "Stile UI (frontend)".
 */

/* --------------------------------------------------------------------------
 * Griglia
 * -------------------------------------------------------------------------- */

.kross-be-grid {
	display: grid;
	gap: 24px;
	margin: 24px 0;
}

/* size=1 -> 33% (default) */
.kross-be-grid--cols-3 {
	grid-template-columns: repeat( 3, 1fr );
}

/* size=2 -> 50% */
.kross-be-grid--cols-2 {
	grid-template-columns: repeat( 2, 1fr );
}

/* size=3 -> 100% */
.kross-be-grid--cols-1 {
	grid-template-columns: 1fr;
}

/* size 4-100 -> larghezza minima del box in %, size>100 -> in px (colonne responsive automatiche) */
.kross-be-grid--flex {
	grid-template-columns: repeat( auto-fill, minmax( var( --kross-be-col-width, 240px ), 1fr ) );
}

@media ( max-width: 900px ) {
	.kross-be-grid--cols-3 {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 600px ) {
	.kross-be-grid--cols-3,
	.kross-be-grid--cols-2 {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
 * Gallery Slick (contenitore alternativo alla griglia, per gallery="slick")
 *
 * Il plugin si limita a gutter, altezza uniforme delle slide e aspetto di
 * frecce/dots: il resto arriva dalla libreria. Le regole valgono anche se
 * Slick non è caricato, grazie al fallback :not(.slick-initialized) in fondo.
 * -------------------------------------------------------------------------- */

.kross-be-gallery {
	margin: 24px 0;
}

/* Il gutter è dato dal padding delle slide, compensato qui per allineare
   la prima e l'ultima card ai bordi del contenitore (come nella griglia). */
.kross-be-gallery .slick-list {
	margin: 0 -12px;
}

.kross-be-gallery__slide {
	box-sizing: border-box;
	padding: 0 12px;
}

/* Track a flex: tutte le card della riga hanno la stessa altezza. */
.kross-be-gallery .slick-track {
	display: flex;
	align-items: stretch;
}

.kross-be-gallery .slick-slide {
	height: auto;
}

/* Le card riempiono la slide, qualunque sia il loro stile. */
.kross-be-gallery__slide > * {
	height: 100%;
}

.kross-be-gallery .slick-prev,
.kross-be-gallery .slick-next {
	z-index: 1;
	width: 36px;
	height: 36px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.18 );
}

/* slick-theme.css azzera lo sfondo su hover/focus: qui va mantenuto. */
.kross-be-gallery .slick-prev:hover,
.kross-be-gallery .slick-prev:focus,
.kross-be-gallery .slick-next:hover,
.kross-be-gallery .slick-next:focus {
	background: #fff;
}

.kross-be-gallery .slick-prev {
	left: 2px;
}

.kross-be-gallery .slick-next {
	right: 2px;
}

.kross-be-gallery .slick-prev::before,
.kross-be-gallery .slick-next::before {
	font-size: 22px;
	color: var( --kross-be-primary, #1a3b5d );
	opacity: 1;
}

.kross-be-gallery .slick-dots {
	position: static;
	margin-top: 12px;
}

.kross-be-gallery .slick-dots li button::before {
	font-size: 9px;
	color: var( --kross-be-primary, #1a3b5d );
}

/* Prima dell'init (o senza libreria Slick): riga scorrevole orizzontale,
   così il contenuto resta comunque consultabile. */
.kross-be-gallery:not( .slick-initialized ) {
	display: flex;
	gap: 24px;
	overflow-x: auto;
}

.kross-be-gallery:not( .slick-initialized ) > .kross-be-gallery__slide {
	flex: 1 0 260px;
	padding: 0;
}

/* --------------------------------------------------------------------------
 * Contenitore più largo del tema (`.kross-be-breakout`)
 *
 * Lo porta il contenitore di elenco, scheda, dati della prenotazione e
 * conferma con «Larghezza del contenitore» 75% / intera di Page settings (e il
 * layout «Lista con mappa», sempre a tutta larghezza).
 * -------------------------------------------------------------------------- */

/* Il 100vw comprende la barra di scorrimento: senza questo la pagina
   avrebbe uno scorrimento orizzontale (listing-layout.js ne scrive la
   larghezza in --kross-be-sbw). `clip` e non `hidden`, che farebbe del body
   un contenitore di scorrimento e fermerebbe lo sticky. */
body.kross-be-wide {
	overflow-x: clip;
}

/* Esce dal contenitore del tema (larghezza del contenuto, centrato) e si
   dimensiona sulla finestra, meno la barra di scorrimento. --kross-be-span è la
   parte di finestra occupata: 1 = tutta, 0.75 = il 75%.
   I margini hanno !important perché il layout "constrained" dei temi a blocchi
   li imposta a `auto !important` sui figli del contenuto. Con W = larghezza
   voluta, margine = 50% - W/2 (il contenitore del tema è centrato). */
body .kross-be-breakout {
	--kross-be-span: 1;
	box-sizing: border-box;
	width: calc( ( 100vw - var( --kross-be-sbw, 0px ) ) * var( --kross-be-span ) );
	max-width: none;
	margin-right: calc( 50% - ( 100vw - var( --kross-be-sbw, 0px ) ) * var( --kross-be-span ) / 2 ) !important;
	margin-left: calc( 50% - ( 100vw - var( --kross-be-sbw, 0px ) ) * var( --kross-be-span ) / 2 ) !important;
}

body .kross-be-breakout--75 {
	--kross-be-span: 0.75;
}

/* Senza le fasce interne del layout «Lista con mappa»: un po' di margine ai lati,
   perché il contenuto non tocchi il bordo della finestra. */
.kross-be-breakout:not( .kross-tpl-listing--split ) {
	padding-right: 16px;
	padding-left: 16px;
}

/* Su schermi stretti il 75% sarebbe una colonna sprecata: tutta la finestra. */
@media ( max-width: 900px ) {
	body .kross-be-breakout--75 {
		--kross-be-span: 1;
	}
}

/* --------------------------------------------------------------------------
 * Messaggi (stati vuoti / errore)
 * -------------------------------------------------------------------------- */

.kross-be-notice {
	font-style: italic;
	color: #777;
}

.kross-be-notice--error {
	color: #a33;
}