/* =========================================================================
   LAYOUT
   Header, footer, main, grid system. No component-level styles here.
   ========================================================================= */

/* -------- Site wrapper -------- */
.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-main {
	flex: 1 0 auto;
}

/* -------- Header (placeholder — your custom design overrides this) -------- */
.site-header {
	position: relative;
	background-color: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}

/* -------- Footer (placeholder — your custom design overrides this) -------- */
.site-footer {
	background-color: var(--color-bg-dark);
	color: var(--color-text-inverse);
}

/* -------- Grid utilities -------- */
.grid {
	display: grid;
	gap: var(--space-5);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
	.grid-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
	.grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
	.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* -------- Stack (vertical spacing helper) -------- */
.stack > * + * {
	margin-top: var(--space-4);
}

.stack-lg > * + * {
	margin-top: var(--space-6);
}

/* -------- PAGE -------- */

.entry-header,
.page .entry-content {margin: 30px 0}