

:root {
	/* Flag */
	--kw-flag-bg: #9b303b;          /* colore del quadratino */
	--kw-flag-fg: #ffffff;          /* colore della spunta */
	--kw-flag-size: 1.15em;
	--kw-flag-radius: 3px;

	/* Elenco equipaggiamento */
	--kw-equip-peso: 600;           /* peso del testo delle voci */
	--kw-equip-gap-x: 2.5rem;       /* spazio tra le colonne */
	--kw-equip-gap-y: .6rem;        /* spazio tra le righe */
	--kw-equip-gap-gruppi: 2.25rem; /* spazio tra le categorie */
	--kw-equip-min: 15rem;          /* sotto questa larghezza una colonna va a capo */
	--kw-equip-assente: #6b7480;    /* voci non presenti (mostra_tutti): 4.7:1 su bianco */

	/* Galleria */
	--kw-gal-gap: .75rem;
	--kw-gal-min: 9rem;             /* larghezza minima di una miniatura */
	--kw-gal-ratio: 4 / 3;
	--kw-gal-radius: 6px;
	--kw-gal-sfondo: #eef0f3;       /* mentre la foto si carica */

	/* Lightbox */
	--kw-lb-sfondo: rgba(10, 12, 16, .92);

	/* Focus visibile: cambia qui lo stile per il cliente */
	--kw-focus: 3px solid #1f5fbf;
	--kw-focus-offset: 3px;
	--kw-focus-lb: 3px solid #ffffff; /* dentro la lightbox (sfondo scuro) */
}


/* ------------------------------------------------------------------
   Testo solo per lettori di schermo
   ------------------------------------------------------------------ */

.kw-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}


/* ------------------------------------------------------------------
   Equipaggiamento
   ------------------------------------------------------------------ */

.kw-equip {
	display: grid;
	gap: var(--kw-equip-gap-gruppi);
}

.kw-equip .kw-equip__titolo {
	margin: 0 0 1rem;
	padding: 0;
}

/* Colonne: al massimo --kw-equip-cols (attributo "colonne"),
   e vanno a capo da sole quando non c'è spazio: niente media query. */
