/* ==========================================================================
   Million Dots — Why us
   The photo breaks out to the left edge on wide screens and carries a
   floating stat badge; the reasons stack beside it.
   ========================================================================== */

.mdc-why {
	overflow: hidden;
}

.mdc-why__grid {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: center;
}

.mdc-why__media {
	position: relative;
}

.mdc-why__media img {
	width: 100%;
	aspect-ratio: 4 / 3.2;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--md);
}

.mdc-why__badge {
	display: none;
	position: absolute;
	right: calc(-1 * var(--wp--preset--spacing--70));
	bottom: calc(-1 * var(--wp--preset--spacing--70));
	width: 208px;
	padding: var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--shadow--lg);
}

.mdc-why__badge .mdc-stat__value {
	font-size: 2.25rem;
}

.mdc-why__badge .mdc-stat__label {
	margin-top: var(--wp--preset--spacing--20);
}

/* --- Reasons -------------------------------------------------------------- */
.mdc-why__reasons {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	margin-top: var(--wp--preset--spacing--70);
}

.mdc-why__reason {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--60);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.mdc-why__reason:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.mdc-why__reason-icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--accent);
	box-shadow: var(--wp--custom--shadow--xs);
}

.mdc-why__reason h3 {
	font-size: var(--wp--preset--font-size--heading-four);
	margin: 0 0 var(--wp--preset--spacing--20);
}

.mdc-why__reason p {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-muted);
}

/* --- Responsive ----------------------------------------------------------- */
@media (min-width: 860px) {
	.mdc-why__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mdc-why__badge {
		display: block;
	}

	/* Measure the breakout against the layout width, not 100vw: 100vw counts
	   the scrollbar, which dragged the photo past the left viewport edge. */
	.mdc-why {
		container-type: inline-size;
	}

	.mdc-why__media {
		--mdc-edge: calc(
			(100cqw - min(100cqw, var(--wp--custom--layout--container-max))) / 2 +
				var(--wp--custom--layout--gutter)
		);
		margin-left: calc(-1 * var(--mdc-edge));
		width: calc(100% + var(--mdc-edge));
	}

	.mdc-why__media img {
		border-radius: 0 var(--wp--custom--radius--md) var(--wp--custom--radius--md) 0;
		aspect-ratio: 4 / 3.4;
	}
}

/* The editor canvas is narrower than the viewport, so the breakout would
   drag the photo off-canvas. */
.editor-styles-wrapper .mdc-why__media {
	margin-left: 0;
	width: 100%;
}

.editor-styles-wrapper .mdc-why__media img {
	border-radius: var(--wp--custom--radius--md);
}