/**
 * Layout primitives: containers, section rhythm, the product grid at every
 * breakpoint. Mobile-first throughout — base rules target 320px, then each
 * min-width query adds/adjusts upward.
 *
 * Breakpoints: 320, 375, 480, 768, 1024, 1280, 1440, 1920
 */

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

.afripacka-section {
	padding-block: var(--space-8);
}
.afripacka-section--tight {
	padding-block: var(--space-6);
}
.afripacka-section--alt {
	background: var(--color-surface-alt);
}

.afripacka-section__header {
	text-align: center;
	max-width: 640px;
	margin-inline: auto;
	margin-bottom: var(--space-6);
}
.afripacka-section__title {
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	margin-bottom: var(--space-2);
}
.afripacka-section__subtitle {
	color: var(--color-text-muted);
	font-size: var(--text-md);
}

/* ---- Product grid: 2 cols mobile -> 3 tablet -> 4 desktop ---- */
.afripacka-product-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
}

/* ---- Shop layout: filters + grid ---- */
.afripacka-shop-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}
.afripacka-shop-layout__filters {
	display: none; /* mobile: filters live in the slide-in drawer, see shop.css */
}
.afripacka-shop-layout__grid {
	min-width: 0;
}

/* ===== 375px — slightly larger mobile ===== */
@media (min-width: 375px) {
	:root {
		--container-padding: var(--space-4);
	}
}

/* ===== 480px — large mobile ===== */
@media (min-width: 480px) {
	.afripacka-section {
		padding-block: var(--space-9);
	}
}

/* ===== 768px — tablet: 3-column grid, sticky filters may already fit ===== */
@media (min-width: 768px) {
	.afripacka-product-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-4);
	}
	.afripacka-section__title {
		font-size: var(--text-3xl);
	}
}

/* ===== 1024px — desktop: 4-column grid, sticky sidebar filters appear ===== */
@media (min-width: 1024px) {
	.afripacka-product-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-5);
	}
	.afripacka-shop-layout {
		grid-template-columns: 280px 1fr;
		align-items: start;
	}
	.afripacka-shop-layout__filters {
		display: block;
		position: sticky;
		top: calc(var(--header-height) + var(--space-4));
	}
	.afripacka-section {
		padding-block: var(--space-10);
	}
}

/* ===== 1280px ===== */
@media (min-width: 1280px) {
	:root {
		--container-padding: var(--space-5);
	}
}

/* ===== 1440px ===== */
@media (min-width: 1440px) {
	.afripacka-section {
		padding-block: var(--space-11);
	}
}

/* ===== 1920px — cap content width, let breathing room grow instead of grid ===== */
@media (min-width: 1920px) {
	:root {
		--container-max: 1440px;
	}
}

/* ---- Utility layout classes used across templates ---- */
.afripacka-flex {
	display: flex;
}
.afripacka-flex--center {
	align-items: center;
	justify-content: center;
}
.afripacka-flex--between {
	align-items: center;
	justify-content: space-between;
}
.afripacka-flex--wrap {
	flex-wrap: wrap;
}
.afripacka-gap-2 {
	gap: var(--space-2);
}
.afripacka-gap-3 {
	gap: var(--space-3);
}
.afripacka-gap-4 {
	gap: var(--space-4);
}

/* ---- Generic page template (About, static pages) ---- */
.afripacka-page {
	padding-block: var(--space-6);
}
.afripacka-page__header {
	margin-bottom: var(--space-5);
}
.afripacka-page__header h1 {
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
}
.afripacka-page__content {
	line-height: var(--leading-relaxed);
	max-width: 760px;
}

/* ---- Landing pages (Custom Printing, Wholesale) ---- */
.afripacka-landing-hero {
	background: var(--color-brand-700);
	color: var(--color-white);
	padding-block: var(--space-9);
	text-align: center;
}
.afripacka-landing-hero h1 {
	font-size: var(--text-3xl);
	font-weight: var(--weight-bold);
	margin-bottom: var(--space-3);
}
.afripacka-landing-hero__subtitle {
	color: var(--color-brand-100);
	max-width: 640px;
	margin-inline: auto;
	margin-bottom: var(--space-5);
	font-size: var(--text-md);
}

/* ---- Contact page ---- */
.afripacka-contact-page__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}
@media (min-width: 1024px) {
	.afripacka-contact-page__layout {
		grid-template-columns: 2fr 1fr;
	}
}

/* ---- FAQ page ---- */
.afripacka-faq-page {
	max-width: 760px;
}

/* ---- Single blog post ---- */
.afripacka-single-post {
	max-width: 760px;
	margin-inline: auto;
	padding-block: var(--space-6);
}
.afripacka-single-post__header h1 {
	font-size: var(--text-2xl);
	font-weight: var(--weight-bold);
	margin-bottom: var(--space-3);
}
.afripacka-single-post__meta {
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	display: flex;
	gap: var(--space-2);
	margin-bottom: var(--space-5);
}
.afripacka-single-post__image {
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin-bottom: var(--space-5);
}
.afripacka-single-post__content {
	line-height: var(--leading-relaxed);
	font-size: var(--text-md);
}
.afripacka-single-post__content h2,
.afripacka-single-post__content h3 {
	margin-block: var(--space-5) var(--space-3);
}
.afripacka-single-post__tags {
	display: flex;
	gap: var(--space-2);
	margin-top: var(--space-6);
}

/* ---- Search form (shared: search results empty state, 404) ---- */
.afripacka-search-form {
	display: flex;
	gap: var(--space-2);
	max-width: 480px;
	margin-block: var(--space-4);
}

/* ---- 404 ---- */
.afripacka-404 {
	padding-block: var(--space-11);
}
.afripacka-404__inner {
	max-width: 480px;
	margin-inline: auto;
	text-align: center;
}
.afripacka-404__code {
	font-size: var(--text-5xl);
	font-weight: var(--weight-bold);
	color: var(--color-brand-300);
	display: block;
	margin-bottom: var(--space-3);
}
.afripacka-404 h1 {
	font-size: var(--text-2xl);
	margin-bottom: var(--space-2);
}
.afripacka-404 p {
	color: var(--color-text-muted);
	margin-bottom: var(--space-5);
}
.afripacka-404 .afripacka-search-form {
	margin-inline: auto;
	margin-bottom: var(--space-4);
}

/* ---- Compare page ---- */
.afripacka-compare-table-wrapper {
	overflow-x: auto; /* table itself may scroll; the page body never does */
	-webkit-overflow-scrolling: touch;
}
.afripacka-table--compare th:first-child {
	white-space: nowrap;
}
.afripacka-table--compare td,
.afripacka-table--compare th {
	min-width: 140px;
	text-align: center;
	vertical-align: middle;
}

.afripacka-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}