/* ==========================================================================
   Million Dots — Services
   Sticky intro column beside a grid of cards. Each card grows an accent lane
   along its top edge on hover.
   ========================================================================== */

.mdc-services {
	border-top: 1px solid var(--wp--preset--color--border);
}

.mdc-services__grid {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4rem);
}

.mdc-services__intro p {
	margin-top: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--large);
}

.mdc-services__note {
	margin-top: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--surface-alt);
	border-left: var(--wp--custom--lane--thickness) solid var(--wp--preset--color--accent);
	border-radius: 0 var(--wp--custom--radius--sm) var(--wp--custom--radius--sm) 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-muted);
}

.mdc-services__note strong {
	display: block;
	margin-bottom: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--contrast);
}

.mdc-services__cards {
	display: grid;
	gap: var(--wp--custom--layout--grid-gap);
}

/* --- Card ----------------------------------------------------------------- */
.mdc-service-card {
	position: relative;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60) var(--wp--preset--spacing--60);
	overflow: hidden;
}

.mdc-service-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: var(--wp--custom--lane--thickness);
	background-color: var(--wp--preset--color--accent);
	transform: scaleX(0.14);
	transform-origin: left;
	transition: transform var(--wp--custom--duration--slow) var(--wp--custom--ease--out);
}

.mdc-service-card:hover::before,
.mdc-service-card:focus-within::before {
	transform: scaleX(1);
}

.mdc-service-card__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-bottom: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--accent);
}

.mdc-service-card__icon .mdc-icon {
	width: 24px;
	height: 24px;
}

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

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

.mdc-service-card__meta {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: var(--wp--custom--weight--medium);
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--custom--color--ink-subtle);
}

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

@media (min-width: 960px) {
	.mdc-services__grid {
		grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr);
	}

	.mdc-services__intro {
		position: sticky;
		top: calc(var(--wp--custom--layout--header-height) + var(--wp--preset--spacing--70));
	}
}

/* The editor canvas has no sticky header to clear. */
.editor-styles-wrapper .mdc-services__intro {
	position: static;
}