/**
 * Pagina Trattamenti.
 *
 * Accodato solo su questa pagina (§2.7). Usa i soli token di style.css.
 */

/* -----------------------------------------------------------------------------
 * Testata di pagina — condivisa con le altre pagine interne
 * -------------------------------------------------------------------------- */

.pao-page-hero {
	padding-block: clamp(64px, 8vw, 96px) clamp(72px, 9vw, 112px);
}

.pao-page-hero__inner {
	display: grid;
	gap: var(--pao-space-6);
}

.pao-page-hero__titolo {
	font-size: clamp(44px, 6vw, 72px);
	line-height: 1;
	letter-spacing: -0.035em;
	font-weight: 800;
	color: var(--pao-on-dark);
}

/* Il corsivo chiaro è il modo in cui il design distingue la seconda riga del
   titolo: peso 400 su un titolo a 800, non solo inclinazione. */
.pao-page-hero__titolo em {
	font-style: italic;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.7);
}

.pao-page-hero__sub {
	font-size: 17px;
	line-height: 1.7;
	color: var(--pao-on-dark-muted);
}

/* -----------------------------------------------------------------------------
 * Accordion
 * -------------------------------------------------------------------------- */

.pao-ac {
	padding-block: 0 clamp(80px, 9vw, 120px);
}

.pao-ac__voce {
	background-color: rgba(245, 245, 245, 0.6);
	border-bottom: var(--pao-hairline) solid var(--pao-border-strong);
	overflow: hidden;
}

.pao-ac__heading {
	margin: 0;
	font-size: inherit;
	letter-spacing: normal;
}

/* L'intestazione è un <button>: azzero l'aspetto nativo e ricostruisco la
   griglia del design. Il reset è esplicito perché un button eredita font e
   colore dal browser, non dal tema. */
/* Sotto md la riga del design non ci sta: quattro colonne lasciavano al titolo
   una colonna cosi' stretta da spingere il "+" fuori dal riquadro, che lo
   ritagliava (overflow: hidden). Qui diventa due righe — numero, titolo e "+"
   sopra, la foto a tutta larghezza sotto — e il titolo ha minmax(0, 1fr), che
   e' cio' che gli impedisce di sfondare quando una parola e' lunga. */
.pao-ac__testa {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) 44px;
	grid-template-areas:
		"num titolo icona"
		"thumb thumb thumb";
	gap: 14px;
	/* In alto e non al centro: il numero e il "+" si allineano alla prima riga
	   del titolo, che e' il punto in cui l'occhio entra nella scheda. */
	align-items: start;
	width: 100%;
	padding: 24px var(--pao-space-5);
	border: 0;
	background-color: transparent;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	user-select: none;
	transition: grid-template-columns var(--pao-dur-slow) var(--pao-ease-out);
}

.pao-ac__num {
	grid-area: num;
}

.pao-ac__thumb {
	grid-area: thumb;
}

.pao-ac__titolo-wrap {
	grid-area: titolo;
}

.pao-ac__icona {
	grid-area: icona;
}

.pao-ac__testa:focus-visible {
	outline: 2px solid var(--pao-accent);
	outline-offset: -2px;
}

.pao-ac__num {
	font-family: var(--pao-font-display);
	font-size: 32px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--pao-border-strong);
	text-align: left;
	transition: color var(--pao-dur-base) var(--pao-ease-out);
}

/* Sotto md la foto tiene la PROPORZIONE DEL FILE (3:2, come sono caricate
   tutte): a tutta larghezza con un'altezza fissa veniva tagliata sopra e
   sotto, e si vedeva meno che sul desktop. Cambiando formato alle foto, questo
   3/2 va cambiato con loro. */
.pao-ac__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	border-radius: var(--pao-radius-md);
	background-color: var(--pao-primary-light);
	overflow: hidden;
	transition: height var(--pao-dur-slow) var(--pao-ease-out);
}

.pao-ac__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pao-ac__titolo-wrap {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pao-ac__titolo {
	font-family: var(--pao-font-display);
	font-size: var(--pao-fs-treatment);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--pao-primary);
	transition: color var(--pao-dur-base) var(--pao-ease-out);
}

.pao-ac__titolo em {
	font-style: italic;
	font-weight: 400;
}

.pao-ac__tagline {
	max-width: 60ch;
	font-size: 14px;
	line-height: 1.4;
	color: var(--pao-muted);
}

.pao-ac__icona {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--pao-border-strong);
	border-radius: 50%;
	color: var(--pao-primary);
	justify-self: center;
	transition:
		background-color var(--pao-dur-base) var(--pao-ease-out),
		border-color var(--pao-dur-base) var(--pao-ease-out);
}

.pao-ac__icona svg {
	width: 18px;
	height: 18px;
	transition: transform 300ms var(--pao-ease-out);
}

.pao-ac__testa:hover .pao-ac__num {
	color: var(--pao-accent);
}

.pao-ac__testa:hover .pao-ac__titolo {
	color: var(--pao-primary-dark);
}

