/* =========================================================================
 * Treatment detail pages — Composite bonding, Oral surgery & sedation
 *
 *   .bo-tx-hero        Treatment hero (photo | portrait)
 *   .bo-tx-columns     What it can do
 *   .bo-tx-ledger      Priced by how far it goes (arch ledger)
 *   .bo-tx-pair        Two coloured link cards
 *   .bo-tx-reasons     When you might need it
 *   .bo-tx-procedures  What it involves, and what it costs
 *
 * Measurements are the Figma frame's (1920 canvas) in design pixels.
 * ====================================================================== */

/* -------------------------------------------------------------------------
 * Treatment hero — Proto / Hero load: Bonding, Proto / Hero load: Oral surgery
 * ---------------------------------------------------------------------- */

.bo-tx-hero {
	position: relative;
}

.bo-tx-hero__band {
	background: var(--ps-velvet);
	color: var(--ps-ivory);
}

.bo-tx-hero__grid {
	display: grid;
	align-items: start;
}

.bo-tx-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: max(24px, calc(36 * var(--bo-s)));
	min-width: 0;
}

.bo-tx-hero .bo-tx-hero__title {
	color: var(--ps-ivory);
	font-family: var(--bo-font-display);
	font-weight: 400;
	font-size: max(52px, calc(216 * var(--bo-s)));
	line-height: 0.9815;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.bo-tx-hero .bo-tx-hero__lede {
	max-width: calc(720 * var(--bo-s));
	color: var(--ps-ivory);
}

/* Photo: velvet band 860 tall, the photo hanging over its edge onto ivory */

.bo-tx-hero--photo {
	min-height: calc(1040 * var(--bo-s));
}

.bo-tx-hero--photo .bo-tx-hero__band {
	box-sizing: border-box;
	min-height: calc(860 * var(--bo-s));
	padding-top: calc(190 * var(--bo-s));
	padding-bottom: calc(38 * var(--bo-s));
}

.bo-tx-hero--photo .bo-tx-hero__grid {
	grid-template-columns: minmax(0, 1fr) calc(660 * var(--bo-s));
}

.bo-tx-hero__media {
	position: absolute;
	z-index: 2;
	top: calc(180 * var(--bo-s));
	right: max(var(--bo-gutter), calc((100% - var(--bo-content)) / 2));
	width: calc(660 * var(--bo-s));
	height: calc(820 * var(--bo-s));
	overflow: hidden;
	border-radius: 24px;
	background: var(--ps-line-dark);
}

.bo-tx-hero .bo-tx-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bo-tx-hero__below {
	padding-top: calc(30 * var(--bo-s));
	padding-bottom: calc(66 * var(--bo-s));
}

.bo-tx-hero .bo-tx-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 16px max(32px, calc(80 * var(--bo-s)));
	margin: 0;
}

.bo-tx-hero__stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bo-tx-hero__stat dt {
	color: var(--ps-emerald);
	white-space: nowrap;
}

.bo-tx-hero__stat dd {
	margin: 0;
	color: var(--ps-ink-muted);
}

/* Portrait: all velvet, 900 tall, the clinician on the right */

.bo-tx-hero--portrait .bo-tx-hero__band {
	box-sizing: border-box;
	min-height: calc(900 * var(--bo-s));
	padding-top: calc(180 * var(--bo-s));
	padding-bottom: calc(88 * var(--bo-s));
}

.bo-tx-hero--portrait .bo-tx-hero__grid {
	/* Portrait column 380 wide, ending 52 short of the container edge */
	grid-template-columns: minmax(0, 1fr) calc(432 * var(--bo-s));
}

.bo-tx-hero--portrait .bo-tx-hero__grid > .bo-tx-hero__surgeon {
	margin-top: calc(10 * var(--bo-s));
	margin-right: calc(52 * var(--bo-s));
}

.bo-tx-hero .bo-tx-hero__lede {
	text-wrap: pretty;
}

.bo-tx-hero--portrait .bo-tx-hero__lede {
	max-width: calc(760 * var(--bo-s));
}

.bo-tx-hero__surgeon {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	text-align: center;
}

.bo-tx-hero__portrait {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: max(200px, calc(320 * var(--bo-s)));
	height: max(200px, calc(320 * var(--bo-s)));
	overflow: hidden;
	border: 3px solid var(--ps-brass-light);
	border-radius: 50%;
}

.bo-tx-hero .bo-tx-hero__portrait img {
	position: absolute;
	top: 0;
	left: -2.5%;
	width: 105%;
	height: 105%;
	object-fit: cover;
}

