/*
 * Case Studies widget: a results grid. Loads on top of shell.css, which owns
 * the section panel, the header and the header button.
 *
 * Each card is two columns — the story on the left, the proof on the right —
 * but only while the card is wide enough to carry two columns. The card is a
 * container, so it stacks on its own measured width rather than on the
 * viewport's: three across on a 1200px page stacks, two across does not, and
 * neither needs a breakpoint guessed in advance. That is what keeps three-up
 * from turning into the cramped version of this layout.
 */

.mcw {
	--mcw-col-gap: 26px;
	--mcw-row-gap: 26px;

	--mcw-card-pt: 26px;
	--mcw-card-pr: 26px;
	--mcw-card-pb: 26px;
	--mcw-card-pl: 26px;
	--mcw-card-rtl: 22px;
	--mcw-card-rtr: 22px;
	--mcw-card-rbr: 22px;
	--mcw-card-rbl: 22px;
	--mcw-card-lift: 6px;
	--mcw-card-speed: 0.35s;

	--mcw-split: 46%;
	--mcw-split-gap: 24px;
	--mcw-stack-gap: 22px;

	--mcw-client-space: 10px;
	--mcw-tag-space: 18px;
	--mcw-stat-space: 10px;
	--mcw-service-space: 14px;
	--mcw-text-space: 22px;

	--mcw-photo-h: 190px;
	--mcw-photo-r: 16px;
	--mcw-img-w: 100%;
	--mcw-img-fit: cover;
	--mcw-img-pos: center center;
	--mcw-img-bg: transparent;

	--mcw-metric-overlap: 40px;
	--mcw-metric-shift: 0px;
	--mcw-metric-w: 100%;
	--mcw-metric-r: 16px;
	--mcw-metric-pad: 14px;
	--mcw-metric-gap: 8px;
	--mcw-chart-h: 54px;

	--mcw-accent: #f97316;
	--mcw-cta-icon: 14px;
}

/* -------------------------------------------------------------------- grid */

.mcw__grid {
	--mcw-cols: 3;
	display: grid;
	grid-template-columns: repeat(var(--mcw-cols), minmax(0, 1fr));
	column-gap: var(--mcw-col-gap);
	row-gap: var(--mcw-row-gap);
}

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

.mcw-card {
	container-type: inline-size;
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: var(--mcw-card-pt) var(--mcw-card-pr) var(--mcw-card-pb) var(--mcw-card-pl);
	border: 1px solid #e8ecf4;
	border-radius: var(--mcw-card-rtl) var(--mcw-card-rtr) var(--mcw-card-rbr) var(--mcw-card-rbl);
	background-color: #ffffff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	transition: transform var(--mcw-card-speed) ease, box-shadow var(--mcw-card-speed) ease,
		background-color var(--mcw-card-speed) ease, border-color var(--mcw-card-speed) ease;
}

.mcw-card:hover,
.mcw-card:focus-within {
	transform: translateY(calc(var(--mcw-card-lift) * -1));
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
}

/*
 * The row that flips lives inside the container, because a container query can
 * only style a container's descendants — never the container itself.
 */
.mcw-card__inner {
	display: flex;
	flex: 1 1 auto;
	gap: var(--mcw-split-gap);
	min-width: 0;
}

.mcw-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.mcw-card__media {
	display: flex;
	flex: 0 0 var(--mcw-split);
	flex-direction: column;
	min-width: 0;
}

/* Stack on the card's own width, not the window's. */
@container (max-width: 460px) {
	.mcw:not(.mcw--layout-row) .mcw-card__inner {
		flex-direction: column;
		gap: var(--mcw-stack-gap);
	}

	.mcw:not(.mcw--layout-row) .mcw-card__media {
		flex: 0 0 auto;
		width: 100%;
	}

	.mcw--stack-top:not(.mcw--layout-row) .mcw-card__media {
		order: -1;
	}
}

/* Photo side, while the card is still two columns. */
.mcw--media-left .mcw-card__inner {
	flex-direction: row-reverse;
}

/*
 * The explicit choices. Declared after the side rule so "always stacked" wins
 * over it, and before nothing else needs to know which mode is in play.
 */
.mcw--layout-stack .mcw-card__inner {
	flex-direction: column;
	gap: var(--mcw-stack-gap);
}

.mcw--layout-stack .mcw-card__media {
	flex: 0 0 auto;
	width: 100%;
}

.mcw--layout-stack.mcw--stack-top .mcw-card__media {
	order: -1;
}

/* Browsers without container queries keep the two columns; phones still stack. */
@supports not (container-type: inline-size) {
	@media (max-width: 767px) {
		.mcw:not(.mcw--layout-row) .mcw-card__inner {
			flex-direction: column;
			gap: var(--mcw-stack-gap);
		}

		.mcw:not(.mcw--layout-row) .mcw-card__media {
			flex: 0 0 auto;
			width: 100%;
		}

		.mcw--stack-top:not(.mcw--layout-row) .mcw-card__media {
			order: -1;
		}
	}
}

/* -------------------------------------------------------------------- copy */

