/*
 * Homepage — traduzione dell'handoff Claude Design in layout reale.
 *
 * Le misure (padding 96px, max-width 1280, raggi, colori) sono quelle
 * dell'handoff. Il layout non è però scalato: a ogni breakpoint viene
 * reinterpretato, come chiede il capitolato §24.
 *
 * Header, footer e le primitive di card sono condivisi con le pagine
 * interne: vivono in layout.css, caricato separatamente (M9). Qui restano
 * solo le sezioni esclusive della homepage.
 */

/* ========================================================================
   HERO
   ======================================================================== */
.p21-hero {
	position: relative;
	overflow: hidden;
	min-height: 640px;
	display: grid;
}
.p21-hero__media,
.p21-hero__scrim,
.p21-hero__tint,
.p21-hero__content,
.p21-hero__corners { grid-area: 1 / 1; }

.p21-hero__media { width: 100%; height: 100%; object-fit: cover; }

/* Velo chiaro sulla sinistra: rende leggibile la headline sopra la foto
   senza spegnere l'immagine dal lato del soggetto. */
.p21-hero__scrim {
	background: linear-gradient(100deg,
		rgba(250, 249, 245, 0.5),
		rgba(250, 249, 245, 0.66),
		rgba(255, 255, 255, 0.72) 46%,
		rgba(255, 255, 255, 0.22) 60%,
		rgba(255, 255, 255, 0) 72%);
}
.p21-hero__tint {
	background: linear-gradient(180deg, rgba(0, 126, 150, 0) 55%, rgba(0, 126, 150, 0.16) 100%);
}

.p21-hero__content {
	position: relative;
	z-index: 2;
	max-width: var(--p21-container);
	width: 100%;
	margin-inline: auto;
	display: grid;
	/* L'handoff indica 1.05fr/1fr, ma con quelle proporzioni le due CTA non
	   stanno su una riga sola e vanno a capo, che non e' l'effetto voluto.
	   La colonna di destra e' comunque solo spazio decorativo sopra la foto,
	   e il velo chiaro copre fino al 72%: allargare il testo non intacca il
	   soggetto ne' il contrasto. */
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	align-items: stretch;
}
.p21-hero__text {
	padding: 80px var(--p21-gutter) 72px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.p21-hero__title {
	margin: 0 0 26px;
	font-size: clamp(2.75rem, 5.2vw, 4.25rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}
.p21-hero__title span { display: block; }
.p21-hero__title .is-cyan { color: var(--p21-cyan-text); }
.p21-hero__title .is-green { color: var(--p21-green-text); }

.p21-hero__lead {
	margin: 0 0 34px;
	font-size: 1.3125rem;
	line-height: 1.6;
	color: var(--p21-grey-700);
	max-width: 34ch;
}

.p21-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px; }

.p21-hero__badge {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	background: var(--p21-grey-50);
	border: 1px solid var(--p21-grey-200);
	border-radius: var(--p21-radius-lg);
	max-width: 520px;
}
.p21-hero__badge img { height: 40px; width: auto; flex-shrink: 0; }
.p21-hero__badge strong {
	display: block;
	font-family: var(--p21-font-display);
	font-weight: 700;
	font-size: 1rem;
	color: var(--p21-ink);
	margin-bottom: 2px;
}
.p21-hero__badge span { font-size: 0.9375rem; color: var(--p21-grey-700); }

/* Angoli decorativi in basso a destra. */
.p21-hero__corners {
	position: relative;
	z-index: 3;
	align-self: end;
	justify-self: end;
	pointer-events: none;
	width: 300px;
	height: 130px;
}
.p21-hero__corners span { position: absolute; right: 0; bottom: 0; border-radius: 100% 0 0 0; }
.p21-hero__corners span:first-child { width: 300px; height: 130px; background: rgba(130, 183, 24, 0.88); }
.p21-hero__corners span:last-child { width: 210px; height: 86px; background: rgba(0, 167, 198, 0.92); }

/* ========================================================================
   COMUNITÀ
   ======================================================================== */
.p21-comunita__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 56px;
	align-items: center;
}
.p21-comunita__text p { font-size: 1.125rem; line-height: 1.65; color: var(--p21-grey-700); margin-bottom: 16px; }
.p21-comunita__text .p21-btn { margin-top: 12px; }
.p21-comunita__media img { border-radius: var(--p21-radius-2xl); width: 100%; }

