/**
 * Section — shared base
 *
 * Common structural rules every page section uses: consistent spacing
 * rhythm and a standard header. Section-specific layout (grids, hero
 * treatment, etc.) lives in each section's own file.
 */

.ec-section {
	padding: var(--ec-space-8) var(--ec-space-5);
	max-width: 1440px;
	margin: 0 auto;
}

/* Eighth pass: --ec-space-8 (64px) top/bottom was the same at every
   breakpoint — on a narrow mobile column that reads as unconsidered
   dead air rather than intentional spaciousness, since the same
   absolute gap that feels generous alongside a wide desktop layout
   just feels empty stacked between much narrower content. */
@media (max-width: 639px) {
	.ec-section {
		padding: var(--ec-space-6) var(--ec-space-4);
	}
}

.ec-section__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ec-space-4);
	margin-bottom: var(--ec-space-6);
}

.ec-section__title {
	font-family: var(--ec-font-family-base);
	font-weight: var(--ec-font-weight-bold);
	font-size: var(--ec-font-size-h2);
	color: var(--ec-color-text-primary);
	margin: 0;
}

/* Subordinate section heading — for a page that already has its own
   H1 .ec-section__title (e.g. Draw Centre), so per-section headings
   beneath it read as sections of that page rather than competing pages
   in their own right. Reuses --ec-font-size-h4, the next token down
   from this component's own h2 default. */
.ec-section__title--sub {
	font-size: var(--ec-font-size-h4);
	font-weight: var(--ec-font-weight-semibold);
}

/* Standard visually-hidden utility — no equivalent existed anywhere in
   this codebase before (every other HQ form shows its <label> text
   directly). Needed for a compact toolbar (Draw Library Refinement
   pass, 2026-09-03) whose visual labels are condensed to placeholder
   text/icons alone — the field must still have a real, associated,
   accessible label, just not a visible one. */
.ec-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}