/*
 * "The data that changes underwriting decisions" section.
 *
 * An intro card beside a two-panel hover accordion. Measured off the 1440px
 * frame: 1280 container, ~720px tall cards.
 *
 * Three states (all CSS, via :has):
 *  - rest: both panels equal, each showing only its title and background art;
 *  - a panel hovered: it expands (art moves up and fades back, and a detail
 *    image, description and action appear); the other collapses to a strip and
 *    drops its art and title entirely.
 */

.datachg {
	padding-block: var(--section-y);
	background: var(--color-bg-default);
}

.datachg__layout {
	display: flex;
	gap: var(--space-24);
}

/* --- Intro card ----------------------------------------------------------- */

.datachg-intro {
	flex: 0 0 38%;
	position: relative;
	min-height: 720px;
	padding: var(--space-42);
	border-radius: var(--radius-xl);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--space-32);
	background: var(--color-bg-warm);
}

.datachg-intro__title {
	margin: 0;
	max-width: 12ch;
	color: var(--color-text-primary);
}

.datachg-intro__title em {
	color: var(--color-primary);
}

.datachg-intro__note {
	max-width: 34ch;
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-body-sm);
	line-height: var(--lh-body);
	color: var(--color-text-muted);
}

/* --- Accordion ------------------------------------------------------------ */

.datachg__accordion {
	flex: 1;
	display: flex;
	gap: var(--space-16);
	min-width: 0;
}

.dc-panel {
	position: relative;
	min-height: 720px;
	flex: 1 1 0;
	min-width: 56px;
	border-radius: var(--radius-xl);
	overflow: hidden;
	color: var(--color-text-inverse);
	transition: flex-grow 1000ms var(--ease-out-expo);
}

.dc-panel--usdb {
	background: linear-gradient(158deg, #8e50b8 0%, #7c41a2 100%);
}

.dc-panel--roof {
	background: linear-gradient(158deg, #6660d2 0%, #5852c6 100%);
}

/* --- Background art (map / rings) ----------------------------------------- */

.dc-panel__art {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	transition: opacity 850ms var(--ease-out-quart);
}

.dc-panel__art img {
	display: block;
}

/* Map is sized by width (it is wider than tall); rings by height. */
.dc-panel__art--usdb img {
	width: 100%;
	height: auto;
}

.dc-panel__art--roof img {
	height: 100%;
	width: auto;
}

/* Rest positions: map anchored to the bottom-right (bleeding off the right
   edge), rings to the right. */
.dc-panel__art--usdb {
	top: 30%;
	right: -210%;
	bottom: var(--space-32);
	transform: translateX(-50%);
	width: 200%;
	opacity: 0.85;
}

.dc-panel__art--roof {
	top: 20%;
	left: 5%;
	width: 150%;
	opacity: 0.85;
}

/* --- Body ----------------------------------------------------------------- */

/* Rest title sits at the top; the expanded content lives at the foot. They
   cross-fade by opacity, so nothing jumps position on hover in or out. */
.dc-panel__resttitle {
	position: absolute;
	inset: var(--space-32) var(--space-32) auto;
	line-height: 120%;
	z-index: 1;
	margin: 0;
	font-weight: 500;
	color: var(--color-text-inverse);
	transition: opacity 780ms var(--ease-out-quart);
}

.dc-panel__body {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--space-24);
	padding: var(--space-42);
}

.dc-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-24);
}

.dc-panel__title {
	margin: 0;
	font-weight: 500;
	opacity: 0;
	line-height: 120%;
	color: var(--color-text-inverse);
	transition: opacity 780ms var(--ease-out-quart);
}

/* Thumb, description and action only appear on the expanded panel - they fade
   and rise in, and cascade via the staggered delays in the hover rule below. */
.dc-panel__thumb,
.dc-panel__desc,
.dc-panel__cta {
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	transition:
		opacity 780ms var(--ease-out-quart),
		transform 780ms var(--ease-out-quart),
		visibility 780ms;
}

.dc-panel__thumb {
	flex: none;
	width: 230px;
	max-width: 46%;
	aspect-ratio: 554 / 336;
	object-fit: cover;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
}

.dc-panel__desc {
	max-width: 44ch;
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--text-body-sm);
	line-height: var(--lh-body);
	color: rgb(255 255 255 / 85%);
}

