/* Team */

.team__title {
	max-width: 713px;
	margin: 0 auto 40px;
	text-align: center;
}

/*
 * The photo row sits on a "stage" that is clipped by two very shallow arcs —
 * Figma 177:983 / 177:994 draw them as a circle of r=4455 centred 4396px above
 * the stage, so only a 59px sliver of the curve shows at the top and bottom.
 */
.team__stage {
	position: relative;
	overflow: hidden;
}

/*
 * Figma's circle is r=4455 in a 1440 frame, i.e. 6.1875x the frame width, and it
 * bites 59px (4.0972%) deep at the edges. Sizing it in px would deepen that bite
 * on wider viewports and slice the outer portraits into points, so the circle is
 * kept proportional: translateY is a share of the element's own height, which
 * aspect-ratio ties back to the stage width.
 */
.team__arc {
	position: absolute;
	left: 50%;
	z-index: 2;
	width: 618.75%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--color-neutral-7);
	pointer-events: none;
}

.team__arc--top {
	top: 0;
	transform: translate(-50%, -99.3378%);
}

.team__arc--bottom {
	bottom: 0;
	transform: translate(-50%, 99.3378%);
}

.team__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.doctor {
	position: relative;
	height: 380px;
	overflow: hidden;
}

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

.doctor__info {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 28px;
	padding: 24px;
	background: rgba(26, 41, 74, 0.6);
	text-align: center;
	/* Figma parks the panel one full card below and slides it up on hover. */
	transform: translateY(100%);
	transition: transform .3s ease;
}

.doctor:hover .doctor__info,
.doctor:focus-within .doctor__info { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
	.doctor__info { transition: none; }
}

.doctor__name {
	margin-bottom: 6px;
	color: var(--color-neutral-7);
	font-size: var(--h6-size);
	font-weight: var(--h6-weight);
	line-height: var(--h6-lh);
	letter-spacing: var(--h6-ls);
}

.doctor__edu {
	color: var(--color-neutral-2);
	font-size: 15px;
	line-height: 1.4;
}

.doctor__edu strong {
	color: rgba(255, 255, 255, 0.7);
	font-weight: 600;
}

.team__cta {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

/* The CTA overlaps the photo row, so it carries the page colour as a ring. */
.team__cta .btn--primary { border: 4px solid var(--color-neutral-7); }

.team__facts {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	max-width: 1112px;
	margin: 60px auto 0;
	text-align: center;
}

.team__fact-title {
	margin-bottom: 17px;
	color: var(--color-primary);
	font-size: var(--h6-size);
	font-weight: var(--h6-weight);
	line-height: var(--h6-lh);
	letter-spacing: var(--h6-ls);
}

.team__fact-text {
	color: var(--color-neutral-1);
	font-size: var(--body-secondary-size);
	line-height: var(--body-lh);
	letter-spacing: var(--body-secondary-ls);
}

/*
 * One portrait per row on phones: the arcs are a wide-screen flourish that only
 * clips the face at this width, and the card drops its fixed height so the
 * photo shows whole at its own ratio instead of being cropped to fill.
 */
@media (max-width: 767px) {
	.team__arc { display: none; }

	/*
	 * The five portraits are shot at ratios from 0.506 to 0.805, so sizing each
	 * card to its own photo makes the strip ragged. One 3:4 card for all of
	 * them, anchored to the top of the frame so the crop only ever takes from
	 * the bottom and every face stays whole.
	 */
	.doctor {
		height: auto;
		aspect-ratio: 3 / 4;
		border-radius: var(--radius-lg);
	}

	.doctor__image {
		display: block;
		height: 100%;
		object-fit: cover;
		object-position: center top;
	}
}


@media (min-width: 768px) {
	.team__grid { grid-template-columns: repeat(3, 1fr); }
	.team__facts { grid-template-columns: repeat(3, 1fr); gap: 53px; }
	.team__fact + .team__fact { border-left: 1px solid var(--color-neutral-4); padding-left: 53px; }
}

@media (min-width: 1024px) {
	.team { padding-inline: 0; }
	.team__title,
	.team__facts,
	.team__cta { padding-inline: var(--gutter); }
	.team__title { margin-bottom: 60px; }
	/*
	 * The card is sized by RATIO, not by Figma's flat 502px. The strip bleeds
	 * edge to edge, so a fixed height means the card turns squarer the wider the
	 * screen gets — past roughly 1600px the box is wider than any of the five
	 * portraits (0.506–0.805) and `cover` starts taking the crop out of the top
	 * of the head. Figma's own card is 305x502, so holding that ratio keeps the
	 * crop exactly as drawn at every width. Capped at 660px, or the band turns
	 * into a tower on a 27" screen.
	 */
	.doctor {
		height: auto;
		aspect-ratio: 305 / 502;
		max-height: 660px;
	}

	/*
	 * Belt and braces above the cap, where the ratio does drift again: bias the
	 * crop towards the top so whatever is lost comes off the chest, never the
	 * face. Only affects photos narrower than the box — the wider ones are
	 * cropped horizontally and ignore this.
	 */
	.doctor__image { object-position: center 15%; }

	.team__grid {
		grid-template-columns: repeat(5, 1fr);
		/* Figma: the row is 1525px wide inside a 1440px frame, so it bleeds 42px
		   (2.9167%) past each edge and the outer two portraits are cropped. Keeping
		   the bleed proportional holds the composition together as the stage grows. */
		width: 105.8334%;
		margin-left: -2.9167%;
	}
	/*
	 * Figma 177:996 pins the CTA at y=409 inside the 502px stage, straddling the
	 * bottom arc. It has to be taken out of flow — a negative margin would shorten
	 * the stage and drag the arc up with it. 409/502 = 81.474%, kept as a
	 * percentage so it follows the card's now-fluid height.
	 */
	.team__cta {
		position: absolute;
		inset: 81.474% 0 auto;
		z-index: 3;
		margin: 0;
	}
}

/*
 * Touch: the panel is hover-only, and hover never fires on a phone or tablet,
 * so the names were simply unreachable there. Rather than parking the full
 * navy overlay over the face, coarse-pointer devices get a compact bar sitting
 * on the bottom of the card — the portrait stays the hero, the name and the
 * link to the detail page are always readable. A deliberate departure from the
 * Figma, which only drew the desktop hover state.
 */
@media (hover: none) {
	.doctor__info {
		inset: auto 0 0;
		justify-content: flex-end;
		gap: 12px;
		padding: 48px 20px 20px;
		background: linear-gradient(180deg, rgba(26, 41, 74, 0) 0%, rgba(26, 41, 74, 0.85) 55%);
		transform: none;
	}

	/* The education line needs the whole card to read; the name and the link
	   are what a tap is actually looking for. */
	.doctor__edu { display: none; }

	.doctor__name { margin-bottom: 0; }
}

/*
 * A touch device wide enough for the 5-across strip: the CTA is pinned over the
 * bottom of the row, and with the bar now always visible it sat straight on top
 * of the middle cards' names. Lift the bar clear of the button.
 */
@media (hover: none) and (min-width: 1024px) {
	.doctor__info { padding-bottom: 84px; }
}