/* ==========================================================================
   Chi sono
   ==========================================================================
   Una pagina di presentazione, non un articolo: niente sidebar, colonna di
   lettura stretta, e i lavori richiamati dalle schede del portfolio invece
   che raccontati due volte.

   Spec: docs/superpowers/specs/2026-08-07-chi-sono-design.md
   ========================================================================== */

.htmb-chi-sono {
	--htmb-cs-ink: #0f172a;
	--htmb-cs-testo: #334155;
	--htmb-cs-tenue: #64748b;
	--htmb-cs-bordo: #e2e8f0;
	--htmb-cs-tinta: #f7fafc;
	--htmb-cs-accento: #e91e63;

	/* Nessuna larghezza qui: la decide ogni blocco secondo cosa contiene.
	   Stringere il contenitore costringeva apertura e griglia a evadere con
	   margin-left:50% e translate — e un layout tenuto insieme da evasioni
	   non e' un layout. */
	max-width: none;
	margin: 0;
	padding-top: calc(var(--htmb-nav-h) + clamp(2rem, 4vw, 3rem));
	padding-right: clamp(1.25rem, 4vw, 2rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
	padding-left: clamp(1.25rem, 4vw, 2rem);

	font-family: 'Roboto', sans-serif;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--htmb-cs-testo);
}

/* Una griglia sola per la pagina, con le colonne nominate: ogni blocco dichiara
   dove sta, e gli assi restano condivisi per costruzione.
   Prima ogni blocco si centrava da solo sulla propria larghezza: quattro
   larghezze diverse davano quattro assi diversi, e il lead cadeva 48px oltre
   il testo che lo segue. */
.htmb-chi-sono > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns:
		[ampio-inizio] minmax(0, 1fr)
		[largo-inizio] minmax(0, 9rem)
		[testo-inizio] min(34rem, 100%) [testo-fine]
		minmax(0, 9rem) [largo-fine]
		minmax(0, 1fr) [ampio-fine];
	row-gap: 1.25rem;
}

/* Chi non dice niente sta nella colonna di lettura. */
.htmb-chi-sono > .wp-block-group__inner-container > * {
	grid-column: testo-inizio / testo-fine;
}

/* I lavori si guardano larghi, simmetrici rispetto al testo. */
.htmb-chi-sono > .wp-block-group__inner-container > .htmb-lavori-griglia {
	grid-column: largo-inizio / largo-fine;
}

/* L'apertura arriva fino all'asse destro del testo, non oltre: cosi' il lead
   comincia dove cominciano tutti i paragrafi della pagina. */
.htmb-chi-sono > .wp-block-group__inner-container > .htmb-chi-sono-apertura {
	grid-column: ampio-inizio / testo-fine;
}

/* Il row-gap della griglia da' la distanza base fra i blocchi: i margini
   verticali dei figli si sommerebbero ad essa, perche' in una griglia non
   collassano. */
.page .blog-post .section-text .htmb-chi-sono > .wp-block-group__inner-container > * {
	margin-top: 0;
	margin-bottom: 0;
}

/* Sopra un titolo serve piu' aria che fra due paragrafi: e' questo a scandire
   le sezioni, non una riga divisoria. */
.page .blog-post .section-text .htmb-chi-sono > .wp-block-group__inner-container > h2 {
	margin-top: clamp(1.75rem, 4vw, 2.75rem);
}

/* --- Apertura ------------------------------------------------------------- */

/* Esce dalla colonna di lettura: e' la porta della pagina, non un paragrafo.
   La larghezza e' la stessa tecnica usata dalla griglia dei lavori. */
