/* Shared section primitives. Loaded only on pages that contain at least one SPM section. Uses theme.json tokens only. */

.spm-section {
	--spm-bg: var(--wp--preset--color--base);
	--spm-fg: var(--wp--preset--color--contrast);
	--spm-muted-fg: color-mix(in srgb, var(--spm-fg) 72%, transparent);
	--spm-surface: var(--wp--preset--color--base);
	--spm-line: var(--wp--preset--color--border);
	background: var(--spm-bg);
	color: var(--spm-fg);
	padding-block: var(--wp--preset--spacing--60);
	padding-inline: var(--wp--preset--spacing--30);
	margin: 0;
	position: relative;
}
.spm-tone-muted { --spm-bg: var(--wp--preset--color--muted); }
.spm-tone-primary {
	--spm-bg: var(--wp--preset--color--primary);
	--spm-fg: var(--wp--preset--color--on-primary);
	--spm-surface: color-mix(in srgb, var(--wp--preset--color--on-primary) 8%, transparent);
	--spm-line: color-mix(in srgb, var(--wp--preset--color--on-primary) 25%, transparent);
}
.spm-tone-contrast {
	--spm-bg: var(--wp--preset--color--contrast);
	--spm-fg: var(--wp--preset--color--base);
	--spm-surface: color-mix(in srgb, var(--wp--preset--color--base) 6%, transparent);
	--spm-line: color-mix(in srgb, var(--wp--preset--color--base) 20%, transparent);
}
.spm-section a:not(.spm-btn) { color: inherit; }

.spm-container { max-width: var(--wp--style--global--wide-size, 1200px); margin-inline: auto; }

.spm-section-header { max-width: 46rem; margin-bottom: var(--wp--preset--spacing--40); }
.spm-eyebrow {
	margin: 0 0 var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}
.spm-tone-primary .spm-eyebrow { color: inherit; opacity: 0.85; }
.spm-heading { margin: 0 0 var(--wp--preset--spacing--20); color: inherit; }
.spm-intro { margin: 0; font-size: var(--wp--preset--font-size--md); color: var(--spm-muted-fg); }
.spm-prose > p { margin: 0 0 1em; }
.spm-prose > p:last-child { margin-bottom: 0; }

/* Buttons */
.spm-actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); margin-top: var(--wp--preset--spacing--30); }
.spm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.8em 1.4em;
	border-radius: var(--wp--custom--radius-sm, 6px);
	border: 2px solid transparent;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.spm-btn--primary { background: var(--wp--preset--color--primary); color: var(--wp--preset--color--on-primary); }
.spm-btn--primary:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
.spm-btn--secondary { border-color: currentColor; color: var(--spm-fg); background: transparent; }
.spm-btn--secondary:hover { background: var(--spm-fg); color: var(--spm-bg); border-color: var(--spm-fg); }
.spm-tone-primary .spm-btn--primary { background: var(--wp--preset--color--on-primary); color: var(--wp--preset--color--primary); }
.spm-tone-primary .spm-btn--primary:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
.spm-tone-contrast .spm-btn--primary:hover { background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); }

/* Grid */
.spm-grid { display: grid; gap: var(--wp--preset--spacing--30); grid-template-columns: 1fr; }
@media (min-width: 700px) {
	.spm-grid--2, .spm-grid--3, .spm-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
	.spm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.spm-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Checklist */
.spm-checklist { list-style: none; padding: 0; margin: var(--wp--preset--spacing--20) 0 0; display: grid; gap: 0.5em; }
.spm-checklist li { position: relative; padding-left: 1.75em; }
.spm-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 1.05em;
	height: 1.05em;
	border-radius: 50%;
	background: var(--wp--preset--color--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.4' d='M4 8.5l2.6 2.6L12 5.6'/%3E%3C/svg%3E") center / 75% no-repeat;
}

.spm-img { display: block; width: 100%; height: auto; border-radius: var(--wp--custom--radius, 10px); }