/* ==========================================================================
   Layout — 1240px container, 12-column grid, breakpoints 480 / 768 / 1024 / 1280
   ========================================================================== */

.l-container {
	width: min(100% - 2 * var(--page-gutter), var(--container));
	margin-inline: auto;
}

.l-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--gutter);
}

.l-grid > * {
	grid-column: 1 / -1;
	min-width: 0;
}

@media (min-width: 1024px) {
	.l-grid > .span-4 { grid-column: span 4; }
	.l-grid > .span-8 { grid-column: span 8; }
}

.l-section {
	margin-block: var(--s-7);
}

.l-stack > * + * {
	margin-top: var(--stack, var(--s-4));
}

.site-main {
	padding-block: var(--s-5) var(--s-7);
}

/* Rows of equal cards: 1 → 2 → 3/4 columns. */
.l-cards {
	display: grid;
	gap: var(--gutter);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

/* Fixed-count rows: exactly 2, 3 or 4 across on desktop, 2 on tablets, 1 on phones. */
@media (min-width: 600px) {
	.l-cards--2,
	.l-cards--3,
	.l-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.l-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.l-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Phones: drop sections/items marked by the homepage count config (D-34). */
@media (max-width: 767px) {
	.hide-mobile { display: none !important; }
}

/* Vertical list with hairline dividers. */
.l-divided > * + * {
	border-top: 1px solid var(--line);
	padding-top: var(--s-3);
	margin-top: var(--s-3);
}