/* Problem Panel — sticky stacked card */

:root {
	/* Top padding + 3xl title line-height: full title strip per stacked card */
	--activ-problem-panel-sticky-row: calc(var(--wp--preset--spacing--20, 5rem) + 2.5rem);
	--activ-problem-panel-stack-base: var(--activ-header-height, 5.6875rem);
	--activ-problem-panel-card-height: calc(
		var(--wp--preset--spacing--20, 5rem) + 2.5rem + var(--wp--preset--spacing--20, 5rem) +
		var(--activ-problem-panel-media-height) + var(--wp--preset--spacing--10, 2.5rem)
	);
	--activ-problem-panel-title-gap: 10.3125rem;
	--activ-problem-panel-section-spacing: var(--wp--preset--spacing--20);
	--activ-problem-panel-media-width: 19.6875rem;
	--activ-problem-panel-media-height: 25.0625rem;
}

.activ-problem-panels .wp-block-activ-problem-panel {
	counter-increment: problem-panel;
}

.activ-problem-panels > .wp-block-activ-problem-panel:nth-child( 1 ) {
	--panel-stack-index: 0;
}

.activ-problem-panels > .wp-block-activ-problem-panel:nth-child( 2 ) {
	--panel-stack-index: 1;
}

.activ-problem-panels > .wp-block-activ-problem-panel:nth-child( 3 ) {
	--panel-stack-index: 2;
}

.activ-problem-panels > .wp-block-activ-problem-panel:nth-child( 4 ) {
	--panel-stack-index: 3;
}

.activ-problem-panels > .wp-block-activ-problem-panel:nth-child( 5 ) {
	--panel-stack-index: 4;
}

.activ-problem-panel,
.wp-block-activ-problem-panel.activ-problem-panel {
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--albert-sans, "Albert Sans", system-ui, sans-serif);
	position: relative;
	width: 100%;
}

/* Sticky stack is desktop-only — tall panels clip content when stuck on small viewports */
@media (min-width: 1024px) and (min-height: 701px) {
	.activ-problem-panel,
	.wp-block-activ-problem-panel.activ-problem-panel {
		--panel-sticky-top: calc(
			var(--activ-problem-panel-stack-base) +
			var(--panel-stack-index, 0) * var(--activ-problem-panel-sticky-row)
		);
		position: sticky;
		top: var(--panel-sticky-top);
		transition: top 0.3s ease;
		z-index: calc(var(--panel-stack-index, 0) + 1);
	}

	/* Earlier cards grow past their visible content so every panel releases together */
	.activ-problem-panel::after,
	.wp-block-activ-problem-panel.activ-problem-panel::after {
		content: "";
		display: block;
		height: calc(
			(var(--activ-problem-panel-count, 2) - var(--panel-stack-index, 0) - 1) *
			var(--activ-problem-panel-sticky-row)
		);
	}

	/* Pull each card up only over its predecessor's sticky spacer, not the full card */
	.activ-problem-panels > .wp-block-activ-problem-panel + .wp-block-activ-problem-panel {
		margin-top: calc(
			-1 * (var(--activ-problem-panel-count, 2) - var(--panel-stack-index, 1)) *
			var(--activ-problem-panel-sticky-row)
		);
	}
}

@media (min-width: 1024px) and (min-height: 701px) and (prefers-reduced-motion: reduce) {
	.activ-problem-panel,
	.wp-block-activ-problem-panel.activ-problem-panel {
		transition: none;
	}
}

.activ-problem-panels .wp-block-activ-problem-panel {
	border-top: 1px solid #e3e3e3;
}

.activ-problem-panel__shell {
	box-sizing: border-box;
	width: 100%;
}

.activ-problem-panel__container {
	box-sizing: border-box;
	width: 100%;
}

.activ-problem-panel__layout {
	align-items: stretch;
	display: flex;
	width: 100%;
}

/* Legacy flat markup (pre-column child blocks) */
.activ-problem-panel__layout:not( :has( > .wp-block-activ-problem-panel-left ) ) {
	display: grid;
	grid-template-columns: minmax(0, 44.44%) minmax(0, 55.56%);
}

