/* ==========================================================================
   Despre / About — page-specific styles
   Colors/fonts/spacing reference theme.json presets throughout; only true
   one-offs (drop shadow, ch-measure caps, divider rule, fluid CTA padding,
   quote border reset) are hardcoded here — see despre.md / TOKENS.md.
   ========================================================================== */

/* Header portrait frame (spec §2, right column) */
.fi-despre-portrait {
	background: var(--wp--preset--color--tint);
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 28px 64px rgba(var(--fi-shadow-rgb), 0.12);
}

.fi-despre-portrait img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Text-measure caps (ch-based max-width isn't a core block support) */
.fi-despre-intro {
	max-width: 52ch;
}

.fi-credentials-title {
	max-width: 14ch;
}

.fi-credentials-desc {
	max-width: 40ch;
}

/* Quote band: neutralize core/quote's default left border/indent, center it */
.fi-despre-quote {
	border: 0;
	margin: 0;
	padding: 0;
	text-align: center;
}

.fi-despre-quote p {
	margin: 0;
}

/* Value card accent number ("01" / "02" / "03") */
.fi-despre-number {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.25;
	color: var(--wp--preset--color--deep);
	margin: 0;
}

/* Hero two-column split (spec: 578px text / 578px portrait, 84px gap —
   the JSON blockGap clamp() attr doesn't render into the auto-generated
   layout-container stylesheet, so the 84px gap is set explicitly here). */
.fi-despre-hero-columns {
	gap: 84px;
}

/* Hero left column: restore the 24px eyebrow→H1→intro rhythm. The column's
   spacing|60 blockGap is delivered as margin-block-start, which the global
   block-gap-leak reset zeros — so restore it as a real flex gap (survives the
   blanket rule, unlike child margins). */
.fi-despre-hero-columns > .wp-block-column:first-child {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Hero eyebrow "DESPRE MINE": design is 12px / 2.4px (matches every other
   section eyebrow); an inline 13.5px was retained by mistake. Design box is
   ~17px tall (line-height normal); inherited global 1.7 line-height renders
   it 20.4px. */
.fi-despre-hero-columns .fi-eyebrow {
	font-size: 12px !important;
	line-height: normal;
}

/* Value cards (Siguranté/Ştiinţă/Parteneriat): tighten heading line-height
   and internal gap to the spec's 1.2 ratio / 12px so the card lands at the
   design's ~180px height (theme-wide heading line-height and the shared
   .fi-card gap are both slightly looser than this card needs). Scoped to
   the column-based value card only — doesn't touch the Resurse article
   cards, which reuse the same .fi-card class with a different structure. */
.wp-block-column.fi-card {
	gap: 12px;
}

.wp-block-column.fi-card .wp-block-heading {
	line-height: 1.2;
}

/* Credentials list: divider rule per item (dot marker comes from .fi-dot-list) */
.fi-credentials-list {
	gap: 0;
	/* Design accreditation items are 16px / normal line-height (inline authored
	   17px / 1.7 overshoots each row by ~4px, compounding down the page). */
	font-size: 16px !important;
	line-height: normal !important;
}

.fi-credentials-list li {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: 20px;
	padding-bottom: 20px;
	/* Shared .fi-dot-list indents 22px; design's dot sits tight to the text. The
	   WP body font renders ~3% wider than the prototype's, so row 1 needs the
	   full column width to stay on one line as in the design — clear only the 6px
	   dot. */
	padding-left: 6px;
}

/* .fi-dot-list li::before positions the dot at top:0.6em, measured from the
   li's own padding edge. That's correct when the li has no padding-top, but
   this list adds padding-top:20px above the text, so the dot floated up near
   the divider instead of sitting next to the first text line. Reapply the
   same 0.6em offset on top of the added padding-top so the dot keeps its
   original relationship to the text. */
.fi-credentials-list li::before {
	top: calc(20px + 0.6em);
}

/* Credibilitate columns: pin the accreditation list to the design's 588px column
   at x=752. The clamp() blockGap never renders, leaving the two columns at
   608/608 with a 24px gap; set an explicit 64px gap and fix the right (list)
   column to 588px so the left heading column fills the rest and the list starts
   at x=752 (same fixed-split idea as the hero). */
.wp-block-columns:has(> .wp-block-column > .fi-credentials-list) {
	gap: 64px;
}

.wp-block-columns > .wp-block-column:has(> .fi-credentials-list) {
	flex: 0 0 588px;
}

/* CTA box: fluid internal padding outside the fixed spacing scale */
.fi-despre-cta-box {
	padding: clamp(36px, 5vw, 60px);
}

/* Pull-quote band: force true full-bleed (viewport-width breakout) and fixed
   80px vertical padding, independent of ancestor constrained-layout padding
   vars (avoids the site-wide spacing-preset/root-padding leak affecting
   .alignfull elsewhere). */
.fi-despre-quote-band {
	/* !important: beats the higher-specificity ".wp-site-blocks > .alignfull"
	   global-styles breakout rule so this band reliably reaches full
	   viewport width regardless of ancestor content-size/padding state. */
	width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	padding-top: 80px !important;
	padding-bottom: 80px !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Bio story paragraphs: design separates them with a 22px flex gap; the global
   block-gap reset collapsed them to 0 (r5 finding). Scoped to the Despre RO/EN
   page IDs since the group carries no custom class. */
body.page-id-17 .wp-block-post-content p.has-medium-font-size + p.has-medium-font-size,
body.page-id-18 .wp-block-post-content p.has-medium-font-size + p.has-medium-font-size {
	margin-block-start: 22px !important;
}