// =============================================================================
// layout/_grid.scss
// Site-wide layout helpers.
// =============================================================================

.site-content {
	padding-top: var(--space-4);
	padding-bottom: var(--space-6);
}

// Primary content area + sidebar layout.
.content-area {
	@include desktop {
		display: flex;
		gap: var(--space-5);

		#main {
			flex: 1;
			min-width: 0; // Prevent flex blowout.
		}
	}
}

// Responsive post grid.
.posts-grid {
	margin-bottom: var(--space-4);
}

// Pagination.
.posts-pagination {
	margin-top: var(--space-4);
	display: flex;
	justify-content: center;

	.nav-links {
		display: flex;
		gap: var(--space-2);
		flex-wrap: wrap;
		justify-content: center;
	}

	a,
	span {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 2.25rem;
		height: 2.25rem;
		padding: 0 var(--space-2);
		border: 1px solid var(--color-border);
		border-radius: 6px;
		color: var(--color-text);
		text-decoration: none;
		transition:
			background-color var(--transition-base),
			color var(--transition-base),
			border-color var(--transition-base);

		&:hover,
		&.current {
			background-color: var(--color-primary);
			color: #fff;
			border-color: var(--color-primary);
		}
	}
}