/*
 * AH Symptom Cards: three paper cards crossed out in red, then the case line with a margin note.
 * Cards keep their slight angles as separate `rotate`/`translate` properties, so the reveal
 * (transform) and the hover (straighten and lift) never fight.
 */
.ah-sym {
	min-width: 0;
	font-family: var(--ah-f-body);
	line-height: 1.75;
	color: var(--ah-ink);
}

/* cards */
.ah-sym .ah-sym__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ah-sym .ah-sym__card {
	--r: 0deg;
	--y: 0px;
	position: relative;
	display: grid;
	gap: 10px;
	align-content: start;
	min-width: 0;
	margin: 0;
	padding: 26px 24px 24px;
	border: 1px solid var(--ah-line);
	border-radius: 4px;
	background: var(--ah-paper);
	color: var(--ah-ink);
	rotate: var(--r);
	translate: 0 var(--y);
	transition: rotate .6s var(--ah-spring), translate .6s var(--ah-spring), box-shadow .5s var(--ah-ease);
}
.ah-sym .ah-sym__card::marker { content: none; }
.ah-sym .ah-sym__card:nth-child(3n+1) { --r: -.8deg; }
.ah-sym .ah-sym__card:nth-child(3n+2) { --r: .5deg; --y: 14px; }
.ah-sym .ah-sym__card:nth-child(3n) { --r: -.3deg; }
.ah-sym.ah-sym--flat .ah-sym__card { --r: 0deg; --y: 0px; }
@media (hover: hover) {
	.ah-sym .ah-sym__card:hover {
		rotate: 0deg;
		translate: 0 calc(var(--y) - 4px);
		box-shadow: 0 24px 40px -30px rgba(15, 27, 60, .5);
	}
}
/* the reveal from ah-base sets its own transition; keep the hover ones and stagger the rise */
.ah-motion .ah-sym .ah-sym__card.ah-rv--up {
	transition:
		opacity .9s var(--ah-ease) calc(var(--i, 0) * 110ms),
		transform .9s var(--ah-ease) calc(var(--i, 0) * 110ms),
		rotate .6s var(--ah-spring),
		translate .6s var(--ah-spring),
		box-shadow .5s var(--ah-ease);
}

.ah-sym .ah-sym__x {
	position: absolute;
	top: -14px;
	inset-inline-end: 16px;
	width: 40px;
	height: 40px;
	overflow: visible;
	pointer-events: none;
}
.ah-sym .ah-sym__x .ah-scrib { stroke: var(--ah-red); }
.ah-motion .ah-sym .ah-rv .ah-sym__x .ah-draw { transition: stroke-dashoffset .9s var(--ah-ease) calc(.45s + var(--i, 0) * 110ms); }

.ah-sym .ah-sym__kicker {
	font-family: var(--ah-f-mono);
	font-size: .74rem;
	font-weight: 400;
	line-height: 1.75;
	letter-spacing: 0;
	color: var(--ah-red);
}
.ah-sym .ah-sym__kicker[lang="en"] { letter-spacing: .14em; }
.ah-sym .ah-sym__title {
	margin: 0;
	font-family: var(--ah-f-display);
	font-weight: 800;
	font-size: 1.32rem;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ah-ink);
	text-wrap: balance;
}
.ah-sym .ah-sym__text {
	margin: 0;
	font-size: .95rem;
	line-height: 1.75;
	color: var(--ah-muted);
}

/* the turn: case line, margin note, button */
.ah-sym .ah-sym__turn {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 24px;
	align-items: center;
	padding-top: 28px;
	border-top: 1px solid var(--ah-ink);
}
.ah-sym .ah-sym__grid + .ah-sym__turn { margin-top: 56px; }
.ah-sym .ah-sym__lead {
	margin: 0;
	max-width: 40ch;
	font-family: var(--ah-f-display);
	font-weight: 600;
	font-size: clamp(1.25rem, 2.4vw, 1.7rem);
	line-height: 1.5;
	color: var(--ah-ink);
	text-wrap: pretty;
}
.ah-sym .ah-sym__lead b { font-weight: 800; color: var(--ah-ink-gold); }
.ah-sym .ah-sym__goto { display: flex; align-items: center; gap: 6px; }
.ah-sym .ah-sym__note { white-space: nowrap; }
.ah-sym .ah-sym__arrow { flex: none; display: block; width: 56px; height: 40px; overflow: visible; scale: -1 1; }
/* drawn pointing left, towards the button in Arabic; mirrored for left-to-right pages */
[dir="rtl"] .ah-sym .ah-sym__arrow { scale: 1 1; }
.ah-motion .ah-sym .ah-rv .ah-sym__arrow .ah-draw { transition: stroke-dashoffset 1.1s var(--ah-ease) .5s; }
.ah-sym .ah-btn:focus-visible { outline: 2px solid var(--ah-gold); outline-offset: 3px; }

/* dark background (cards stay paper) */
.ah-sym.ah-on-dark { color: var(--ah-on-navy); }
.ah-sym.ah-on-dark .ah-sym__card { border-color: transparent; }
.ah-sym.ah-on-dark .ah-sym__turn { border-top-color: rgba(244, 241, 232, .45); }
.ah-sym.ah-on-dark .ah-sym__lead { color: var(--ah-on-navy); }
.ah-sym.ah-on-dark .ah-sym__lead b { color: var(--ah-gold-hi); }

@media (max-width: 1024px) {
	.ah-sym .ah-sym__grid { grid-template-columns: minmax(0, 1fr); }
	.ah-sym .ah-sym__card:nth-child(n) { --r: 0deg; --y: 0px; }
	.ah-sym .ah-sym__turn { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
	.ah-sym .ah-sym__grid { gap: 22px; }
	.ah-sym .ah-sym__card { padding: 24px 20px 20px; }
	.ah-sym .ah-sym__title { font-size: 1.2rem; }
	.ah-sym .ah-sym__grid + .ah-sym__turn { margin-top: 44px; }
	.ah-sym .ah-sym__turn { padding-top: 22px; gap: 18px; }
	.ah-sym .ah-sym__goto { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
	.ah-sym .ah-sym__card,
	.ah-motion .ah-sym .ah-sym__card.ah-rv--up { transition: none; }
	.ah-sym .ah-sym__card:hover { rotate: var(--r); translate: 0 var(--y); }
}