/* ==========================================================================
   Βιογραφικό – templates/page-viografiko.php
   reference/Viografiko.html. The page hero, the card grids, the timeline and
   the white CTA card come from main.css; only the page's own rhythm and the
   two text panels live here.
   ========================================================================== */

.be_bio-hero {
	padding-top: 32px;
	padding-bottom: 64px;
}

/* The portrait sits against the right edge of the row, as in the reference. */
.be_bio-media {
	max-width: 460px;
	margin-left: auto;
}

.be_bio-facts {
	padding-top: 56px;
	padding-bottom: 0;
}

.be_bio-section {
	padding-top: 96px;
	padding-bottom: 0;
}

.be_bio-h2 {
	font-size: var(--be-h2-sm);
}

/* Philosophy: a narrow label column beside the quote. */
.be_bio-split {
	gap: 56px;
}

.be_bio-label {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.be_bio-split .be_bio-label {
	flex: 1 1 320px;
}

.be_bio-body {
	flex: 2 1 520px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 820px;
}

.be_bio-quote {
	margin: 0;
	font-family: var(--be-font-head);
	font-weight: 500;
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1.35;
	color: var(--be-navy);
	border-left: 4px solid var(--be-sky);
	padding-left: 28px;
}

.be_bio-prose {
	font-size: 18px;
}

/* Positions / teaching: two large panels side by side. */
.be_bio-panels {
	gap: 24px;
}

.be_bio-panel {
	flex: 1 1 440px;
	min-width: 0;
	gap: 22px;
	border-radius: var(--be-r-panel);
	padding: 44px;
}

.be_bio-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.be_bio-list strong {
	display: block;
	font-size: 19px;
	line-height: 1.35;
}

.be_bio-list span {
	font-size: 16px;
	color: var(--be-muted);
}

.be_bio-panel.be_dark .be_bio-list span {
	color: var(--be-on-dark-soft);
}

.be_bio-cta {
	padding-top: 96px;
	padding-bottom: 96px;
}

@media (max-width: 1040px) {
	.be_bio-section {
		padding-top: 72px;
	}

	.be_bio-cta {
		padding-top: 72px;
		padding-bottom: 72px;
	}
}

@media (max-width: 860px) {
	.be_bio-hero {
		padding-top: 24px;
		padding-bottom: 40px;
	}

	.be_bio-facts {
		padding-top: 40px;
	}

	.be_bio-section {
		padding-top: 48px;
	}

	.be_bio-media {
		margin-left: 0;
	}

	.be_bio-panel {
		padding: 28px 22px;
		border-radius: var(--be-r-card);
	}

	.be_bio-cta {
		padding-top: 48px;
		padding-bottom: 48px;
	}
}