/**
 * Breakpoints: 480px, 768px, 1024px, 1280px
 */

@media (min-width: 480px) {
	.trend-strip__grid {
		grid-template-columns: repeat(2, 1fr);
	}

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

	.featured-grid__side {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
	}
}

@media (min-width: 768px) {
	.featured-grid__layout {
		grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr);
		gap: clamp(1.5rem, 3vw, 2.25rem);
		align-items: start;
	}

	.featured-grid__side {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.65rem;
		padding: 0.65rem;
		background: var(--color-ivory-alt);
		border: 1px solid var(--color-border);
		border-radius: 12px;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
	}

	.featured-grid__layout > .article-card--featured {
		align-self: start;
		height: auto;
	}

	.featured-grid__layout > .article-card--featured .article-card__link {
		height: auto;
	}

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

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

	.section-showcase__grid--recepten {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.section-showcase__grid--cadeaus {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

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

	.long-read-card {
		grid-template-columns: minmax(0, 280px) 1fr;
	}

	.long-read-card__media {
		min-height: 100%;
	}

	.long-read-row__duo:not(.long-read-row__duo--single) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}

	.site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(1.5rem, 3vw, 2rem);
		row-gap: clamp(1.75rem, 3vw, 2.25rem);
		align-items: start;
	}
}

/* Footer: op smalle schermen gecentreerd (leest rustiger) */
@media (max-width: 767px) {
	.site-footer__grid {
		text-align: center;
		justify-items: center;
	}

	.site-footer__col,
	.site-footer__col--about {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		max-width: 28rem;
		margin-left: auto;
		margin-right: auto;
	}

	.site-footer__col-label {
		text-align: center;
		width: 100%;
	}

	.footer-menu {
		width: 100%;
		text-align: center;
	}

	.footer-menu li {
		text-align: center;
	}

	.site-footer .site-footer__brand-mark {
		align-items: center;
		text-align: center;
	}

	.site-footer .site-footer__logo {
		align-self: center;
	}

	.site-footer .site-footer__logo a.custom-logo-link {
		margin: 0 auto;
	}

	.site-footer__logo--custom .custom-logo {
		object-position: center center;
		margin-left: auto;
		margin-right: auto;
	}

	.site-footer .site-logo-text {
		text-align: center;
	}

	.site-footer__tagline,
	.site-footer__about {
		text-align: center;
	}
}

/*
 * Sidebar naast inhoud vanaf ~tablet landscape: voorkomt dat de kolom pas
 * onder het hele artikel verschijnt (992–1023 was voorheen nog één kolom).
 */
@media (min-width: 992px) {
	.content-layout--sidebar {
		grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
		align-items: start;
	}

	.content-layout--no-sidebar {
		grid-template-columns: minmax(0, 1fr);
	}

	.content-layout__main {
		min-width: 0;
	}

	/*
	 * Single: sidebar begint op dezelfde hoogte als broodkruimels (eerste grid-rij),
	 * loopt naast hero + artikel door (template-areas).
	 */
	.site-main--single .single-layout {
		grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
		grid-template-rows: auto auto;
		grid-template-areas:
			"single-bc single-side"
			"single-main single-side";
		align-items: start;
		gap: 1rem 2rem;
	}

	.site-main--single .single-layout__breadcrumbs {
		grid-area: single-bc;
	}

	.site-main--single .single-layout__main {
		grid-area: single-main;
		min-width: 0;
	}

	.site-main--single .single-layout__sidebar {
		grid-area: single-side;
	}

	.single-layout__sidebar,
	.content-layout__sidebar {
		align-self: start;
		min-width: 0;
	}

	.toc-sidebar {
		display: block;
	}
}

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

	.section-showcase__grid--recepten {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.35rem;
	}

	.site-footer__grid {
		grid-template-columns: repeat(4, 1fr);
		column-gap: clamp(1.5rem, 2.8vw, 2.25rem);
		row-gap: clamp(1.75rem, 2.5vw, 2rem);
		align-items: start;
	}
}