.activ-problem-panel__layout:not( :has( > .wp-block-activ-problem-panel-left ) ) > .activ-problem-panel__header,
.activ-problem-panel__layout:not( :has( > .wp-block-activ-problem-panel-left ) ) > .wp-block-group.activ-problem-panel__header,
.activ-problem-panel__layout:not( :has( > .wp-block-activ-problem-panel-left ) ) > .activ-problem-panel__media,
.activ-problem-panel__layout:not( :has( > .wp-block-activ-problem-panel-left ) ) > .wp-block-image.activ-problem-panel__media {
	grid-column: 1;
}

.activ-problem-panel__layout:not( :has( > .wp-block-activ-problem-panel-left ) ) > :not( .activ-problem-panel__header ):not( .activ-problem-panel__media ):not( .wp-block-group.activ-problem-panel__header ):not( .wp-block-image.activ-problem-panel__media ) {
	border-left: 1px solid #e3e3e3;
	grid-column: 2;
	padding-left: var(--wp--preset--spacing--10);
}

.activ-problem-panel__layout:not( :has( > .wp-block-activ-problem-panel-left ) ) > .activ-problem-panel__header,
.activ-problem-panel__layout:not( :has( > .wp-block-activ-problem-panel-left ) ) > .wp-block-group.activ-problem-panel__header {
	padding: var(--activ-problem-panel-section-spacing) 0 0;
}

.activ-problem-panel__layout:not( :has( > .wp-block-activ-problem-panel-left ) ) > .activ-problem-panel__media,
.activ-problem-panel__layout:not( :has( > .wp-block-activ-problem-panel-left ) ) > .wp-block-image.activ-problem-panel__media {
	padding: 0 0 var(--wp--preset--spacing--10);
}

.activ-problem-panel__layout:not( :has( > .wp-block-activ-problem-panel-left ) ) > .activ-problem-panel__headline,
.activ-problem-panel__layout:not( :has( > .wp-block-activ-problem-panel-left ) ) > .wp-block-heading.activ-problem-panel__headline {
	padding-top: var(--activ-problem-panel-section-spacing);
}

.activ-problem-panel__layout:not( :has( > .wp-block-activ-problem-panel-left ) ) > .wp-block-paragraph:not( .activ-problem-panel__lede ) {
	padding-top: var(--wp--preset--spacing--6);
}

.activ-problem-panel__left,
.wp-block-activ-problem-panel-left {
	display: flex;
	flex: 1 1 44.44%;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	min-width: 0;
	padding: var(--activ-problem-panel-section-spacing) 0 var(--wp--preset--spacing--10);
}

.activ-problem-panel__header {
	align-items: start;
	display: grid;
	gap: var(--activ-problem-panel-title-gap);
	grid-template-columns: auto minmax(0, 1fr);
	margin: 0;
}

.activ-problem-panel__header::before {
	color: var(--wp--preset--color--neutral-700);
	content: counter(problem-panel, decimal-leading-zero);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 900;
	grid-column: 1;
	letter-spacing: -0.5px;
	line-height: 1.4;
	white-space: nowrap;
}

.activ-problem-panel__title,
.activ-problem-panel__header .wp-block-heading {
	grid-column: 2;
	letter-spacing: -1px;
	line-height: 1;
	margin: 0 !important;
}

.activ-problem-panel__media {
	border-radius: 10px;
	height: var(--activ-problem-panel-media-height);
	margin: 0;
	max-width: var(--activ-problem-panel-media-width);
	overflow: hidden;
	width: var(--activ-problem-panel-media-width);
}

