.mb-value-panels {
	display: flex;
	width: 100%;
}

.mb-value-panels__panel {
	position: relative;
	flex: 1 1 0;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	/* Square by default -- only the strip's outer edges are rounded below,
	   so the whole row reads as one long pill shape, not three
	   individually-rounded cards. Set explicitly (not just relying on the
	   parent's overflow: hidden to clip a shared radius) so every middle
	   panel is unambiguously square on all four corners. */
	border-radius: 0;
}

.mb-value-panels__panel:first-child {
	border-top-left-radius: var(--mb-radius, 28px);
	border-bottom-left-radius: var(--mb-radius, 28px);
}

.mb-value-panels__panel:last-child {
	border-top-right-radius: var(--mb-radius, 28px);
	border-bottom-right-radius: var(--mb-radius, 28px);
}

/* Specificity note: the shared stylesheet's `.mb-section img` selector
   (element + class = 0,1,1) outranks a bare `.mb-value-panels__image`
   class selector (0,1,0), so it was winning and applying --mb-radius to
   every image's all four corners regardless of this rule. Matching that
   shape here (class + element) restores the intended per-panel radius. */
.mb-value-panels__panel img.mb-value-panels__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transform: scale(1);
	transition: transform 500ms ease;
}

.mb-value-panels__panel:hover .mb-value-panels__image,
.mb-value-panels__panel.mb-is-open .mb-value-panels__image {
	transform: scale(1.05);
}

.mb-value-panels__scrim {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	height: 45%;
	background: linear-gradient(to top, rgba(22, 35, 63, 0.55) 0%, transparent 100%);
	opacity: 1;
	transition: opacity 350ms ease;
	pointer-events: none;
}

/* On hover the text rises to vertical center, so the resting bottom-only
   scrim no longer sits behind it -- swap to a fuller, still-feint tint
   across the whole frame so the risen heading/description stay legible
   over any part of the image. */
.mb-value-panels__panel:hover .mb-value-panels__scrim,
.mb-value-panels__panel.mb-is-open .mb-value-panels__scrim {
	opacity: 0;
}

.mb-value-panels__panel::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(22, 35, 63, 0.4);
	opacity: 0;
	transition: opacity 350ms ease;
	pointer-events: none;
}

.mb-value-panels__panel:hover::after,
.mb-value-panels__panel.mb-is-open::after {
	opacity: 1;
}

.mb-value-panels__text {
	/* Sized to fit its real content (heading + description together, in
	   normal flow) -- bottom: 0 pins it to the panel's bottom edge and,
	   since it's bottom-anchored, growing content pushes its TOP edge
	   upward for free as the description opens (no transform needed for
	   that part). JS measures whether that growth would push the top
	   edge past the panel's own top edge, and if so sets
	   --mb-panel-overflow-correction to nudge it back down by exactly
	   that amount -- see value-panels.js. Zero for short descriptions
	   that already fit; only long ones get corrected, capped at "flush
	   with the panel's top edge," never further. */
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1.75rem;
	text-align: center;
	pointer-events: none;
	transform: translateY(0);
	transition: transform 400ms ease;
}

.mb-value-panels__panel:hover .mb-value-panels__text,
.mb-value-panels__panel.mb-is-open .mb-value-panels__text {
	transform: translateY(var(--mb-panel-overflow-correction, 0px));
}

.mb-value-panels__heading {
	flex: 0 0 auto;
	margin: 0;
	font-size: 2.25rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.mb-value-panels__description {
	flex: 0 0 auto;
	margin: 0.75rem 0 0;
	max-width: 320px;
	max-height: 0;
	overflow: hidden;
	font-size: 1.1rem;
	line-height: 1.6;
	opacity: 0;
	transition: max-height 400ms ease, opacity 300ms ease;
}

.mb-value-panels__panel:hover .mb-value-panels__description,
.mb-value-panels__panel.mb-is-open .mb-value-panels__description {
	max-height: 600px;
	opacity: 1;
}

@media (max-width: 900px) {
	.mb-value-panels {
		flex-direction: column;
		gap: 1rem;
	}

	.mb-value-panels__panel {
		/* flex: 1 1 0 (the desktop base rule) tries to distribute HEIGHT
		   among children once the container switches to column direction
		   -- but .mb-value-panels has no defined height of its own to
		   distribute, which collapsed every panel to zero height (the
		   widget silently disappearing in mobile DevTools emulation).
		   flex: 0 0 auto lets aspect-ratio alone govern each panel's
		   size instead, sized by its own width like a normal block. */
		flex: 0 0 auto;
		width: 100%;
		aspect-ratio: 2 / 3;
	}

	/* Each panel gets its own full rounding when stacked (not just the
	   first/last panel's outer corners, which only made sense as one
	   continuous horizontal strip on desktop). Matches :first-child/
	   :last-child's specificity (0,2,0) so it wins without !important
	   regardless of source order, since it needs to override both. */
	.mb-value-panels__panel:first-child,
	.mb-value-panels__panel:last-child,
	.mb-value-panels__panel {
		border-top-left-radius: var(--mb-radius, 28px);
		border-top-right-radius: var(--mb-radius, 28px);
		border-bottom-left-radius: var(--mb-radius, 28px);
		border-bottom-right-radius: var(--mb-radius, 28px);
	}

	.mb-value-panels__heading {
		font-size: 1.6rem;
	}
}