.dc-panel__cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: var(--space-12);
	padding: var(--space-12) var(--space-20);
	border: 1px solid rgb(255 255 255 / 55%);
	border-radius: var(--radius-full);
	color: var(--color-text-inverse);
	font-family: var(--font-body);
	font-weight: 500;
	text-decoration: none;
}

.dc-panel__cta:hover {
	background: rgb(255 255 255 / 14%);
}

.dc-panel__cta-icon {
	width: 24px;
	height: 24px;
}

/* --- Expanded panel (the one being hovered) ------------------------------- */

.datachg__accordion:has(.dc-panel--usdb:hover) .dc-panel--usdb,
.datachg__accordion:has(.dc-panel--roof:hover) .dc-panel--roof {
	flex-grow: 8;
}

.datachg__accordion:has(.dc-panel--usdb:hover) .dc-panel--roof,
.datachg__accordion:has(.dc-panel--roof:hover) .dc-panel--usdb {
	flex-grow: 0;
}

/* Reveal the expanded content and fade the rest title out (they cross-fade). */
.dc-panel:hover .dc-panel__resttitle {
	opacity: 0;
}

.dc-panel:hover .dc-panel__title {
	opacity: 1;
}

.dc-panel:hover .dc-panel__thumb,
.dc-panel:hover .dc-panel__desc,
.dc-panel:hover .dc-panel__cta {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Cascade the detail in just after the panel has begun to open. */
.dc-panel:hover .dc-panel__thumb {
	transition-delay: 260ms;
}

.dc-panel:hover .dc-panel__desc {
	transition-delay: 380ms;
}

.dc-panel:hover .dc-panel__cta {
	transition-delay: 500ms;
}

/* Art moves up and fades back behind the copy. */
.dc-panel--usdb:hover .dc-panel__art--usdb {
	top: -13%;
	left: 50%;
	transform: translateX(-50%);
	width: 90%;
	opacity: 0.5;
}

.dc-panel--roof:hover .dc-panel__art--roof {
	top: -28%;
	right: -22%;
	height: 65%;
	left: auto;
	width: auto;
	opacity: 0.5;
}

/* --- Collapsed panel (its sibling is hovered) ----------------------------- */

.datachg__accordion:has(.dc-panel--roof:hover) .dc-panel--usdb .dc-panel__art,
.datachg__accordion:has(.dc-panel--usdb:hover) .dc-panel--roof .dc-panel__art,
.datachg__accordion:has(.dc-panel--roof:hover)
	.dc-panel--usdb
	.dc-panel__resttitle,
.datachg__accordion:has(.dc-panel--usdb:hover)
	.dc-panel--roof
	.dc-panel__resttitle {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.dc-panel,
	.dc-panel__art,
	.dc-panel__title,
	.dc-panel__thumb,
	.dc-panel__desc,
	.dc-panel__cta {
		transition: none;
	}
}

/* --- Mobile --------------------------------------------------------------- */

/* No hover on touch: stack, keep panels equal, and show every panel in full. */
@media (max-width: 900px) {
	.datachg__layout {
		flex-direction: column;
	}

	/* The two panels stay abreast in the mobile design - only the intro card
	   moves above them. */
	.datachg__accordion {
		gap: var(--space-16);
	}

	.datachg-intro {
		flex-basis: auto;
		min-height: 0;
	}

	.dc-panel {
		flex: 1 1 0;
		min-width: 0;
		min-height: 230px;
	}

	/* The mobile design shows just the title over the artwork - the copy and
	   the action belong to the expanded desktop state. */
	.dc-panel__body {
		display: none;
	}

	.dc-panel__resttitle {
		display: block;
		inset: var(--space-20) var(--space-20) auto;
		font-size: var(--text-h6);
	}

	.dc-panel__body {
		justify-content: flex-end;
	}

	.dc-panel__thumb,
	.dc-panel__desc,
	.dc-panel__cta {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.dc-panel__art--usdb {
		top: 5%;
		bottom: auto;
		left: 50%;
		transform: translateX(-50%);
		width: 76%;
		opacity: 0.5;
	}

	.dc-panel__art--roof {
		top: -6%;
		right: -6%;
		transform: none;
		height: 46%;
		opacity: 0.5;
	}
}