/* bre.rs — Milan Vlasić Estate Agents */

:root{
  --paper:#f4f4f4;
  --surface:#ffffff;
  --ink:#16171a;
  --muted:#5f6166;
  --rule:rgba(0,0,0,.11);
  --rule-strong:rgba(0,0,0,.42);
  --rule-soft:rgba(0,0,0,.06);
  --accent:#2f5d4f;
  --accent-ink:#ffffff;

  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace;

  --gutter:clamp(1.25rem,5vw,2.5rem);
  --band:clamp(3.25rem,8vw,6rem);

  /* nit ide levo od teksta i prati ga kroz sve širine:
     na 1280 padne na 137px (tekst počinje na 168), na 390 na 8px (tekst na 20) */
  --thread-x:max(.5rem,calc(50% - 32rem + var(--gutter) * .45));
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#16171a;
    --surface:#1c1d21;
    --ink:#e9e9e7;
    --muted:#9a9ca0;
    --rule:rgba(255,255,255,.14);
    --rule-strong:rgba(255,255,255,.34);
    --rule-soft:rgba(255,255,255,.07);
    --accent:#7fb8a4;
    --accent-ink:#12241e;
  }
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 clamp(1rem,.96rem + .2vw,1.0625rem)/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;line-height:1.12;margin:0}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

a{color:inherit}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}
#glavni:focus{outline:none}

.wrap{
  max-width:64rem;
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

.skip{
  position:absolute;left:-999px;top:0;z-index:20;
  background:var(--accent);color:var(--accent-ink);
  padding:.65rem 1rem;text-decoration:none;
}
.skip:focus{left:0}

/* ---------- zaglavlje ---------- */

.top{border-bottom:1px solid var(--rule)}
.top-in{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-block:1.15rem;
}
.mark{text-decoration:none;display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.mark-name{font-family:var(--serif);font-size:1.0625rem;letter-spacing:-.01em}
.mark-sub{font-size:.75rem;color:var(--muted);letter-spacing:.02em}

/* dugme radi samo uz JS, pa se bez njega i ne prikazuje */
.lang{display:none}
.js .lang{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:2.75rem;min-width:2.75rem;
  appearance:none;background:none;border:1px solid var(--rule-strong);
  color:var(--muted);font:inherit;font-size:.75rem;letter-spacing:.06em;
  padding:.3rem .55rem;cursor:pointer;border-radius:2px;
  transition:color .18s ease,border-color .18s ease;
}
.js .lang:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- nit kroz stranu ---------- */
/* Ista linija kao ona između Sidneja i Beograda, samo uspravna: vodi od heroja
   do kontakta, sa čvorom na svakoj sekciji. Popunjava se dok se skroluje.
   Bez podrške za scroll-timeline ostaje mirna linija sa čvorovima — ništa ne fali. */

main{position:relative}

.thread{
  position:absolute;top:0;bottom:0;left:var(--thread-x);
  width:1px;background:var(--rule);
  pointer-events:none;
}

.thread-fill{
  position:absolute;inset:0;
  background:var(--accent);
  transform:scaleY(0);transform-origin:top;
}

.hero,.meridian,.band{position:relative}

.s-nit .hero::before,.s-nit .meridian::before,.s-nit .band::before{
  content:"";position:absolute;top:0;left:var(--thread-x);
  width:7px;height:7px;margin-left:-3px;
  border-radius:50%;
  background:var(--paper);
  border:1px solid var(--rule-strong);
  box-sizing:border-box;
  transition:background-color .35s ease,border-color .35s ease;
}
.s-nit .meridian::before,.s-nit .band-alt::before{background:var(--surface)}

/* čvor kroz koji si prošao */
.s-nit .cvor-on::before{background:var(--accent);border-color:var(--accent)}

@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .thread-fill{
      animation:nit linear both;
      animation-timeline:scroll(root block);
    }
    .s-nit .hero::before,.s-nit .meridian::before,.s-nit .band::before{
      animation:cvor linear both;
      animation-timeline:view();
      animation-range:entry 15% entry 85%;
    }
  }
}

@keyframes nit{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes cvor{to{background:var(--accent);border-color:var(--accent)}}

/* ---------- hero ---------- */

.hero{padding-block:clamp(3.5rem,10vw,7rem) var(--band)}

h1{font-size:clamp(2rem,1.15rem + 3.9vw,3.9rem)}
/* 27ch drži duži srpski red („Vaša nekretnina je u Beogradu.", izmereno 818px
   na 62.4px) u jednom redu unutar 944px sadržaja, a ispod ~900px se prelama */
h1 .l1,h1 .l2{display:block;max-width:27ch;text-wrap:balance}
h1 .l2{color:var(--muted)}

.lead{
  margin-top:clamp(1.5rem,3vw,2.25rem);
  max-width:56ch;
  font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem);
  line-height:1.62;
}