/* ========================================================================
   LE AUTONOMIE
   ======================================================================== */
.p21-autonomie { position: relative; overflow: hidden; }
.p21-autonomie__blob {
	position: absolute;
	top: -120px; left: -80px;
	width: 340px; height: 340px;
	border-radius: var(--p21-radius-pill);
	background: var(--p21-grey-100);
	pointer-events: none;
}
.p21-autonomie__head { text-align: center; max-width: 700px; margin: 0 auto 48px; position: relative; }

.p21-cards-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; position: relative; }

.p21-area {
	text-decoration: none;
	background: var(--p21-white);
	border: 1px solid var(--p21-grey-200);
	border-radius: var(--p21-radius-xl);
	padding: 28px 24px 0;
	display: flex;
	flex-direction: column;
	min-height: 290px;
	box-shadow: var(--p21-shadow-sm);
	transition: box-shadow var(--p21-duration-fast) var(--p21-ease),
	            transform var(--p21-duration-fast) var(--p21-ease);
}
.p21-area:hover { box-shadow: var(--p21-shadow-lg); transform: translateY(-3px); }

.p21-area__icon {
	width: 64px; height: 64px;
	border-radius: var(--p21-radius-pill);
	display: grid;
	place-items: center;
	margin-bottom: 20px;
	background: var(--p21-green);
}
.p21-area__title {
	margin: 0 0 10px;
	font-size: 1.375rem;
	color: var(--p21-green-text);
	text-transform: uppercase;
}
.p21-area__text { margin: 0 0 24px; font-size: 1.03125rem; line-height: 1.6; color: var(--p21-grey-700); }
.p21-area__bar { margin-top: auto; height: 5px; border-radius: 3px 3px 0 0; background: var(--p21-green); display: block; }

/* Le aree alternano ciano e verde, come nell'handoff. */
.p21-area--cyan .p21-area__icon,
.p21-area--cyan .p21-area__bar { background: var(--p21-cyan); }
.p21-area--cyan .p21-area__title { color: var(--p21-cyan-text); }

/* ========================================================================
   MOSAICO FOTOGRAFICO
   ======================================================================== */
.p21-mosaico__head { max-width: 640px; margin-bottom: 40px; }
.p21-mosaico__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 200px;
	gap: 16px;
}
.p21-mosaico__grid figure { margin: 0; overflow: hidden; border-radius: var(--p21-radius-lg); }
/* object-position: top, non il default "center" — su richiesta del
   committente (29/08/2026): con object-fit:cover il default centra
   verticalmente il ritaglio, e su foto di persone tagliava via la parte
   alta (teste/volti) più spesso di quanto lasciasse fuori la parte bassa. */
.p21-mosaico__grid img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.p21-mosaico__grid figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.p21-mosaico__grid figure:nth-child(4) { grid-column: span 2; }

/* ========================================================================
   IMPATTO
   ======================================================================== */
.p21-impatto__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.6fr) minmax(0, 2fr);
	gap: 48px;
	align-items: center;
}
.p21-impatto__numbers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.p21-impatto__value {
	font-family: var(--p21-font-display);
	font-weight: 800;
	font-size: clamp(2rem, 3vw, 2.75rem);
	line-height: 1;
	color: var(--p21-cyan-text);
	font-variant-numeric: tabular-nums;
	display: block;
	margin-bottom: 8px;
}
.p21-impatto__label { font-size: 0.9375rem; line-height: 1.45; color: var(--p21-grey-700); }

/* Avviso mostrato SOLO a chi è autenticato: i dati mancano e la sezione non
   viene pubblicata finché non arrivano numeri verificati. */
.p21-notice-admin {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--p21-warning);
	background: #fff6e5;
	border: 1px solid #f0dfbe;
	border-radius: var(--p21-radius-pill);
	padding: 8px 14px;
	margin-bottom: 24px;
}

/* ========================================================================
   STORIE / NEWS
   ======================================================================== */
.p21-storie__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.7fr) minmax(0, 2.3fr);
	gap: 40px;
	align-items: start;
}

