/**
 * layout.css
 * ---------------------------------------------------------------------------
 * Layout primitives and spacing helpers used across patterns. Grids here are
 * intentionally content-agnostic so patterns can reuse them.
 */

/* Constrain very wide sections without fighting WP alignment */
.bb-container {
	width: 100%;
	max-width: var(--bb-wide);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40);
}
.bb-container--max { max-width: var(--bb-max); }
.bb-container--narrow { max-width: 820px; }

/* Vertical section rhythm */
.bb-section { padding-block: var(--wp--preset--spacing--80); }
.bb-section--tight { padding-block: var(--wp--preset--spacing--70); }
.bb-section--loose { padding-block: var(--wp--preset--spacing--90); }

@media (max-width: 781px) {
	.bb-section { padding-block: var(--wp--preset--spacing--70); }
	.bb-section--loose { padding-block: var(--wp--preset--spacing--80); }
}

/* Auto-fit responsive grids (no separate mobile markup needed) */
.bb-grid { display: grid; gap: var(--wp--preset--spacing--50); }
.bb-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.bb-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.bb-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

/* Two-column split that stacks under 900px */
.bb-split {
	display: grid;
	gap: var(--wp--preset--spacing--70);
	align-items: center;
}
@media (min-width: 900px) {
	.bb-split { grid-template-columns: 1fr 1fr; }
	.bb-split--wide-first { grid-template-columns: 1.2fr 0.8fr; }
	.bb-split--wide-last { grid-template-columns: 0.8fr 1.2fr; }
}

/* Stack utility */
.bb-stack > * + * { margin-top: var(--wp--preset--spacing--40); }
.bb-stack--sm > * + * { margin-top: var(--wp--preset--spacing--20); }
.bb-stack--lg > * + * { margin-top: var(--wp--preset--spacing--60); }

/* Cluster (horizontal wrap) */
.bb-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
}

/* Section header block */
.bb-section-head { max-width: 720px; margin-bottom: var(--wp--preset--spacing--60); }
.bb-section-head--center { margin-inline: auto; text-align: center; }

.bb-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bb-text-muted);
	margin-bottom: var(--wp--preset--spacing--30);
}
.bb-eyebrow::before {
	content: "";
	width: 1.5rem;
	height: 2px;
	background: var(--bb-accent);
	display: inline-block;
}
.bb-section-head--center .bb-eyebrow { justify-content: center; }