/*!
 * Dr Hoa — Section 04: Our Clinical Approach.
 * Loaded after conditions.css on the front page. Component-scoped styles only.
 */

.approach-section {
	--approach-stage-size: 226px;
	--approach-gap: 24px;
	display: block;
	padding: 48px var(--gutter) 44px;
	overflow: clip;
}

/* Construction rail and header repeat the established section grammar. */
.approach-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;
}

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

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

.approach-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;
}

.approach-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 38px minmax(260px, 3fr) minmax(0, 7fr);
	grid-template-rows: auto minmax(0, 1fr);
	column-gap: var(--approach-gap);
	align-items: start;
	min-height: var(--approach-stage-size);
}

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

.approach-intro {
	grid-column: 2;
	grid-row: 2;
	padding-top: 10px;
	font-size: .8125rem;
	line-height: 1.62;
}

.approach-intro p {
	max-width: 40ch;
	margin: 0 0 10px;
}

.approach-intro .approach-lead {
	font-family: var(--font-serif);
	font-size: 1.0625rem;
	line-height: 1.38;
	color: var(--teal-deep);
}

/* A single measured plate keeps the four actions legible as one cycle. */
.approach-cycle {
	position: relative;
	grid-column: 3;
	grid-row: 1 / 3;
	height: var(--approach-stage-size);
	padding: 18px 24px 44px;
	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);
}

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

.approach-cycle::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: .42;
}

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

.approach-eyebrow {
	position: relative;
	z-index: 2;
	margin: 0;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--charcoal);
}

.approach-steps {
	--approach-step-gap: clamp(18px, 2vw, 30px);
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--approach-step-gap);
	margin: 9px 0 0;
	padding: 0;
	list-style: none;
}

.approach-step {
	position: relative;
	min-width: 0;
	min-height: 112px;
	padding: 39px 4px 0 0;
	transition: transform .5s var(--ease-out-soft);
}

.approach-step::before {
	content: "";
	position: absolute;
	left: 0;
	top: 22px;
	width: 18px;
	height: 1px;
	background: var(--gold);
	opacity: .28;
	transition: width .5s var(--ease-out-soft), opacity .4s ease;
}

.approach-step:not(:last-child)::after {
	content: "";
	position: absolute;
	left: calc(100% + 5px);
	top: 22px;
	width: calc(var(--approach-step-gap) - 10px);
	height: 1px;
	background: repeating-linear-gradient(90deg, var(--gold) 0 3px, transparent 3px 7px);
	opacity: .62;
}

.approach-step-number {
	position: absolute;
	right: 2px;
	top: -5px;
	z-index: -1;
	font-family: var(--font-serif);
	font-size: clamp(3.9rem, 5.2vw, 5.25rem);
	font-weight: 500;
	line-height: .86;
	letter-spacing: 0;
	color: #D4C8B1;
	opacity: .46;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .95), 0 -1px 0 rgba(30, 34, 35, .3);
	pointer-events: none;
	transition: color .5s ease, opacity .5s ease, transform .55s var(--ease-out-soft);
}

.approach-step h3 {
	position: relative;
	z-index: 1;
	margin: 0 0 6px;
	font-family: var(--font-sans);
	font-size: .6875rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.approach-step p {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: .71875rem;
	line-height: 1.5;
}

.approach-step--retest h3 { color: var(--teal-deep); }

.approach-return {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 10px;
	height: 34px;
	pointer-events: none;
}

.approach-return svg { display: block; width: 100%; height: 100%; overflow: visible; }

.approach-return path {
	fill: none;
	stroke: var(--gold);
	stroke-width: .7;
	stroke-dasharray: 2 5;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	opacity: .46;
	transition: opacity .5s ease, stroke-dashoffset .7s var(--ease-out-soft);
}

.approach-return .approach-return-arrow { stroke-dasharray: none; }

@media (hover: hover) {
	.approach-step:hover { transform: translateY(-3px); }
	.approach-step:hover::before { width: 34px; opacity: .78; }
	.approach-step:hover .approach-step-number {
		color: #C3B493;
		opacity: .82;
		transform: translateY(-3px) rotate(-2deg) scale(1.035);
	}
	.approach-step:hover h3 { color: var(--teal-deep); }
	.approach-cycle:hover .approach-return path { opacity: .7; stroke-dashoffset: -10; }
}

@media (max-width: 1180px) {
	.approach-section { --approach-stage-size: 238px; }
	.approach-grid { grid-template-columns: 38px minmax(230px, 3fr) minmax(0, 7fr); }
	.approach-cycle { padding-inline: 20px; }
	.approach-step-number { font-size: 4.35rem; }
	.approach-return { left: 20px; right: 20px; }
}

@media (max-width: 1024px) {
	.approach-section { --approach-stage-size: 248px; --approach-gap: 22px; }
	.approach-grid { grid-template-columns: 38px minmax(210px, 3fr) minmax(0, 7fr); }
	.approach-intro { font-size: .75rem; }
	.approach-intro .approach-lead { font-size: .96875rem; }
	.approach-cycle { padding-inline: 18px; }
	.approach-step { padding-top: 37px; }
	.approach-step-number { font-size: 4rem; }
	.approach-step p { font-size: .671875rem; }
	.approach-return { left: 18px; right: 18px; }
}

@media (max-width: 768px) {
	.approach-section { --approach-stage-size: auto; padding: 32px 20px 38px; }
	.approach-section::before,
	.approach-head .num { display: none; }
	.approach-grid { grid-template-columns: 1fr; grid-template-rows: auto; gap: 20px; min-height: 0; }
	.approach-head { grid-column: 1; grid-row: auto; display: block; }
	.approach-intro { grid-column: 1; grid-row: auto; padding: 0; font-size: .8125rem; }
	.approach-intro p { max-width: 62ch; }
	.approach-cycle { grid-column: 1; grid-row: auto; height: auto; min-height: 0; padding: 20px; }
	.approach-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; }
	.approach-step { min-height: 118px; }
	.approach-step:not(:last-child)::after,
	.approach-return { display: none; }
}

@media (max-width: 480px) {
	.approach-steps { grid-template-columns: 1fr; gap: 0; }
	.approach-step { min-height: 0; padding: 15px 8px 14px 68px; }
	.approach-step + .approach-step { border-top: 1px dashed var(--sketch-soft); }
	.approach-step::before { left: 68px; top: 10px; }
	.approach-step-number { left: 8px; right: auto; top: 13px; font-size: 3.1rem; opacity: .58; }
	.approach-step h3 { margin: 0 0 5px; }
	.approach-step p { font-size: .71875rem; }
}