/*
 * AH Case Dossier. A white file card that sits on any section background.
 * The before / after slider is physical (left is left in both directions): in RTL the "after"
 * side is on the left, in LTR on the right, so the clip mirrors with the page direction.
 */
.ah-cd {
	--ah-cd-photo: 42.5%;
	display: grid;
	grid-template-columns: minmax(0, var(--ah-cd-photo)) minmax(0, 1fr);
	overflow: hidden;
	border: 1px solid var(--ah-line);
	border-radius: 6px;
	background: var(--ah-paper);
	color: var(--ah-ink);
	font-family: var(--ah-f-body);
	font-size: 1.0625rem;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}

/* photo */
.ah-cd .ah-cd__fig {
	position: relative;
	min-height: 100%;
	margin: 0;
	overflow: hidden;
	background: var(--ah-sand);
}
.ah-cd .ah-cd__fig .ah-cd__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}
.ah-cd .ah-cd__cap {
	position: absolute;
	z-index: 1;
	bottom: 12px;
	inset-inline-start: 12px;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(9, 18, 42, .82);
	color: var(--ah-on-navy);
	font-family: var(--ah-f-en);
	font-size: .76rem;
	line-height: 1.6;
}

/* body */
.ah-cd .ah-cd__body {
	display: grid;
	gap: 18px;
	align-content: start;
	min-width: 0;
	padding: 32px;
}
.ah-cd .ah-cd__title {
	margin: 0;
	font-family: var(--ah-f-display);
	font-weight: 800;
	font-size: clamp(1.5rem, 2.8vw, 2.15rem);
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--ah-ink);
	text-wrap: balance;
}
.ah-cd .ah-cd__story { margin: 0; color: var(--ah-muted); }

/* key facts: each column as wide as its value needs */
.ah-cd .ah-cd__kh {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: auto;
	margin: 0;
	border: 1px solid var(--ah-line);
	border-radius: 6px;
}
.ah-cd .ah-cd__kh > div { display: grid; gap: 2px; align-content: start; min-width: 0; padding: 10px 12px; }
.ah-cd .ah-cd__kh > div + div { border-inline-start: 1px solid var(--ah-line); }
.ah-cd .ah-cd__kh dt { margin: 0; font-weight: 400; font-size: .74rem; line-height: 1.5; color: var(--ah-soft); }
.ah-cd .ah-cd__kh dd {
	margin: 0;
	font-family: var(--ah-f-display);
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.5;
	color: var(--ah-ink);
	unicode-bidi: plaintext;
	text-align: match-parent;
}

