/* ============================================================ It's A O-Clean — Responsive overrides (mobile / tablet) Retrofit for inline-styled pages. Uses !important to beat inline styles only at small breakpoints; desktop is untouched. ============================================================ */ /* Floating mobile hamburger (created in by mobile-nav.js) */ #mnav-burger { display: none; } /* ---------- TABLET / MOBILE : max-width 820px ---------- */ @media (max-width: 820px) { /* Nav: hide the desktop links group, show the floating hamburger */ [style*="align-items: center; gap: 30px"] { display: none !important; } #mnav-burger { display: flex !important; } /* Tighten horizontal padding on all max-width containers */ [style*="max-width: 1240px"] { padding-left: 22px !important; padding-right: 22px !important; } /* Collapse multi-column grids to a single column */ [style*="grid-template-columns: repeat(2"], [style*="grid-template-columns: repeat(3"], [style*="grid-template-columns: repeat(4"], [style*="grid-template-columns: repeat(5"], [style*="grid-template-columns: 1fr 1fr"], [style*="grid-template-columns: 1fr 1.25fr"], [style*="grid-template-columns: 1fr 1.3fr"], [style*="grid-template-columns: 1.1fr 1fr"], [style*="grid-template-columns: 1.25fr 1fr"], [style*="grid-template-columns: 1.3fr 1fr"], [style*="grid-template-columns: 1.6fr 1fr"] { grid-template-columns: 1fr !important; gap: 18px !important; } /* Feature rows with 3 cols → single col */ [style*="grid-template-columns: 1.3fr 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 20px !important; } /* Footer (4-col) → 2 columns on tablet (placed AFTER 1fr 1fr so it wins) */ [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; gap: 32px !important; } /* Booking: detail field pairs that should stay side-by-side where space allows are fine stacked; keep the small chip grids usable */ [style*="grid-template-columns: repeat(4, 1fr); gap: 12px"] { grid-template-columns: 1fr 1fr !important; } [style*="grid-template-columns: repeat(3, 1fr); gap: 10px"] { grid-template-columns: 1fr 1fr 1fr !important; } /* Booking summary sidebar: stop sticking, sit under the form */ [style*="position: sticky; top: 100px"] { position: static !important; } /* Hero height */ [style*="min-height: 760px"] { min-height: 600px !important; } /* Heading sizes scale down */ [style*="font-size: 68px"] { font-size: 40px !important; } [style*="font-size: 58px"] { font-size: 36px !important; } [style*="font-size: 46px"] { font-size: 31px !important; } [style*="font-size: 44px"] { font-size: 30px !important; } [style*="font-size: 40px"] { font-size: 28px !important; } [style*="font-size: 34px"] { font-size: 26px !important; } /* Body copy slightly smaller */ [style*="font-size: 19px"] { font-size: 16px !important; } /* Hero feature checks + CTA rows: wrap instead of overflow */ [style*="display: flex; gap: 26px; margin-bottom: 38px"] { flex-direction: column; gap: 12px !important; } [style*="display: flex; gap: 14px"] { flex-wrap: wrap; } [style*="display: flex; gap: 16px"] { flex-wrap: wrap; } /* CTA bands that are space-between rows: stack */ [style*="justify-content: space-between"][style*="gap: 40px"] { flex-direction: column; align-items: flex-start !important; } } /* ---------- SMALL PHONES : max-width 520px ---------- */ @media (max-width: 520px) { /* Footer down to a single column */ [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 28px !important; } /* Booking chip grids: 2-up max for tap comfort */ [style*="grid-template-columns: repeat(4, 1fr); gap: 12px"] { grid-template-columns: 1fr 1fr !important; } /* Very large heros a touch smaller */ [style*="font-size: 68px"] { font-size: 34px !important; } [style*="font-size: 58px"] { font-size: 31px !important; } /* Section vertical padding trim for big top paddings */ [style*="padding: 96px 40px 40px"] { padding-top: 56px !important; } [style*="padding: 92px 40px"] { padding-top: 60px !important; padding-bottom: 60px !important; } [style*="padding: 88px 40px"] { padding-top: 56px !important; padding-bottom: 56px !important; } [style*="padding: 84px 40px 60px"] { padding-top: 52px !important; } }