.kw-equip ul.kw-equip__lista {
	display: grid;
	grid-template-columns: repeat(
		auto-fill,
		minmax(
			min(100%, max(var(--kw-equip-min), (100% - (var(--kw-equip-cols, 2) - 1) * var(--kw-equip-gap-x)) / var(--kw-equip-cols, 2))),
			1fr
		)
	);
	gap: var(--kw-equip-gap-y) var(--kw-equip-gap-x);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.kw-equip li.kw-equip__voce {
	display: flex;
	align-items: flex-start;
	gap: .6em;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.4;
	font-weight: var(--kw-equip-peso);
	list-style: none !important;
}
h3.kw-equip__titolo {
    font-size: 2rem;
    color: #fff;
}
span.kw-equip__nome {
    color: #fff;
    font-size: 1rem;
    font-weight: 300;
}
.kw-equip li.kw-equip__voce::marker {
	content: none;
}

.kw-equip__flag {
	display: inline-flex;
	flex: 0 0 var(--kw-flag-size);
	align-items: center;
	justify-content: center;
	width: var(--kw-flag-size);
	height: var(--kw-flag-size);
	margin-top: .125em; /* centrato sulla prima riga: (1.4 - 1.15) / 2 */
	border-radius: var(--kw-flag-radius);
	background: var(--kw-flag-bg);
	color: var(--kw-flag-fg);
}

.kw-equip__flag svg {
	display: block;
	width: 78%;
	height: 78%;
}

/* Voci non presenti (solo con mostra_tutti="1"):
   quadratino vuoto + testo grigio + "non presente" per i lettori di schermo */
.kw-equip li.kw-equip__voce.is-assente {
	color: var(--kw-equip-assente);
	font-weight: 400;
}

.kw-equip__voce.is-assente .kw-equip__flag {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px currentColor;
}


/* ------------------------------------------------------------------
   Galleria
   ------------------------------------------------------------------ */

.kw-galleria {
	container-type: inline-size;
}

.kw-galleria ul.kw-galleria__griglia {
	display: grid;
	grid-template-columns: repeat(
		auto-fill,
		minmax(
			min(100%, max(var(--kw-gal-min), (100% - (var(--kw-gal-cols, 4) - 1) * var(--kw-gal-gap)) / var(--kw-gal-cols, 4))),
			1fr
		)
	);
	gap: var(--kw-gal-gap);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.kw-galleria li.kw-galleria__voce {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.kw-galleria li.kw-galleria__voce::marker {
	content: none;
}

.kw-galleria__link {
	display: block;
	overflow: hidden;
	aspect-ratio: var(--kw-gal-ratio);
	border-radius: var(--kw-gal-radius);
	background: var(--kw-gal-sfondo);
}

.kw-galleria .kw-galleria__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kw-galleria__link:focus-visible {
	outline: var(--kw-focus);
	outline-offset: var(--kw-focus-offset);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	a.kw-galleria__link .kw-galleria__img {
		transition: transform .35s ease;
	}

	a.kw-galleria__link:hover .kw-galleria__img {
		transform: scale(1.04);
	}
}

/* principale="1": prima foto grande, 2 colonne × 2 righe */
.kw-galleria--principale .kw-galleria__voce:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

.kw-galleria--principale .kw-galleria__voce:first-child .kw-galleria__link {
	height: 100%;
	aspect-ratio: auto;
}

/* Galleria stretta: la prima foto prende tutta la riga */
@container (max-width: 30rem) {
	.kw-galleria--principale .kw-galleria__voce:first-child {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.kw-galleria--principale .kw-galleria__voce:first-child .kw-galleria__link {
		height: auto;
		aspect-ratio: var(--kw-gal-ratio);
	}
}


/* ------------------------------------------------------------------
   Lightbox
   ------------------------------------------------------------------ */

html.kw-lightbox-aperto {
	overflow: hidden;
}

.kw-lightbox {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: transparent;
	color: #ffffff;
}

.kw-lightbox::backdrop {
	background: var(--kw-lb-sfondo);
}

.kw-lightbox__stage {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4rem 5rem;
	box-sizing: border-box;
}

.kw-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 4px;
	user-select: none;
}

.kw-lightbox__contatore {
	position: absolute;
	bottom: 1.25rem;
	left: 50%;
	margin: 0;
	padding: .3rem .85rem;
	transform: translateX(-50%);
	border-radius: 999px;
	background: rgba(0, 0, 0, .55);
	font-size: .875rem;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
}

.kw-lightbox__btn {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #ffffff;
	cursor: pointer;
}

.kw-lightbox__btn:hover {
	background: rgba(255, 255, 255, .28);
}

.kw-lightbox__btn:focus-visible {
	outline: var(--kw-focus-lb);
	outline-offset: 3px;
}

.kw-lightbox__btn[hidden],
.kw-lightbox__contatore[hidden] {
	display: none;
}

.kw-lightbox__btn svg {
	width: 1.5rem;
	height: 1.5rem;
}

.kw-lightbox__chiudi {
	top: 1rem;
	right: 1rem;
}

.kw-lightbox__prec,
.kw-lightbox__succ {
	top: 50%;
	transform: translateY(-50%);
}

.kw-lightbox__prec {
	left: 1rem;
}

.kw-lightbox__succ {
	right: 1rem;
}

/* Telefono: frecce in basso, foto quasi a tutto schermo */
@media (max-width: 767px) {
	.kw-lightbox__stage {
		padding: 4rem .5rem 5rem;
	}

	.kw-lightbox__prec,
	.kw-lightbox__succ {
		top: auto;
		bottom: 1rem;
		transform: none;
	}

	.kw-lightbox__contatore {
		bottom: 1.6rem;
	}
}
