/**
 * Grid system — Phase 2A §2 / 2A.5 §2. A 12-column base grid used
 * asymmetrically (uneven spans, not uniform 6/6 or 4/4/4 splits) by the
 * templates that consume it in Phase 2C. This file defines the mechanism
 * only — actual section compositions are a Phase 2C/2D concern.
 */

.lbm-container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--space-5);
}

@media (min-width: 768px) {
	.lbm-container {
		padding-inline: var(--space-7);
	}
}

/* Narrower grid width for homepage/archive card grids (2A §2). */
.lbm-grid-container {
	width: 100%;
	max-width: var(--grid-max);
	margin-inline: auto;
	padding-inline: var(--space-5);
}

@media (min-width: 768px) {
	.lbm-grid-container {
		padding-inline: var(--space-7);
	}
}

/* Reading column — article body width (2A.5 §15). */
.lbm-content-column {
	max-width: var(--content-max);
	margin-inline: auto;
}

/* 12-column grid primitive. */
.lbm-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--space-6);
}

@media (max-width: 767px) {
	.lbm-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-4);
	}
}

/* Column span utilities — used to compose asymmetric layouts (e.g. 7/5,
   8/4) rather than defaulting to even splits. */
.lbm-col-4  { grid-column: span 4; }
.lbm-col-5  { grid-column: span 5; }
.lbm-col-6  { grid-column: span 6; }
.lbm-col-7  { grid-column: span 7; }
.lbm-col-8  { grid-column: span 8; }
.lbm-col-12 { grid-column: span 12; }

@media (max-width: 767px) {
	.lbm-col-4,
	.lbm-col-5,
	.lbm-col-6,
	.lbm-col-7,
	.lbm-col-8,
	.lbm-col-12 {
		grid-column: span 4;
	}
}

/* Simple auto-fit card grids (category archives, standard rows). */
.lbm-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--space-6);
}

.lbm-card-grid--compact {
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--space-4);
}

/* Thin-category grid (P1 depth-aware layout, category.php). CSS Grid's
   auto-fill still lays out the full set of tracks a wide container can
   fit regardless of how many cards actually exist — a 1-2 post category
   in .lbm-card-grid ends up with one narrow card stranded on the left
   and the rest of the row sitting empty, reading as broken rather than
   intentional. Flexbox with a capped basis avoids that: only as many
   tracks as there are cards are ever created, so a short category reads
   as a deliberately compact row instead of an under-filled grid. */
.lbm-card-grid--thin {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6);
}

.lbm-card-grid--thin > .lbm-card--standard {
	flex: 0 1 320px;
}

/* Section rhythm — the vertical spacing between major page sections
   (2A §2 / 2A.5 §2, deliberately generous). */
.lbm-section {
	margin-block: var(--space-9);
}

.lbm-section--large {
	margin-block: var(--space-10);
}

@media (max-width: 767px) {
	.lbm-section {
		margin-block: var(--space-7);
	}

	.lbm-section--large {
		margin-block: var(--space-8);
	}
}

/* Sidebar layout — narrow rail, desktop only (2A §2). */
.lbm-layout-with-sidebar {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

@media (min-width: 1280px) {
	.lbm-layout-with-sidebar {
		grid-template-columns: 1fr var(--sidebar-width);
	}
}