/* ==========================================================================
   ZONA 7 — «partner»: diventa partner + il perimetro gratuito.
   Vestito minimo: ogni colore viene da assets/css/radar.css (già accodato
   prima di questo foglio, `templates/cerca.php`, foreach dei fogli-zona),
   quindi qui non si ridefinisce nessun token e il tema scuro si eredita da
   solo — niente light-dark() locale, non c'è nessun colore nuovo da coprire.
   `.pulsante` e `.contenitore` sono di `radar.css`: qui non si riscrivono.
   ========================================================================== */

/* --------------------------------------------------------------------------
   🚨 8/9/2026 — DA CENTRATO A GRIGLIA ASIMMETRICA.

   Era tutto incolonnato al centro: occhiello, titolo, due righe e un riquadro,
   con molta aria e niente da leggere. Gabriele: «povera di informazioni e
   scarna esteticamente». Codex (consulto di gusto, 8/9): griglia 5/7, il
   discorso a sinistra e i fatti a destra dentro **una superficie sola** divisa
   internamente — non quattro schedine separate, che è la forma da software
   americano e qui stonerebbe.

   ⚠ La colonna di sinistra è `position: sticky`: mentre si scorrono i quattro
   fatti, il titolo resta. Costa zero (nessuna animazione, nessun JavaScript) e
   si spegne da solo sotto i 900 px, dove le due colonne diventano una e uno
   sticky darebbe solo fastidio.
   -------------------------------------------------------------------------- */

.partner {
	padding-block: clamp(48px, 7vh, 88px);
}

.partner__contenitore {
	display: grid;
	gap: clamp(32px, 5vw, 72px);
}

@media (min-width: 900px) {
	.partner__contenitore {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		/* ⚠ `center`, non `start`. Codex proponeva `start` con la colonna di
		   sinistra `sticky`: misurato, il riquadro è alto ~550 px e il
		   discorso ~280, quindi lo sticky **non si attacca mai** — sarebbe
		   codice morto che finge un comportamento — e `start` lasciava 270 px
		   di vuoto sotto il titolo. Allineati al centro i due blocchi si
		   guardano. */
		align-items: center;
	}
}

/* --------------------------------------------------------------------------
   La testa: occhiello, titolo serif, paragrafo — a bandiera, non centrati.
   -------------------------------------------------------------------------- */

.partner__testa {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	max-width: 34rem;
	text-align: left;
}

.partner__occhiello {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0;
	font-size: .875rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--marchio);
}

.partner__occhiello::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 1px;
	background: var(--marchio);
}

.partner__titolo {
	margin: 0;
	max-width: 17ch;
	font: 400 clamp(1.9rem, 4vw, 3.4rem) / 1.06 var(--font-titolo, Georgia, serif);
	letter-spacing: -.025em;
	/* Il serif regge righe corte e strette: senza `balance` l'ultima riga
	   resta spesso con una parola sola, che su un titolo grande si vede. */
	text-wrap: balance;
}

.partner__titolo em {
	font-style: italic;
	color: var(--marchio);
}

.partner__lead {
	margin: 0;
	max-width: 38ch;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--testo-2);
}

/* Un collegamento di testo, non un terzo pulsante: la pagina dei prezzi è
   una lettura, non un'azione. La freccia si sposta di un soffio al
   passaggio — 160 ms, solo `transform`, e sta ferma con «riduci movimento». */
.partner__filo {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	margin-top: 4px;
	color: var(--testo);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--bordo);
	padding-bottom: 2px;
}

.partner__filo:hover,
.partner__filo:focus-visible {
	border-bottom-color: var(--marchio);
}

.partner__freccia {
	transition: transform 160ms cubic-bezier(.2, .8, .2, 1);
}

.partner__filo:hover .partner__freccia,
.partner__filo:focus-visible .partner__freccia {
	transform: translateX(.28em);
}

@media (prefers-reduced-motion: reduce) {
	.partner__freccia {
		transition: none;
	}

	.partner__filo:hover .partner__freccia,
	.partner__filo:focus-visible .partner__freccia {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Il perimetro gratuito: una superficie sola, divisa dentro.
   -------------------------------------------------------------------------- */

.partner__perimetro {
	position: relative;
	overflow: hidden;
	padding: clamp(24px, 3.4vw, 44px);
	background: var(--superficie-alt);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-grande, 18px);
}

/* ⚠ Dentro la fascia a tinta (→ `cerca.css`, «LE FASCE DI COLORE») questo
   riquadro avrebbe lo stesso fondo della sezione e **sparirebbe**: non un
   errore che si vede, un riquadro che smette di essere un riquadro. Sale di
   un gradino, a `--superficie`, che è esattamente il rapporto che aveva
   prima con l'avorio della pagina. */
.fascia-tinta .partner__perimetro {
	background: var(--tinta-fascia-sopra);
}

/* Il filo verticale color marchio sul fianco: è il segno che il riquadro
   appartiene a questa sezione e non è una scheda qualunque. Tre pixel di
   colore saturo, che è la spesa che la tavolozza consente. */
.partner__perimetro::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: var(--marchio);
}

.partner__perimetro-testa {
	padding-bottom: clamp(18px, 2.6vw, 28px);
}

.partner__perimetro-occhiello {
	margin: 0 0 6px;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--testo-2);
}

.partner__perimetro-titolo {
	margin: 0;
	max-width: 18ch;
	font: 400 clamp(1.5rem, 2.4vw, 2.1rem) / 1.15 var(--font-titolo, Georgia, serif);
	color: var(--testo);
}

/* I quattro fatti: 2×2, separati da linee vere invece che da spazio. Le
   linee fanno il lavoro che farebbero quattro riquadri, senza aggiungere
   quattro riquadri. */
.partner__fatti {
	display: grid;
	gap: 0;
	margin: 0;
	border-top: 1px solid var(--bordo);
}

@media (min-width: 620px) {
	.partner__fatti {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.partner__fatto:nth-child(odd) {
		padding-right: clamp(16px, 2.4vw, 32px);
		border-right: 1px solid var(--bordo);
	}

	.partner__fatto:nth-child(even) {
		padding-left: clamp(16px, 2.4vw, 32px);
	}
}

.partner__fatto {
	min-width: 0;
	padding-block: clamp(16px, 2.2vw, 24px);
	border-bottom: 1px solid var(--bordo);
}

.partner__fatti dt {
	margin-bottom: 5px;
	font-weight: 700;
	color: var(--testo);
}

.partner__fatti dd {
	margin: 0;
	font-size: .95rem;
	line-height: 1.55;
	color: var(--testo-2);
}

.partner__azioni {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding-top: clamp(20px, 2.8vw, 30px);
}