/**
 * FAQ Section — Preset Variant Styles
 *
 * LOCKED SECTIONS (PRESET-DRIVEN). Styles both 'accordion' and 'grid'
 * variants. The <details>/<summary> rules only apply when the
 * accordion variant's markup is present; they have no effect on the
 * grid variant's markup and vice versa, so switching the preset
 * value swaps the visual result without any CSS conflict.
 *
 * ISOLATION RULE: scoped under [data-atb-section="faq"].
 * TOKEN-ONLY: every value reads from var(--atb-*, fallback).
 */

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

/* 'accordion' variant */

[data-atb-section="faq"] .atb-faq--accordion {
	display: flex;
	flex-direction: column;
	gap: var(--atb-space-2, 0.5rem);
}

[data-atb-section="faq"] .atb-faq__item {
	border: 1px solid var(--atb-color-border, #e5e5e5);
	border-radius: var(--atb-radius-md, 0.5rem);
	padding: var(--atb-space-4, 1rem);
}

[data-atb-section="faq"] .atb-faq__question {
	font-family: var(--atb-font-family-heading, sans-serif);
	font-weight: var(--atb-font-weight-semibold, 600);
	font-size: var(--atb-font-size-base, 1rem);
	cursor: pointer;
}

[data-atb-section="faq"] .atb-faq__answer {
	margin-top: var(--atb-space-3, 0.75rem);
}

/* 'grid' variant */

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