/* =========================================================================
   BHUJUNG — RESPONSIVE
   Breakpoints intentionally target 1440 / 1280 / 1024 / 768 / 480 / 390 / 320.
   Layouts are rebuilt at each step, not just scaled down.
   ========================================================================= */

/* ---------- 1280px and below: tighten container, drop to 2-col where 4-col existed ---------- */
@media (max-width: 1280px) {
	:root {
		--space-2xl: 84px;
		--space-xl: 52px;
	}
	.container { max-width: 1080px; }
}

/* ---------- 1024px: primary nav becomes the hamburger breakpoint ---------- */
@media (max-width: 1024px) {
	.primary-navigation { display: none !important; }
	.site-header__actions .btn--accent { display: none; }
	.menu-toggle { display: inline-flex; }

	.destination-intro__grid { grid-template-columns: 1fr; }
	.responsible-tourism__grid { grid-template-columns: 1fr; }
	.events__grid { grid-template-columns: 1fr; }
	.events__intro { position: static; }
	.events__list { grid-template-columns: 1fr; }
	.faq__grid { grid-template-columns: 1fr; }
	.faq__intro { position: static; }

	.travel-planning__grid { grid-template-columns: 1fr; }
	.travel-planning__panel { position: static; }

	.testimonials__grid { grid-template-columns: 1fr; }
	.testimonials__intro { position: static; }

	.feature-grid { grid-template-columns: repeat(2, 1fr); }
	.feature-card--featured { grid-column: span 2; grid-row: span 1; }

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

/* ---------- 1025px and above: show desktop nav, hide hamburger ---------- */
@media (min-width: 1025px) {
	.primary-navigation { display: block; }
	.menu-toggle { display: none; }
	.mobile-navigation,
	.mobile-navigation__backdrop { display: none !important; }
}

/* ---------- 768px: tablet — most grids drop to single/2-col, spacing tightens ---------- */
@media (max-width: 768px) {
	:root {
		--space-2xl: 64px;
		--space-xl: 40px;
		--space-lg: 28px;
		--header-height: 72px;
	}

	.section-heading--split { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }

	.feature-grid { grid-template-columns: 1fr; }
	.people-grid { grid-template-columns: repeat(2, 1fr); }
	.card-grid { grid-template-columns: repeat(2, 1fr); }
	.card-grid--editorial { grid-template-columns: repeat(2, 1fr); }
	.card-grid--editorial .card:nth-child(6n+1),
	.card-grid--editorial .card:nth-child(6n+5) { grid-column: span 2; grid-row: span 1; }
	.card-grid--editorial .card:nth-child(6n+1) .card__media,
	.card-grid--editorial .card:nth-child(6n+5) .card__media { aspect-ratio: 16 / 9; flex: none; }

	.testimonials__content { grid-template-columns: 1fr; }
	.testimonial-card--lead { grid-column: span 1; }
	.planning-grid { grid-template-columns: 1fr; }
	.site-footer__grid { grid-template-columns: repeat(2, 1fr); }
	.travel-planning__articles { grid-template-columns: 1fr; }
	.gallery__masonry { column-count: 3; }

	.hero { min-height: 82vh; }
	.hero__content { padding-bottom: var(--space-xl); }
	.hero__facts { flex-wrap: wrap; gap: var(--space-sm); }

	.single-article--with-sidebar { grid-template-columns: 1fr; }
}

/* ---------- 480px: phones — collapse to single column everywhere ---------- */
@media (max-width: 480px) {
	:root {
		--space-2xl: 48px;
		--space-xl: 32px;
		--space-lg: 24px;
		--radius-lg: 20px;
	}

	body { font-size: 15.5px; }

	.container { padding-inline: var(--space-sm); }

	.hero { min-height: 78vh; }
	.hero__actions { flex-direction: column; align-items: stretch; }
	.hero__actions .btn { width: 100%; }
	.hero__scroll { display: none; }

	.people-grid { grid-template-columns: 1fr; }
	.card-grid { grid-template-columns: 1fr; }
	.card-grid--editorial .card:nth-child(n) { grid-column: span 1; grid-row: span 1; }
	.card-grid--editorial .card:nth-child(n) .card__media { aspect-ratio: 4 / 3; flex: none; }
	.feature-grid { grid-template-columns: 1fr; }
	.feature-card--featured { grid-column: span 1; }
	.gallery__masonry { column-count: 2; }
	.events__list { grid-template-columns: 1fr; }
	.fact-chips { flex-direction: column; }
	.fact-chip { width: 100%; }

	.final-cta__actions { flex-direction: column; }
	.final-cta__actions .btn { width: 100%; }
	.newsletter-form { flex-direction: column; }
	.newsletter-form input[type="email"] { width: 100%; }

	.destination-intro__collage { aspect-ratio: 4 / 5; }

	.post-nav { flex-direction: column; }
	.site-footer__grid { grid-template-columns: 1fr; gap: var(--space-lg); }

	.lightbox__prev, .lightbox__next { width: 38px; height: 38px; font-size: 1.1rem; }
}

/* ---------- 390px: small phones — trim type scale further ---------- */
@media (max-width: 390px) {
	h1 { font-size: 2.1rem; }
	h2 { font-size: 1.7rem; }

	.hero__eyebrow { font-size: 0.7rem; padding: 5px 12px; }
	.hero__description { font-size: 1rem; }

	.mobile-navigation { width: 100vw; }
}

/* ---------- 320px: smallest supported width ---------- */
@media (max-width: 320px) {
	.container { padding-inline: 12px; }
	.btn { padding: 12px 20px; font-size: 0.86rem; }
	.gallery__masonry { column-count: 2; column-gap: 6px; }
}

/* ---------- 1440px and up: give the design room to breathe ---------- */
@media (min-width: 1440px) {
	:root {
		--container-width: 1320px;
	}
	.hero__content { max-width: 820px; }
}