.bo-tx-hero__surgeon figcaption {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.bo-tx-hero__name {
	color: var(--ps-ivory);
	white-space: nowrap;
}

.bo-tx-hero__note {
	max-width: 380px;
	color: var(--ps-on-dark-muted);
}

@media (max-width: 1023px) {
	.bo-tx-hero--photo,
	.bo-tx-hero--portrait { min-height: 0; }

	.bo-tx-hero--photo .bo-tx-hero__band,
	.bo-tx-hero--portrait .bo-tx-hero__band {
		min-height: 0;
		padding-top: calc(var(--bo-header-h) + 48px);
		padding-bottom: 56px;
	}

	.bo-tx-hero--photo .bo-tx-hero__grid,
	.bo-tx-hero--portrait .bo-tx-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 48px;
	}

	.bo-tx-hero--portrait .bo-tx-hero__grid > .bo-tx-hero__surgeon {
		margin: 0;
		align-items: flex-start;
		text-align: left;
	}

	.bo-tx-hero--portrait .bo-tx-hero__surgeon figcaption {
		align-items: flex-start;
		gap: 8px;
	}

	.bo-tx-hero .bo-tx-hero__lede,
	.bo-tx-hero--portrait .bo-tx-hero__lede { max-width: 640px; }

	.bo-tx-hero__media {
		position: relative;
		top: auto;
		right: auto;
		width: auto;
		height: auto;
		aspect-ratio: 660 / 820;
		max-height: 72vh;
		margin: 40px var(--bo-gutter) 0;
	}

	.bo-tx-hero__below {
		padding-top: 32px;
		padding-bottom: 56px;
	}
}

@media (max-width: 767px) {
	.bo-tx-hero .bo-tx-hero__title { white-space: normal; }
	.bo-tx-hero__media { aspect-ratio: 4 / 5; }
	.bo-tx-hero__name { white-space: normal; }
}

/* -------------------------------------------------------------------------
 * What it can do
 * ---------------------------------------------------------------------- */

.bo-tx-columns {
	padding-top: max(56px, calc(80 * var(--bo-s)));
	padding-bottom: max(64px, calc(120 * var(--bo-s)));
}

.bo-tx-columns .bo-tx-columns__heading {
	margin-bottom: max(32px, calc(56 * var(--bo-s)));
}

.bo-tx-columns__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

.bo-tx-columns__item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 28px;
	border-top: 1px solid var(--ps-ink);
}

@media (max-width: 767px) {
	.bo-tx-columns__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

/* -------------------------------------------------------------------------
 * Priced by how far it goes — Proto / Bonding teeth
 * ---------------------------------------------------------------------- */

.bo-tx-ledger {
	padding-block: max(64px, calc(120 * var(--bo-s)));
}

.bo-tx-ledger .bo-tx-ledger__lede {
	max-width: max(min(100%, 640px), calc(860 * var(--bo-s)));
	margin-top: 20px;
}

.bo-tx-ledger__table {
	margin-top: max(52px, calc(64 * var(--bo-s)));
}

.bo-tx-ledger__head,
.bo-tx-ledger__row {
	display: grid;
	grid-template-columns: 520fr 470fr 310fr 324fr;
}

.bo-tx-ledger__head {
	padding-bottom: 16px;
	color: var(--ps-ink-muted);
}

.bo-tx-ledger__row {
	align-items: center;
	padding-block: 28px;
	border-top: 1px solid var(--ps-line-light);
}

.bo-tx-ledger__arch {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 450px; /* 426 drawing + 24 clear of the next column */
	padding-right: 24px;
}

.bo-tx-ledger .bo-tx-ledger__arch img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 426 / 84;
}

.bo-tx-ledger .bo-tx-ledger__arch .bo-tx-ledger__arch-on {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% - 24px);
}

.bo-tx-ledger__label {
	padding-right: 30px;
	color: var(--ps-ink);
}

.bo-tx-ledger__price {
	color: var(--ps-emerald);
	white-space: nowrap;
}

.bo-tx-ledger .bo-tx-ledger__note {
	padding-top: 24px;
	border-top: 1px solid var(--ps-line-light);
}

@media (max-width: 1023px) {
	.bo-tx-ledger__head,
	.bo-tx-ledger__row { grid-template-columns: 1.4fr 1.2fr 0.9fr 0.8fr; column-gap: 16px; }
	.bo-tx-ledger__arch { padding-right: 0; }
	.bo-tx-ledger .bo-tx-ledger__arch .bo-tx-ledger__arch-on { width: 100%; }
	.bo-tx-ledger__label { padding-right: 0; }
}

