/* Soluna Hotels — cross-browser compatibility patches. Loaded AFTER styles.css so these rules always win. */ /* iOS Safari <15.4: no svh/dvh. 100vh includes the sliding URL bar, so hero is 10-15% too tall. Fix: JS-set --vh = innerHeight * 0.01 (see app.js). */ :root { --vh: 1vh; } @supports not (height: 100svh) { .hero { min-height: calc(var(--vh, 1vh) * 100); } .nav.is-open { height: calc(var(--vh, 1vh) * 100); } } /* Firefox <121, older Chromium/WebKit: :has() not supported. The body:has(.bookbar-wrap) rules would drop entirely; layout also puts class="has-bookbar" on as fallback. */ /* Safari 14: no aspect-ratio support → element cards / gallery tiles collapse to 0. Fix: padding-top ratio fallback. */ @supports not (aspect-ratio: 1) { .element__img, .gx-tile img { position: relative; padding-top: 66%; /* 3:2 fallback */ height: 0; } .gx-tile img { padding-top: calc(100% / var(--ratio, 1.5)); } } /* Safety net: images never overflow their container. */ img, video, svg { max-width: 100%; height: auto; display: block; } /* iOS Safari: input font-size <16px triggers viewport auto-zoom on focus. */ @media (max-width: 760px) { input, textarea, select { font-size: 16px !important; } } /* Samsung Internet + old Android Chrome: prevent double-tap zoom on controls. */ .bookbar__trigger, .bookbar__submit, .bookbar__addroom, .cal__day, .cal__nav, .sheet-close, .bookbar__stepper button, .codepop__apply, .btn, .sticky-cta, .wa-float { touch-action: manipulation; } /* iOS Safari: prevent overscroll bounce from scrolling background behind open modal/sheet. */ .bookbar__pop, .bookbar__cal, .gx-lightbox { overscroll-behavior: contain; } /* Safari <14.1: `gap` on flex silently ignored → elements collapse together. Fallback via margin on children. */ @supports not (gap: 1rem) { .nav__links > * + * { margin-left: 24px; } .bookbar__head > * + * { margin-left: 8px; } .footer__links > div + div { margin-left: 40px; } } /* prefers-reduced-motion: kill animations, keep transitions short. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* High-DPI: sharper text rendering. */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } }