/*
 * Design System - AELITA
 * layout.css - structural layout layer (container, section, grid, stack).
 *
 * Source of truth: docs/aelita-design/DESIGN.md
 * Consumes CSS variables from tokens.css only; contains no raw colors.
 * CSS Grid is the primary tool; flex is used for one-dimensional flow only.
 * Mobile-first: single column by default, enhanced upward.
 * Media queries hard-code the breakpoint values, since CSS custom properties
 * cannot be used inside @media (see --bp-* in tokens.css).
 *
 * Status: NOT enqueued yet (functions.php untouched) - no effect on the
 *         current theme until it is intentionally integrated.
 * All classes are namespaced with the `a-` prefix so they never collide with
 * Bootstrap 3 (e.g. Bootstrap's `.container`).
 */

/* -------------------------------------------------------------------- */
/* Layout tokens (derived from tokens.css)                              */
/* -------------------------------------------------------------------- */
:root {
	--container-pad: var(--space-5);
	--section-space: clamp(var(--space-7), 6vw, var(--space-9));
	--grid-gap: var(--space-5);
	--grid-min: 260px;
	--stack-gap: var(--space-5);
	--cluster-gap: var(--space-3);
}

/* Homepage sections share one vertical rhythm. Scoped to the homepage only. */
body.home {
	--home-section-space: 40px;
}

/* -------------------------------------------------------------------- */
/* Container                                                            */
/* -------------------------------------------------------------------- */
.a-container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

/* -------------------------------------------------------------------- */
/* Section                                                              */
/* -------------------------------------------------------------------- */
.a-section {
	padding-block: var(--section-space);
}

.a-section__header {
	display: grid;
	gap: var(--space-3);
	max-width: var(--measure);
	margin-bottom: var(--space-6);
}

/* -------------------------------------------------------------------- */
/* Grid - primary layout tool                                           */
/* -------------------------------------------------------------------- */
.a-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--grid-gap);
}

@media (min-width: 768px) {
	.a-grid {
		grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min), 100%), 1fr));
	}
}

/* -------------------------------------------------------------------- */
/* Stack - one-dimensional vertical flow                                */
/* -------------------------------------------------------------------- */
.a-stack {
	display: flex;
	flex-direction: column;
	gap: var(--stack-gap);
}

/* -------------------------------------------------------------------- */
/* Cluster - one-dimensional horizontal flow with wrapping              */
/* -------------------------------------------------------------------- */
.a-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cluster-gap);
}