@media (max-width: 767px) {
	.bo-tx-ledger__head { display: none; }

	.bo-tx-ledger__row {
		grid-template-columns: auto auto 1fr;
		gap: 12px 28px;
		align-items: end;
		padding-block: 24px;
	}

	.bo-tx-ledger__arch { grid-column: 1 / -1; max-width: 340px; }
	.bo-tx-ledger__label { grid-column: 1 / -1; }

	.bo-tx-ledger__price::before,
	.bo-tx-ledger__extra::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 2px;
		color: var(--ps-ink-muted);
		font-family: var(--bo-font-body);
		font-weight: 500;
		font-size: 13px;
		line-height: 18px;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}
}

/* -------------------------------------------------------------------------
 * Two cards — See it first / Braces and sedation
 * ---------------------------------------------------------------------- */

.bo-tx-pair {
	padding-block: max(64px, calc(120 * var(--bo-s)));
}

.bo-tx-pair__row {
	display: flex;
	align-items: stretch;
	gap: 32px;
}

.bo-tx-pair__card {
	--bo-card-radius: 24px;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	min-width: 0;
	padding: max(32px, calc(64 * var(--bo-s)));
	overflow: clip;
	border-radius: 24px;
}

.bo-tx-pair .bo-tx-pair__card > :is(h2, .bo-tx-pair__text) {
	max-width: max(280px, calc(640 * var(--bo-s)));
}

.bo-tx-pair__card--blush { background: var(--ps-blush); color: var(--ps-ink); }
.bo-tx-pair__card--mint {
	/* ps/mint #d6e9e1 — see report: falls back to an emerald tint on paper
	   until a "Mint" extra colour is added to the Design System. */
	background: var(--vk-color-mint, color-mix(in srgb, var(--ps-emerald) 16%, var(--ps-paper)));
	color: var(--ps-ink);
}
.bo-tx-pair__card--velvet { background: var(--ps-velvet); color: var(--ps-ivory); }

.bo-tx-pair .bo-tx-pair__text { color: var(--ps-ink-muted); }
.bo-tx-pair .bo-tx-pair__card--velvet .bo-tx-pair__text { color: var(--ps-on-dark-muted); }
.bo-tx-pair .bo-tx-pair__note { color: var(--ps-emerald); }
.bo-tx-pair .bo-tx-pair__card--velvet .bo-tx-pair__note { color: var(--ps-brass-light); }

@media (max-width: 1023px) {
	.bo-tx-pair__row { flex-direction: column; gap: 24px; }
}

/* -------------------------------------------------------------------------
 * When you might need it
 * ---------------------------------------------------------------------- */

.bo-tx-reasons {
	padding-block: max(64px, calc(120 * var(--bo-s)));
}

.bo-tx-reasons__row {
	display: flex;
	align-items: flex-start;
	gap: max(40px, calc(96 * var(--bo-s)));
}

.bo-tx-reasons__head {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 24px;
	width: calc(560 * var(--bo-s));
}

.bo-tx-reasons__head p {
	max-width: 500px;
}

.bo-tx-reasons__list {
	flex: 1 1 0;
	min-width: 0;
}

.bo-tx-reasons__list li {
	padding-block: 20px;
	border-top: 1px solid var(--ps-line-light);
	color: var(--ps-ink);
}

@media (max-width: 1023px) {
	.bo-tx-reasons__row { flex-direction: column; }
	.bo-tx-reasons__head { width: auto; max-width: 560px; }
	.bo-tx-reasons__list { width: 100%; }
}

/* -------------------------------------------------------------------------
 * What it involves, and what it costs
 * ---------------------------------------------------------------------- */

.bo-tx-procedures {
	padding-block: max(64px, calc(120 * var(--bo-s)));
}

.bo-tx-procedures .bo-tx-procedures__heading {
	margin-bottom: max(32px, calc(56 * var(--bo-s)));
}

.bo-tx-procedures__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
}

.bo-tx-procedures__card {
	--bo-card-radius: 20px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	min-height: max(280px, calc(400 * var(--bo-s)));
	padding: 36px;
	overflow: clip;
	border-radius: 20px;
	background: var(--ps-ivory);
}

.bo-tx-procedures__copy {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.bo-tx-procedures .bo-tx-procedures__price {
	color: var(--ps-emerald);
	white-space: nowrap;
}

@media (max-width: 1199px) {
	.bo-tx-procedures__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bo-tx-procedures__card { padding: 32px; }
}

@media (max-width: 767px) {
	.bo-tx-procedures__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.bo-tx-procedures__card { min-height: 0; padding: 28px; }
}