/**
 * Services Section — Preset Variant Styles
 *
 * LOCKED SECTIONS (PRESET-DRIVEN).
 *
 * Styles BOTH supported variants ('cards' and 'grid'). Switching the
 * preset's variant value swaps which of these two rule-sets actually
 * applies — .atb-services--cards vs .atb-services--grid — but never
 * requires touching markup structure or another section's CSS.
 *
 * ISOLATION RULE: every selector is scoped under
 * [data-atb-section="services"]. TOKEN-ONLY: every value reads from
 * var(--atb-*, fallback).
 */

[data-atb-section="services"] {
	display: block;
}

[data-atb-section="services"] .atb-services {
	display: flex;
	gap: var(--atb-space-6, 1.5rem);
}

/* 'cards' variant: single-column stack, each item boxed */

[data-atb-section="services"] .atb-services--cards {
	flex-direction: column;
}

[data-atb-section="services"] .atb-services--cards .atb-services__card {
	padding: var(--atb-space-6, 1.5rem);
	border: 1px solid var(--atb-color-border, #e5e5e5);
	border-radius: var(--atb-radius-md, 0.5rem);
	box-shadow: var(--atb-shadow-sm, 0 1px 2px rgb(0 0 0 / 0.05));
}

[data-atb-section="services"] .atb-services--cards .atb-services__card .atb-heading {
	margin-bottom: var(--atb-space-2, 0.5rem);
}

/* 'grid' variant: multi-column grid, no per-item box */

[data-atb-section="services"] .atb-services--grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--atb-space-8, 2rem);
}

[data-atb-section="services"] .atb-services--grid .atb-services__grid-item .atb-heading {
	margin-bottom: var(--atb-space-2, 0.5rem);
}