/* ==========================================================================
   KW Progetti – archivio dei progetti [kw_progetti_archivio]
   Palette ricavata dalla home Meitec: crema, sabbia, bruno.
   I titoli usano il font dei titoli di Divi (h3), l'occhiello il testo.
   ========================================================================== */

:root {
	--kw-pa-scuro: #2b2621;
	--kw-pa-tenue: #6b6258;          /* 4.9:1 sul crema #f2eee7 */
	--kw-pa-crema: #f4efe7;
	--kw-pa-sabbia: #ddd5ca;         /* fondo delle schede mentre l'immagine carica */
	--kw-pa-riga: rgba(43, 38, 33, 0.16);
	--kw-pa-spazio: clamp(0.75rem, 0.45rem + 0.9vw, 1.25rem);
	--kw-pa-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--kw-pa-ease-uscita: cubic-bezier(0.7, 0, 0.3, 1);
}

.kw-pa {
	position: relative;
}

.kw-pa-vuoto {
	color: var(--kw-pa-tenue);
}

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

/* --------------------------------------------------------------------------
   Barra dei filtri
   -------------------------------------------------------------------------- */

.kw-pa .kw-pa__barra {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	margin: 0 0 clamp(1.5rem, 1rem + 2vw, 2.75rem);
	padding: 0 0 0.9rem;
	border-bottom: 1px solid var(--kw-pa-riga);
}

.kw-pa .kw-pa__filtri {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem clamp(1.25rem, 0.8rem + 1.5vw, 2.25rem);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.kw-pa .kw-pa__filtri li {
	margin: 0;
	padding: 0;
}

.kw-pa .kw-pa__filtro {
	position: relative;
	display: inline-flex;
	align-items: flex-start;
	gap: 0.3em;
	padding: 0.2em 0 0.35em;
	font-family: var(--kw-progetto-font-titoli, inherit);
	font-size: clamp(1.125rem, 1rem + 0.45vw, 1.4rem);
	line-height: 1.2;
	color: var(--kw-pa-tenue);
	text-decoration: none;
	transition: color 0.4s var(--kw-pa-ease);
}

.kw-pa .kw-pa__filtro::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--kw-pa-scuro);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.6s var(--kw-pa-ease);
}

.kw-pa .kw-pa__filtro:hover,
.kw-pa .kw-pa__filtro[aria-current="true"] {
	color: var(--kw-pa-scuro);
}

.kw-pa .kw-pa__filtro[aria-current="true"]::after {
	transform: scaleX(1);
}

.kw-pa .kw-pa__conta {
	font-family: inherit;
	font-size: 0.55em;
	line-height: 1;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	opacity: 0.75;
}

.kw-pa .kw-pa__stato {
	margin: 0;
	padding: 0 0 0.35em;
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kw-pa-tenue);
}

@media (max-width: 767.98px) {
	.kw-pa .kw-pa__barra {
		flex-direction: column;
		align-items: stretch;
	}
	/* Filtri su una riga scorrevole. */
	.kw-pa .kw-pa__filtri {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-right: calc(-1 * var(--kw-pa-spazio));
		padding-right: var(--kw-pa-spazio);
		scrollbar-width: none;
	}
	.kw-pa .kw-pa__filtri::-webkit-scrollbar {
		display: none;
	}
	.kw-pa .kw-pa__filtro {
		white-space: nowrap;
	}
}

/* --------------------------------------------------------------------------
   Mosaico
   Mobile: una colonna, verticali e orizzontali alternate.
   Da 768 px: 12 colonne. Larga 8 (16:10) + stretta 4 (stessa altezza,
   quindi 4:5), terzi 4:5, metà 4:3, tutta larghezza 21:9: le righe hanno
   quasi la stessa altezza e il ritmo resta regolare.
   -------------------------------------------------------------------------- */

.kw-pa .kw-pa__griglia {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--kw-pa-spazio);
	margin: 0 !important;      /* contro gli stili degli elenchi del tema */
	padding: 0 !important;
	list-style: none !important;
}

.kw-pa .kw-pa__card {
	position: relative;
	margin: 0;
	padding: 0;
	aspect-ratio: 4 / 3;
	container-type: inline-size;
}

.kw-pa .kw-pa__card[hidden] {
	display: none !important;
}

.kw-pa .kw-pa__card--narrow,
.kw-pa .kw-pa__card--third {
	aspect-ratio: 4 / 5;
}

