/* ==========================================================================
   Phone breakpoints (<=780px, <=520px).
   ========================================================================== */

/* ---------- Small tablet / large phone ---------- */
@media (max-width: 780px) {
	:root { --header-h: 72px; }
	.section { padding: 60px 0; }
	.section--tight { padding: 40px 0; }
	.hero { min-height: 560px; }
	.hero-inner { padding: 40px 20px; }
	.hero--page { min-height: 360px; }
	.hero-actions { flex-direction: column; align-items: stretch; }
	.hero-actions .btn { justify-content: center; }
	.welcome-actions { flex-direction: column; align-items: stretch; }
	.welcome-actions .btn { justify-content: center; }

	.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
	.includes-grid { grid-template-columns: 1fr; }
	.check-list--grid { grid-template-columns: 1fr; }

	.section-bg-shape, .media-dot-pattern { display: none; }
	.form-grid { grid-template-columns: minmax(0, 1fr); }

	.footer-grid { grid-template-columns: 1fr; }
	.footer-grid .footer-col:first-child { grid-column: auto; }
	.footer-bottom .container { flex-direction: column; text-align: center; }

	.itinerary-item { flex-direction: column; gap: 10px; }
	.itinerary-day { width: auto; align-self: flex-start; }

	.site-title { font-size: 1.05rem; }
	.site-tagline { display: none; }
	.brand-mark { width: 40px; height: 40px; font-size: 1.2rem; }

	/* Testimonial slider: the desktop split-photo layout (photo | quote side
	   by side) has no room to breathe at phone width — the photo column
	   shrinks to a sliver and the quote wraps 2-3 words per line. Stack
	   photo-on-top, quote-below instead. */
	.testimonial-slider .testimonial-card { grid-template-columns: 1fr; }
	.testimonial-media { min-height: 220px; }
	.testimonial-body { padding: 32px 24px; }
	.testimonial-body::before { font-size: 4rem; top: 4px; left: 20px; }
	.testimonial-body p { font-size: 1rem; }
}

/* ---------- Phones ---------- */
@media (max-width: 520px) {
	.container { padding: 0 18px; }
	.hero h1 { font-size: 1.9rem; }
	.hero-meta { gap: 10px; }
	.hero-meta span { font-size: 0.78rem; padding: 7px 12px; }
	.cta-banner { padding: 30px 22px; }
	.price-box { padding: 24px; }
	.schedule-table td { padding: 12px 14px; font-size: 0.9rem; }
	.schedule-table td:first-child { width: 110px; }
	.map-wrap iframe { height: 300px; }
	.footer-om { display: none; }
}

/* Footer keeps two columns down to 521px — with the contact details now in
   the first column (footer.php), one stacked column made the footer very
   tall on tablets and big phones. */
@media (min-width: 521px) and (max-width: 780px) {
	.footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 30px; }
	.footer-grid .footer-col:first-child { grid-column: 1 / -1; }
}