/**
 * Layout: container, sectie-ritme, grids. Mobile-first: 1 kolom als
 * uitgangspunt, meer kolommen pas vanaf breakpoints die op de content zijn
 * gebaseerd (kaartbreedte), niet uitsluitend op apparaatbreedtes (§5).
 */

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

.section {
	padding-block: var( --space-6 );
}
.section--muted { background: var( --surface-alt ); }
.section--trust { background: var( --surface-alt ); padding-block: var( --space-5 ); }

.section__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var( --space-2 );
	margin-bottom: var( --space-4 );
}

.section__title { margin-bottom: var( --space-4 ); }
.section__header .section__title { margin-bottom: 0; }

.section__link {
	font-weight: 600;
	white-space: nowrap;
}

/* ---- Category grid ---- */
.category-grid,
.product-grid,
.advies-grid,
.problem-grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: var( --space-4 );
}

@media ( min-width: 560px ) {
	.category-grid,
	.problem-grid { grid-template-columns: repeat( 3, 1fr ); }
	.product-grid,
	.advies-grid { grid-template-columns: repeat( 2, 1fr ); }
}

@media ( min-width: 860px ) {
	.product-grid,
	.advies-grid { grid-template-columns: repeat( 3, 1fr ); }
	.category-grid { grid-template-columns: repeat( 4, 1fr ); }
}

@media ( min-width: 1100px ) {
	.product-grid { grid-template-columns: repeat( 4, 1fr ); }
}

/* ---- Trust list ---- */
.trust-list,
.footer__trust-list {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-3 ) var( --space-6 );
	justify-content: center;
	text-align: center;
	font-weight: 600;
	color: var( --text-muted );
}

/* ---- PLP (categoriepagina) layout ---- */
.plp {
	padding-block: var( --space-5 ) var( --space-7 );
}

.plp__toolbar {
	display: flex;
	flex-direction: column;
	gap: var( --space-3 );
	margin-block: var( --space-4 );
}

@media ( min-width: 900px ) {
	.plp {
		display: grid;
		grid-template-columns: 260px 1fr;
		grid-template-areas:
			"title title"
			"filters toolbar"
			"filters grid";
		column-gap: var( --space-6 );
	}
	.plp > .page-title { grid-area: title; }
	.plp .archive-intro,
	.plp .subcategories { grid-column: 1 / -1; }
	.filters { grid-area: filters; }
	.plp__toolbar { grid-area: toolbar; }
	.plp .product-grid,
	.plp .woocommerce-pagination,
	.plp .woocommerce-no-products-found { grid-column: 2; }
}

/* ---- PDP (productpagina) layout ---- */
.pdp__grid {
	display: grid;
	gap: var( --space-5 );
}

@media ( min-width: 860px ) {
	.pdp__grid {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

.pdp__tabs { margin-block: var( --space-6 ); }

/* ---- Hero ---- */
.hero {
	display: grid;
	gap: var( --space-4 );
	padding-block: var( --space-6 );
	align-items: center;
}

@media ( min-width: 780px ) {
	.hero {
		grid-template-columns: 1.1fr 1fr;
		padding-block: var( --space-7 );
	}
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-3 );
	margin-top: var( --space-4 );
}

.hero__image {
	border-radius: var( --radius-lg );
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}