.mcw-card__client {
	margin: 0 0 var(--mcw-client-space);
	color: #0d1220;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.mcw-card__tag {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	margin: 0 0 var(--mcw-tag-space);
	padding: 5px 12px;
	border: 1px solid #e2e8f0;
	border-radius: 999px;
	background-color: #f1f5f9;
	color: #475569;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
}

.mcw-card__stat {
	margin: 0 0 var(--mcw-stat-space);
	color: #0d1220;
	font-size: 27px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

/* The number carries the accent; the unit beside it stays in the text colour. */
.mcw-card__stat-value {
	color: var(--mcw-accent);
}

.mcw-card__service {
	margin: 0 0 var(--mcw-service-space);
	color: #334155;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
}

.mcw-card__text {
	margin: 0 0 var(--mcw-text-space);
	color: #5b6474;
	font-size: 14px;
	line-height: 1.6;
}

/*
 * auto pins the button to the bottom of the card, so every card in a row ends
 * on the same line however much copy sits above it.
 */
.mcw-card__cta {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	margin-top: auto;
	padding: 11px 20px;
	border: 1px solid transparent;
	border-radius: 999px;
	background-color: var(--mcw-accent);
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	/*
	 * No nowrap: forced side by side on a phone leaves this column narrower
	 * than the label, and a button that wraps beats a page that scrolls
	 * sideways.
	 */
	max-width: 100%;
	transition: background-color var(--mcw-card-speed) ease, color var(--mcw-card-speed) ease,
		border-color var(--mcw-card-speed) ease, box-shadow var(--mcw-card-speed) ease,
		transform var(--mcw-card-speed) ease;
}

.mcw-card__cta:hover,
.mcw-card__cta:focus-visible {
	transform: translateY(-2px);
}

.mcw-card__cta:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.mcw-card__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.mcw-card__cta-icon svg {
	width: var(--mcw-cta-icon);
	height: var(--mcw-cta-icon);
	fill: currentColor;
}

.mcw-card__cta-icon i {
	font-size: var(--mcw-cta-icon);
	line-height: 1;
}

/* ------------------------------------------------------------------- photo */

.mcw-card__photo {
	display: flex;
	flex: 0 0 auto;
	align-items: stretch;
	justify-content: center;
	height: var(--mcw-photo-h);
	overflow: hidden;
	border-radius: var(--mcw-photo-r);
	background-color: var(--mcw-img-bg);
}

.mcw-card__photo img {
	display: block;
	width: var(--mcw-img-w);
	max-width: 100%;
	height: 100%;
	object-fit: var(--mcw-img-fit);
	object-position: var(--mcw-img-pos);
}

/* ------------------------------------------------------------------ metric */

/*
 * The proof card rides up over the photo on a negative margin rather than
 * absolute positioning, so the column's height still accounts for it and the
 * card grows with its content instead of overlapping whatever is below.
 */
.mcw-card__metric {
	position: relative;
	z-index: 2;
	align-self: flex-start;
	width: var(--mcw-metric-w);
	max-width: 100%;
	margin-top: calc(var(--mcw-metric-overlap) * -1);
	margin-left: calc(var(--mcw-metric-shift) * -1);
	padding: var(--mcw-metric-pad);
	border: 1px solid #eef1f7;
	border-radius: var(--mcw-metric-r);
	background-color: #ffffff;
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.13);
}

.mcw-metric__label {
	margin: 0 0 4px;
	color: #64748b;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.3;
}

.mcw-metric__value {
	margin: 0 0 var(--mcw-metric-gap);
	color: #0d1220;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.15;
}

.mcw-metric__chart {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--mcw-chart-h);
	overflow: hidden;
	border-radius: 10px;
}

.mcw-metric__chart img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
}

/* ------------------------------------------------------------- placeholder */

.mcw-ph {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px;
	color: #93a1ba;
	text-align: center;
	background-image: linear-gradient(
		160deg,
		rgba(249, 115, 22, 0.12) 0%,
		rgba(249, 115, 22, 0.04) 45%,
		rgba(148, 163, 184, 0.14) 100%
	);
}

.mcw-ph__icon {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.mcw-ph__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.3;
}

.mcw-metric__chart .mcw-ph {
	gap: 5px;
	border-radius: 10px;
}

.mcw-metric__chart .mcw-ph__icon {
	width: 18px;
	height: 18px;
}

/* --------------------------------------------------------------- card link */

.mcw-card__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.mcw-card__link:focus-visible {
	outline: 2px solid var(--mcw-accent);
	outline-offset: 3px;
}

/* The real button has to stay clickable through the card-wide overlay. */
.mcw-card--linked .mcw-card__cta {
	position: relative;
	z-index: 2;
}

.mcw-card__link-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 767px) {
	.mcw {
		--mcw-card-pt: 20px;
		--mcw-card-pr: 20px;
		--mcw-card-pb: 20px;
		--mcw-card-pl: 20px;
		--mcw-metric-shift: 0px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mcw-card,
	.mcw-card__cta {
		transition: none;
	}

	.mcw-card:hover,
	.mcw-card:focus-within,
	.mcw-card__cta:hover,
	.mcw-card__cta:focus-visible {
		transform: none;
	}
}