@media (min-width: 768px) {
	.kw-pa .kw-pa__griglia {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}
	.kw-pa .kw-pa__card--wide {
		grid-column: span 8;
		aspect-ratio: 16 / 10;
	}
	.kw-pa .kw-pa__card--narrow {
		grid-column: span 4;
		aspect-ratio: auto;
	}
	.kw-pa .kw-pa__card--third {
		grid-column: span 4;
		aspect-ratio: 4 / 5;
	}
	.kw-pa .kw-pa__card--half {
		grid-column: span 6;
		aspect-ratio: 4 / 3;
	}
	.kw-pa .kw-pa__card--full {
		grid-column: 1 / -1;
		aspect-ratio: 21 / 9;
	}
}

/* --------------------------------------------------------------------------
   Scheda
   -------------------------------------------------------------------------- */

.kw-pa .kw-pa__link {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	background: var(--kw-pa-sabbia);
}

.kw-pa .kw-pa__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.kw-pa .kw-pa__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transform: scale(1.02);
	filter: saturate(0.92);
	transition:
		transform 1.4s var(--kw-pa-ease),
		filter 0.8s var(--kw-pa-ease);
}

/* Velatura dal basso: compare con il titolo. */
.kw-pa .kw-pa__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(24, 20, 16, 0.8) 0%, rgba(24, 20, 16, 0.28) 42%, rgba(24, 20, 16, 0) 72%);
	opacity: 0;
	transition: opacity 0.6s var(--kw-pa-ease);
	pointer-events: none;
}

.kw-pa .kw-pa__didascalia {
	position: absolute;
	z-index: 2;
	left: clamp(1rem, 6cqi, 2.75rem);
	right: clamp(1rem, 6cqi, 2.75rem);
	bottom: clamp(1rem, 6cqi, 2.5rem);
}

.kw-pa .kw-pa__occhiello {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 0.7rem;
	padding: 0;
	font-size: 0.6875rem;
	line-height: 1.3;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	opacity: 0;
	transform: translateY(0.6rem);
	transition:
		opacity 0.5s var(--kw-pa-ease),
		transform 0.7s var(--kw-pa-ease);
}

/* La linea dell'occhiello, come nelle intestazioni della home. */
.kw-pa .kw-pa__linea {
	display: block;
	width: 0;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
	transition: width 0.8s var(--kw-pa-ease) 0.15s;
}

/* Il titolo sale da dietro una maschera. */
.kw-pa .kw-pa__titolo {
	margin: 0;
	padding: 0 0 0.1em;
	margin-bottom: -0.1em;
	overflow: hidden;
	font-size: clamp(1.5rem, 7.5cqi, 3.5rem);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.01em;
	color: #fff;
	text-wrap: balance;
}

.kw-pa .kw-pa__titolo > span {
	display: block;
	transform: translateY(105%);
	transition: transform 0.8s var(--kw-pa-ease) 0.05s;
}

.kw-pa .kw-pa__freccia {
	position: absolute;
	z-index: 2;
	top: clamp(0.85rem, 5cqi, 1.75rem);
	right: clamp(0.85rem, 5cqi, 1.75rem);
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	opacity: 0;
	transform: rotate(-45deg) scale(0.8);
	transition:
		opacity 0.4s var(--kw-pa-ease),
		transform 0.6s var(--kw-pa-ease);
}

.kw-pa .kw-pa__freccia svg {
	width: 1.2rem;
	height: 1.2rem;
}

/* Stato attivo: hover con il mouse, focus da tastiera. */
.kw-pa .kw-pa__link:focus-visible .kw-pa__img {
	transform: scale(1.08);
	filter: saturate(1.05);
}

.kw-pa .kw-pa__link:focus-visible::after,
.kw-pa .kw-pa__link:focus-visible .kw-pa__occhiello,
.kw-pa .kw-pa__link:focus-visible .kw-pa__freccia {
	opacity: 1;
	transform: none;
}

.kw-pa .kw-pa__link:focus-visible .kw-pa__titolo > span {
	transform: none;
}

.kw-pa .kw-pa__link:focus-visible .kw-pa__linea {
	width: 2.5rem;
}

@media (hover: hover) {
	.kw-pa .kw-pa__link:hover .kw-pa__img {
		transform: scale(1.08);
		filter: saturate(1.05);
	}

	.kw-pa .kw-pa__link:hover::after,
	.kw-pa .kw-pa__link:hover .kw-pa__occhiello,
	.kw-pa .kw-pa__link:hover .kw-pa__freccia {
		opacity: 1;
		transform: none;
	}

	.kw-pa .kw-pa__link:hover .kw-pa__titolo > span {
		transform: none;
	}

	.kw-pa .kw-pa__link:hover .kw-pa__linea {
		width: 2.5rem;
	}

	/* Riflettore: gli altri progetti si spengono un poco. */
	.kw-pa .kw-pa__griglia:has(.kw-pa__link:hover) .kw-pa__card:not(:hover) .kw-pa__img {
		filter: saturate(0.3) brightness(0.78);
	}
}

