.doctor-hero {
	padding-top: 0;
	padding-bottom: clamp(var(--spacing-32), 4vw, calc(var(--spacing-24) * 2));
	background-color: var(--surface-light);
}

.doctor-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(380px, 5fr);
	gap: clamp(var(--spacing-32), 4vw, calc(var(--spacing-24) * 2));
	align-items: center;
}

.doctor-hero__copy {
	max-width: 820px;
}

.doctor-hero__name {
	max-width: 780px;
	color: var(--color-off-black);
	font-size: clamp(var(--font-size-heading), 5vw, calc(var(--font-size-display) + var(--spacing-20)));
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	letter-spacing: -0.04em;
}

.doctor-hero__position {
	max-width: 620px;
	margin-top: var(--spacing-14);
	color: var(--color-blue-dark);
	font-size: clamp(var(--font-size-lg), 2.1vw, var(--font-size-xl));
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-heading);
}

.doctor-hero__intro {
	max-width: 680px;
	margin-top: var(--spacing-14);
	color: var(--color-gray-dark);
	font-size: var(--font-size-md);
	line-height: var(--line-height-body);
}

.doctor-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(var(--spacing-24), 4vw, calc(var(--spacing-32) * 2));
	margin-top: var(--spacing-32);
}

.doctor-hero__facts div {
	display: grid;
	gap: var(--spacing-5);
}

.doctor-hero__facts dt {
	color: var(--color-off-black);
	font-size: clamp(var(--font-size-xl), 3vw, var(--font-size-heading));
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-tight);
}

.doctor-hero__facts dd {
	color: var(--color-gray);
	font-size: var(--font-size-sm);
}

.doctor-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-20);
	margin-top: var(--spacing-32);
}

.doctor-hero__actions .btn {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-10);
}

.doctor-hero__team-link {
	font-weight: var(--font-weight-medium);
}

.doctor-hero__media {
	position: relative;
	height: clamp(420px, 40vw, 520px);
}

.doctor-hero__portrait {
	position: relative;
	height: 100%;
	overflow: visible;
	padding-top: clamp(var(--spacing-20), 2.4vw, var(--spacing-32));
}

.doctor-hero__portrait::before {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	height: 0;
	border-top: 1px solid rgba(22, 22, 22, 0.13);
	content: "";
	pointer-events: none;
}

.doctor-hero__portrait::after {
	position: absolute;
	bottom: clamp(var(--spacing-10), 1.6vw, var(--spacing-20));
	left: 50%;
	z-index: 1;
	width: min(56%, 360px);
	height: clamp(var(--spacing-15), 2.4vw, var(--spacing-34));
	border-radius: var(--radius-pill);
	background-color: rgba(22, 22, 22, 0.2);
	content: "";
	filter: blur(13px);
	transform: translateX(-50%);
	opacity: 0.46;
	pointer-events: none;
}

.doctor-hero__watermark {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 0;
	width: min(82%, 520px);
	height: auto;
	transform: translate(-50%, -50%);
	opacity: 0.08;
	pointer-events: none;
	user-select: none;
}

.doctor-hero__photo {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
	filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.13));
}

.doctor-hero__placeholder {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	height: 100%;
	color: var(--color-gray);
	font-size: var(--font-size-display);
}

.doctor-hero__video {
	position: absolute;
	right: var(--spacing-20);
	bottom: var(--spacing-20);
	z-index: 4;
	display: flex;
	align-items: center;
	gap: var(--spacing-10);
	max-width: calc(100% - var(--spacing-20));
	padding: var(--spacing-6) var(--spacing-20) var(--spacing-6) var(--spacing-6);
	border-radius: var(--radius-pill);
	background-color: var(--color-white);
	color: var(--color-off-black);
	box-shadow: var(--shadow-sm);
	text-align: left;
	transition: transform var(--transition-base), color var(--transition-base);
}

.doctor-hero__video:hover,
.doctor-hero__video:focus {
	color: var(--color-blue);
	transform: translateY(calc(-1 * var(--spacing-5)));
}

.doctor-hero__video-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: var(--radius-pill);
	background-color: var(--color-blue);
	color: var(--color-white);
}

.doctor-hero__video strong,
.doctor-hero__video small {
	display: block;
}

.doctor-hero__video small {
	margin-top: var(--spacing-5);
	color: var(--color-gray);
}

@media (max-width: 980px) {
	.doctor-hero__inner {
		grid-template-columns: 1fr;
	}

	.doctor-hero__media {
		height: min(720px, 110vw);
	}
}

@media (max-width: 560px) {
	.doctor-hero__name {
		letter-spacing: -0.03em;
	}

	.doctor-hero__actions,
	.doctor-hero__actions .btn {
		width: 100%;
	}

	.doctor-hero__actions .btn {
		justify-content: center;
	}

	.doctor-hero__media {
		height: min(84vw, calc(var(--spacing-32) * 11));
	}

	.doctor-hero__video {
		right: var(--spacing-10);
		bottom: var(--spacing-10);
	}
}