/*
 * Band chrome for the two provider grids injected by inc/service-proof-expansion.php.
 *
 * The cards themselves need no rules here: `sequoia-projects-style-inline-css`
 * ships with the block, is container-query based (`container-type: inline-size`
 * on `.sequoia-provider-projects`) and already styles
 * `.sequoia-provider-projects__grid` and `__card`. Only the surrounding band --
 * width, rhythm, heading, column count -- is missing, because on the flagship
 * that chrome lives in the paver hub's page-scoped inline <style> and never
 * reached the theme.
 *
 * Selectors are prefixed with `:is(.entry-content, .editor-styles-wrapper)`
 * rather than written bare or wrapped in `:where()`. base.css sets the inner
 * width for `.lt-map-inner` and friends inside `:where(...)`, which is
 * zero-specificity and loses to WordPress layout defaults; repeating that
 * mistake here would silently produce full-bleed grids.
 */

:is(.entry-content, .editor-styles-wrapper) .svc-proof-grid {
	padding-block: clamp(2.5rem, 6vw, 4.5rem) 0;
}

:is(.entry-content, .editor-styles-wrapper) .svc-selected-work {
	background: var(--v2-cream, #f6f4ee);
	padding-block: clamp(3.5rem, 8vw, 6rem);
}

:is(.entry-content, .editor-styles-wrapper) .svc-proof-grid-inner,
:is(.entry-content, .editor-styles-wrapper) .svc-selected-work-inner {
	width: min(calc(100% - (2 * var(--v2-gutter, 48px))), var(--v2-wide, 1180px));
	margin-inline: auto;
}

:is(.entry-content, .editor-styles-wrapper) .svc-proof-grid-heading {
	font: 500 12px/1 "IBM Plex Mono", ui-monospace, monospace;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--v2-forest, #3f6d3f);
	margin: 0 0 1.5rem;
}

:is(.entry-content, .editor-styles-wrapper) .svc-selected-work-inner > h2 {
	margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
}

/*
 * Three across at band width; the block's own container query would otherwise
 * settle on one column, because its default `grid-template-columns: 1fr` only
 * widens where a container rule fires.
 */
:is(.entry-content, .editor-styles-wrapper) .svc-proof-grid .sequoia-provider-projects__grid,
:is(.entry-content, .editor-styles-wrapper) .svc-selected-work .sequoia-provider-projects__grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2.5vw, 1.5rem);
}

@media (max-width: 900px) {
	:is(.entry-content, .editor-styles-wrapper) .svc-proof-grid .sequoia-provider-projects__grid,
	:is(.entry-content, .editor-styles-wrapper) .svc-selected-work .sequoia-provider-projects__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	:is(.entry-content, .editor-styles-wrapper) .svc-proof-grid .sequoia-provider-projects__grid,
	:is(.entry-content, .editor-styles-wrapper) .svc-selected-work .sequoia-provider-projects__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}