/* ==========================================================================
   KW Progetti – stili frontend (include del tema figlio)
   Colori, focus e font dei titoli arrivano da KW_Progetti::config() in
   kw-progetti.php come variabili su :root (stile inline dopo questo file).
   ========================================================================== */

:root {
	--kw-progetto-accento: #1d9d93;
	--kw-progetto-box: #ebebeb;
	--kw-progetto-scuro: #1f1f1f;
	--kw-progetto-tenue: #5c5c5c;          /* 5.4:1 sul box #ebebeb */
	--kw-galleria-spazio: clamp(0.5rem, 0.3rem + 0.8vw, 1rem);
	--kw-focus-colore: var(--kw-progetto-accento);
	--kw-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

.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;
}

/* --------------------------------------------------------------------------
   Testo
   -------------------------------------------------------------------------- */

.kw-progetto-testo .kw-progetto-testo__titolo {
	margin: 0 0 0.85em;
	padding: 0;
	font-size: clamp(1.75rem, 1.15rem + 1.9vw, 2.5rem);
	line-height: 1.04;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--kw-progetto-scuro);
}

.kw-progetto-testo .kw-progetto-testo__corpo {
	max-width: 62ch;
}

.kw-progetto-testo .kw-progetto-testo__corpo p {
	margin: 0 0 1.15em;
	padding: 0;
}

.kw-progetto-testo .kw-progetto-testo__corpo > :last-child {
	margin-bottom: 0;
}

.kw-progetto-testo .kw-progetto-testo__corpo strong,
.kw-progetto-testo .kw-progetto-testo__corpo b {
	font-weight: 600;
	color: var(--kw-progetto-scuro);
}

.kw-progetto-testo .kw-progetto-testo__corpo a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--kw-progetto-accento);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   Informazioni
   -------------------------------------------------------------------------- */

.kw-progetto-info {
	display: grid;
	gap: clamp(1.25rem, 0.9rem + 1vw, 1.75rem);
	margin: 0;
	padding: clamp(1.75rem, 1rem + 3vw, 3.25rem) clamp(1.5rem, 0.75rem + 3.5vw, 3.75rem);
	background: var(--kw-progetto-box);
}

.kw-progetto-info .kw-progetto-info__voce {
	display: grid;
	grid-template-columns: 0.75em minmax(0, 1fr);
	column-gap: 1.1em;
	margin: 0;
}

/* Freccia: maschera SVG, prende il colore d'accento. */
.kw-progetto-info .kw-progetto-info__voce::before {
	content: "";
	grid-row: 1 / span 2;
	width: 0.75em;
	height: 0.75em;
	margin-top: 0.28em;
	background: var(--kw-progetto-accento);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.6 2.6 18 12l-9.4 9.4-2.6-2.6L12.8 12 6 5.2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.6 2.6 18 12l-9.4 9.4-2.6-2.6L12.8 12 6 5.2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kw-progetto-info .kw-progetto-info__etichetta {
	grid-column: 2;
	margin: 0;
	font-family: var(--kw-progetto-font-titoli, inherit);
	font-size: 1.0625rem;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--kw-progetto-scuro);
}

.kw-progetto-info .kw-progetto-info__valore {
	grid-column: 2;
	margin: 0.35em 0 0;
	padding: 0;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--kw-progetto-tenue);
}

/* --------------------------------------------------------------------------
   Galleria
   Sotto i 768 px: 2 colonne, prima immagine a tutta larghezza.
   Da 768 px: colonne da impostazioni, prima immagine 2×2.
   L'ultima immagine si allarga per chiudere la riga (classi --coda / --sola).
   Le proporzioni arrivano dallo shortcode ('galleria_formato' in config).
   -------------------------------------------------------------------------- */

.kw-galleria .kw-galleria__lista {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-flow: dense;
	gap: var(--kw-galleria-spazio);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kw-galleria .kw-galleria__voce {
	position: relative;
	margin: 0;
	padding: 0;
	overflow: hidden;
	aspect-ratio: var(--kw-galleria-formato, 4 / 3);
	background: rgba(128, 128, 128, 0.14);
}

.kw-galleria--evidenza .kw-galleria__voce:first-child {
	grid-column: span 2;
}

@media (max-width: 767.98px) {
	.kw-galleria--evidenza .kw-galleria__voce:last-child:nth-child(even):not(:first-child),
	.kw-galleria--griglia .kw-galleria__voce:last-child:nth-child(odd) {
		grid-column: span 2;
		aspect-ratio: var(--kw-galleria-formato-doppio, 8 / 3);
	}
}

@media (min-width: 768px) {
	.kw-galleria .kw-galleria__lista {
		grid-template-columns: repeat(var(--kw-galleria-colonne, 3), minmax(0, 1fr));
	}

	.kw-galleria--evidenza:not(.kw-galleria--c2) .kw-galleria__voce:first-child {
		grid-row: span 2;
		aspect-ratio: auto;
	}

	.kw-galleria .kw-galleria__voce--coda {
		grid-column: span var(--kw-coda, 1);
		aspect-ratio: auto;
	}

	.kw-galleria .kw-galleria__voce--sola {
		aspect-ratio: var(--kw-coda-formato, 4 / 1);
	}
}

.kw-galleria .kw-galleria__link {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	color: #fff;
	cursor: zoom-in;
}

.kw-galleria .kw-galleria__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transform: scale(1.001);
	transition: transform 1.1s var(--kw-ease), filter 0.6s var(--kw-ease);
}

/* Velatura dal basso e pulsante "+" che entra ruotando. */
.kw-galleria .kw-galleria__link::before,
.kw-galleria .kw-galleria__link::after {
	content: "";
	position: absolute;
	z-index: 1;
	pointer-events: none;
}

