/* Off-market: każda nieruchomość to osobny rozdział. Zasłona otwiera się od środka, jak światło w drzwiach. */
.om{
  /* Kolory z głównego style.css; żółty akcent jest wyłącznie tutaj. */
  --om-deep:var(--atrament,#0a1624); --om-petrol:var(--baltyk-ciemny,#011a3a); --om-mist:#e6ecf3; --om-dim:#a3b2c6; --om-glow:#f2c879;
  background:var(--om-deep); color:var(--om-mist); line-height:1.55;
}
.om *,.om *::before,.om *::after{box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){ html:has(.om){scroll-behavior:smooth} }

/* przyciski */
.om-btn{display:inline-block;padding:.85em 1.5em;background:var(--om-glow);color:var(--om-deep);font-weight:600;
  text-decoration:none;border:1px solid var(--om-glow);border-radius:var(--r,6px);transition:background .2s,color .2s}
.om-btn:hover{background:transparent;color:var(--om-glow)}
.om-btn--ghost{background:transparent;color:var(--om-mist);border-color:rgba(230,236,243,.45)}
.om-btn--ghost:hover{border-color:var(--om-glow);color:var(--om-glow)}
.om a:focus-visible,.om button:focus-visible{outline:2px solid var(--om-glow);outline-offset:3px}

/* wstęp */
.om-intro{position:relative;min-height:calc(100svh - var(--om-off,0px));scroll-margin-top:var(--om-off,0px);display:flex;align-items:center;overflow:hidden;
  padding:12vh clamp(24px,8vw,140px);
  background:radial-gradient(60% 80% at 8% 50%,rgba(242,200,121,.13),transparent 70%),var(--om-petrol)}
.om-slit{position:absolute;left:clamp(16px,4vw,64px);top:0;width:2px;height:100%;background:linear-gradient(var(--om-glow),rgba(242,200,121,0));
  box-shadow:0 0 36px 5px rgba(242,200,121,.35);transform-origin:top;animation:om-slit 1.8s .15s cubic-bezier(.2,.7,.1,1) both}
@keyframes om-slit{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.om-intro-in{max-width:720px}
.om-intro h1{margin:0 0 .5em;font-size:clamp(2.4rem,6.2vw,5.4rem);font-weight:300;line-height:1.02;letter-spacing:-.03em;color:#fff}
.om-lead{max-width:52ch;margin:0 0 1.6em;font-size:1.15rem;color:var(--om-dim)}
.om-count{margin:0 0 1.2em}
.om-count strong{color:var(--om-glow);font-weight:600}

/* rozdział */
.om-ch{--p:1;position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;background:var(--om-deep)}
.om-js .om-ch{--p:0}
.om-lit{position:absolute;inset:0;z-index:-3;opacity:calc(1 - var(--p));
  background:linear-gradient(90deg,transparent 47%,rgba(242,200,121,.28) 50%,transparent 53%)}
/* Zasłona z miękkimi brzegami: maska zamiast clip-path. --f to szerokość rozmycia krawędzi. */
.om-photo{position:absolute;inset:0;z-index:-2;
  --f:22%; --w:calc((50% + var(--f)) * var(--p));
  -webkit-mask-image:linear-gradient(90deg,transparent calc(50% - var(--w)),#000 min(50%,calc(50% - var(--w) + var(--f))),#000 max(50%,calc(50% + var(--w) - var(--f))),transparent calc(50% + var(--w)));
          mask-image:linear-gradient(90deg,transparent calc(50% - var(--w)),#000 min(50%,calc(50% - var(--w) + var(--f))),#000 max(50%,calc(50% + var(--w) - var(--f))),transparent calc(50% + var(--w)))}
.om-ch[data-open] .om-photo{-webkit-mask-image:none;mask-image:none}
.om-photo img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(calc(1.18 - .18 * var(--p)));transition:opacity .18s}
.om-ch::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(10,22,36,.92),rgba(10,22,36,.5) 48%,rgba(10,22,36,0) 78%)}
.om-ch--r::before{background:linear-gradient(270deg,rgba(10,22,36,.92),rgba(10,22,36,.5) 48%,rgba(10,22,36,0) 78%)}

.om-body{width:min(640px,100%);padding:clamp(24px,5vw,80px);margin-left:clamp(0px,3vw,56px);
  opacity:clamp(0,calc((var(--p) - .55) * 2.5),1);transform:translateY(calc((1 - var(--p)) * 24px))}
.om-ch--r{justify-content:flex-end}
.om-ch--r .om-body{margin-left:0;margin-right:clamp(0px,3vw,56px)}

.om-kind{margin:0 0 .4em;color:var(--om-dim)}
.om-place{margin:0;font-size:clamp(2.6rem,6.4vw,5.6rem);font-weight:300;line-height:1;letter-spacing:-.035em;color:#fff}
.om-district{margin:.35em 0 0;font-size:1.15rem;color:var(--om-mist)}
.om-price{margin:1em 0 0;font-size:clamp(1.5rem,2.6vw,2.1rem);font-variant-numeric:tabular-nums;color:var(--om-glow)}
.om-price small{font-size:.55em;color:var(--om-dim)}
.om-stats{display:flex;flex-wrap:wrap;gap:1.2em 0;margin:1.4em 0 0;padding:0}
.om-stats>div{padding:0 1.4em;border-left:1px solid rgba(230,236,243,.3)}
.om-stats>div:first-child{padding-left:0;border-left:0}
.om-stats dt{font-size:.85rem;color:var(--om-dim)}
.om-stats dd{margin:0;font-size:1.2rem;font-variant-numeric:tabular-nums}
.om-text{max-width:56ch;margin:1.4em 0 0;color:var(--om-mist)}

.om-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin:1.6em 0 0;padding:0;list-style:none}
.om-thumbs button{display:block;padding:0;width:72px;height:48px;border:1px solid transparent;background:none;cursor:pointer;opacity:.6;transition:opacity .2s,border-color .2s}
.om-thumbs button:hover,.om-thumbs button[aria-current="true"]{opacity:1}
.om-thumbs button[aria-current="true"]{border-color:var(--om-glow)}
.om-thumbs img{display:block;width:100%;height:100%;object-fit:cover}

.om-actions{display:flex;flex-wrap:wrap;gap:10px;margin:1.8em 0 0}
.om-ref{margin:1.1em 0 0;font-size:.85rem;color:var(--om-dim)}

/* nawigacja boczna */
.om-rail{position:fixed;right:18px;top:50%;z-index:20;display:flex;flex-direction:column;gap:14px;transform:translateY(-50%);
  opacity:0;pointer-events:none;transition:opacity .3s}
.om-rail.is-on{opacity:1;pointer-events:auto}
.om-rail a{position:relative;display:block;width:22px;height:14px}
.om-rail a::before{content:"";position:absolute;right:0;top:6px;width:10px;height:2px;background:rgba(230,236,243,.55);transition:width .25s,background .25s}
.om-rail a[aria-current="true"]::before,.om-rail a:hover::before{width:22px;background:var(--om-glow)}
.om-rail span{position:absolute;right:30px;top:50%;transform:translateY(-50%);white-space:nowrap;padding:.2em .6em;border-radius:var(--r,6px);
  background:var(--om-deep);color:var(--om-mist);font-size:.85rem;opacity:0;transition:opacity .2s}
.om-rail a:hover span,.om-rail a:focus-visible span{opacity:1}

/* zakończenie */
.om-end{padding:14vh clamp(24px,8vw,140px);background:var(--om-petrol)}
.om-end h2{max-width:18ch;margin:0 0 .5em;font-size:clamp(2rem,4.6vw,3.6rem);font-weight:300;line-height:1.05;letter-spacing:-.03em;color:#fff}
.om-end p{max-width:52ch;margin:0 0 1.6em;color:var(--om-dim)}

/* telefon i tablet: zdjęcie na górze, treść pod spodem */
@media (max-width:899px){
  .om-rail,.om-lit{display:none}
  .om-ch,.om-ch--r{display:block;min-height:0}
  .om-ch::before{display:none}
  .om-photo{position:relative;z-index:0;height:62svh}
  .om-body,.om-ch--r .om-body{width:100%;margin:0;background:var(--om-deep);padding:28px 22px 48px}
}

@media (prefers-reduced-motion:reduce){
  .om-slit{animation:none}
  .om-photo img,.om-btn,.om-thumbs button{transition:none}
}

/* przewijanie segment po segmencie (tylko komputer i tablet poziomo, bez reduced motion) */
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  html.om-snap{scroll-snap-type:y mandatory}
  .om-intro,.om-ch,.om-end{scroll-snap-align:start;scroll-snap-stop:always}
  html:has(.om) body>footer,html:has(.om) .site-footer,html:has(.om) #footer{scroll-snap-align:end}
}

@supports (height:100dvh){ .om-intro{min-height:calc(100dvh - var(--om-off,0px))} }

/* wideo w tle wstępu */
.om-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.om-bg-shade{position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(10,22,36,.88),rgba(10,22,36,.55) 55%,rgba(10,22,36,.3))}
.om-slit{z-index:1}
.om-intro-in{position:relative;z-index:2}

/* ==========================================================================
   Menu główne w odwróconych kolorach (ten plik ładuje się tylko na stronie off-market).
   Prefiks „body” podnosi specyficzność ponad reguły z style.css, więc kolejność plików nie ma znaczenia.
   ========================================================================== */
body .site-header { background:var(--atrament,#022651); border-bottom-color:rgba(255,255,255,.14); }
body .site-header :focus-visible { outline-color:#fff; }

/* logo (PNG): wszystkie nieprzezroczyste piksele na biało */
body .brand-logo { filter:brightness(0) invert(1); }

/* linki */
body .site-header nav a { color:#fff; }
body .site-header nav a:hover,
body .site-header nav a[aria-current] { border-bottom-color:#fff; }

/* przycisk: jasne tło, ciemny tekst */
body .site-header nav a.nav-cta { background:#fff; color:var(--atrament,#022651); }
body .site-header nav a.nav-cta:hover,
body .site-header nav a.nav-cta[aria-current] { background:var(--piasek-jasny,#ebe6da); color:var(--baltyk-ciemny,#011a3a); }

/* podmenu (komputer): ciemne tło, białe linki */
@media (min-width:821px) {
  body .site-header .nav-sub { background:var(--baltyk-ciemny,#011a3a); box-shadow:0 10px 30px rgba(0,0,0,.35); }
}
body .site-header .nav-sub a:hover,
body .site-header .nav-sub a:focus-visible,
body .site-header .nav-sub a[aria-current] { background:rgba(255,255,255,.12); }

/* telefon: hamburger i linie rozdzielające */
@media (max-width:820px) {
  body .menu-toggle span { background-color:#fff; }
  body .site-header nav a { border-bottom-color:rgba(255,255,255,.18); }
  body .site-header .nav-sub { border-left-color:rgba(255,255,255,.3); }
}