/*
 * Homepage fasi progettuali
 *
 * Card bianche con contorno scuro, una sovrapposta all'altra.
 * Su una card: sale sopra le altre, si allunga, mostra il testo e il pallino diventa arancione.
 * Le altre card si attenuano un poco, cosi' l'attenzione resta su quella aperta.
 *
 * Variabili che puoi cambiare (anche da fuori, su un contenitore):
 *   --cf-ink      contorno e testo           (default #21242a)
 *   --cf-dot      pallino a riposo           (default #467ef7)
 *   --cf-accent   pallino a card aperta      (default #ed7466)
 *   --cf-h        altezza della card chiusa  (default 3.5rem)
 *   --cf-overlap  quanto si sovrappongono    (default 1.5rem)
 *   --cf-reserve  spazio extra sotto le card chiuse, per la card aperta che "scende" (default 0)
 */

.cf-fasi {
	--cf-ink: #21242a;
	--cf-dot: #467ef7;
	--cf-accent: #ed7466;
	--cf-bg: #ffffff;
	--cf-h: 3.5rem;
	--cf-overlap: 1.5rem;
	--cf-reserve: 0rem;
	--cf-ease: cubic-bezier(0.16, 1, 0.3, 1);   /* parte veloce e si ferma morbida, senza rimbalzi */
	--cf-dur: 0.7s;

	position: relative;
	display: flex;
	align-items: flex-start;
	box-sizing: border-box;
	width: 100%;
	/* altezza fissa = card chiusa: la card aperta scende SOPRA il contenuto sotto, senza spostarlo e senza vuoti riservati */
	height: calc(var(--cf-h) + 1.5rem + var(--cf-reserve));
	padding: 0.75rem 0.5rem;
}

.cf-fasi *,
.cf-fasi *::before,
.cf-fasi *::after {
	box-sizing: border-box;
}

/* ---------- la card ---------- */

.cf-fase {
	position: relative;
	z-index: calc(var(--i, 0) + 1);   /* a riposo, ogni card sta sopra la precedente */
	flex: 1 1 0;
	min-width: 0;
	min-height: var(--cf-h);
	margin: 0;
	background: var(--cf-bg);
	color: var(--cf-ink);
	border: 1.5px solid var(--cf-ink);
	border-radius: calc(var(--cf-h) / 2);
	cursor: default;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	/* chiusura: lo z-index scende solo a fine animazione, cosi' la card non finisce sotto mentre si richiude */
	transition:
		border-radius var(--cf-dur) var(--cf-ease),
		translate var(--cf-dur) var(--cf-ease),
		box-shadow var(--cf-dur) var(--cf-ease),
		border-color 0.5s ease,
		color 0.5s ease,
		z-index 0s linear 0.6s;
}

.cf-fase + .cf-fase {
	margin-left: calc(var(--cf-overlap) * -1);
}

/* aperta: mouse, tastiera (focus) o tocco (.is-open, messa dallo script) */
.cf-fasi:not(.cf-touch) .cf-fase:hover,
.cf-fasi:not(.cf-touch) .cf-fase:focus-within,
.cf-fase.is-open {
	z-index: 30;
	translate: 0 -0.25rem;
	border-radius: 1.5rem;
	box-shadow:
		0 0.25rem 0.5rem -0.25rem rgba(33, 36, 42, 0.08),
		0 2rem 3rem -1.75rem rgba(33, 36, 42, 0.38);
	transition:
		border-radius var(--cf-dur) var(--cf-ease),
		translate var(--cf-dur) var(--cf-ease),
		box-shadow var(--cf-dur) var(--cf-ease),
		border-color 0.5s ease,
		color 0.5s ease,
		z-index 0s;
}

/* le altre card, mentre una e' aperta, si attenuano (solo contorno e testo: lo sfondo resta pieno, quindi la sovrapposizione non si "vede attraverso") */
.cf-fasi:not(.cf-touch):has(.cf-fase:hover, .cf-fase:focus-within) .cf-fase:not(:hover):not(:focus-within),
.cf-fasi:has(.cf-fase.is-open) .cf-fase:not(.is-open) {
	border-color: color-mix(in srgb, var(--cf-ink) 28%, transparent);
	color: color-mix(in srgb, var(--cf-ink) 45%, transparent);
}

.cf-fasi:not(.cf-touch):has(.cf-fase:hover, .cf-fase:focus-within) .cf-fase:not(:hover):not(:focus-within) .cf-fase__dot,
.cf-fasi:has(.cf-fase.is-open) .cf-fase:not(.is-open) .cf-fase__dot {
	opacity: 0.45;
}

.cf-fase:focus-visible {
	outline: 3px solid var(--cf-dot);
	outline-offset: 3px;
}

/* ---------- testata: pallino + titolo ---------- */

.cf-fase__head {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	min-height: calc(var(--cf-h) - 3px);
	/* a destra lasciamo lo spazio che la card successiva copre */
	padding: 0 calc(var(--cf-overlap) + 0.75rem) 0 0.85rem;
}