.kw-galleria .kw-galleria__link::before {
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 55%);
	opacity: 0;
	transition: opacity 0.5s var(--kw-ease);
}

.kw-galleria .kw-galleria__link::after {
	right: clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem);
	bottom: clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem);
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--kw-progetto-accento) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 1.1rem no-repeat;
	opacity: 0;
	transform: scale(0.5) rotate(-90deg);
	transition: transform 0.55s var(--kw-ease), opacity 0.3s var(--kw-ease);
}

@media (hover: hover) {
	.kw-galleria .kw-galleria__link:hover .kw-galleria__img {
		transform: scale(1.06);
	}
	.kw-galleria .kw-galleria__link:hover::before {
		opacity: 1;
	}
	.kw-galleria .kw-galleria__link:hover::after {
		opacity: 1;
		transform: none;
	}
}

.kw-galleria .kw-galleria__link:focus-visible::before {
	opacity: 1;
}

.kw-galleria .kw-galleria__link:focus-visible::after {
	opacity: 1;
	transform: none;
}

/* Segnaposto nel Visual Builder. */
.kw-galleria .kw-galleria__segnaposto {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(-45deg, rgba(128, 128, 128, 0.18) 0 12px, rgba(128, 128, 128, 0.08) 12px 24px);
}

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

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

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

.kw-lightbox[open] {
	display: grid;
	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
	animation: kw-lightbox-entra 0.4s var(--kw-ease);
}

.kw-lightbox::backdrop {
	background: rgba(12, 12, 12, 0.94);
	animation: kw-lightbox-sfondo 0.4s var(--kw-ease);
}

.kw-lightbox__palco {
	display: grid;
	place-items: center;
	min-height: 0;
	padding: clamp(3.75rem, 6vh, 5rem) clamp(0.75rem, 6vw, 6rem);
}

.kw-lightbox__figura {
	display: grid;
	justify-items: center;
	gap: 0.85rem;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
}

.kw-lightbox__img {
	display: block;
	max-width: min(100%, 1800px);
	max-height: calc(100vh - 9rem);
	max-height: calc(100dvh - 9rem);
	width: auto;
	height: auto;
	object-fit: contain;
	transition: opacity 0.4s var(--kw-ease), transform 0.5s var(--kw-ease);
	user-select: none;
	-webkit-user-drag: none;
}

.kw-lightbox.is-uscita .kw-lightbox__img {
	opacity: 0;
	transform: translateX(calc(var(--kw-dir, 0) * -2.5rem));
	transition-duration: 0.18s;
}

.kw-lightbox.is-entrata .kw-lightbox__img {
	opacity: 0;
	transform: translateX(calc(var(--kw-dir, 0) * 2.5rem));
	transition: none;
}

.kw-lightbox__didascalia {
	display: flex;
	gap: 1.5rem;
	justify-content: space-between;
	width: 100%;
	font-size: 0.875rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.78);
}

.kw-lightbox__contatore {
	margin-left: auto;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.kw-lightbox__btn {
	position: fixed;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.25);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.3s var(--kw-ease), border-color 0.3s var(--kw-ease), transform 0.3s var(--kw-ease);
}

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

.kw-lightbox__btn:hover {
	background: var(--kw-progetto-accento);
	border-color: var(--kw-progetto-accento);
}

.kw-lightbox__btn:active {
	transform: scale(0.94);
}

.kw-lightbox__btn--chiudi {
	top: clamp(0.75rem, 2vw, 1.5rem);
	right: clamp(0.75rem, 2vw, 1.5rem);
}

.kw-lightbox__btn--prec,
.kw-lightbox__btn--succ {
	top: 50%;
	margin-top: -1.5rem;
}

.kw-lightbox__btn--prec {
	left: clamp(0.75rem, 2vw, 1.5rem);
}

.kw-lightbox__btn--succ {
	right: clamp(0.75rem, 2vw, 1.5rem);
}

.kw-lightbox--singola .kw-lightbox__btn--prec,
.kw-lightbox--singola .kw-lightbox__btn--succ,
.kw-lightbox--singola .kw-lightbox__contatore {
	display: none;
}

@media (max-width: 767.98px) {
	.kw-lightbox__btn--prec,
	.kw-lightbox__btn--succ {
		top: auto;
		bottom: 1rem;
		margin-top: 0;
	}
}

@keyframes kw-lightbox-entra {
	from { opacity: 0; transform: scale(0.985); }
	to { opacity: 1; transform: none; }
}

@keyframes kw-lightbox-sfondo {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Focus da tastiera (classe kw-focus; 'focus' => 'tema' in config la toglie)
   -------------------------------------------------------------------------- */

.kw-focus a:focus-visible,
.kw-focus button:focus-visible {
	outline: 2px solid var(--kw-focus-colore);
	outline-offset: 2px;
}

.kw-galleria.kw-focus .kw-galleria__link:focus-visible {
	outline: 3px solid var(--kw-focus-colore);
	outline-offset: -3px;
}

/* --------------------------------------------------------------------------
   Movimento ridotto
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.kw-galleria .kw-galleria__img,
	.kw-galleria .kw-galleria__link::before,
	.kw-galleria .kw-galleria__link::after,
	.kw-lightbox__img,
	.kw-lightbox__btn {
		transition: none;
	}
	.kw-galleria .kw-galleria__link:hover .kw-galleria__img {
		transform: none;
	}
	.kw-lightbox[open],
	.kw-lightbox::backdrop {
		animation: none;
	}
	.kw-lightbox.is-uscita .kw-lightbox__img,
	.kw-lightbox.is-entrata .kw-lightbox__img {
		transform: none;
	}
}