/* ==========================================================================
   Layout — containers, grid, utility subset
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.container-narrow {
	width: 100%;
	max-width: var(--container-narrow);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.wrap { flex-wrap: wrap; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2.5rem; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.items-center { align-items: center; }

.grid { display: grid; gap: 1.5rem; }
.grid-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.75rem;
}

.section { padding-block: 4rem; }
.section-sm { padding-block: 2.5rem; }
.section-surface { background: var(--color-surface); }

@media (max-width: 1024px) {
	.section { padding-block: 3rem; }
}

@media (max-width: 768px) {
	.grid-cards { grid-template-columns: 1fr; }
	.section { padding-block: 2.25rem; }
}

/* Two-column post layout: content + sticky TOC rail (desktop only) */
.post-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: 3rem;
	align-items: start;
}

@media (max-width: 960px) {
	.post-layout { grid-template-columns: 1fr; }
	.post-layout .toc-rail { display: none; }
}

.hidden { display: none !important; }

@media (min-width: 769px) {
	.hide-desktop { display: none !important; }
}
@media (max-width: 768px) {
	.hide-mobile { display: none !important; }
}