/* ---------------------------------------------------------------------------
 * Archivio realizzazioni: griglia + filtri + infinite scroll.
 * Stili volutamente neutri, pensati per ereditare font e colori dal tema.
 * Le variabili qui sotto permettono di ritoccare velocemente senza cercare
 * nelle singole regole.
 * ------------------------------------------------------------------------- */

.ak-rlz {
	--ak-rlz-gap: 24px;
	--ak-rlz-min: 300px;      /* larghezza minima di una card prima di andare a capo */
	--ak-rlz-radius: 6px;
	--ak-rlz-ratio: 4 / 3;    /* proporzioni dell'immagine */
}

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

.ak-rlz-filtri {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin-bottom: calc(var(--ak-rlz-gap) * 1.25);
}

/* Filtri come testo semplice nero. Selettore molto specifico + !important per
 * annullare lo stile "bottone" che il tema VamTam applica a tutti i <button>. */
.ak-rlz .ak-rlz-filtri .ak-rlz-filtro,
.ak-rlz .ak-rlz-filtri .ak-rlz-filtro:hover,
.ak-rlz .ak-rlz-filtri .ak-rlz-filtro:focus,
.ak-rlz .ak-rlz-filtri .ak-rlz-filtro:active {
	appearance: none !important;
	-webkit-appearance: none !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	outline: none !important;
	color: #000 !important;
	font: inherit !important;
	font-size: 1.7rem !important;
	line-height: 1 !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
	width: auto !important;
	height: auto !important;
	border-radius: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-shadow: none !important;
	transform: none !important;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.ak-rlz .ak-rlz-filtri .ak-rlz-filtro {
	opacity: 0.55;
}

.ak-rlz .ak-rlz-filtri .ak-rlz-filtro:hover {
	opacity: 1;
}

/* Selezionato: solo grassetto, resta testo nero. */
.ak-rlz .ak-rlz-filtri .ak-rlz-filtro.attivo {
	opacity: 1 !important;
	font-weight: 700 !important;
}

/* --- Mappa (opzionale, tra filtri e griglia) ---------------------------- */

.ak-rlz-mappa-wrap {
	margin-bottom: calc(var(--ak-rlz-gap) * 1.5);
	margin-top: calc(var(--ak-rlz-gap) * 1.5);
}

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

.ak-rlz-griglia {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--ak-rlz-min), 1fr));
	gap: var(--ak-rlz-gap);
}

/* --- Correlate (single realizzazione) ----------------------------------- */
/* Poche schede: colonne fisse invece dell'auto-fill, cosi' 2 correlate non
 * diventano due card larghissime. Il numero e' pilotato dallo shortcode. */

.ak-rlz-correlate {
	--ak-rlz-cols: 3;
}

.ak-rlz-correlate .ak-rlz-griglia {
	grid-template-columns: repeat(var(--ak-rlz-cols), 1fr);
}

.ak-rlz-correlate__titolo {
	margin-bottom: var(--ak-rlz-gap);
}

/* --- Card --------------------------------------------------------------- */

/* Nessun underline e nessun colore-link (niente blu in hover): il tema colora
 * gli <a> al passaggio, quindi forziamo con specificita' + !important sia sul
 * link sia sui testi interni. */
.ak-rlz .ak-rlz-card,
.ak-rlz .ak-rlz-card:link,
.ak-rlz .ak-rlz-card:visited,
.ak-rlz .ak-rlz-card:hover,
.ak-rlz .ak-rlz-card:focus,
.ak-rlz .ak-rlz-card:active,
.ak-rlz .ak-rlz-card:hover .ak-rlz-card__settore {
	text-decoration: none !important;
	color: inherit !important;
}

.ak-rlz-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;

	/* Variabili del badge "Vedi realizzazione". Stanno sulla card (non su .ak-rlz)
	 * cosi' valgono anche dove la card e' riusata, es. lo slider in evidenza. */
	--ak-rlz-azione-size: 46px;   /* lato del quadrato */
	--ak-rlz-azione-bg: #fff;
	--ak-rlz-azione-fg: #000;
	--ak-rlz-azione-gap: 0px;     /* stacco fra quadrato ed etichetta (0 = un blocco unico) */
	--ak-rlz-azione-offset: 0px;  /* distanza dai bordi della foto */
	--ak-rlz-azione-max: 215px;   /* larghezza dell'etichetta aperta */
	--ak-rlz-azione-durata: 0.8s; /* velocita' di apertura */
	--ak-rlz-azione-ease: cubic-bezier(0.65, 0, 0.35, 1); /* parte e finisce dolce */
}

.ak-rlz-card__img {
	position: relative; /* aggancio per il badge */
	display: block;
	aspect-ratio: var(--ak-rlz-ratio);
	overflow: hidden;
	background: rgba(0, 0, 0, 0.06);
}

.ak-rlz-card__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s ease;
}

.ak-rlz-card:hover .ak-rlz-card__img img {
	transform: scale(1.25);
}

/* --- Badge "Vedi realizzazione" ----------------------------------------- */
/* Quadrato bianco con croce nera in basso a destra sulla foto; in hover
 * l'etichetta esce dal suo lato sinistro (verso l'interno della card). */

.ak-rlz-card__azione {
	position: absolute;
	right: var(--ak-rlz-azione-offset);
	bottom: var(--ak-rlz-azione-offset);
	z-index: 2;
	display: flex;
	align-items: stretch;
	gap: var(--ak-rlz-azione-gap);
	max-width: calc(100% - var(--ak-rlz-azione-offset) * 2);
	color: var(--ak-rlz-azione-fg);
	pointer-events: none; /* il click resta del link, niente interferenze */
}