/* Touch: titolo sempre visibile. */
@media (hover: none) {
	.kw-pa .kw-pa__link::after,
	.kw-pa .kw-pa__occhiello,
	.kw-pa .kw-pa__freccia {
		opacity: 1;
		transform: none;
	}
	.kw-pa .kw-pa__titolo > span {
		transform: none;
	}
	.kw-pa .kw-pa__linea {
		width: 2rem;
	}
}

/* Senza immagine: fondo sabbia e titolo scuro sempre visibile. */
.kw-pa .kw-pa__card--senza-immagine .kw-pa__link {
	color: var(--kw-pa-scuro);
}
.kw-pa .kw-pa__card--senza-immagine .kw-pa__link::after {
	display: none;
}
.kw-pa .kw-pa__card--senza-immagine .kw-pa__titolo,
.kw-pa .kw-pa__card--senza-immagine .kw-pa__occhiello {
	color: var(--kw-pa-scuro);
	opacity: 1;
	transform: none;
}
.kw-pa .kw-pa__card--senza-immagine .kw-pa__titolo > span {
	transform: none;
}

/* --------------------------------------------------------------------------
   Cursore «Scopri» (solo mouse, aggiunto dal JS al body)
   -------------------------------------------------------------------------- */

.kw-pa--cursore .kw-pa__link {
	cursor: none;
}

.kw-pa--cursore .kw-pa__freccia {
	display: none;
}

.kw-pa-cursore {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100000;
	width: 0;
	height: 0;
	pointer-events: none;
	will-change: transform;
}

.kw-pa-cursore__bolla {
	position: absolute;
	top: -3.4rem;
	left: -3.4rem;
	display: grid;
	place-items: center;
	width: 6.8rem;
	height: 6.8rem;
	border-radius: 50%;
	background: var(--kw-pa-crema);
	color: var(--kw-pa-scuro);
	font-family: var(--kw-progetto-font-titoli, Georgia, serif);
	font-size: 1.05rem;
	font-style: italic;
	line-height: 1;
	transform: scale(0);
	transition: transform 0.5s var(--kw-pa-ease);
}

.kw-pa-cursore.is-attivo .kw-pa-cursore__bolla {
	transform: scale(1);
}

/* --------------------------------------------------------------------------
   Comparsa allo scorrimento: le immagini si scoprono dal basso.
   Riguarda solo le schede sotto la piega al caricamento (classe dal JS).
   -------------------------------------------------------------------------- */

.kw-pa--anima .kw-pa__media {
	clip-path: inset(0 0 0 0);
	transition: clip-path 1.2s var(--kw-pa-ease-uscita) var(--kw-ritardo, 0s);
}

.kw-pa--anima .kw-pa__card.is-attesa .kw-pa__media {
	clip-path: inset(100% 0 0 0);
}

.kw-pa--anima .kw-pa__card.is-attesa .kw-pa__img {
	transform: scale(1.22);
}

.kw-pa--anima .kw-pa__card .kw-pa__img {
	transition:
		transform 1.6s var(--kw-pa-ease) var(--kw-ritardo, 0s),
		filter 0.8s var(--kw-pa-ease);
}

/* --------------------------------------------------------------------------
   Transizione dei filtri (View Transitions API)
   -------------------------------------------------------------------------- */

html.kw-pa-transizione::view-transition-group(*) {
	animation-duration: 0.7s;
	animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}

html.kw-pa-transizione::view-transition-old(root),
html.kw-pa-transizione::view-transition-new(root) {
	animation: none;
}

/* --------------------------------------------------------------------------
   Focus da tastiera (classe kw-focus, vedi 'focus' in config)
   -------------------------------------------------------------------------- */

.kw-pa.kw-focus .kw-pa__link:focus-visible {
	outline: 3px solid var(--kw-focus-colore, var(--kw-pa-scuro));
	outline-offset: 3px;
}

.kw-pa.kw-focus .kw-pa__filtro:focus-visible {
	outline: 2px solid var(--kw-focus-colore, var(--kw-pa-scuro));
	outline-offset: 4px;
}

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

@media (prefers-reduced-motion: reduce) {
	.kw-pa .kw-pa__img,
	.kw-pa .kw-pa__titolo > span,
	.kw-pa .kw-pa__occhiello,
	.kw-pa .kw-pa__freccia,
	.kw-pa .kw-pa__linea,
	.kw-pa .kw-pa__filtro::after {
		transition-duration: 0.01ms;
		transition-delay: 0s;
	}
	.kw-pa .kw-pa__link:hover .kw-pa__img,
	.kw-pa .kw-pa__link:focus-visible .kw-pa__img {
		transform: scale(1.02);
	}
}