.cta{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:2rem}

.btn{
  display:inline-block;text-decoration:none;
  font-family:var(--mono);font-size:.9375rem;letter-spacing:-.01em;
  padding:.75rem 1.15rem;border-radius:3px;
  background:var(--accent);color:var(--accent-ink);
  border:1px solid var(--accent);
  transition:opacity .18s ease;
}
.btn:hover{opacity:.86}
.btn-ghost{background:none;color:var(--ink);border-color:var(--rule-strong)}
.btn-ghost:hover{border-color:var(--ink);opacity:1}

/* ---------- satovi ---------- */

.meridian{
  border-block:1px solid var(--rule);
  background:var(--surface);
  padding-block:clamp(2rem,5vw,3rem);
}

.clocks{display:flex;align-items:center;gap:clamp(.75rem,3vw,2rem)}

.clock{display:flex;flex-direction:column;gap:.2rem;flex:0 0 auto}
.clock-end{text-align:right}
.clock-city{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.clock-time{
  font-family:var(--mono);
  font-size:clamp(1.5rem,1rem + 2.2vw,2.4rem);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.03em;
  line-height:1;
}

.clock-line{
  flex:1 1 auto;position:relative;height:1px;background:var(--rule);
  min-width:2rem;
}
.clock-line::before,.clock-line::after{
  content:"";position:absolute;top:50%;width:5px;height:5px;
  margin-top:-2.5px;border-radius:50%;background:var(--accent);
}
.clock-line::before{left:0}
.clock-line::after{right:0}

.clock-gap{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--surface);padding-inline:.7rem;
  font-family:var(--mono);font-size:.75rem;color:var(--muted);
  white-space:nowrap;
}

.meridian-note{
  margin-top:1.4rem;max-width:52ch;color:var(--muted);
  font-size:.9375rem;
}

/* ---------- trake sa sadržajem ---------- */

.band{padding-block:var(--band);border-bottom:1px solid var(--rule-soft)}
.band-alt{background:var(--surface);border-bottom-color:var(--rule)}

.grid{display:grid;gap:clamp(1.25rem,3vw,2rem)}

.band h2{font-size:clamp(1.35rem,1.15rem + .9vw,1.75rem)}

.band-body{max-width:60ch}

.suburbs{
  list-style:none;margin:1.6rem 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.4rem .5rem;
}
.suburbs li{
  font-family:var(--mono);font-size:.8125rem;color:var(--muted);
  border:1px solid var(--rule-soft);border-radius:2px;
  padding:.28rem .5rem;
}

.fine{font-size:.875rem;color:var(--muted)}

.link-out{
  font-family:var(--mono);font-size:.9375rem;
  color:var(--accent);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:1px;
}
.link-out:hover{border-bottom-width:2px;padding-bottom:0}

.contact-lines{
  list-style:none;margin:0 0 1.4rem;padding:0;
  display:flex;flex-direction:column;gap:.35rem;
}
.big-link{
  display:inline-block;
  font-family:var(--mono);
  font-size:clamp(1.15rem,1rem + .9vw,1.6rem);
  letter-spacing:-.03em;
  text-decoration:none;
  max-width:100%;
  border-bottom:1px solid var(--rule-strong);
  padding-bottom:.15rem;
  transition:border-color .18s ease;
}
.big-link:hover{border-color:var(--accent)}

/* ---------- podnožje ---------- */

.foot{padding-block:clamp(2.25rem,5vw,3.25rem)}
.foot-in{display:flex;flex-direction:column;gap:.35rem}
.foot-name{font-family:var(--serif);font-size:1rem;margin:0}
.foot-meta{font-size:.8125rem;color:var(--muted);margin:0;max-width:60ch}

/* ---------- prelomne tačke ---------- */

@media (min-width:56rem){
  .grid{grid-template-columns:12rem 1fr;gap:3rem}
  .band h2{padding-top:.35rem}
}

@media (max-width:26rem){
  .clocks{flex-wrap:wrap;gap:.9rem;justify-content:space-between}
  .clock-line{order:3;flex-basis:100%;min-width:100%}
}

/* prstom se teže pogađa nego mišem — telefon i mejl su glavne akcije */
@media (pointer:coarse){
  .big-link{padding-top:.3rem;padding-bottom:.4rem}
  .link-out{display:inline-block;padding-top:.6rem;padding-bottom:.35rem}
}

/* ---------- kretanje i visok kontrast ---------- */

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

@media (forced-colors:active){
  .clock-line{background:CanvasText}
  .clock-line::before,.clock-line::after{background:CanvasText}
  .btn{border-color:ButtonText}
}