/*!
 * Dr Hoa — Section 05: Clinical Team.
 * Loaded after approach.css on the front page. Component-scoped styles only.
 */

.team-section {
	--team-gap: 24px;
	--team-body-size: 286px;
	display: block;
	padding: 48px var(--gutter) 44px;
	overflow: clip;
}

/* Construction rail and marker align exactly with sections 01–04. */
.team-section::before {
	content: "";
	position: absolute;
	left: calc(var(--gutter) + 19px);
	top: 104px;
	bottom: 46px;
	width: 1px;
	background: repeating-linear-gradient(180deg, rgba(180, 146, 79, .34) 0 3px, transparent 3px 9px);
	-webkit-mask-image: linear-gradient(180deg, #000 0, #000 78%, transparent);
	mask-image: linear-gradient(180deg, #000 0, #000 78%, transparent);
	opacity: .48;
	pointer-events: none;
}

.team-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 38px minmax(280px, 3.4fr) minmax(0, 6.6fr);
	grid-template-rows: auto var(--team-body-size);
	column-gap: var(--team-gap);
	row-gap: 14px;
}

.team-grid > * { min-width: 0; }

.team-head {
	grid-column: 1 / 3;
	grid-row: 1;
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	column-gap: var(--team-gap);
	align-items: start;
}

.team-head .section-title { margin: 0; font-size: 1.375rem; }

.team-head .section-title::after {
	content: "";
	display: block;
	width: 58px;
	height: 7px;
	margin-top: 16px;
	background:
		radial-gradient(circle at 3.5px 3.5px, transparent 2.1px, var(--gold) 2.5px, var(--gold) 3.2px, transparent 3.6px) 0 0 / 7px 7px no-repeat,
		linear-gradient(var(--gold), var(--gold)) 13px 3px / 45px 1px no-repeat;
	opacity: .75;
}

/* The shared portrait uses the same mounted-print language as Section 01. */
.team-photo-plate {
	position: relative;
	grid-column: 2;
	grid-row: 2;
	height: 100%;
	border: 1px solid var(--rule);
	outline: 1px solid rgba(180, 146, 79, .28);
	outline-offset: 7px;
	background: linear-gradient(160deg, #F3EFE8, #FBF9F5);
	box-shadow: var(--ios-shadow), 0 22px 52px rgba(31, 68, 66, .08);
	padding: 14px;
}

.team-photo-plate::before,
.team-photo-plate::after,
.team-photo-corner::before,
.team-photo-corner::after {
	content: "";
	position: absolute;
	width: 22px;
	height: 22px;
	border-color: rgba(180, 146, 79, .55);
	border-style: solid;
	z-index: 2;
	pointer-events: none;
}

.team-photo-plate::before { top: 8px; left: 8px; border-width: 1px 0 0 1px; }
.team-photo-plate::after { top: 8px; right: 8px; border-width: 1px 1px 0 0; }
.team-photo-corner::before { left: 8px; bottom: 8px; border-width: 0 0 1px 1px; }
.team-photo-corner::after { right: 8px; bottom: 8px; border-width: 0 1px 1px 0; }

.team-photo {
	position: relative;
	height: 100%;
	margin: 0;
	overflow: hidden;
	box-shadow: var(--ios-shadow);
}

.team-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 0 1px rgba(31, 68, 66, .1), inset 0 1px 0 rgba(255, 255, 255, .35);
	pointer-events: none;
}

.team-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 47%;
	filter: saturate(.93) contrast(1.015);
	transition: transform .8s var(--ease-out-soft), filter .8s var(--ease-out-soft);
}

/* One editorial field holds the shared philosophy and three equal principles. */
.team-content {
	position: relative;
	grid-column: 3;
	grid-row: 2;
	height: 100%;
	padding: 18px 24px 16px 28px;
	border: 1px solid rgba(228, 222, 212, .88);
	background: linear-gradient(135deg, rgba(255, 255, 255, .38), rgba(250, 247, 242, .12));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62);
}

.team-content::before,
.team-content::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

.team-content::before {
	inset: 8px;
	background:
		linear-gradient(var(--gold), var(--gold)) left top / 18px 1px no-repeat,
		linear-gradient(var(--gold), var(--gold)) left top / 1px 18px no-repeat,
		linear-gradient(var(--sketch), var(--sketch)) right bottom / 18px 1px no-repeat,
		linear-gradient(var(--sketch), var(--sketch)) right bottom / 1px 18px no-repeat;
	opacity: .44;
}

.team-content::after {
	left: -5px;
	top: 50%;
	width: 9px;
	height: 9px;
	border: 1px solid var(--gold);
	border-radius: 50%;
	background: var(--ivory);
	opacity: .6;
	transform: translateY(-50%);
}

