/* Dr Hoa — Section 03: Conditions We Assess & Treat. */

.conditions-section {
	--conditions-gap: 24px;
	--conditions-engraving: color-mix(in srgb, var(--teal-deep) 24%, #D4C8B1);
	--conditions-engraving-warm: color-mix(in srgb, var(--gold) 54%, #D4C8B1);
	--conditions-engraving-soft: color-mix(in srgb, var(--ink-muted) 30%, #D4C8B1);
	display: block;
	padding: 48px var(--gutter) 44px;
	overflow: clip;
}

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

.conditions-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	column-gap: var(--conditions-gap);
}

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

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

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

.conditions-list {
	grid-column: 2;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.conditions-list li { min-width: 0; }

.conditions-card {
	position: relative;
	display: block;
	min-height: 112px;
	height: 100%;
	padding: 18px 54px 18px 18px;
	overflow: hidden;
	border: 1px solid rgba(228, 222, 212, .9);
	background: linear-gradient(145deg, rgba(255, 255, 255, .46), rgba(250, 247, 242, .16));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .64);
	color: var(--charcoal);
	text-decoration: none;
}

.conditions-card::before,
.conditions-card::after,
.conditions-card-corners::before,
.conditions-card-corners::after {
	content: "";
	position: absolute;
	width: 13px;
	height: 13px;
	border-color: var(--gold);
	border-style: solid;
	opacity: .42;
	pointer-events: none;
}

.conditions-card::before { top: 7px; left: 7px; border-width: 1px 0 0 1px; }
.conditions-card::after { top: 7px; right: 7px; border-width: 1px 1px 0 0; }
.conditions-card-corners::before { bottom: 7px; left: 7px; border-width: 0 0 1px 1px; }
.conditions-card-corners::after { right: 7px; bottom: 7px; border-width: 0 1px 1px 0; }

.conditions-card-number {
	position: absolute;
	right: 10px;
	bottom: -8px;
	z-index: 1;
	font-family: var(--font-serif);
	font-size: 3.75rem;
	font-weight: 500;
	line-height: 1;
	color: #D4C8B1;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .95), 0 -1px 0 rgba(30, 34, 35, .22);
	opacity: .48;
	transition: color .4s ease, opacity .4s ease, transform .5s var(--ease-out-soft);
}

/* Anatomical studies are clipped watermarks, never part of the card flow. */
.conditions-card-art {
	position: absolute;
	top: 50%;
	right: -2px;
	z-index: 0;
	display: block;
	width: 162px;
	height: 108px;
	color: var(--conditions-engraving);
	opacity: .68;
	pointer-events: none;
	filter:
		drop-shadow(0 1px 0 rgba(255, 255, 255, .88))
		drop-shadow(0 -1px 0 rgba(30, 34, 35, .14));
	transform: translateY(-50%);
}

.conditions-card-art path {
	fill: none;
	stroke: currentColor;
	stroke-width: .82;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.conditions-card-art .is-warm { stroke: var(--conditions-engraving-warm); }
.conditions-card-art .is-soft { stroke: var(--conditions-engraving-soft); opacity: .76; }

.conditions-card-copy { position: relative; z-index: 2; }

.conditions-card h3 {
	max-width: 24ch;
	margin: 0;
	font-size: .71875rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.conditions-card p {
	position: relative;
	margin: 14px 0 0;
	padding-top: 9px;
	font-family: var(--font-serif);
	font-size: .875rem;
	font-style: italic;
	line-height: 1.35;
	color: var(--teal-deep);
}

.conditions-card p::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 22px;
	height: 1px;
	background: var(--gold);
	opacity: .58;
}

a.conditions-card {
	transition: border-color .4s ease, box-shadow .5s var(--ease-out-soft), transform .5s var(--ease-out-soft);
}

a.conditions-card:focus-visible {
	outline: 2px solid var(--teal-deep);
	outline-offset: 3px;
}

@media (hover: hover) {
	a.conditions-card:hover {
		border-color: rgba(180, 146, 79, .58);
		box-shadow: var(--ios-shadow);
		transform: translateY(-2px);
	}

	a.conditions-card:hover .conditions-card-number {
		color: #C3B493;
		opacity: .72;
		transform: translateY(-2px);
	}
}

@media (max-width: 1180px) {
	.conditions-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.conditions-card { min-height: 104px; }
}

@media (max-width: 768px) {
	.conditions-section { padding: 32px 20px 38px; }
	.conditions-section::before,
	.conditions-head .num { display: none; }
	.conditions-grid { grid-template-columns: 1fr; gap: 20px; }
	.conditions-head { grid-column: 1; display: block; }
	.conditions-head .section-title {
		max-width: 24ch;
		font-size: 1.25rem;
		line-height: 1.15;
		white-space: normal;
	}
	.conditions-list { grid-column: 1; margin-top: 0; }
}

@media (max-width: 540px) {
	.conditions-list { grid-template-columns: 1fr; gap: 10px; }
	.conditions-card { min-height: 98px; }
	.conditions-card-art { right: -14px; width: 142px; opacity: .56; }
}

@media (prefers-reduced-motion: reduce) {
	a.conditions-card,
	.conditions-card-number { transition-duration: 0s; }
}