/* =============================================================
   BIO PAGE — brandogallo.com
   Architettura 3 sezioni · tokenizzata sul DS — 2026-05-20
   PHP puro — zero dipendenze Gutenberg/Elementor/UAGB.
   ============================================================= */


/* =============================================================
   UTILITY / COMPONENT DS — definite qui in attesa di promozione
   in un file globale del DS quando un secondo template le userà.
   Riferimenti: SECTION_LABEL v1.0 · FIGURE v1.0 · FONT_STACK v6.2
   VERTICAL_RHYTHM v6.3 · TEXT_COLOR v6.1.1
   ============================================================= */

/* Eyebrow — occhiello sopra titolo (DS SECTION_LABEL) */
.eyebrow {
	display: block;
	font-family: var(--f-sans);
	font-size: 0.68rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: var(--track-wider);
	text-transform: uppercase;
	color: var(--text-3);
	margin: 0 0 var(--rhythm-xs);
}

/* Figure — atomo editoriale con cornice nativa (DS FIGURE) */
.bg-figure {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin: 0;
}

/* Il layer secondario del reveal (reveal.css: figure.reveal img, scale 1.03 → 1)
   fa debordare l'immagine di ~1,5% per lato: su desktop invade la colonna di
   testo, su mobile sfonda il padding. `clip` la ritaglia al box della figure
   senza creare un contenitore di scroll — stessa scelta della home su
   .progetto-grid figure / .bio-grid figure. La figcaption resta dentro il box,
   quindi non viene toccata. */
.bio-section .bg-figure {
	overflow: clip;
}

.bg-figure img {
	display: block;
	max-width: 100%;
	max-height: var(--figure-max-h, clamp(480px, 80vh, 900px));
	width: auto;
	height: auto;
	border-radius: var(--radius-img);
}

/* Figcaption — spec esatta FIGURE.md v1.0 (caption-data Manrope) */
.bg-figcaption {
	width: 0;
	min-width: 100%;
	box-sizing: border-box;
	overflow-wrap: anywhere;
	font-family: var(--f-sans);
	font-style: normal;
	font-weight: 400;
	font-size: 0.75rem;
	line-height: 1.45;
	letter-spacing: 0.01em;
	color: var(--text-3);
	margin-top: 1.25rem;
	min-height: 2.4em;
	padding-inline-start: var(--pad-rule-indent, 1.25rem);
	border-inline-start: 1px solid var(--text-2);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
	.bg-figcaption {
		font-size: 0.8rem;
		hyphens: auto;
		-webkit-hyphens: auto;
		hyphenate-limit-chars: 8 4 4;
	}
}


/* =============================================================
   SEZIONI BIO — 3 sezioni testo|immagine
   Vertical rhythm: eyebrow → titolo (xs) → lead (m) → body (m)
   ============================================================= */

.bio-section {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--gap-cols);
	max-width: var(--max-width);
	margin-inline: auto;
	padding: var(--pad-section) var(--pad-x);
	background: var(--bg);
}

/* Schermi grandi (≥1680px): i contenitori bio respirano fino a
   --max-width-wide (1440px) invece dei 1280px standard. Ridefinendo
   --max-width sul solo #primary della pagina, .bio-section / .bg-bio-loghi /
   .bio-cta si allargano insieme. Stessa logica e soglia della home
   (home-sections.css, scelta 2026-06-05). */
@media (min-width: 1680px) {
	body.bg-bio-page #primary {
		--max-width: var(--max-width-wide);
	}
}

.bio-section--intro {
	gap: var(--gap-section);
}

/* Sez 2: inverte l'ordine visivo (foto a sinistra, testo a destra) */
.bio-section--musei {
	flex-direction: row-reverse;
}

.bio-section__text {
	flex: 1 1 50%;
	min-width: 0;
}

.bio-section__media {
	flex: 0 0 50%;
	max-width: 50%;
	display: flex;
	justify-content: center;
	padding-top: calc(0.68rem * 1.4 + var(--rhythm-xs));
}

/* Titolo sezione — h2 narrativo Lora (FONT_STACK DS) */
.bio-section__title {
	font-family: var(--f-serif);
	font-size: var(--size-title);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: var(--track-hero);
	color: var(--text);
	margin: 0 0 var(--rhythm-xs);
}

/* Lead — .body-lead DS: Lora italic 400 1.2rem lh 1.65 --track-normal, bianco */
.bio-section__lead {
	font-family: var(--f-serif);
	font-style: italic;
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 1.65;
	letter-spacing: var(--track-normal);
	color: var(--text);
	margin: 0 0 var(--rhythm-m);
}

/* Body — .body DS: Manrope 400 1rem lh 1.8 --track-body, --text-2 */
.bio-section__body {
	font-family: var(--f-sans);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.8;
	letter-spacing: var(--track-body);
	color: var(--text-2);
	margin: 0 0 var(--rhythm-m);
}

/* Strong: body-emphasis DS (Manrope 600, colore eredita --text-2) */
.bio-section__body strong {
	color: inherit;
	font-weight: 600;
	letter-spacing: inherit;
}


/* --- Loghi: container centrato come le sezioni --- */
.bg-bio-page .bg-bio-loghi {
	max-width: var(--max-width);
	margin-inline: auto;
	padding-inline: var(--pad-x);
}


/* =============================================================
   CTA
   ============================================================= */

/* Le regole .bio-cta / .bio-cta__title / .bio-cta__manifesto sono state rimosse
   il 2026-07-31: la CTA finale della pagina Bio è ora la cartolina condivisa con
   la home — markup inc/finale-cta-section.php, stile assets/css/finale-cta.css.
   Il blocco a schermo pieno che c'era qui (titolo Lora clamp 3.5-8rem, manifesto
   italic, .btn-linkop) non ha più nessun markup che lo usi.

   .btn-linkop e .btn-primary vivono in assets/css/buttons.css (DS globale). */

/* =============================================================
   RESPONSIVE
   ============================================================= */

@media (max-width: 768px) {
	.bio-section {
		flex-direction: column;
		gap: var(--gap-block);
	}

	.bio-section--intro {
		gap: var(--gap-block);
	}

	.bio-section__text,
	.bio-section__media {
		flex: 0 0 100%;
		max-width: 100%;
	}
}