/**
 * Section Spacing System
 *
 * VISUAL THEME FRAMEWORK.
 *
 * THIS IS THE MECHANISM THAT MAKES EXISTING SECTIONS INHERIT NEW
 * STYLING WITHOUT REWRITES. Every section ever built by this theme
 * — hero, services, faq, testimonials, pricing, cta, contact,
 * footer — already renders inside the same shared wrapper element,
 * <section class="atb-section" data-atb-section="{id}">, emitted
 * once by template-parts/section-wrapper.php (Structural Framework
 * phase) and never duplicated anywhere else. By styling .atb-section
 * here, every one of those 8 sections picks up consistent vertical
 * spacing automatically, with zero changes to any section's PHP,
 * markup, or per-section CSS file.
 *
 * This does NOT touch any [data-atb-section="..."] selector — doing
 * so would mean editing 8 individual section CSS files, which is
 * exactly the rewrite this system avoids. Per-section CSS files
 * remain free to add their OWN background/border treatment on top
 * of this shared spacing layer; they are not in conflict, since this
 * file only ever sets padding-top/padding-bottom on the shared
 * wrapper class, nothing else.
 *
 * TOKEN-ONLY: every spacing value reads from var(--atb-space-*).
 */

.atb-section {
	padding-top: var(--atb-space-16, 4rem);
	padding-bottom: var(--atb-space-16, 4rem);
}

/* Tighter rhythm on smaller screens — see Responsive Breakpoints.
   KNOWN CSS LIMITATION: hardcoded to match --atb-breakpoint-md, see
   container.css for the full explanation. */
@media (max-width: 768px) {
	.atb-section {
		padding-top: var(--atb-space-10, 2.5rem);
		padding-bottom: var(--atb-space-10, 2.5rem);
	}
}