/* before / after */
.ah-cd .ah-cd__ba {
	--p: 50%;
	position: relative;
	height: 200px;
	overflow: hidden;
	border-radius: 6px;
	-webkit-user-select: none;
	user-select: none;
	touch-action: pan-y;
}
.ah-cd .ah-cd__pn { position: absolute; inset: 0; display: grid; align-content: center; padding: 20px 24px; }
.ah-cd .ah-cd__pn--before { background: #E7E1D3; background: color-mix(in srgb, var(--ah-sand) 85%, var(--ah-gold)); color: var(--ah-ink); }
.ah-cd .ah-cd__pn--after { background: var(--ah-navy); color: var(--ah-on-navy); clip-path: inset(0 0 0 var(--p)); }
[dir="rtl"] .ah-cd .ah-cd__pn--after { clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.ah-cd .ah-cd__pin { display: grid; gap: 4px; justify-items: start; max-width: 44%; }
.ah-cd .ah-cd__pn--after .ah-cd__pin { margin-inline-start: auto; }
.ah-cd .ah-cd__lbl { font-family: var(--ah-f-mono); font-size: .7rem; line-height: 1.5; letter-spacing: .24em; }
.ah-cd .ah-cd__lbl.ah-cd__lbl--ar { font-family: var(--ah-f-body); font-weight: 700; letter-spacing: 0; }
.ah-cd .ah-cd__pn--before .ah-cd__lbl { color: var(--ah-soft); }
.ah-cd .ah-cd__pn--after .ah-cd__lbl { color: var(--ah-gold-hi); }
.ah-cd .ah-cd__v {
	direction: ltr;
	font-family: var(--ah-f-display);
	font-weight: 800;
	font-size: clamp(1.8rem, 3.4vw, 2.5rem);
	line-height: 1.1;
	text-align: start;
	font-variant-numeric: tabular-nums;
}
.ah-cd .ah-cd__pn--before .ah-cd__v { color: var(--ah-red); }
.ah-cd .ah-cd__pn--after .ah-cd__v { color: var(--ah-gold-hi); }
.ah-cd .ah-cd__d { font-size: .88rem; line-height: 1.7; }
.ah-cd .ah-cd__pn--before .ah-cd__d { color: var(--ah-muted); }
.ah-cd .ah-cd__pn--after .ah-cd__d { color: var(--ah-on-navy-muted); }
.ah-cd .ah-cd__pn--after sup.ah-ref { color: var(--ah-gold-hi); }

.ah-cd .ah-cd__ba .ah-cd__range.ah-cd__range {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	opacity: 0;
	direction: ltr;
	cursor: ew-resize;
	-webkit-appearance: none;
	appearance: none;
}
.ah-cd .ah-cd__handle {
	position: absolute;
	z-index: 3;
	top: 0;
	bottom: 0;
	left: var(--p);
	width: 2px;
	margin-left: -1px;
	background: var(--ah-gold);
	pointer-events: none;
}
.ah-cd .ah-cd__knob {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--ah-gold);
	color: var(--ah-deep);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
	transform: translate(-50%, -50%);
	transition: transform .35s var(--ah-spring), background-color .3s, box-shadow .3s;
}
.ah-cd .ah-cd__knob svg { display: block; width: 18px; height: 18px; }
.ah-cd .ah-cd__ba:hover .ah-cd__knob { transform: translate(-50%, -50%) scale(1.1); background: var(--ah-gold-hi); }
.ah-cd .ah-cd__ba.is-active .ah-cd__knob { transform: translate(-50%, -50%) scale(.92); }
.ah-cd .ah-cd__range:focus-visible + .ah-cd__handle .ah-cd__knob {
	background: var(--ah-gold-hi);
	box-shadow: 0 0 0 3px var(--ah-paper), 0 0 0 5px var(--ah-gold), 0 6px 18px rgba(0, 0, 0, .25);
}

/* hint, link, sources */
.ah-cd .ah-cd__hint { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ah-cd .ah-cd__hand { font-size: 1.1rem; }
.ah-cd .ah-cd__more .ah-btn__arr { flex: none; width: 1em; height: 1em; transition: translate .35s var(--ah-ease); }
[dir="rtl"] .ah-cd .ah-cd__more .ah-btn__arr { scale: -1 1; }
.ah-cd .ah-cd__more:hover .ah-btn__arr { translate: calc(var(--ah-dir) * 4px) 0; }
.ah-cd a.ah-cd__more:focus-visible { outline: 2px solid var(--ah-gold); outline-offset: 3px; border-radius: 2px; }
.ah-cd .ah-cd__fn { margin: 0; }

/* scroll parallax on the photo */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.ah-cd .ah-cd__fig--par .ah-cd__img {
			scale: 1.14;
			animation: ah-cd-par linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
	}
}
@keyframes ah-cd-par {
	from { translate: 0 -5%; }
	to { translate: 0 5%; }
}

/* tablet: photo on top */
@media (max-width: 1024px) {
	.ah-cd { grid-template-columns: minmax(0, 1fr); }
	.ah-cd .ah-cd__fig { min-height: 0; aspect-ratio: 16 / 9; }
	.ah-cd .ah-cd__fig--empty { display: none; }
}

/* phones: facts in two columns, before and after stacked, no slider */
@media (max-width: 767px) {
	.ah-cd .ah-cd__fig { aspect-ratio: 16 / 10; }
	.ah-cd .ah-cd__body { gap: 16px; padding: 22px; }
	.ah-cd .ah-cd__kh { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ah-cd .ah-cd__kh > div:nth-child(2n + 1) { border-inline-start: 0; }
	.ah-cd .ah-cd__kh > div:nth-child(n + 3) { border-top: 1px solid var(--ah-line); }
	.ah-cd .ah-cd__ba { display: grid; gap: 8px; height: auto; overflow: visible; }
	.ah-cd .ah-cd__pn { position: relative; inset: auto; padding: 18px 20px; border-radius: 6px; }
	.ah-cd .ah-cd__pn--after,
	[dir="rtl"] .ah-cd .ah-cd__pn--after { clip-path: none; }
	.ah-cd .ah-cd__pin,
	.ah-cd .ah-cd__pn--after .ah-cd__pin { max-width: none; margin: 0; }
	.ah-cd .ah-cd__ba .ah-cd__range.ah-cd__range,
	.ah-cd .ah-cd__handle,
	.ah-cd .ah-cd__hand { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ah-cd .ah-cd__knob,
	.ah-cd .ah-cd__more .ah-btn__arr { transition: none; }
}