/* ==========================================================================
   Treatment page – templates/page-therapeia.php
   Figma 228:1283 (Ρινοπλαστική), 288:4881 (Βοτουλινική), 310:6070 (Mommy Makeover).
   One section, 50px between blocks (pt 50, pb 100, px 100).
   ========================================================================== */

.be_therapeia {
	display: flex;
	flex-direction: column;
	gap: calc(50 * var(--u));
	padding-top: calc(50 * var(--u));
}

.be_therapeia > * {
	min-width: 0;
}

/* Hero band (Figma "Video Holder" 1720x400). */
.be_band {
	aspect-ratio: 1720 / 400;
	overflow: hidden;
	background: var(--be-navy);
}

.be_band img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.be_therapeia-intro {
	display: flex;
	flex-direction: column;
	gap: calc(50 * var(--u));
}

.be_accordion-heading {
	font: inherit;
}

/* Rows / steps blocks (Figma 294:5203, 310:5278). */
.be_therapeia-list {
	display: flex;
	flex-direction: column;
	gap: calc(24 * var(--u));
}

.be_therapeia-list-title,
.be_results-title,
.be_faq-title {
	font: var(--be-h3);
}

.be_therapeia-section {
	display: flex;
	flex-direction: column;
	gap: calc(50 * var(--u));
}

/* Results slider (Figma 232:1732): arrows either side, before/after images. */
.be_results {
	display: flex;
	flex-direction: column;
	gap: calc(50 * var(--u));
}

.be_results-title {
	text-align: center;
}

/* Figma keeps the arrows next to the photos, the group centred (arrows at x 386 / 1534);
   the real before/after photos are landscape, so the inset is smaller than Figma's. */
.be_results-body {
	display: flex;
	align-items: center;
	gap: calc(50 * var(--u));
	padding-inline: calc(160 * var(--u));
}

.be_results-track {
	flex: 1;
	min-width: 0;
	list-style: none;
}

.be_results-slide {
	width: calc((100% - calc(50 * var(--u))) / 2);
}

.be_results-slide figure {
	display: flex;
	flex-direction: column;
	gap: calc(12 * var(--u));
}

.be_results-slide img {
	width: 100%;
	height: calc(480 * var(--u));
	object-fit: contain;
	background: var(--be-navy);
}

.be_results-slide figcaption {
	font: 300 16px/22px var(--be-font-body);
	text-align: center;
	color: var(--be-gold);
}

.be_faq {
	display: flex;
	flex-direction: column;
	gap: calc(24 * var(--u));
}

.be_faq-heading {
	font: inherit;
}

@media (max-width: 1024px) {
	.be_results-slide {
		width: 100%;
	}

	.be_results-slide img {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.be_results-body {
		gap: 16px;
		padding-inline: 0;
	}
}

@media (max-width: 700px) {
	.be_therapeia {
		gap: 32px;
		padding-top: 24px;
	}

	.be_band {
		aspect-ratio: 335 / 200;
	}

	.be_therapeia-intro {
		gap: 24px;
	}

	.be_results-body {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.be_results-track {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.be_arrow-btn--prev {
		grid-row: 2;
		justify-self: start;
	}

	.be_arrow-btn--next {
		grid-row: 2;
		justify-self: end;
	}

	.be_row-item {
		padding: 16px;
	}
}