:root{--bs-font-sans-serif:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
body{padding-top:72px;background:#f6f7f9}
.hero{min-height:calc(100vh - 72px);background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.38)),url('/images/hero.webp') center/cover no-repeat;color:#fff;display:flex;align-items:center}
.hero .badge{letter-spacing:.04em}
.service-card{border:0;border-radius:1rem;box-shadow:0 .5rem 1.5rem rgba(0,0,0,.08);height:100%}
.page-hero{background:#111;color:#fff;padding:5rem 0}
.btn{border-radius:.8rem}
.map-guard{position:relative;border-radius:1rem;overflow:hidden;background:#ddd}
.map-guard::before{content:"Kliknutím aktivujete mapu";position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);color:#fff;font-weight:700;text-align:center;pointer-events:auto}
.map-guard.active::before{display:none}
.map-ratio{aspect-ratio:9/16}
@media (min-width:992px){.map-ratio{aspect-ratio:1/1}}
.map-ratio iframe{width:100%;height:100%;border:0;display:block}
.reel-ratio{aspect-ratio:9/16;background:#111;border-radius:1rem;overflow:hidden}
.reel-ratio iframe,.reel-ratio video{width:100%;height:100%;border:0;display:block}
.offcanvas .nav-link{font-size:1.05rem;padding:.75rem 0}

html[lang="en"] .map-guard::before{content:"Click to activate the map"}