/* =========================================================================
   WEFOM — utilities.css
   Small, intentional helpers. Not a generated utility-class system.
   ========================================================================= */

.wefom-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.wefom-grid-12 {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--wp--preset--spacing--lg);
}

.wefom-grid-6 {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--wp--preset--spacing--lg);
}

@media (max-width: 1024px) {
	.wefom-grid-12,
	.wefom-grid-6 {
		grid-template-columns: repeat(8, 1fr);
	}
}

@media (max-width: 640px) {
	.wefom-grid-12,
	.wefom-grid-6 {
		grid-template-columns: repeat(4, 1fr);
	}
}

.wefom-span-7 { grid-column: span 7; }
.wefom-span-5 { grid-column: span 5; }
.wefom-span-8 { grid-column: span 8; }
.wefom-span-4 { grid-column: span 4; }
.wefom-span-6 { grid-column: span 6; }
.wefom-span-3 { grid-column: span 3; }
.wefom-span-12 { grid-column: 1 / -1; }

/* Fixed (non-sequential) column alignment: every section header across the
   page uses the same 1–3 / 4–12 split so labels and headings line up. */
.wefom-col-label { grid-column: 1 / 4; }
.wefom-col-content { grid-column: 4 / 13; }

/* Hero-specific split per design review: text 62%, diagram 38%. */
.wefom-col-hero-text { grid-column: 1 / 8; }
.wefom-col-hero-visual { grid-column: 8 / 13; }

@media (max-width: 1024px) {
	.wefom-span-7,
	.wefom-span-5,
	.wefom-span-8,
	.wefom-span-4,
	.wefom-span-6,
	.wefom-span-3,
	.wefom-col-label,
	.wefom-col-content,
	.wefom-col-hero-text,
	.wefom-col-hero-visual {
		grid-column: 1 / -1;
	}
}

.wefom-section {
	padding-top: var(--wefom-section-space);
	padding-bottom: var(--wefom-section-space);
}

.wefom-section-tight {
	padding-top: var(--wefom-section-space-sm);
	padding-bottom: var(--wefom-section-space-sm);
}

/* Standard section rhythm used by most content sections (~120–140px). */
.wefom-section-snug {
	padding-top: clamp(4.5rem, 6vw, 8.75rem);
	padding-bottom: clamp(4.5rem, 6vw, 8.75rem);
}

/* Hero gets its own, shallower rhythm so the fold isn't dominated by
   empty space above/below the message. */
.wefom-hero {
	padding-top: clamp(1.5rem, 4vw, 2.5rem);
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.wefom-dark-section {
	background: var(--wp--preset--color--near-black);
	color: var(--wp--preset--color--dark-muted-text);
}

.wefom-dark-section h1,
.wefom-dark-section h2,
.wefom-dark-section h3,
.wefom-dark-section h4 {
	color: var(--wp--preset--color--pure-white);
}

.wefom-surface-section {
	background: var(--wp--preset--color--soft-surface);
}

.wefom-no-overflow {
	overflow-x: hidden;
}

.wefom-border-top {
	border-top: 1px solid var(--wp--preset--color--border-light);
}

.wefom-border-bottom {
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}