@media (max-width: 1024px) {
	.rsl-grid-tours {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		--rsl-tg-col-max: 1fr;
	}
	.rsl-features-grid { grid-template-columns: repeat(2, 1fr); }
	.rsl-footer-grid { grid-template-columns: 1fr 1fr; }
	.rsl-nav-wrap > .rsl-nav,
	.rsl-header-inner .rsl-nav-wrap .rsl-nav { display: none; }
	.rsl-burger { display: block; color: inherit; }

	body.rsl-header-transparent .rsl-header { color: var(--rsl-white); }
	body.rsl-header-navy .rsl-header { color: var(--rsl-white); }

	.rsl-mobile-drawer {
		display: none;
		position: fixed;
		inset: var(--rsl-header-h) 0 0 0;
		background: var(--rsl-white);
		color: var(--rsl-navy);
		z-index: 200;
		padding: 24px;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}

	.rsl-mobile-drawer.is-open { display: block; }

	.rsl-mobile-drawer .rsl-mobile-nav,
	.rsl-mobile-drawer .rsl-nav,
	.rsl-mobile-drawer .rsl-nav--mobile {
		display: flex !important;
		flex-direction: column;
		gap: 4px;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.rsl-mobile-drawer .rsl-nav li,
	.rsl-mobile-drawer .rsl-nav--mobile li {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.rsl-mobile-drawer .rsl-nav a,
	.rsl-mobile-drawer .rsl-nav--mobile a,
	.rsl-mobile-drawer .rsl-mobile-nav a {
		display: block;
		color: var(--rsl-navy) !important;
		font-size: 18px;
		font-weight: 600;
		padding: 12px 0;
		text-decoration: none;
		border-bottom: 1px solid var(--rsl-border);
	}

	.rsl-mobile-drawer .rsl-mobile-cta {
		margin-top: 20px;
	}

	.rsl-faq-layout,
	.rsl-pickup-grid { grid-template-columns: 1fr 1fr; }
	.rsl-pickup-aside { grid-column: 1 / -1; grid-row: auto; }
	.rsl-journey { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
	.rsl-grid-tours,
	.rsl-features-grid,
	.rsl-footer-grid,
	.rsl-faq-layout,
	.rsl-pickup-grid { grid-template-columns: 1fr; }

	/*
	 * Tour Grid mobile fix: Elementor "Cards alignment" sets
	 * --rsl-tg-col-max: 380px + justify-content center/end, which packs a
	 * fixed track and clips cards off the right edge on phones.
	 * Force a single full-width column regardless of saved Elementor CSS.
	 */
	.rsl-grid-tours,
	.elementor-widget-rsl_tour_grid .rsl-grid-tours,
	.elementor-element .rsl-grid-tours {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) !important;
		--rsl-tg-col-max: 1fr !important;
		--rsl-tg-card-w: 100% !important;
		justify-content: stretch !important;
		justify-items: stretch !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-inline: 0 !important;
		box-sizing: border-box;
	}

	.elementor-widget-rsl_tour_grid .rsl-tour-card,
	.rsl-grid-tours .rsl-tour-card {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
	}

	.elementor-widget-rsl_tour_grid,
	.elementor-widget-rsl_tour_grid > .elementor-widget-container {
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: clip;
	}

	.rsl-hero { min-height: 520px; }
	.rsl-hero-inner { padding-top: 110px; }
	.rsl-cta-banner { flex-direction: column; align-items: stretch; text-align: center; }
	.rsl-section-head { flex-direction: column; align-items: start; }
	.rsl-gallery-thumbs { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 360px) {
	.rsl-container,
	.rsl-container-wide { width: min(100% - 24px, var(--rsl-container)); }
}