/* ========================================================================
   5X1000
   ======================================================================== */
.p21-cinque { position: relative; overflow: hidden; padding-block: 80px; }
.p21-cinque__blob {
	position: absolute;
	right: -140px; top: -140px;
	width: 420px; height: 420px;
	border-radius: var(--p21-radius-pill);
	background: var(--p21-cyan-50);
	pointer-events: none;
}
.p21-cinque__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.9fr);
	gap: 40px;
	align-items: center;
}
.p21-cinque__title { margin: 0 0 14px; font-size: clamp(1.75rem, 2.8vw, 2.5rem); line-height: 1.1; text-transform: uppercase; color: var(--p21-cyan-text); }
.p21-cinque__title em { font-style: normal; color: var(--p21-green-text); }

.p21-cinque__cf { border-left: 1px solid var(--p21-grey-200); padding-left: 40px; }
.p21-cinque__cf-label {
	margin: 0 0 6px;
	font-family: var(--p21-font-display);
	font-weight: 700;
	font-size: 0.875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--p21-grey-600);
}
.p21-cinque__cf-value {
	margin: 0 0 18px;
	font-family: var(--p21-font-display);
	font-weight: 800;
	font-size: clamp(1.875rem, 3.4vw, 2.75rem);
	line-height: 1;
	color: var(--p21-cyan-text);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
}
.p21-cinque__qr { display: flex; align-items: center; gap: 20px; }
.p21-cinque__qr svg { width: 120px; height: 120px; flex-shrink: 0; border-radius: var(--p21-radius-md); }
.p21-cinque__qr p { font-size: 0.9375rem; line-height: 1.5; color: var(--p21-grey-700); }

/* ========================================================================
   RESPONSIVE — solo sezioni esclusive della homepage.
   ======================================================================== */
@media (max-width: 1100px) {
	.p21-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.p21-impatto__numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
	/* Sotto i 980 px lo hero smette di sovrapporre testo e fotografia e li
	   IMPILA: foto sopra, testo sotto su fondo bianco.

	   L'alternativa — tenere la sovrapposizione e schiarire il velo — rendeva
	   la headline leggibile solo coprendo la foto quasi per intero, e la
	   fotografia sparisce. Le persone e le attivita' sono il centro del
	   messaggio: meglio mostrarle davvero che ridurle a una texture. */
	.p21-hero { display: block; min-height: 0; }
	.p21-hero__media {
		position: static;
		width: 100%;
		/* 3:2 anziche' 4:3: la sorgente e' panoramica (1900x1050) e un
		   riquadro piu' quadrato ne taglierebbe via i lati. Il punto di
		   ritaglio e' spostato a destra e leggermente in basso perche' e' li'
		   che si trova il soggetto: centrarlo mostrerebbe soprattutto lo
		   sfondo chiaro sopra la testa. */
		aspect-ratio: 3 / 2;
		object-position: 62% 45%;
	}
	.p21-hero__scrim,
	.p21-hero__tint,
	.p21-hero__corners { display: none; }
	.p21-hero__content { display: block; }
	.p21-hero__text { padding: 40px var(--p21-gutter) 48px; }

	.p21-comunita__grid,
	.p21-impatto__grid,
	.p21-storie__grid { grid-template-columns: 1fr; gap: 32px; }

	.p21-cinque__grid { grid-template-columns: 1fr; gap: 32px; }
	.p21-cinque__cf { border-left: 0; border-top: 1px solid var(--p21-grey-200); padding-left: 0; padding-top: 28px; }

	.p21-mosaico__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
	.p21-mosaico__grid figure:nth-child(1) { grid-column: span 2; }
	.p21-mosaico__grid figure:nth-child(4) { grid-column: span 2; }
}

@media (max-width: 640px) {
	.p21-cards-4 { grid-template-columns: 1fr; }
	.p21-impatto__numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.p21-hero__actions .p21-btn { width: 100%; justify-content: center; }
	.p21-mosaico__grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
	.p21-mosaico__grid figure:nth-child(n) { grid-column: span 1; grid-row: span 1; }
	.p21-cinque__qr { flex-direction: column; align-items: flex-start; }
}