/*
 * Layout utilities: container, section spacing, grid, carousel.
 * Generic primitives only — no homepage section markup is styled here.
 * Breakpoints: mobile <600px · tablet 600–959px · desktop >=960px.
 */

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

@media (min-width: 600px) {
	.container {
		padding-inline: var(--space-lg);
	}
}

@media (min-width: 960px) {
	.container {
		padding-inline: var(--space-xl);
	}
}

/* Full-bleed sections (e.g. promo banner, footer) ignore the container. */
.full-bleed {
	width: 100%;
}

/*
 * Every section gets HALF of --space-section as its own top/bottom
 * padding, so two adjacent sections always sum to exactly one
 * --space-section gap between them. The first/last section on a page
 * uses that same half against the header/footer too — a full
 * --space-section there (on top of the header's own height) read as an
 * oversized gap in practice, so the edge no longer gets a boost over the
 * normal inter-section rhythm.
 */
.section {
	padding-block: calc(var(--space-section) / 2);
}

/*
 * Generic page wrapper — used by page.php, single.php, archive.php,
 * search.php, 404.php, index.php (blog posts, Cart/Checkout/My Account
 * and any other plain WP Page, search results, 404). WooCommerce's
 * shop/single-product pages get their .container from the hook-based
 * wrapper in inc/woocommerce-support.php instead, since Cart/Checkout
 * render via shortcode inside a plain Page and never fire those hooks.
 */
.page-content {
	padding-block: var(--space-section);
}

/* Simple responsive grid: pick a column count, it collapses automatically. */
.grid {
	display: grid;
	gap: var(--space-md);
}

.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: 959px) {
	.grid--3,
	.grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

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

/*
 * Horizontal swipeable row (mobile product/category carousels, per
 * PROJECT_PLAN.md Section 1 responsive plan). Pure CSS scroll-snap —
 * works without JS; a JS controller (peek-next-card, dots, etc.) can
 * progressively enhance this in a later phase without changing markup.
 */
.carousel {
	display: flex;
	gap: var(--space-md);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: var(--space-sm);
	scrollbar-width: none;
}

.carousel::-webkit-scrollbar {
	display: none;
}

.carousel__item {
	flex: 0 0 auto;
	scroll-snap-align: start;
}