/* =========================================================================
 * layout.css — page scaffolding, container, sections, grids
 * ========================================================================= */

.lb-container {
	width: 100%;
	max-width: var(--lb-container);
	margin: 0 auto;
	padding-inline: var(--lb-s-3);
}

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

.lb-container--narrow {
	max-width: var(--lb-content);
}

main.lb-main {
	display: block;
	min-height: 60vh;
}

.lb-section {
	padding-block: var(--lb-s-6);
}

.lb-section--subtle {
	background: var(--lb-subtle);
}

.lb-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--lb-s-3);
	margin-bottom: var(--lb-s-4);
	flex-wrap: wrap;
}

.lb-section__title {
	margin: 0;
	font-size: 1.75rem;
	font-weight: 700;
}

.lb-section__link {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--lb-primary);
}
.lb-section__link::after {
	content: ' →';
}

/* -------------------- Card grid -------------------- */

.lb-grid {
	display: grid;
	gap: var(--lb-s-3);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 960px) {
	.lb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.lb-grid { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------- Two-column (article + TOC) -------------------- */

.lb-two-col {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: var(--lb-s-5);
	align-items: start;
}

@media (max-width: 1024px) {
	.lb-two-col { grid-template-columns: minmax(0, 1fr); }
}