/**
 * Felix Theme — Layout.
 *
 * Container, grid, and section spacing utilities built from the
 * design tokens (see DESIGN_SYSTEM.md "Layout System").
 *
 * @package Felix_Theme
 */

/* -------------------------------------------------------------------------
   Containers
   ------------------------------------------------------------------------- */

.felix-container {
	width: 100%;
	max-width: var(--felix-content-width);
	margin-inline: auto;
	padding-inline: var(--felix-sp-xs);
}

.felix-container--wide {
	max-width: var(--felix-wide-width);
}

.felix-container--reading {
	max-width: var(--felix-reading-width);
}

/* -------------------------------------------------------------------------
   Sections
   ------------------------------------------------------------------------- */

.felix-section {
	padding-block: var(--felix-sp-l);
}

.felix-section--sm {
	padding-block: var(--felix-sp-m);
}

.felix-section--xl {
	padding-block: var(--felix-sp-xl);
}

/* -------------------------------------------------------------------------
   Editorial grid
   ------------------------------------------------------------------------- */

.felix-grid {
	display: grid;
	gap: var(--felix-sp-m);
	grid-template-columns: 1fr;
}

.felix-grid--2,
.felix-grid--3 {
	gap: var(--felix-sp-s);
}

@media (min-width: 768px) {
	.felix-grid--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.felix-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
   Two-column editorial split
   ------------------------------------------------------------------------- */

.felix-split {
	display: grid;
	gap: var(--felix-sp-m);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 1024px) {
	.felix-split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.felix-split--aside {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}
}