.htmb-chi-sono-apertura {
	/* Il tema mette bordo e padding su tutti i blocchi gruppo: qui la cornice
	   non separa niente da niente, e con la foto dentro sembra un errore. */
	padding: 0;
	border: 0;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* La griglia sta QUI, non sul blocco esterno: Gutenberg inserisce sempre
   questo contenitore, e una griglia sul genitore avrebbe un figlio solo —
   che e' esattamente il difetto che questa riga corregge. */
.htmb-chi-sono-apertura > .wp-block-group__inner-container {
	display: grid;
	/* La seconda colonna e' la colonna di lettura, identica a quella del
	   racconto: e' cosi' che il lead si allinea ai paragrafi sotto invece di
	   cadere 48px piu' a destra. Al ritratto va lo spazio che avanza. */
	grid-template-columns: minmax(9rem, 1fr) min(34rem, 100%);
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: center;
}

.htmb-chi-sono-ritratto {
	margin: 0;
}

.htmb-chi-sono-ritratto img {
	display: block;
	width: 100%;
	height: auto;
	/* Rettangolo arrotondato come le card, non un cerchio: il tondo e' il
	   linguaggio dei profili social, questo e' il linguaggio del sito. */
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Il lead e' l'unico paragrafo della pagina che si legge in blocco, non riga
   per riga: puo' stare piu' largo del corpo senza affaticare. */
.htmb-chi-sono-lead {
	max-width: 34rem;
	margin: 0;
	font-size: clamp(1rem, 1.6vw, 1.125rem);
	line-height: 1.6;
}

@media (max-width: 767.98px) {
	.htmb-chi-sono > .wp-block-group__inner-container {
		grid-template-columns: [ampio-inizio largo-inizio testo-inizio] 1fr [testo-fine largo-fine ampio-fine];
	}

	.htmb-chi-sono-apertura > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
		justify-items: start;
	}

	/* A una colonna il ritratto prenderebbe tutta la larghezza: una foto di
	   presentazione larga quanto lo schermo non e' un'apertura, e' un poster. */
	.htmb-chi-sono-ritratto {
		max-width: 200px;
	}
}

/* --- Titoli di sezione ---------------------------------------------------- */

/* Lo spazio sopra i titoli lo da' la griglia (row-gap piu' il supplemento
   allineato a Hestia): qui resta solo cio' che riguarda il titolo in se'. */
.htmb-chi-sono h2 {
	position: relative;
	margin-bottom: 0.75rem;
	padding-top: 1rem;
	font-family: 'Poppins', sans-serif;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	line-height: 1.25;
	color: var(--htmb-cs-ink);
}

/* Un tratto magenta corto sopra il titolo: l'accento raro del sistema,
   usato per scandire le sezioni senza righe che attraversano la pagina. */
.htmb-chi-sono h2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 3px;
	background-color: var(--htmb-cs-accento);
}

.htmb-chi-sono h3 {
	margin-top: 2rem;
	margin-bottom: 0.5rem;
	font-family: 'Inter', sans-serif;
	font-size: 1.25rem;
	color: var(--htmb-cs-ink);
}

/* I link del racconto sono magenta e sottolineati; quelli dentro una scheda
   no — la scheda e' gia' cliccabile per intero e ha il suo stile.

   Il bottone va escluso insieme alle schede: e' un <a> anche lui, e senza
   questa esclusione prendeva il magenta sopra un fondo magenta — testo
   invisibile su una chiamata all'azione. */
.htmb-chi-sono a:not(.htmb-lavori-griglia a):not(.wp-block-button__link) {
	color: var(--htmb-cs-accento);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.htmb-chi-sono .htmb-lavori-griglia a {
	color: inherit;
	text-decoration: none;
}

.htmb-chi-sono strong {
	color: var(--htmb-cs-ink);
}

/* --- Il blocco sul metodo ------------------------------------------------- */

.htmb-chi-sono-metodo {
	padding: clamp(1.25rem, 3vw, 2rem);
	background-color: var(--htmb-cs-tinta);
	border: 1px solid var(--htmb-cs-bordo);
	border-radius: 12px;
}

.htmb-chi-sono-metodo > *:first-child {
	margin-top: 0;
}

.htmb-chi-sono-metodo h3 {
	margin-top: 0;
	margin-bottom: 1rem;
	font-family: 'Poppins', sans-serif;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--htmb-cs-ink);
}

/* --- La griglia dei lavori richiamati ------------------------------------- */

/* Le schede escono dalla colonna di lettura: il testo si legge stretto, i
   lavori si guardano larghi. */
.htmb-lavori-griglia {
	display: grid;
	/* Quattro lavori: due file da due. A tre colonne l'ultimo restava solo,
	   e una scheda spaiata legge come un errore di impaginazione. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: clamp(1rem, 2.5vw, 1.75rem);
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* title-sm della scala: e' la misura che il sistema prescrive per il titolo
   di una card in griglia. Il 34px di prima non esisteva nemmeno nella scala. */
.htmb-lavori-griglia .htmb-portfolio-card h3,
.htmb-lavori-griglia .htmb-portfolio-card .htmb-portfolio-card-titolo {
	font-size: 1.25rem;
	line-height: 1.3;
}

/* --- La chiamata all'azione ----------------------------------------------- */

.htmb-chi-sono .wp-block-button {
	margin-top: clamp(2rem, 4vw, 3rem);
}