/* --- Stato aperto: guidato da aria-expanded, non da una classe ---
   Lo stato accessibile e lo stato visivo sono la stessa cosa: così non
   possono divergere, che è il modo in cui gli accordion si rompono. */
.pao-ac__testa[aria-expanded="true"] .pao-ac__num {
	color: var(--pao-accent);
}

.pao-ac__testa[aria-expanded="true"] .pao-ac__icona {
	background-color: var(--pao-primary);
	border-color: var(--pao-primary);
	color: var(--pao-on-dark);
}

.pao-ac__testa[aria-expanded="true"] .pao-ac__icona svg {
	transform: rotate(45deg);
}

/* --- Pannello ---
   grid-template-rows 0fr → 1fr anima l'altezza senza conoscerla in anticipo,
   che è l'unico modo pulito di aprire un contenuto di altezza variabile. */
.pao-ac__corpo {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--pao-dur-slow) var(--pao-ease-out);
}

.pao-ac__corpo.is-aperto {
	grid-template-rows: 1fr;
}

.pao-ac__corpo-inner {
	overflow: hidden;
}

.pao-ac__contenuto {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--pao-space-6);
	align-items: start;
	padding: 0 var(--pao-space-5) 48px 72px;
}

.pao-ac__intro {
	max-width: 72ch;
	margin-bottom: var(--pao-space-2);
	padding-bottom: var(--pao-space-5);
	border-bottom: var(--pao-hairline) solid var(--pao-border);
	font-size: 17px;
	line-height: 1.65;
	font-weight: 500;
	color: var(--pao-primary);
}

.pao-ac__col {
	display: flex;
	flex-direction: column;
	gap: var(--pao-space-3);
}

.pao-ac__col-titolo {
	font-family: var(--pao-font-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--pao-primary);
}

/* Il trattino giallo è decorativo: sta in ::before e non nel testo, così non
   finisce nel contenuto letto dagli screen reader né nei risultati di ricerca. */
.pao-ac__col-titolo::before {
	content: "—";
	margin-right: 10px;
	font-weight: 800;
	color: var(--pao-accent);
}

.pao-ac__col-testo {
	font-size: 15px;
	line-height: 1.75;
	color: var(--pao-body);
}

.pao-ac__cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pao-space-4);
	padding-top: var(--pao-space-2);
}

.pao-ac__nota {
	font-size: 14px;
	color: var(--pao-muted);
}

/* -----------------------------------------------------------------------------
 * Fascia CTA finale
 * -------------------------------------------------------------------------- */

.pao-banda-cta {
	padding-block: clamp(64px, 8vw, 96px);
	text-align: center;
}

.pao-banda-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--pao-space-5);
	max-width: 640px;
	margin-inline: auto;
	padding-inline: var(--pao-gutter);
}

.pao-banda-cta__titolo {
	font-size: clamp(34px, 4.6vw, 52px);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--pao-on-dark);
}

.pao-banda-cta__titolo em {
	font-style: italic;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.6);
}

.pao-banda-cta p {
	font-size: 17px;
	line-height: 1.65;
	color: var(--pao-on-dark-muted);
}

/* -----------------------------------------------------------------------------
 * Breakpoint
 * -------------------------------------------------------------------------- */

@media (min-width: 900px) {

	.pao-ac {
		padding-top: var(--pao-space-8);
	}

	/* Da qui ci sta la riga unica del design: numero, foto, titolo, "+". */
	.pao-ac__testa {
		grid-template-columns: 96px 108px minmax(0, 1fr) 96px;
		grid-template-areas: "num thumb titolo icona";
		gap: var(--pao-space-6);
		align-items: center;
		padding: 40px var(--pao-space-7);
	}

	.pao-ac__testa[aria-expanded="true"] {
		grid-template-columns: 96px 220px minmax(0, 1fr) 96px;
	}

	.pao-ac__num {
		font-size: 80px;
		text-align: right;
	}

	/* Da md torna la fascia bassa del design, ritagliata dal CSS. */
	.pao-ac__thumb {
		aspect-ratio: auto;
		height: 76px;
	}

	.pao-ac__testa[aria-expanded="true"] .pao-ac__thumb {
		height: 148px;
	}

	.pao-ac__contenuto {
		padding: 48px var(--pao-space-7) 64px calc(128px + var(--pao-space-7));
	}

	.pao-ac__intro {
		font-size: 20px;
		padding-bottom: 40px;
	}

	.pao-ac__cta {
		flex-direction: row;
		align-items: center;
		gap: 28px;
	}
}

@media (min-width: 1200px) {

	.pao-page-hero__inner {
		grid-template-columns: 1.1fr 1fr;
		gap: var(--pao-space-9);
		align-items: end;
	}

	.pao-page-hero__sub {
		align-self: end;
		padding-bottom: var(--pao-space-2);
	}

	.pao-ac__contenuto {
		grid-template-columns: 1fr 1fr;
		gap: var(--pao-space-8);
	}

	.pao-ac__intro,
	.pao-ac__cta {
		grid-column: span 2;
	}
}