.activ-problem-panel__media img,
.activ-problem-panel__media-img {
	border-radius: 10px;
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.activ-problem-panel__content,
.wp-block-activ-problem-panel-content {
	border-left: 1px solid #e3e3e3;
	display: flex;
	flex: 0 0 55.56%;
	flex-direction: column;
	gap: var(--wp--preset--spacing--6);
	margin: 0;
	min-width: 0;
	padding: var(--activ-problem-panel-section-spacing) 0 var(--wp--preset--spacing--10) var(--wp--preset--spacing--10);
}

.activ-problem-panel__content > .wp-block-heading,
.activ-problem-panel__headline {
	letter-spacing: -1px;
	line-height: 1;
	margin: 0 !important;
}

@media (min-width: 1024px) {
	.activ-problem-panel__content > .activ-problem-panel__lede + .wp-block-heading,
	.activ-problem-panel__content > .activ-problem-panel__lede + .activ-problem-panel__headline,
	.wp-block-activ-problem-panel-content > .activ-problem-panel__lede + .wp-block-heading,
	.wp-block-activ-problem-panel-content > .wp-block-paragraph.activ-problem-panel__lede + .wp-block-heading {
		margin-top: calc(
			var(--activ-problem-panel-section-spacing) - var(--wp--preset--spacing--6)
		) !important;
	}
}

.activ-problem-panel__lede {
	color: var(--wp--preset--color--neutral-700);
	margin: 0 !important;
}

/* Content column only — gap handles spacing; block margins must not stack */
.activ-problem-panel__content :where(
	.wp-block-paragraph,
	.wp-block-heading,
	.wp-block-buttons,
	.wp-block-list,
	.wp-block-quote,
	.wp-block-separator
),
.wp-block-activ-problem-panel-content :where(
	.wp-block-paragraph,
	.wp-block-heading,
	.wp-block-buttons,
	.wp-block-list,
	.wp-block-quote,
	.wp-block-separator
) {
	margin-block: 0 !important;
}

.activ-problem-panel__content .is-layout-flow > :where( * ),
.wp-block-activ-problem-panel-content .is-layout-flow > :where( * ) {
	margin-block: 0 !important;
}

@media (max-width: 1280px) {
	:root {
		--activ-problem-panel-title-gap: var(--wp--preset--spacing--10);
	}
}

@media (max-width: 1023px) {
	:root {
		--activ-problem-panel-section-spacing: var(--wp--preset--spacing--10);
	}

	.activ-problem-panel__layout {
		display: flex;
		flex-direction: column;
		gap: 0;
		padding-bottom: var(--wp--preset--spacing--10);
		padding-top: var(--activ-problem-panel-section-spacing);
	}

	/* Flatten columns so intro can sit between title and image */
	.activ-problem-panel__left,
	.activ-problem-panel__content,
	.wp-block-activ-problem-panel-left,
	.wp-block-activ-problem-panel-content {
		display: contents;
	}

	.activ-problem-panel__header,
	.wp-block-group.activ-problem-panel__header {
		margin-bottom: var(--wp--preset--spacing--6);
		order: 1;
		width: 100%;
	}

	.activ-problem-panel__lede,
	.wp-block-paragraph.activ-problem-panel__lede {
		margin-bottom: 0;
		order: 2;
		width: 100%;
	}

	.activ-problem-panel__media,
	.wp-block-image.activ-problem-panel__media {
		margin-bottom: var(--wp--preset--spacing--20);
		margin-top: var(--wp--preset--spacing--20);
		order: 3;
		width: 100%;
	}

	.activ-problem-panel__headline,
	.activ-problem-panel__content > .wp-block-heading,
	.wp-block-activ-problem-panel-content > .wp-block-heading {
		border-top: 0;
		margin-top: 0 !important;
		order: 4;
		padding-top: 0;
		width: 100%;
	}

	.activ-problem-panel__content > .activ-problem-panel__headline ~ :not( .activ-problem-panel__lede ),
	.activ-problem-panel__content > .wp-block-heading ~ :not( .activ-problem-panel__lede ),
	.wp-block-activ-problem-panel-content > .wp-block-heading ~ :not( .activ-problem-panel__lede ) {
		margin-top: var(--wp--preset--spacing--6) !important;
		order: 5;
		width: 100%;
	}

	.activ-problem-panel__layout:not( :has( > .wp-block-activ-problem-panel-left ) ) {
		display: flex;
		flex-direction: column;
	}

	.activ-problem-panel__layout:not( :has( > .wp-block-activ-problem-panel-left ) ) > :not( .activ-problem-panel__header ):not( .activ-problem-panel__media ):not( .wp-block-group.activ-problem-panel__header ):not( .wp-block-image.activ-problem-panel__media ) {
		border-left: 0;
		border-top: 0;
		padding-inline: 0;
		padding-left: 0;
	}

	.activ-problem-panel__layout:not( :has( > .wp-block-activ-problem-panel-left ) ) > .wp-block-paragraph:not( .activ-problem-panel__lede ) {
		margin-top: var(--wp--preset--spacing--6);
		padding-top: 0;
	}
}

@media (max-width: 767px) {
	:root {
		--activ-problem-panel-media-width: min(100%, 19.6875rem);
	}
}