/* =========================================================================
 * Federnotai – Organigramma
 * Desktop  (> 1100px): griglia a 8 tracce, file 4 + 3 sfalsate, linee verticali "pendenti"
 * Tablet   (768–1100px): 2 colonne, linee verticali corte
 * Mobile   (< 768px): colonna singola, linea orizzontale sopra ogni componente
 * ========================================================================= */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

.fn-org {
	--fn-navy: #203f73;
	--g: clamp(2rem, 8.3vw, 10rem); /* spazio tra colonne: 160px a 1920px */
	--line-gap: 3rem;               /* distanza tra linea e nome */
	--title-fs: clamp(2.25rem, 3.2vw, 3.875rem);
	--pres-fs: 2rem;
	--axis: calc(var(--title-fs) * .6); /* asse verticale comune a titolo, linea e nome del Presidente */
	color: var(--fn-navy);
	padding: 6rem clamp(1.25rem, 5vw, 6rem);
	scroll-margin-top: var(--fn-header-h, 8rem); /* altezza header sticky */
}
.fn-org *,
.fn-org *::before,
.fn-org *::after { box-sizing: border-box; }

/* ---------- Header: titolo, linea, Presidente ---------- */
.fn-org__head {
	display: flex;
	align-items: flex-start;
	gap: clamp(1.5rem, 3vw, 3rem);
}
.fn-org__title {
	margin: 0;
	color: inherit;
	font-size: var(--title-fs);
	font-weight: 400;
	line-height: 1.2;
}
.fn-org__hline {
	flex: 0 1 15.625rem;
	height: 1px;
	margin-top: var(--axis);
	background: currentColor;
	transform-origin: left center;
}
.fn-org__president {
	flex: 0 1 31rem;
	/* centra la prima riga del nome sulla linea: asse - metà altezza riga (1.2 / 2) */
	margin-top: max(0px, calc(var(--axis) - var(--pres-fs) * .6));
}
.fn-org__president .fn-org__name {
	font-size: var(--pres-fs);
	line-height: 1.2;
}

/* ---------- Testi ---------- */
.fn-org__name {
	margin: 0;
	color: inherit;
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
}
.fn-org__role {
	margin: .35rem 0 1.5rem;
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.3;
}
.fn-org__bio {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.35;
}

/* ---------- Griglia desktop ---------- */
.fn-org__grid {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	column-gap: var(--g);
	row-gap: 7.5rem;
	margin: 13rem 0 0;
	padding: 0;
	list-style: none;
}
.fn-org__card {
	position: relative;
	grid-column: span 2;
	margin: 0;
	padding: 0;
	list-style: none;
}
.fn-org__card::before,
.fn-org__card::marker { content: none; } /* neutralizza i punti elenco del tema */

/* Ciclo 4 + 3: la quinta card di ogni ciclo parte a mezzo passo */
.fn-org__card:nth-child(7n+5) { grid-column: 2 / span 2; }

.fn-org__line {
	position: absolute;
	bottom: calc(100% + var(--line-gap));
	left: var(--lx, 30%);
	width: 1px;
	height: var(--lh, 6rem);
	background: currentColor;
	transform-origin: center bottom;
}

/* Altezza (--lh) e posizione (--lx) delle linee, ricavate dal Figma */
.fn-org__card:nth-child(7n+1) { --lh: 13rem;   --lx: 27%; }
.fn-org__card:nth-child(7n+2) { --lh: 4rem;    --lx: 31%; }
.fn-org__card:nth-child(7n+3) { --lh: 7.5rem;  --lx: 41%; }
.fn-org__card:nth-child(7n+4) { --lh: 20rem;   --lx: 33%; }
.fn-org__card:nth-child(7n+5) { --lh: 23rem; }
.fn-org__card:nth-child(7n+6) { --lh: 17.5rem; }
.fn-org__card:nth-child(7n+7) { --lh: 24.5rem; }

/* Le linee della seconda fila cadono negli spazi tra le card della prima */
.fn-org__card:nth-child(7n+5),
.fn-org__card:nth-child(7n+6),
.fn-org__card:nth-child(7n+7) { --lx: calc(50% - var(--g) * .35); }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
	.fn-org__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 6rem;
		row-gap: 6rem;
	}
	.fn-org__card,
	.fn-org__card:nth-child(7n+5) { grid-column: auto; }
	.fn-org__line {
		left: 0;
		height: 3rem;
		bottom: calc(100% + 1rem);
	}
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.fn-org { padding-block: 4rem; }
	.fn-org__head {
		flex-direction: column;
		gap: 1.25rem;
	}
	.fn-org__hline {
		flex: none;
		width: 4rem;
		margin: 0;
	}
	.fn-org__president {
		flex: none;
		margin-top: .5rem;
	}
	.fn-org__grid {
		grid-template-columns: 1fr;
		margin-top: 3rem;
		row-gap: 2.5rem;
	}
	.fn-org__line {
		position: static;
		display: block;
		width: 100%;
		height: 1px;
		margin-bottom: 1.5rem;
		transform-origin: left center;
	}
	.fn-org__role { margin-bottom: 1rem; }
}