.ak-rlz-card__azione-icona {
	position: relative;
	flex: 0 0 auto;
	width: var(--ak-rlz-azione-size);
	height: var(--ak-rlz-azione-size);
	background: var(--ak-rlz-azione-bg);
}

/* La croce: due barrette centrate, ruotano leggermente in hover. */
.ak-rlz-card__azione-icona::before,
.ak-rlz-card__azione-icona::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform var(--ak-rlz-azione-durata) var(--ak-rlz-azione-ease);
}

.ak-rlz-card__azione-icona::before {
	width: 40%;
	height: 2px;
}

.ak-rlz-card__azione-icona::after {
	width: 2px;
	height: 40%;
}

.ak-rlz-card:hover .ak-rlz-card__azione-icona::before {
	transform: translate(-50%, -50%) rotate(90deg);
}

.ak-rlz-card:hover .ak-rlz-card__azione-icona::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

/* L'etichetta: chiusa ha larghezza 0, in hover si apre da destra a sinistra.
 * --ak-rlz-azione-max va tenuto vicino alla larghezza reale del testo: e' il
 * traguardo dell'animazione, se e' molto piu' largo l'apertura sembra piu'
 * veloce (finisce prima di arrivare in fondo) e stacca netta. */
.ak-rlz-card__azione-testo {
	display: flex;
	align-items: center;
	overflow: hidden;
	max-width: 0;
	background: var(--ak-rlz-azione-bg);
	white-space: nowrap;
	transition: max-width var(--ak-rlz-azione-durata) var(--ak-rlz-azione-ease);
}

.ak-rlz-card__azione-testo > span {
	padding: 0 16px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	opacity: 0;
	transition: opacity calc(var(--ak-rlz-azione-durata) * 0.7) ease
		calc(var(--ak-rlz-azione-durata) * 0.15);
}

.ak-rlz-card:hover .ak-rlz-card__azione-testo {
	max-width: var(--ak-rlz-azione-max);
}

.ak-rlz-card:hover .ak-rlz-card__azione-testo > span {
	opacity: 1;
}

/* Il tema colora i testi dentro gli <a> in hover: qui teniamo il nero. */
.ak-rlz .ak-rlz-card:hover .ak-rlz-card__azione,
.ak-rlz .ak-rlz-card:hover .ak-rlz-card__azione-testo > span {
	color: var(--ak-rlz-azione-fg) !important;
}

/* Su touch (niente hover) l'etichetta resta aperta: altrimenti non si vedrebbe. */
@media (hover: none) {
	.ak-rlz-card__azione-testo {
		max-width: var(--ak-rlz-azione-max);
	}

	.ak-rlz-card__azione-testo > span {
		opacity: 1;
	}
}

/* Chi preferisce meno animazioni: niente apertura progressiva. */
@media (prefers-reduced-motion: reduce) {
	.ak-rlz-card__azione-testo,
	.ak-rlz-card__azione-testo > span,
	.ak-rlz-card__azione-icona::before,
	.ak-rlz-card__azione-icona::after {
		transition: none;
	}
}

.ak-rlz-card__body {
	display: block;
	padding: 14px 2px 0;
}

.ak-rlz-card__settore {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.6;
	margin-bottom: 4px;
}

.ak-rlz-card__titolo {
	display: block;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1.3;
}

/* Titolo colorato in hover. Serve !important e la variante con .ak-rlz davanti
 * per battere il "color: inherit !important" del reset qui sopra (il tema
 * VamTam colora gli <a>, quindi il reset non si puo' togliere). */
.ak-rlz-card:hover .ak-rlz-card__titolo,
.ak-rlz .ak-rlz-card:hover .ak-rlz-card__titolo {
	color: var(--ak-rlz-hover, #0088fa) !important;
	transition: color 0.25s ease;
}

	/* --- Sentinella / loader ------------------------------------------------ */

.ak-rlz-sentinella {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 60px;
	margin-top: var(--ak-rlz-gap);
}

.ak-rlz-loader {
	width: 26px;
	height: 26px;
	border: 3px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	opacity: 0.4;
	animation: ak-rlz-spin 0.8s linear infinite;
}

/* Lo spinner gira solo mentre si sta caricando. */
.ak-rlz:not(.is-loading) .ak-rlz-loader {
	visibility: hidden;
}

@keyframes ak-rlz-spin {
	to { transform: rotate(360deg); }
}

.ak-rlz-vuoto {
	margin: var(--ak-rlz-gap) 0;
	opacity: 0.7;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 767px) {
	.ak-rlz {
		--ak-rlz-gap: 16px;
		--ak-rlz-min: 220px;
	}

	.ak-rlz-correlate {
		--ak-rlz-cols: 2;
	}
}

@media (max-width: 480px) {
	.ak-rlz {
		--ak-rlz-min: 160px;
	}

	.ak-rlz-correlate {
		--ak-rlz-cols: 1;
	}

	/* Card piu' piccole: badge ed etichetta proporzionati. */
	.ak-rlz-card {
		--ak-rlz-azione-size: 36px;
		--ak-rlz-azione-max: 170px;
	}

	.ak-rlz-card__azione-testo > span {
		padding: 0 10px;
		font-size: 0.68rem;
	}
}