/*
 * Profilo — stile del blocco.
 * CSS estratto dal foglio Studio e ritokenizzato.
 */

/* I decori del ritratto sporgono oltre la colonna: senza `clip` la griglia di
   pallini genera scroll orizzontale sotto i ~1200px di viewport. `clip` e non
   `hidden` perche' non crea un contenitore di scroll e non rompe `sticky`.

   ⚠️ Ma questa sezione NON e' a tutta larghezza: il suo box e' la colonna da
   1280px, quindi il bordo di taglio cade a 80px dal viewport a 1440 — cioe'
   13px DENTRO la card smeraldo, che sporge di 37px (8% di 467) contro i 24px
   di padding disponibili. Misurato: gli angoli sinistri della card uscivano
   tagliati netti mentre i destri restavano arrotondati.
   `overflow-clip-margin` sposta il bordo di taglio verso l'esterno: la card
   si vede intera, i pallini restano tagliati (sono una texture, non hanno
   angoli) e il taglio a monte resta comunque quello di `.page-article`, che
   e' largo quanto il viewport e impedisce lo scroll orizzontale.
   Dove non e' supportato (< Safari 16) si torna al taglio di prima: nessun
   rischio nuovo.

   ⚠️ E serve `overflow: clip` sui DUE assi. Misurato: con `overflow-x: clip`
   e `overflow-y: visible` Chrome calcola `overflow-clip-margin: 24px` ma NON
   lo applica — la card restava tagliata a 80px mentre `getComputedStyle` e i
   rettangoli dicevano che andava bene (il rettangolo di un elemento non
   racconta come viene DIPINTO: va guardato il pixel). Sull'asse verticale non
   si perde niente: confrontata con la sezione senza alcun taglio, la
   differenza e' di 312 pixel, cioe' i pallini oltre i 24px di margine. */
.ds-profilo {
	padding-block: var(--ds-space-3xl, 6rem);
	overflow: clip;
	overflow-clip-margin: var(--ds-space-m, 1.5rem);
}

.ds-profilo__inner {
	max-width: var(--ds-content, 1280px);
	margin-inline: auto;
	padding-inline: var(--ds-space-m, 1.5rem);
}

.ds-profilo__eyebrow {
	display: inline-flex; align-items: center; gap: 0.6rem;
	margin: 0 0 var(--ds-space-l, 2rem);
	font-family: var(--ds-font-mono, monospace);
	font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--ds-soft, #6b6862);
}