.cf-fase__dot {
	position: relative;
	flex: none;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--cf-dot);
	transition: background-color 0.5s ease, scale var(--cf-dur) var(--cf-ease), opacity 0.5s ease;
}

/* anello che si allarga dal pallino e svanisce, una volta sola all'apertura */
.cf-fase__dot::after {
	content: "";
	position: absolute;
	inset: -1.5px;
	border: 1.5px solid var(--cf-accent);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}

.cf-fasi:not(.cf-touch) .cf-fase:hover .cf-fase__dot,
.cf-fasi:not(.cf-touch) .cf-fase:focus-within .cf-fase__dot,
.cf-fase.is-open .cf-fase__dot {
	background: var(--cf-accent);
	scale: 1.06;
}

.cf-fasi:not(.cf-touch) .cf-fase:hover .cf-fase__dot::after,
.cf-fasi:not(.cf-touch) .cf-fase:focus-within .cf-fase__dot::after,
.cf-fase.is-open .cf-fase__dot::after {
	animation: cf-ring 1.1s var(--cf-ease) both;
}

.cf-fasi .cf-fase__titolo {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--paragraph, 1rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ---------- testo: si apre verso il basso ---------- */

.cf-fase__corpo {
	display: grid;
	grid-template-rows: 0fr;
	margin-top: 0;
	transition: grid-template-rows var(--cf-dur) var(--cf-ease), margin-top var(--cf-dur) var(--cf-ease);
}

/* Nasconde i paragrafi extra generati da WordPress */
.cf-fasi .cf-fase__corpo > p {
    display: none !important;
}

.cf-fasi:not(.cf-touch) .cf-fase:hover .cf-fase__corpo,
.cf-fasi:not(.cf-touch) .cf-fase:focus-within .cf-fase__corpo,
.cf-fase.is-open .cf-fase__corpo {
	grid-template-rows: 1fr;
	margin-top: -0.4rem;   /* il testo sta piu' vicino al titolo */
}

.cf-fase__corpo-in {
	min-height: 0;
	overflow: hidden;
}

.cf-fasi .cf-fase__corpo p {
	margin: 0;
	padding: 0 calc(var(--cf-overlap) + 1rem) 1.1rem 1.25rem;
	color: inherit;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--paragraph, 1rem);
	font-weight: 400;
	line-height: 1.5;
	opacity: 0;
	translate: 0 0.6rem;
	filter: blur(3px);
	transition: opacity 0.25s ease, translate 0.35s ease, filter 0.25s ease;
}

.cf-fasi:not(.cf-touch) .cf-fase:hover .cf-fase__corpo p,
.cf-fasi:not(.cf-touch) .cf-fase:focus-within .cf-fase__corpo p,
.cf-fase.is-open .cf-fase__corpo p {
	opacity: 1;
	translate: 0 0;
	filter: blur(0);
	/* il testo si mette a fuoco dopo che la card ha iniziato ad allungarsi */
	transition:
		opacity 0.6s ease 0.16s,
		translate 0.8s var(--cf-ease) 0.16s,
		filter 0.6s ease 0.16s;
}

/* ---------- ingresso: le card compaiono una dopo l'altra (lo script aggiunge .cf-ready e .is-in) ---------- */

.cf-fasi.cf-ready:not(.is-in) .cf-fase {
	opacity: 0;
}

.cf-fasi.is-in .cf-fase {
	animation: cf-in 1s var(--cf-ease) calc(var(--i, 0) * 0.08s) backwards;
}

/* ---------- animazioni ---------- */

@keyframes cf-in {
	from { opacity: 0; translate: 0 1.25rem; }
	to   { opacity: 1; translate: 0 0; }
}

@keyframes cf-ring {
	0%   { opacity: 0.8; scale: 1; }
	100% { opacity: 0;   scale: 2.1; }
}

/* ---------- telefono e tablet: le card si impilano, si aprono con un tocco ---------- */

@media (max-width: 900px) {
	.cf-fasi {
		--cf-overlap: 0rem;
		flex-direction: column;
		gap: 0.75rem;
		height: auto;
		padding: 0.5rem;
	}

	.cf-fase {
		flex: none;
		width: 100%;
	}

	.cf-fase + .cf-fase {
		margin-left: 0;
	}

	.cf-fasi .cf-fase.is-open,
	.cf-fasi:not(.cf-touch) .cf-fase:hover,
	.cf-fasi:not(.cf-touch) .cf-fase:focus-within {
		translate: 0 0;
	}
}

/* chi preferisce meno movimento: niente animazioni, solo cambi di stato */

@media (prefers-reduced-motion: reduce) {
	.cf-fase,
	.cf-fase__dot,
	.cf-fase__corpo,
	.cf-fasi .cf-fase__corpo p {
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
		animation: none !important;
	}

	.cf-fase__dot::after {
		animation: none !important;
	}

	.cf-fasi.cf-ready:not(.is-in) .cf-fase {
		opacity: 1;
	}
}