/* ==========================================================================
   Fijn Event — responsive.css
   Breakpoints: 1024px (tablet), 768px (grote mobiel), 480px (kleine mobiel).
   Desktop-first: basis staat in main.css en components.css.
   ========================================================================== */

/* ---------- Tablet (≤ 1024px) ---------- */

@media (max-width: 1024px) {

	.site-nav {
		display: none; /* navigatie verhuist naar het mobiele menu */
	}

	.site-header__menu-toggle {
		display: inline-flex;
	}

	.event-grid,
	.cookbook-grid,
	.quote-grid,
	.expect-list {
		grid-template-columns: repeat(2, 1fr);
	}

	.photo-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.photo-grid__item {
		grid-column: span 2;
	}

	.photo-grid__item--wide {
		grid-column: span 4;
	}

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

	.detail-grid {
		grid-template-columns: 1fr;
	}

	.detail-aside {
		position: static;
	}

	.intro-split {
		grid-template-columns: 1fr;
	}

	.intro-split__sticky {
		position: static;
	}
}

/* ---------- Grote mobiel (≤ 768px) ---------- */

@media (max-width: 768px) {

	:root {
		--header-height: 72px;
	}

	.site-header__logo-image {
		height: 44px;
	}

	/* CTA blijft zichtbaar maar compacter */
	.site-header__cta {
		padding: 10px 14px;
		font-size: 0.7rem;
		letter-spacing: 0.04em;
	}

	.hero {
		min-height: calc(92svh - var(--header-height));
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
	}

	.hero__title {
		max-width: 14ch;
	}

	.hero__badge {
		position: relative;
		right: auto;
		bottom: auto;
		align-self: center;
		width: 130px;
		margin-top: var(--space-md);
		font-size: 0.68rem;
	}

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

	.photo-grid__item {
		grid-column: span 1;
	}

	.photo-grid__item--wide {
		grid-column: span 2;
	}

	.featured-event__grid {
		grid-template-columns: 1fr;
	}

	.featured-event__media::after {
		transform: translate(10px, 10px);
	}

	.event-grid,
	.cookbook-grid,
	.quote-grid,
	.expect-list,
	.gallery-grid,
	.form-grid {
		grid-template-columns: 1fr;
	}

	.newsletter__grid {
		grid-template-columns: 1fr;
	}

	.newsletter__form {
		flex-direction: column;
	}

	.post-list__item {
		grid-template-columns: 1fr;
	}

	.timeline__item {
		grid-template-columns: 84px 1fr;
	}

	.detail-hero {
		min-height: 52vh;
	}

	.site-footer__grid {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

	.site-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}

	.spec-list__row {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

/* ---------- Kleine mobiel (≤ 480px) ---------- */

@media (max-width: 480px) {

	.announcement-bar__text {
		letter-spacing: 0.06em;
	}

	/* Header moet altijd binnen het viewport passen (logo + CTA + hamburger) */
	.site-header__inner {
		gap: 10px;
	}

	.site-header__logo {
		min-width: 0;
	}

	.site-header__logo-image {
		height: 40px;
	}

	.site-header__actions {
		gap: 8px;
		min-width: 0;
	}

	.site-header__cta {
		max-width: 40vw; /* CTA + hamburger passen altijd naast elkaar */
		padding: 8px 10px;
		font-size: 0.62rem;
		letter-spacing: 0.03em;
		text-align: center;
		line-height: 1.25;
		white-space: normal;
	}

	.site-header__menu-toggle {
		width: 42px;
		height: 42px;
		flex-shrink: 0;
	}

	/* Kaart-footers mogen wrappen zodat prijs + link nooit clippen */
	.event-card__footer,
	.product-card__footer {
		flex-wrap: wrap;
		row-gap: 6px;
	}

	.hero__actions .btn {
		width: 100%;
	}

	.hero__badge {
		position: relative;
		right: auto;
		bottom: auto;
		align-self: center;
		width: 120px;
		margin-top: var(--space-md);
		font-size: 0.65rem;
	}

	.editions-strip {
		grid-template-columns: 1fr 1fr;
	}

	.mobile-menu__panel {
		width: 100%;
		border-left: 0;
	}

	.error-404__actions .btn {
		width: 100%;
	}
}