.ds-profilo__eyebrow::before {
	content: ""; width: 1.75rem; height: 2px; border-radius: 2px;
	background: var(--ds-lime, #20b07a);
}

.ds-profilo__grid { display: grid; gap: var(--ds-space-2xl, 4rem); }

/* Ritratto decorato: card a gradiente (z1) e griglia di pallini (z0) dietro la
   foto (z2), come nel blocco `ritratto` della home. Stesse misure e stessi
   token, ma specchiati a sinistra: qui la colonna a destra e' il testo. */
.ds-profilo__media {
	position: relative;
	isolation: isolate; /* contesto di stacking, come .ds-ritratto */
}

/* Card a gradiente — dietro la foto, traslata in basso/sinistra */
.ds-profilo__card {
	position: absolute;
	z-index: 1;
	inset: 0;
	border-radius: var(--ds-radius-md, 12px);
	background: linear-gradient(
		135deg,
		var(--ds-lime, #20b07a),
		color-mix(in srgb, var(--ds-lime, #20b07a) 35%, var(--ds-ink, #292929))
	);
	transform: translate(-8%, 10%);
}

/* Griglia di pallini — dietro tutto, traslata in alto/sinistra */
.ds-profilo__dots {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 70%;
	height: 80%;
	transform: translate(-30%, -15%);
	background-image: radial-gradient(var(--ds-text, #292929) 1.4px, transparent 1.6px);
	background-size: 18px 18px;
	opacity: 0.18;
	pointer-events: none;
}

.ds-profilo__frame {
	position: relative; z-index: 2; margin: 0;
	aspect-ratio: 4 / 5;
	border: 1px solid var(--ds-line, #e2dfd9);
	border-radius: var(--ds-radius-md, 12px);
	/* `--ds-card`, non `--ds-inset`: in light `--ds-inset` vale esattamente
	   `--ds-bg`, quindi il frame spariva nel fondo pagina e la card smeraldo
	   dietro sembrava appoggiata al nulla. Stesso token di `ritratto`. */
	background: var(--ds-card, #fff);
	overflow: hidden;
}

.ds-profilo__frame img {
	display: block; width: 100%; height: 100%; object-fit: cover;
}

/* Senza foto: il monogramma, non «Inserire ritratto definitivo». */
.ds-profilo__watermark {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	opacity: 0.14;
}

.ds-profilo__watermark svg {
	width: 46%; height: auto; aspect-ratio: 345 / 184;
}

.ds-profilo__badge {
	position: absolute; left: 1rem; bottom: 1rem;
	display: grid; gap: 0.15rem;
	padding: 0.75rem 1rem;
	border-radius: var(--ds-radius-md, 12px);
	background: var(--ds-card, #fff);
	border: 1px solid var(--ds-line, #e2dfd9);
	max-width: calc(100% - 2rem);
}

.ds-profilo__badge-value {
	font-family: var(--ds-font-display, serif);
	font-weight: 500; font-size: 1.375rem; line-height: 1;
	color: var(--ds-text, #292929);
}

.ds-profilo__badge-label {
	font-size: 0.8125rem; line-height: 1.35;
	color: var(--ds-soft, #6b6862);
}

.ds-profilo__kicker {
	margin: 0 0 var(--ds-space-s, 1rem);
	font-size: 1rem;
	color: var(--ds-accent-text, #0d6f4a);
}

.ds-profilo__heading {
	margin: 0; max-width: 16ch;
	font-family: var(--ds-font-display, serif);
	font-weight: 500;
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
	line-height: 1.1; letter-spacing: -0.02em;
	color: var(--ds-text, #292929);
}

.ds-profilo__mark { position: relative; display: inline-block; white-space: nowrap; }

.ds-profilo__mark-line {
	position: absolute; left: 0; right: 0; bottom: -0.12em;
	width: 100%; height: 0.26em;
	color: var(--ds-lime, #20b07a); overflow: visible;
}

.ds-profilo__mark-line path { stroke-dasharray: 1; stroke-dashoffset: 0; }

@media (prefers-reduced-motion: no-preference) {
	.js .ds-profilo__mark-line path {
		stroke-dashoffset: 1;
		transition: stroke-dashoffset 760ms cubic-bezier(0.22, 1, 0.36, 1) 160ms;
	}
	.js .is-revealed .ds-profilo__mark-line path { stroke-dashoffset: 0; }
}

.ds-profilo__body p {
	margin: var(--ds-space-m, 1.5rem) 0 0; max-width: 56ch;
	font-size: 1.0625rem; line-height: 1.7;
	color: var(--ds-soft, #6b6862);
}

.ds-profilo__values {
	list-style: none;
	display: flex; flex-wrap: wrap; gap: 0.5rem;
	margin: var(--ds-space-l, 2rem) 0 0; padding: 0;
}

/* Chip: uno dei pochi elementi che restano pill nel sistema. */
.ds-profilo__value {
	padding: 0.4rem 0.85rem;
	border: 1px solid var(--ds-line, #e2dfd9);
	border-radius: var(--ds-radius-pill, 999px);
	font-size: 0.8125rem;
	color: var(--ds-text, #292929);
}

.ds-profilo__actions { margin: var(--ds-space-l, 2rem) 0 0; }

@media (min-width: 900px) {
	/* `center` e non `start`: la colonna di testo e' piu' corta del ritratto e
	   allineata in alto lasciava un vuoto sotto lungo quanto mezza card. */
	.ds-profilo__grid { grid-template-columns: 0.8fr 1.2fr; align-items: center; }
}

/* Sotto i 900px la colonna del ritratto e' a tutta larghezza: con le traslazioni
   piene i decori finirebbero quasi interamente fuori dal taglio. Stessi valori
   ridotti del blocco `ritratto`, verso opposto. */
@media (max-width: 899px) {
	.ds-profilo__dots { transform: translate(-6%, -12%); }
	.ds-profilo__card { transform: translate(-4%, 8%); }
}