/* Home, section Za vlasnike: generated by build/tools/owners_a_port.py from design/vlasnici-2026-10-16/src/variants/a (edit the prototype or the script, not this file). Root .vm, loaded after as.css. */
/* Variant a "Već na mapi" (root .vm): the home owner panel, "the bay at night". The only dark block among the light
   guest sections: the same bay map as the owner page, recoloured for the night, 51 lights, the sand edge glowing. */

.vm-home [hidden]{display:none!important}
.vm-home :where(h2,p){margin:0}
.vm-hp{position:relative;overflow:hidden;border-radius:24px;background:var(--as-navy);color:#fff;isolation:isolate}
.vm-hp__map{position:relative;height:190px}
.vm-map{position:absolute;inset:0;display:block;overflow:hidden;container-type:size}
.vm-map__in{position:absolute;left:50%;top:50%;display:block;width:max(100cqw,calc(100cqh * var(--vm-ar)));transform:translate(-50%,-50%)}
.vm-map[data-vm-map=night_wide] .vm-map__in{--vm-ar:1.8182}
.vm-map[data-vm-map=night_tall] .vm-map__in{--vm-ar:1.79}
.vm-map__svg{position:absolute;inset:0;display:block}
.vm-map__svg svg{display:block;width:100%;height:100%}
.vm-dots{position:absolute;inset:0;display:block}
.vm-light{position:absolute;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 0 6px rgba(255,255,255,.35)}
.vm-hp__map::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--as-navy) 0%,rgba(0,30,49,0) 30%)}
.vm-hp__txt{position:relative;z-index:2;padding:20px 24px 28px}
.vm-hp__top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.vm-eye{font-size:13px;line-height:1.3;font-weight:650;letter-spacing:.12em;text-transform:uppercase}
.vm-eye--night{color:#9FD9F5}
.vm-hp__chip{display:none;align-items:center;height:28px;padding:0 11px;border:1px solid rgba(255,255,255,.3);border-radius:999px;font-size:13px;line-height:1;font-weight:600;color:#fff;white-space:nowrap}
.vm-hp__h{margin-top:12px;font-size:28px;line-height:1.08;font-weight:800;letter-spacing:-.035em;color:#fff;text-wrap:balance}
.vm-hp__body{margin-top:12px;font-size:16px;line-height:1.55;color:rgba(255,255,255,.82);text-wrap:pretty}
.vm-hp__btns{display:grid;gap:10px;margin-top:22px}
.vm-hp__b{min-height:52px;font-size:16px;border-radius:12px}
.vm-hp .as-btn--onnavy{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff!important}
.vm-hp .as-btn--onnavy:hover{background:rgba(255,255,255,.18)}

/* the motion: when the panel is 40% in view, the sand edge draws once and its glow comes up */
.vm-home.vm-pre .vm-edge{stroke-dasharray:100;stroke-dashoffset:100}
.vm-home.vm-pre .vm-glow{opacity:0}
.vm-home.vm-pre.is-in .vm-edge{animation:vm-edge 1.2s cubic-bezier(.45,.05,.3,1) .1s both}
.vm-home.vm-pre.is-in .vm-glow{animation:vm-glow .9s ease-out 1s both}
@keyframes vm-edge{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes vm-glow{from{opacity:0}to{opacity:1}}

@media (max-width:759.98px){.vm-home .vm-only-hlap{display:none}}
@media (min-width:760px){
 .vm-home .vm-only-hcmp{display:none}
 .vm-hp__chip{display:inline-flex}
 .vm-hp__free{display:none}
 .vm-hp{display:flex;align-items:center;min-height:420px;border-radius:28px}
 .vm-hp__map{position:absolute;top:0;right:0;bottom:0;width:62%;height:auto}
 .vm-hp__map::after{background:linear-gradient(90deg,var(--as-navy) 0%,rgba(0,30,49,.6) 16%,rgba(0,30,49,0) 42%)}
 .vm-hp__txt{width:min(584px,52%);padding:56px 0 56px clamp(32px,5vw,64px)}
 .vm-hp__h{max-width:12em;margin-top:18px;font-size:clamp(34px,3.5vw,44px);line-height:1.04;letter-spacing:-.04em;text-wrap:wrap}
 .vm-hp__body{max-width:30em;margin-top:16px;font-size:17px}
 .vm-hp__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
 .vm-hp__b{padding:0 24px}
}
@media (prefers-reduced-motion:reduce){
 .vm-home *{animation:none!important}
 .vm-home.vm-pre .vm-edge{stroke-dashoffset:0}
 .vm-home.vm-pre .vm-glow{opacity:1}
}