.team-intro { position: relative; z-index: 1; max-width: 78ch; }
.team-intro p { margin: 0; font-size: .75rem; line-height: 1.58; }

.team-intro .team-statement {
	max-width: 35ch;
	margin-bottom: 9px;
	font-family: var(--font-serif);
	font-size: 1.3125rem;
	line-height: 1.23;
	color: var(--charcoal);
}

.team-origin {
	position: relative;
	margin-top: 8px !important;
	padding-left: 34px;
	font-family: var(--font-serif);
	font-style: italic;
	color: var(--teal-deep);
}

.team-origin::before {
	content: "";
	position: absolute;
	left: 0;
	top: .78em;
	width: 24px;
	height: 1px;
	background: var(--gold);
	opacity: .68;
}

/* Equal principles are joined by one measured line; they are not steps. */
.team-principles {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(22px, 2.4vw, 38px);
	margin: 13px 0 0;
	padding: 25px 0 0;
	border-top: 1px dashed var(--sketch-soft);
	list-style: none;
}

.team-principles::before {
	content: "";
	position: absolute;
	left: 5px;
	right: 5px;
	top: 11px;
	height: 1px;
	background: repeating-linear-gradient(90deg, var(--gold) 0 2px, transparent 2px 7px);
	opacity: .34;
}

.team-principles li { position: relative; min-width: 0; }

.team-principles li::before {
	content: "";
	position: absolute;
	left: 0;
	top: -18px;
	width: 9px;
	height: 9px;
	border: 1px solid var(--gold);
	border-radius: 50%;
	background: var(--ivory);
	box-shadow: inset 0 0 0 2px var(--ivory), inset 0 0 0 3px rgba(31, 68, 66, .5);
	transition: transform .5s var(--ease-out-soft), border-color .4s ease, box-shadow .4s ease;
}

.team-principles h3 {
	margin: 0 0 6px;
	font-family: var(--font-serif);
	font-size: .96875rem;
	font-style: italic;
	font-weight: 500;
	line-height: 1.25;
	color: var(--teal-deep);
}

.team-principles p { margin: 0; font-size: .6875rem; line-height: 1.52; }

@media (hover: hover) {
	.team-photo:hover img { transform: scale(1.018); filter: saturate(.98) contrast(1.025); }
	.team-principles li:hover::before {
		border-color: var(--teal-deep);
		box-shadow: inset 0 0 0 2px var(--ivory), inset 0 0 0 3px var(--gold), 0 0 0 4px rgba(180, 146, 79, .1);
		transform: scale(1.18) rotate(12deg);
	}
}

@media (max-width: 1180px) {
	.team-section { --team-body-size: 300px; --team-gap: 22px; }
	.team-grid { grid-template-columns: 38px minmax(250px, 3.4fr) minmax(0, 6.6fr); }
	.team-content { padding: 18px 20px 16px 24px; }
	.team-intro .team-statement { font-size: 1.25rem; }
	.team-principles { gap: 20px; }
}

@media (max-width: 1024px) {
	.team-section { --team-body-size: 310px; }
	.team-grid { grid-template-columns: 38px minmax(230px, 3.4fr) minmax(0, 6.6fr); }
	.team-intro p { font-size: .71875rem; }
	.team-principles { gap: 14px; }
	.team-principles h3 { font-size: .875rem; }
	.team-principles p { font-size: .640625rem; }
}

@media (max-width: 900px) {
	.team-section { --team-body-size: auto; padding-block: 40px; }
	.team-section::before { top: 96px; }
	.team-grid { grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: auto; height: auto; }
	.team-head { grid-column: 1 / 3; grid-row: auto; }
	.team-photo-plate { grid-column: 2; grid-row: auto; height: clamp(270px, 42vw, 350px); }
	.team-content { grid-column: 2; grid-row: auto; height: auto; }
}

@media (max-width: 768px) {
	.team-section { padding: 32px 20px 38px; }
	.team-section::before,
	.team-head .num { display: none; }
	.team-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
	.team-head,
	.team-photo-plate,
	.team-content { grid-column: 1; }
	.team-head { display: block; }
	.team-photo-plate { height: auto; aspect-ratio: 4 / 3; padding: 12px; }
	.team-content { padding: 22px 20px; }
	.team-content::after { display: none; }
}

@media (max-width: 540px) {
	.team-principles { grid-template-columns: 1fr; gap: 17px; padding-top: 17px; }
	.team-principles::before { display: none; }
	.team-principles li { padding-left: 22px; }
	.team-principles li::before { left: 0; top: .25em; }
	.team-principles h3 { font-size: .9375rem; }
	.team-principles p { font-size: .71875rem; }
}