/* ==========================================================================
   Чика Перо — заједнички стил за све пројекте
   Боје, типографија и компоненте преузете са дизајна „Кнегиње Љубице".
   ========================================================================== */

:root {
  --gold: #c29a62;
  --gold-dark: #a97c33;
  --bar: #2f3f32;
  --panel: #242619;
  --footer: #292b1e;
  --footer-bottom: #1d1e18;
  --grey: #eeede9;
  --ink: #1c1c1a;
  --muted: #5e5e57;
  --line: #ebe9e4;
  --container: 1260px;
  --gutter: 24px;

  /* Висина лепљивог хедера. Из ње иду и сам хедер и scroll-margin-top
     сваког циља сидра — једна вредност, па не могу да се разиђу. */
  --header-h: 106px;

  /* Ћирилица: и Manrope и Playfair Display носе српска слова (ђ ј љ њ ћ џ)
     у Google-овом подскупу „cyrillic" (U+0400–045F) — проверено у самим
     woff2 фајловима, за сваку тежину која се овде тражи. Резервни низ је
     зато састављен само од фонтова који и сами покривају ћирилицу; у њему
     нема ниједног симболског ни емоџи фонта. */
  --sans: Manrope, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --serif: "Playfair Display", "Noto Serif", Georgia, "Times New Roman", serif;
}

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

html { scroll-behavior: smooth; }

/* Хедер је sticky: без овога скок на сидро спушта наслов тачно испод
   траке. Вредност је иста као висина хедера, из --header-h. */
main[id], section[id], footer[id], div[id],
h1[id], h2[id], h3[id] { scroll-margin-top: var(--header-h); }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--gold-dark); }

:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 3px; }

h1, h2, h3 { margin: 0; }
p { margin: 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.serif { font-family: var(--serif); font-weight: 600; }

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: 600;
  color: var(--gold);
  text-transform: uppercase;
}

/* --- дугмад ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 26px;
  font-size: 14px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.btn--gold { background: var(--gold); color: #fff; }
.btn--gold:hover { background: var(--gold-dark); color: #fff; }
.btn--outline { background: transparent; border: 1px solid #cfccc2; color: var(--ink); }
.btn--outline:hover { border-color: var(--gold-dark); }

/* --- хедер -------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  transition: box-shadow 0.2s ease;
}
.header.is-scrolled { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); }

.header__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  min-height: var(--header-h);
  position: relative;
}

.logo {
  background: #2c3d2d;
  color: #e7e2d4;
  width: 158px;
  /* блок логотипа је оно што диктира висину хедера — иста вредност */
  min-height: var(--header-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 0 0 auto;
  align-self: flex-start;
}
.logo:hover { color: #fff; }
.logo span { font-size: 9px; letter-spacing: 0.14em; font-weight: 600; text-align: center; }
/* прави знак пројекта (assets/img/logo.svg) — бео цртеж за тамну подлогу */
.logo img { width: 74%; height: auto; }

.nav { display: flex; align-items: center; gap: 38px; }
.nav a { font-size: 13px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; }
/* Активна ставка: текст остаје таман (контраст исти као код осталих), а
   испод њега је линија у тамном злату — 3,73:1 на белом, изнад 3:1 колико
   тражи неописни показатељ. На главној страни поставља је site.js према
   секцији у којој је читалац; на страници јединице стоји на „Апартмани". */
.nav a[aria-current] {
  text-decoration: underline 2px var(--gold-dark);
  text-underline-offset: 7px;
}

.header__cta { margin-left: auto; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  background: #fff;
  /* без овога дугме задржава подразумевани фонт прегледача (Arial) */
  font: inherit;
  color: inherit;
  cursor: pointer;
  place-items: center;
}
.nav-toggle svg { display: block; margin: 0 auto; }

/* --- херој -------------------------------------------------------------- */

/* ЗАЈЕДНИЧКА ГЕОМЕТРИЈА — главна страна пројекта (.hero) и страница
   јединице (.unit-hero). Обе носе исти рендер units/g2/hero.jpg.

   Захтев: текст доле лево, и НЕ СМЕ да прекрије објекте. У овом рендеру
   леви објекат почиње на 27% ширине слике (--zgrada), а однос страница је
   1,97 (--odnos, 2880×1462). Рендер је зато прикачен уз ДЕСНУ ивицу, у
   природном односу, висине колика је херој — па леви објекат почиње на
       ширина_прозора − (1 − 0,27) × 1,97 × висина.
   Та тачка мора бити бар --zazor десно од краја текста (--levo + --tekst),
   одакле највећа дозвољена висина хероја:
       (100vw − --levo − --tekst − --zazor) / (1,97 × 0,73)   = --h-slobodno.
   Ако је рендер ужи од прозора, лево од њега је тамна подлога у коју се
   слика претапа. Кад се рендер замени, мењају се само --odnos и --zgrada.
   Где ни то не може да стане (главна испод 1240px, јединица испод 900px),
   текст силази испод слике — в. „херој на уским екранима". */
.hero, .unit-hero {
  --odnos: 1.97;
  --zgrada: .27;
  --zazor: 80px;
  --levo: max(var(--gutter), (100vw - var(--container)) / 2 + var(--gutter));
  --h-slobodno: calc((100vw - var(--levo) - var(--tekst) - var(--zazor)) / (var(--odnos) * (1 - var(--zgrada))));
  --h-heroja: min(51vw, 100svh - var(--header-h), 731px, var(--h-slobodno));
  /* вео: таман до краја текста, провидан пре левог објекта */
  --veo: linear-gradient(to right,
    rgba(14, 18, 12, .92) 0,
    rgba(14, 18, 12, .88) calc(var(--levo) + var(--tekst)),
    rgba(14, 18, 12, .52) calc(var(--levo) + var(--tekst) + var(--zazor) * .35),
    rgba(14, 18, 12, .18) calc(var(--levo) + var(--tekst) + var(--zazor) * .7),
    rgba(14, 18, 12, 0)   calc(var(--levo) + var(--tekst) + var(--zazor)));
}

/* Херој је флекс колона поравната на ДНО: изнад слике седи текстуални
   блок, а трака са садржајима належе тачно на доњу ивицу. min-height (а не
   height) значи да херој порасте ако текст и трака траже више. */
.hero {
  --tekst: 420px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: var(--h-heroja);
  overflow: hidden;
  background: var(--panel);
}
.hero__media { position: absolute; inset: 0; }
.hero__media img,
.unit-hero > img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: auto;
  height: 100%;
  max-width: none;
  /* лева петина рендера (ливада, небо) се претапа у тамну подлогу */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20%);
          mask-image: linear-gradient(to right, transparent 0, #000 20%);
}

/* Вео преко рендера. Лева трећина носи текст, до 60% ширине се потпуно
   изгуби. Боја је тамна варијанта зелене са сајта (#141a12), не црна.

   Зашто чак .94: рендер иза има и потпуно беле пикселе (небо). Композит
   је у sRGB простору, па при алфи a преко белог излази a*20 + (1-a)*255;
   да злато #c29a62 достигне 4.5:1 подлога мора испод ~56/255, што тражи
   алфу изнад 0.88. Мерено, не процењено. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Вео прати текст: најјачи је доле лево, где текст сада стоји, и слаби
     навише и удесно. Два прелива се множе, па се тамно скупља у доњи
     леви угао уместо да се цела слика затамни — десна страна кадра, где
     су објекти у светлу, остаје нетакнута. */
  /* Вео покрива само колону текста и гаси се пре левог објекта (в.
     --veo горе) — објекти остају у пуном светлу. */
  background: var(--veo);
}

.hero__copy {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(30px, 4.5vw, 64px);
}
.hero__copy .container { max-width: var(--container); }

/* Текстуални блок се држи у левој трећини — никад у ужурбани центар рендера. */
.hero__copy .container > * { max-width: var(--tekst); }

.hero h1 {
  font-size: clamp(28px, 2.9vw, 40px);
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #F6F4EC;
  text-shadow: 0 1px 12px rgba(12,18,11,.5);
}
.hero h1 .gold { color: var(--gold); }
.hero p { margin-top: 20px; color: #EDEAE0; text-shadow: 0 1px 10px rgba(12,18,11,.5); }
.hero .btn { margin-top: 24px; }

/* Бео текст на злату даје 2,6:1. Таман на истом злату даје 6,58:1,
   а злато остаје непромењено — што је и тражено. */
.hero .btn--gold { color: var(--ink); }
.hero .btn--gold:hover { color: #fff; }

/* --- трака са садржајима ------------------------------------------------ */

.facts {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--bar);
  color: #e6e2d3;
  display: flex;
  align-items: center;
  min-height: 115px;
  position: relative;
  z-index: 2;
}
.facts__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  padding: 14px 8px;
  text-align: center;
}
.facts__item span { font-size: 12.5px; }
.facts__sep { color: #9da793; flex: 0 0 auto; }

/* --- секције ------------------------------------------------------------ */

.section { padding: 64px 0; }
.section--tight { padding: 40px 0; }

.section__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

/* --- картице јединица --------------------------------------------------- */

/* flex уместо grid-а: непотпун последњи ред (5 картица) остаје центриран */
.units {
  --cols: 5;
  --gap: 18px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}
.units > .unit { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)); min-width: 0; }

.unit {
  border: 1px solid var(--line);
  background: #fff;
  text-align: left;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.unit:hover { border-color: var(--gold); }
.unit img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.unit__body { padding: 16px 14px 20px; display: flex; flex-direction: column; gap: 7px; }
.unit__title { font-size: 15px; font-weight: 700; }
.unit__area { font-size: 14px; font-weight: 600; }
.unit__meta { font-size: 11px; color: var(--muted); line-height: 1.5; }

/* --- картица апартмана --------------------------------------------------- */

/* Мрежа: 4 у реду на широком екрану, па 3, 2, 1. Стара .units правила
   остају за .unit на страницама јединица. */
.units:has(.kartica) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

.units__count { margin: 0 0 18px; font-size: 14px; color: var(--muted); }
.units__count strong { color: var(--ink); }

.kartica {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;                 /* иначе дете мреже гура ред у ширину */

  /* Један радијус за целу картицу, слику у њој и ознаку стања. */
  --r: 12px;
  border-radius: var(--r);

  /* Фина линија, не истицање: злато #c29a62 на 40% преко беле. */
  border: 1px solid rgba(194, 154, 98, .40);
  background: #fff;

  /* Мека сенка: ниска непрозирност, велико замућење, без помака —
     картица се одваја од скоро беле подлоге, а не лебди. */
  box-shadow: 0 0 22px rgba(22, 40, 26, .07);

  color: inherit;
  text-decoration: none;
  --dizanje: 0px;
  transform: translateY(var(--dizanje));
  transition: border-color .25s ease-out, box-shadow .25s ease-out, transform .25s ease-out;
}
/* Ховер само на доступнима: продате су <div>, не <a>, па их ово не хвата. */
@media (hover: hover) and (pointer: fine) {
  a.kartica:hover {
    --dizanje: -4px;
    border-color: var(--gold);
    box-shadow: 0 8px 26px rgba(22,40,26,.13);
  }
}
a.kartica:focus-visible {
  --dizanje: -4px;
  border-color: var(--gold);
  box-shadow: 0 8px 26px rgba(22,40,26,.13);
}
@media (prefers-reduced-motion: reduce) {
  a.kartica:hover, a.kartica:focus-visible { --dizanje: 0px; }
}

.kartica__vrh { display: flex; align-items: flex-start; gap: 12px; padding: 16px 14px 12px; }
.kartica__naslov { flex: 1 1 auto; min-width: 0; }

/* ознака је носилац картице */
.kartica__oznaka { margin: 0; font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -0.01em; }
.kartica__sprat { margin: 5px 0 0; font-size: 11px; line-height: 1.4; color: var(--muted); }
.kartica__ukupno { margin: 10px 0 0; font-size: 22px; font-weight: 700; line-height: 1; color: var(--gold-dark); }
.kartica__ukupno small { font-size: 13px; font-weight: 600; }
.kartica__ukupno--nepoznato { font-size: 12px; font-weight: 600; color: var(--muted); }

.kartica__razrada {
  margin-top: 9px;
  display: flex; flex-direction: column; gap: 3px;
  font-size: 11px; line-height: 1.5; color: var(--muted);
}
.kartica__razrada b { font-weight: 700; color: var(--ink); }

/* Слот за основу: увек 3:4, да аксонометрија касније уђе без померања
   распореда. Док је празан, јасно пише да је у припреми. */
.kartica__tlocrt {
  flex: 0 0 58px;
  aspect-ratio: 3 / 4;
  border: 1px dashed #cfc9bb;
  background: var(--grey);
  display: grid; place-items: center;
  overflow: hidden;
}
.kartica__tlocrt span {
  font-size: 8px; line-height: 1.35; letter-spacing: .06em;
  text-transform: uppercase; text-align: center; color: var(--muted);
}
.kartica__tlocrt img { width: 100%; height: 100%; object-fit: cover; }

/* Слика је увучена да добије свој оквир и сведена на 16:10 — картица
   носи податке, фотографија је потврда а не главни садржај. Исечак 16:10
   се служи као засебан фајл (units/<тип>/kartica.jpg, 640×400), да се не
   учитава рендер 896×1120 зарад траке од 160px. */
.kartica__foto,
.kartica__foto--prazno {
  width: calc(100% - 28px);
  margin: 0 14px;
  margin-top: auto;
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
  border-radius: calc(var(--r) - 4px);
}
.kartica__foto--prazno {
  display: grid; place-items: center;
  background: var(--grey); font-size: 11px; color: var(--muted);
}

.kartica__dno {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px 14px 14px;
}
.kartica__cta {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: var(--gold-dark); white-space: nowrap;
}

/* --- ознака стања -------------------------------------------------------- */

.oznaka-stanja {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 4px 9px;
  border: 1px solid currentColor; border-radius: calc(var(--r, 12px) - 5px); white-space: nowrap;
}
.oznaka-stanja--slobodan   { color: #2c6b3f; }
.oznaka-stanja--rezervisan { color: #8a5a16; }
.oznaka-stanja--prodato    { color: #6b6257; }

/* --- сплит секција „о пројекту" ----------------------------------------- */

.split { display: grid; grid-template-columns: 1fr 1fr; }
.split__panel {
  background: var(--panel);
  color: #f2efe7;
  padding: 52px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.split__panel h2 { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.24; margin-top: 18px; }
.split__panel p { margin-top: 16px; font-size: 13.5px; line-height: 1.8; color: #c9c7bb; max-width: 420px; }
.split__media img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }

.pillars { margin-top: 34px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pillars > div + div { border-left: 1px solid #3a3c2e; padding-left: 24px; }
.pillars h3 { font-size: 10.5px; letter-spacing: 0.12em; font-weight: 700; color: #e8e4d8; margin: 12px 0 8px; }
.pillars p { font-size: 10.5px; line-height: 1.7; color: #a8a698; margin: 0; }

/* --- галерија ----------------------------------------------------------- */

.gallery { background: var(--grey); padding: 38px 0 44px; }
.tabs { display: flex; justify-content: center; gap: 44px; margin-bottom: 32px; flex-wrap: wrap; }
.tab {
  min-height: 44px;
  padding: 0 22px;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.tab[aria-selected="true"] { background: var(--gold); color: #fff; }

.carousel { display: flex; align-items: center; gap: 12px; }

/* Један ред који се хоризонтално скролује — никад се не прелама у други.
   Видљиво: три на 1440, две на 768, једна испод 520. Прст и тачпед
   скролују директно, стрелице померају за тачно једну слику. */
.carousel__track {
  --vidljivo: 3;
  --razmak: 17px;
  display: flex;
  gap: var(--razmak);
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* трака скрола би мењала висину реда; померање носе стрелице и превлачење */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track img {
  flex: 0 0 auto;
  width: calc((100% - (var(--vidljivo) - 1) * var(--razmak)) / var(--vidljivo));
  max-width: none;
  aspect-ratio: 1.38 / 1;
  height: auto;
  object-fit: cover;
  scroll-snap-align: start;
}
.carousel__nav {
  width: 44px; height: 44px; flex: 0 0 auto;
  border: none; background: transparent; color: var(--gold-dark);
  font: inherit; cursor: pointer;
  display: grid; place-items: center;
}
/* Карусел је у петљи (site.js), па стрелица никад није угашена. Кад таб
   има мање слика него што стаје на екран, стрелица се крије али ЗАДРЖАВА
   своје место: иначе би се трака проширила за 112px и слике у том табу
   биле крупније него у суседном. */
.carousel__nav[hidden] { display: grid; visibility: hidden; pointer-events: none; }
.carousel__nav--prev svg { transform: scaleX(-1); }
.carousel__track:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 4px; }

/* Тачке: по једна за сваку праву слику (не за клонове). Мета 24px, тачка
   8px. На сивој подлози галерије (#eeede9): неактивна #857e6e 3,44:1,
   активна #8f6a2b 4,2:1 и за четвртину већа — обе изнад 3:1. */
.carousel__tacke { display: flex; justify-content: center; gap: 4px; margin-top: 18px; }
.carousel__tacke[hidden] { display: none; }
.carousel__tacka {
  width: 24px; height: 24px; padding: 0;
  border: none; background: transparent; cursor: pointer;
  display: grid; place-items: center;
}
.carousel__tacka::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: #857e6e;
  transition: background-color .2s ease-out, transform .2s ease-out;
}
.carousel__tacka[aria-current]::before { background: #8f6a2b; transform: scale(1.25); }
.carousel__tacka:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 0; border-radius: 50%; }

/* --- локација ----------------------------------------------------------- */

.location { display: grid; grid-template-columns: 420px 1fr 350px; gap: 48px; align-items: start; }
.location h2 { font-size: clamp(20px, 1.8vw, 25px); color: var(--gold-dark); }
.location p { font-size: 12.5px; line-height: 1.85; color: #4e4e46; margin-top: 16px; }
.distances { margin: 22px 0 0 26px; display: flex; flex-direction: column; gap: 9px; }
.distances div { display: flex; }
.distances span { font-size: 14px; font-weight: 600; }
.distances span:first-child { width: 120px; }
.micro h3 { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.25; color: var(--gold-dark); }
.micro__icons { margin-top: 26px; display: flex; gap: 40px; flex-wrap: wrap; }
.micro__icons div { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 78px; text-align: center; }
.micro__icons span { font-size: 10px; color: #4e4e46; }

/* --- контакт / футер ---------------------------------------------------- */

.contact { background: var(--footer); color: #f4f2ea; }
.contact__grid { display: grid; grid-template-columns: 330px 1fr 382px; gap: 48px; align-items: start; padding: 40px 0; }
/* варијанте распореда контакт мреже — у CSS-у, да их медија упити могу преузети */
.contact__grid--2col { grid-template-columns: 330px 1fr; }
.contact__grid--1col { grid-template-columns: 1fr; }
/* иста размера као ранији map.jpg (766 × 484), да се распоред не помери */
.contact__map iframe { display: block; width: 100%; height: auto; aspect-ratio: 766 / 484; border: 0; }
.contact h2 { font-size: clamp(21px, 2vw, 26px); line-height: 1.32; margin-top: 16px; }
.contact__lines { margin-top: 26px; display: flex; flex-direction: column; gap: 11px; }
.contact__lines div { display: flex; align-items: center; gap: 12px; }
.contact__lines strong { font-size: 14px; font-weight: 700; }
.contact__lines span { font-size: 12px; color: #c5c3b6; }

.form { display: flex; flex-direction: column; gap: 14px; }
.form__row { display: flex; gap: 16px; }
.form input, .form textarea {
  width: 100%;
  min-height: 46px;
  padding: 12px;
  background: #2c2e23;
  border: none;
  border-bottom: 1px solid #45483a;
  color: #f4f2ea;
  font-size: 13px;
  font-family: inherit;
}
.form textarea { min-height: 76px; resize: vertical; }
.form input::placeholder, .form textarea::placeholder { color: #9b9a8c; }
.form input:focus, .form textarea:focus { border-bottom-color: var(--gold); }
.form input[aria-invalid="true"], .form textarea[aria-invalid="true"] { border-bottom-color: #e08c6a; }
.form__error { font-size: 11px; color: #e8a98d; min-height: 14px; }
.form__status { font-size: 12px; color: #c5c3b6; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Колофон носи ред о ауторским правима и заслугу за дизајн — друштвених
   мрежа нема (нема ни налога иза њих). Поравнат са мрежом стране: права
   лево, заслуга десно (исти <small>); на телефону једно испод другог,
   центрирано. Кнегиње Љубице има своју мрежу у теми (kneginje-ljubice.css). */
.colophon {
  background: var(--footer-bottom);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 2px 24px;
  min-height: 49px;
}
.colophon small { font-size: 10px; color: #8c8b7e; }
.colophon__dizajn a { color: inherit; text-decoration: underline; text-decoration-color: rgba(194, 154, 98, .55); text-underline-offset: 3px; }
.colophon__dizajn a:hover, .colophon__dizajn a:focus-visible { color: var(--gold); }
@media (max-width: 767px) {
  .colophon { flex-direction: column; justify-content: center; text-align: center; padding-block: 10px; }
}

/* --- модал -------------------------------------------------------------- */

dialog.modal {
  border: none;
  padding: 0;
  max-width: 720px;
  width: calc(100% - 32px);
  background: #fff;
}
dialog.modal::backdrop { background: rgba(20, 22, 16, 0.72); }
.modal__body { padding: 24px; display: flex; flex-direction: column; gap: 10px; }

/* --- лајтбокс (галерија и основа јединице) ------------------------------
   Преко целог екрана, тамна позадина, без беле картице. Слика је у свом
   односу страна (object-fit: contain), највише 90vw x 85vh. Дугмад су
   кругови од 44px+; стрелице стоје на средини леве и десне ивице. */

.lb {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 9, 7, .92);
  opacity: 0; transition: opacity .2s ease-out;
  overscroll-behavior: contain; touch-action: pan-y;
}
.lb[hidden] { display: none; }
.lb.is-open { opacity: 1; }
.lb__stage { margin: 0; display: grid; place-items: center; }
.lb__stage img {
  display: block; width: auto; height: auto;
  max-width: 90vw; max-height: 85vh; max-height: 85dvh;
  object-fit: contain; user-select: none; -webkit-user-drag: none;
  transition: opacity .2s ease-out;
}
.lb__stage img.is-out { opacity: 0; }
.lb__btn {
  position: absolute; z-index: 2;
  display: grid; place-items: center;
  width: 56px; height: 56px; min-width: 44px; min-height: 44px; padding: 0;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(20, 22, 16, .6); color: #fff; cursor: pointer;
  transition: background-color .2s ease-out, border-color .2s ease-out;
}
.lb__btn:hover { background: rgba(194, 154, 98, .9); border-color: transparent; color: var(--ink); }
.lb__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.lb__btn[hidden] { display: none; }
.lb__prev, .lb__next { top: 50%; margin-top: -28px; }
.lb__prev { left: 16px; }
.lb__next { right: 16px; }
.lb__close { top: 16px; right: 16px; }
.lb__bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; align-items: baseline; justify-content: center; gap: 8px 18px; flex-wrap: wrap;
  padding: 14px 72px calc(14px + env(safe-area-inset-bottom));
  font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .92); text-align: center;
  pointer-events: none;
}
.lb__count { font-weight: 800; letter-spacing: .04em; color: var(--gold); }
@media (max-width: 600px) {
  .lb__btn { width: 48px; height: 48px; }
  .lb__prev, .lb__next { margin-top: -24px; }
  .lb__prev { left: 8px; } .lb__next { right: 8px; } .lb__close { top: 8px; right: 8px; }
  .lb__bar { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .lb, .lb__stage img, .lb__btn { transition: none; }
}
body.lb-open { overflow: hidden; }

/* --- страница стамбене јединице ----------------------------------------- */
/* mobile-first: основни стилови за телефон, min-width упити за веће екране.
   Само постојеће боје и токени; тамни преливи су из позадине модала. */

/* херој јединице: иста геометрија као на главној (в. „херој" горе) —
   дневни рендер уз десну ивицу, текст доле лево у колони која се гаси
   пре левог објекта, трака са површинама уз само дно. */
.unit-hero {
  --tekst: 340px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: var(--h-heroja);
  overflow: hidden;
  background: var(--panel);
  color: #fff;
}
.unit-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--veo);
  pointer-events: none;
}
/* Наслов и трака са површинама стоје једно испод другог у истом блоку уз
   доњу ивицу: трака зато не може да прекрије ни наслов ни ознаку стања. */
.unit-hero__dno { position: relative; z-index: 1; }
.unit-hero__copy { padding-top: 44px; padding-bottom: 24px; }
.unit-hero__copy .container > * { max-width: var(--tekst); }

/* Трака са површинама преко доњег дела рендера: довољно тамна да текст
   у њој прође и преко светле ливаде. */
.povrsine-traka {
  background: rgba(18, 22, 15, .72);
  border-top: 1px solid rgba(246, 244, 236, .14);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  color: #F4F1E7;
}
.povrsine-traka__unutra {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 34px;
  padding-top: 13px;
  padding-bottom: 13px;
}
.povrsine-traka__ukupno {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
}
.povrsine-traka__ukupno small { font-size: 13px; font-weight: 600; margin-left: 7px; letter-spacing: .03em; }
.povrsine-traka__ukupno--nepoznato { font-size: 15px; font-weight: 600; }
.povrsine-traka__razrada {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  font-size: 13px;
}
.povrsine-traka__razrada > div { display: flex; align-items: baseline; gap: 7px; }
.povrsine-traka__razrada dt { color: #CFCBBC; }
.povrsine-traka__razrada dd { margin: 0; font-weight: 700; }
.unit-hero h1 { font-size: clamp(28px, 2.9vw, 40px); line-height: 1.16; font-weight: 800; letter-spacing: -0.01em; margin-top: 10px; }

.breadcrumb ol { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: #e6e2d3; }
.breadcrumb li + li::before { content: "›"; margin-right: 6px; color: var(--gold); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb [aria-current="page"] { color: #fff; font-weight: 600; }

/* Спецификација стоји уз цртеж основе, као обичан списак. Исцртава се
   само кад има стварних вредности — нема поља са „у припреми". */
.spec-lista { margin: 18px 0 0; display: flex; flex-direction: column; gap: 9px; }
.spec-lista > div { display: flex; align-items: baseline; gap: 10px; font-size: 14px; }
/* 600 уместо 400: танки ћирилични потези (Ш, Ј, И, Е) на 11px се на
   Windows-у расипају у обојене ивице ClearType-а. Дебљи потез то гаси. */
.spec-lista dt {
  flex: 0 0 auto; min-width: 116px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.spec-lista dd { margin: 0; font-weight: 700; }

/* увод: пуно ваздуха, већи уводни пасус */
/* Само горњи и доњи размак: бочни остаје од .container (--gutter). Раније
   је „padding: … 0 …" брисао бочни, па је опис на телефону стајао уз саму
   ивицу екрана, а на десктопу 24px лево од остатка стране. */
.unit-intro { padding-top: clamp(56px, 8vw, 112px); padding-bottom: clamp(40px, 6vw, 80px); }
/* без сопственог ограничења ширине: пасус иде до ширине --container */
.unit-intro p { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.65; }

/* Галерија ентеријера: један ред који се хоризонтално скролује, никад се
   не прелама. Видљиво: четири на 1440, три на 768, две испод 520.
   Оквир је исти као на картицама јединица. */
.unit-gallery {
  --vidljivo: 4;
  --razmak: 14px;
  list-style: none;
  margin: 0;
  /* горњи простор прима подизање на ховеру, доњи траку скрола */
  padding: 6px 2px 8px;
  display: flex;
  gap: var(--razmak);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(194, 154, 98, .55) transparent;
}
.unit-gallery li {
  flex: 0 0 auto;
  width: calc((100% - (var(--vidljivo) - 1) * var(--razmak)) / var(--vidljivo));
  scroll-snap-align: start;
}
.unit-gallery a {
  display: block;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: var(--border-card);
  box-shadow: 0 0 22px rgba(22, 40, 26, .07);
  --dizanje: 0px;
  transform: translateY(var(--dizanje));
  transition: border-color .25s ease-out, box-shadow .25s ease-out, transform .25s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .unit-gallery a:hover { --dizanje: -4px; border-color: var(--gold); box-shadow: 0 8px 26px rgba(22, 40, 26, .13); }
}
.unit-gallery a:focus-visible { --dizanje: -4px; border-color: var(--gold); box-shadow: 0 8px 26px rgba(22, 40, 26, .13); }
@media (prefers-reduced-motion: reduce) {
  .unit-gallery a:hover, .unit-gallery a:focus-visible { --dizanje: 0px; }
}
.unit-gallery img {
  display: block;
  width: 100%;
  max-width: none;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
}

/* Основа: обична секција на светлој подлози, цртеж уз податке —
   не сопствена тамна трака преко целе ширине. */
.osnova__mreza { display: grid; gap: 22px 36px; align-items: start; }
.osnova__oznaka { font-size: 20px; font-weight: 800; line-height: 1.1; }
.osnova__sprat { margin-top: 5px; font-size: 13px; color: var(--muted); }

.unit-cta { padding: clamp(56px, 8vw, 104px) 0; }
.cta { background: var(--panel); color: #f4f2ea; padding: 32px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.cta h2 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; }
.cta p { color: #c5c3b6; font-size: 14px; }

/* претходна / следећа: трака преко целе ширине са сликом суседне јединице */
.unit-band { display: grid; grid-template-columns: 1fr; }
.unit-band a {
  position: relative;
  min-height: clamp(180px, 22vw, 300px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 28px var(--gutter);
  color: #fff;
  background: var(--bg) center 60% / cover no-repeat;
  isolation: isolate;
}
.unit-band a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(20, 22, 16, 0.85), rgba(20, 22, 16, 0.3));
  transition: background-color 0.2s ease;
}
.unit-band a:hover { color: #fff; }
.unit-band a:hover::before { background-color: rgba(20, 22, 16, 0.2); }
.unit-band a:focus-visible { outline-color: var(--gold); outline-offset: -6px; }
.unit-band a[rel="next"] { align-items: flex-end; text-align: right; }
.unit-band small { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #e6e2d3; }
.unit-band strong { font-size: clamp(24px, 2.9vw, 40px); font-weight: 800; line-height: 1.1; }

/* --- страница стамбене јединице (генерисано у apartmani/) ---------------- */

.unit-hero__stanje { margin: 14px 0 0; }
.unit-hero__stanje .oznaka-stanja { color: #F2EFE6; }

/* Слот основе. Ограничена је ВИСИНА — ни цртеж ни празан оквир не смеју
   да заузму цео екран. Празан слот држи однос 3:4; кад цртеж стигне,
   слот се прилагођава слици до исте највеће висине. */
.osnova-slot {
  width: min(228px, 54vw);
  max-width: 100%;
  aspect-ratio: 3 / 4;
  border: 1px dashed #cfc9bb;
  background: var(--grey);
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.7;
  color: var(--muted);
}
.osnova-slot--crtez {
  width: auto;
  aspect-ratio: auto;
  border: var(--border-card);
  border-radius: var(--radius-card);
  background: #fff;
  padding: 10px;
  justify-self: start;
}
.osnova-slot--crtez a { display: block; cursor: pointer; }
.osnova-slot--crtez a:focus-visible { outline-color: var(--gold-dark); outline-offset: 4px; }
.osnova-slot img { width: auto; max-width: 100%; max-height: min(420px, 52vh); object-fit: contain; }

.link-nazad {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--gold-dark);
}
.link-nazad svg { transform: scaleX(-1); }

/* --- претходна / следећа јединица --------------------------------------- */

@media (min-width: 768px) {
  /* цртеж основе стаје поред података, не изнад њих */
  .osnova__mreza { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }

  .cta { padding: 48px; flex-direction: row; align-items: center; justify-content: space-between; }

  .unit-band { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .unit-band a { padding: 40px 48px; }
}

@media (min-width: 861px) {
  .osnova-slot { width: min(252px, 26vw); }
}

/* --- индекс пројеката --------------------------------------------------- */

.projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.project-card { border: 1px solid var(--line); display: flex; flex-direction: column; }
.project-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.project-card__body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.project-card h2 { font-size: 20px; }
.project-card p { font-size: 13px; color: var(--muted); }
.project-card .btn { margin-top: auto; align-self: flex-start; }

.badge {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gold-dark);
  border: 1px solid var(--gold);
  padding: 4px 10px;
}

/* --- responsive --------------------------------------------------------- */

@media (max-width: 1100px) {
  .unit-gallery { --vidljivo: 3; }
  .units:has(.kartica) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .units { --cols: 3; }
  .location { grid-template-columns: 1fr 1fr; }
  .micro { grid-column: 1 / -1; }
  .contact__grid { grid-template-columns: 1fr 1fr; }
  .contact__map { grid-column: 1 / -1; }
  .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Мени у бургер испод 1200px: шест ставки у реду траже ~1160px (текст
   474px + пет размака + знак + дугме), па би се испод тога преломиле у
   два реда. Дугме „Закажите обилазак" остаје до 861px, лево од бургера. */
@media (max-width: 1199px) {
  .nav-toggle { display: grid; order: 2; margin-left: 0; }
  .header__cta { order: 1; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: #fff;
    border-top: 1px solid var(--line);
    padding: 8px 0;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 14px 4px; width: 100%; }
}

@media (max-width: 860px) {
  .units:has(.kartica) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .header__cta { display: none; }
  .nav-toggle { margin-left: auto; }
  .facts { flex-wrap: wrap; }
  .facts__item { flex: 0 0 33.333%; }
  .facts__sep { display: none; }
  .split { grid-template-columns: 1fr; }
  .split__panel { padding: 40px 24px; }
  .pillars { grid-template-columns: 1fr; }
  .pillars > div + div { border-left: none; padding-left: 0; border-top: 1px solid #3a3c2e; padding-top: 20px; }
  .location, .contact__grid, .projects { grid-template-columns: 1fr; }
  .carousel__track { --vidljivo: 2; }
  .form__row { flex-direction: column; }
}

/* --- херој на уским екранима --------------------------------------------- */

/* Испод 900px рендер нема мирну зону довољну за текст, а текст и трака
   заједно не стану у слику: на 390px слика је висока 331px, а сам текст
   тражи око 300px и трака још толико у три реда. Зато се све раслојава —
   слика, па текст на пуној тамној подлози, па трака као засебна трака
   преко целе ширине. Ништа се не преклапа и ништа не излази из екрана. */
/* Главна страна: текст (420px) и рендер не стају један поред другог
   испод 1240px — --h-slobodno би пао испод висине самог текста. Тада
   слика иде у пуну ширину, а текст испод ње. */
@media (max-width: 1239px) {
  .hero { min-height: 0; display: block; overflow: visible; }
  .hero__media { position: static; }
  .hero__media::after { display: none; }
  .hero__media img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 2880 / 1462;
    object-fit: cover;
    -webkit-mask-image: none;
            mask-image: none;
  }
}
/* Страница јединице: текст је ужи (340px) и нижи, па стаје до 900px. */
@media (max-width: 899px) {
  .unit-hero { display: block; min-height: 0; overflow: visible; background: none; }
  .unit-hero::after { display: none; }
  .unit-hero > img {
    position: static;
    width: 100%;
    height: clamp(300px, 85vw, 420px);
    object-fit: cover;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .unit-hero__dno { background: var(--panel); }
  .unit-hero__copy { padding-top: 26px; }
  .unit-hero__copy .container > * { max-width: none; }
  .povrsine-traka { background: rgba(0, 0, 0, .22); }
}

@media (max-width: 900px) {
  /* На 390px кутија од 390×420 пропушта само 47% ширине слике, а објекти
     траже 45% — зазор би био 1%. Нижа слика даје шири кадар: на 390px
     331px висине пушта 60% ширине, па оба крова остају с резервом. */
  .hero__media img { height: clamp(300px, 85vw, 420px); aspect-ratio: auto; }

  .hero__copy {
    background: var(--panel);
    padding: 30px 0 34px;
  }
  .hero__copy .container > * { max-width: none; }
  .hero h1,
  .hero p { text-shadow: none; }
  .hero p { color: #E6E3D7; }
}

@media (max-width: 560px) {
  /* хедер је нижи — и --header-h и scroll-margin-top иду за тим */
  :root { --header-h: 88px; }
  .units { --cols: 2; }
  .facts__item { flex: 0 0 50%; }
  .logo { width: 132px; }
}

@media (max-width: 520px) {
  .unit-gallery { --vidljivo: 2; }
  .units:has(.kartica) { grid-template-columns: 1fr; }
  .carousel__track { --vidljivo: 1; }
}

/* --- смањено кретање ---------------------------------------------------- */

/* Поштуј системску поставку „смањи анимације“. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Кнегиње Љубице — главна страна (body.kl-naslovna)

   Дотеривање једне стране, не нови дизајн: исте боје, фонтови, слике и
   текст. Све је под .kl-naslovna, па шаблони ДивчиБора и Стражаре (деле
   .split, .contact, .section__label …) и странице јединица остају какви
   су били.

   - Сви наслови секција су исти: Playfair, иста скала, у окер акценту
     --gold-dark (#a97c33, исти као m² на картицама; крупан текст: 3,19:1 на
     сивој галерији, 3,74:1 на белој, 4,11:1 на тамној плочи — АА за крупан
     текст тражи 3:1). Изнад њих, где постоји, мали наднаслов у злату.
   - Дугмад: подлога --gold-dark, текст таман (4,57:1). Иконе: --gold-dark.
   - Текст за читање није ситнији од 13px (пре тога 10–12,5px).
   - Ситан окер текст (наднаслови, мали наслови) не иде у --gold-dark: на
     светлој подлози --zlato-tekst (#8a6528: 5,29:1 на белој, 4,51:1 на
     сивој галерији), на тамној --gold (#c29a62: 5,92:1 на плочи).
   ========================================================================== */

.kl-naslovna { --zlato-tekst: #8a6528; --linija: #e2ded5; }

/* --- наслови секција ----------------------------------------------------- */

.kl-naslovna .naslov {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(27px, 3vw, 40px);
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--gold-dark);
}
.kl-naslovna .eyebrow + .naslov { margin-top: var(--space-eyebrow); }
.kl-naslovna .naslov-sekcije { margin-bottom: var(--space-title); }
.kl-naslovna .section .eyebrow,
.kl-naslovna .naslov-sekcije .eyebrow { color: var(--zlato-tekst); }

/* --- ритам секција -------------------------------------------------------
   Једна вредност за горњи и доњи размак сваке секције: --section-space
   (токен у теми Кнегиње Љубице). „О пројекту“ нема свој размак — тамна
   плоча и слика належу на суседне секције. */

.kl-naslovna #stambene-jedinice,
.kl-naslovna #lokacija,
.kl-naslovna .gallery,
.kl-naslovna .izdavanje { padding: var(--section-space) 0; }
/* беле секције једна до друге деле један размак. „Издавање и одржавање“ има
   своју (крем) позадину, па има пун размак горе и доле. */
.kl-naslovna :is(#stambene-jedinice, #lokacija) + :is(#stambene-jedinice, #lokacija) { padding-top: 0; }
.kl-naslovna .izdavanje { background: var(--color-cream); }

.kl-naslovna .units__count { margin: 0 0 var(--space-lead); font-size: 15px; }

/* --- о пројекту ----------------------------------------------------------- */

.kl-naslovna .split__panel { padding: var(--section-space) var(--projekat-bocno); }
.kl-naslovna .split__panel .naslov + p { margin-top: var(--space-title); }
.kl-naslovna .split__panel .naslov { color: var(--gold-dark); font-size: clamp(27px, 2.6vw, 36px); line-height: 1.22; }
.kl-naslovna .split__panel p { font-size: 15px; line-height: 1.75; color: #cfccc0; max-width: 460px; }
.kl-naslovna .pillars { margin-top: var(--space-lead); }
.kl-naslovna .pillars h3 { font-size: 13px; line-height: 1.35; letter-spacing: 0.02em; margin: 14px 0 6px; color: var(--gold); }
.kl-naslovna .pillars p { margin: 0; font-size: 13px; line-height: 1.6; color: #a8a698; }

/* --- галерија ------------------------------------------------------------- */

.kl-naslovna .gallery__zaglavlje {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px 32px;
  margin-bottom: var(--space-lead);
}
/* Табови као сегментна контрола: једна оквирна трака, изабрани у злату. */
.kl-naslovna .tabs {
  margin: 0;
  gap: 4px;
  padding: 4px;
  flex-wrap: nowrap;
  background: #fff;
  border: 1px solid #d8d2c4;
}
.kl-naslovna .tab {
  min-height: 40px;
  padding: 0 20px;
  letter-spacing: 0.02em;
  color: var(--muted);
  transition: background-color .2s ease-out, color .2s ease-out;
}
.kl-naslovna .tab:hover { color: var(--ink); }
.kl-naslovna .tab[aria-selected="true"],
.kl-naslovna .tab[aria-pressed="true"] { background: var(--gold-dark); color: var(--ink); }
.kl-naslovna .carousel__track img { border-radius: var(--radius-card); }

/* --- локација ------------------------------------------------------------- */

.kl-naslovna .location { row-gap: var(--space-block); }
.kl-naslovna .location p { margin-top: var(--space-title); font-size: 15px; line-height: 1.75; color: #4e4e46; }

/* Удаљености: четири податка у мрежи 2 × 2 — број крупно, град испод. */
.kl-naslovna .distances {
  margin: 30px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
}
.kl-naslovna .distances div {
  flex-direction: column;
  gap: 2px;
  padding: 14px 0 12px;
  border-top: 1px solid var(--linija);
}
.kl-naslovna .distances span:first-child {
  width: auto;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  /* Playfair подразумевано пише „старинске" цифре (110 личи на „ııo") */
  font-variant-numeric: lining-nums;
  color: var(--ink);
}
.kl-naslovna .distances span:last-child { font-size: 13px; font-weight: 600; color: var(--muted); }


.kl-naslovna .micro__icons { margin-top: var(--space-lead); gap: 20px 28px; }
.kl-naslovna .micro__icons div { width: 92px; color: var(--gold-dark); }
.kl-naslovna .micro__icons span { font-size: 13px; line-height: 1.4; color: #4e4e46; }

/* --- контакт -------------------------------------------------------------- */

.kl-naslovna .contact__grid { padding: var(--section-space) 0; }
/* колона је широка 330px: до 30px, да наслов остане у два реда */
.kl-naslovna .contact h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(27px, 2.2vw, 30px);
  line-height: 1.22;
}
.kl-naslovna .contact__lines { gap: 14px; }
.kl-naslovna .contact__lines strong { font-size: 15px; }
.kl-naslovna .contact__lines span { font-size: 14px; }
.kl-naslovna .form input,
.kl-naslovna .form textarea { font-size: 15px; }
.kl-naslovna .form__error { font-size: 12px; }
.kl-naslovna .form__status { font-size: 13px; }
/* као и на хероју: таман текст на окер подлози (4,57:1), не бео (3,74:1) */
.kl-naslovna .form .btn--gold,
.kl-naslovna .form .btn--gold:hover { color: var(--ink); }
.kl-naslovna .form .btn--gold:hover { background: var(--gold); }

/* Колофон стоји у .container-у, па је тамна трака била само ширине
   садржаја. Сенка + clip-path је развлаче до ивица прозора, а текст
   остаје поравнат са мрежом. */
.kl-naslovna .colophon {
  box-shadow: 0 0 0 100vmax var(--footer-bottom);
  clip-path: inset(0 -100vmax);
}
.kl-naslovna .colophon { padding: 12px 0; }
.kl-naslovna .colophon small { font-size: 12px; line-height: 1.5; color: #9a998b; }

/* --- мени испод 1200px ----------------------------------------------------
   Падајући мени је стајао уз саму ивицу екрана (4px) и без ивице према
   страни испод. Сада има бочни размак мреже, линије међу ставкама и сенку. */
@media (max-width: 1199px) {
  .kl-naslovna .nav {
    padding: 4px var(--gutter) 12px;
    box-shadow: 0 14px 28px rgba(22, 40, 26, .12);
  }
  .kl-naslovna .nav a { padding: 15px 0; font-size: 14px; border-bottom: 1px solid var(--line); }
  .kl-naslovna .nav a:last-child { border-bottom: 0; }
}

/* --- трака позива на телефону ------------------------------------------- */

.mobilni-cta { display: none; }

/* --- главна страна: уски екрани ----------------------------------------- */

@media (max-width: 860px) {
  /* О пројекту: тамни панел и слика од ивице до ивице, не уоквирени. */
  .kl-naslovna .projekat__okvir { padding: 0; }
  .kl-naslovna .split__media img { min-height: 0; height: auto; aspect-ratio: 4 / 3; }
  /* стубови: икона лево, наслов и опис десно — три ниска реда */
  .kl-naslovna .pillars { gap: 18px; }
  .kl-naslovna .pillars > div {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
  }
  .kl-naslovna .pillars svg { grid-row: 1 / span 2; margin-top: 2px; }
  .kl-naslovna .pillars h3 { margin: 0 0 4px; }
  .kl-naslovna .pillars > div + div { padding-top: 18px; }

  /* Поља форме од 16px: iOS иначе увећа страну при фокусу. */
  .kl-naslovna .form input,
  .kl-naslovna .form textarea { font-size: 16px; }

  /* Трака позива: хедер на овој ширини нема „Закажите обилазак".
     site.js скида hidden и додаје .is-vidljiv између хероја и контакта. */
  .kl-naslovna .mobilni-cta:not([hidden]) {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 10px;
    padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid var(--linija);
    box-shadow: 0 -6px 24px rgba(22, 40, 26, .10);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform .3s ease-out, visibility 0s linear .3s;
  }
  .kl-naslovna .mobilni-cta.is-vidljiv {
    transform: none;
    visibility: visible;
    transition: transform .3s ease-out, visibility 0s;
  }
  .kl-naslovna .mobilni-cta .btn { min-height: 48px; padding: 0 12px; white-space: nowrap; }
  .kl-naslovna .mobilni-cta .btn--outline { background: #fff; }
  .kl-naslovna .mobilni-cta .btn--gold,
  .kl-naslovna .mobilni-cta .btn--gold:hover { color: var(--ink); }
}

@media (max-width: 560px) {
  /* Трака садржаја: три у реду (два реда) уместо два (три реда). */
  .kl-naslovna .facts { min-height: 0; padding: 6px 0; }
  .kl-naslovna .facts__item { flex: 0 0 33.333%; gap: 8px; padding: 12px 4px; }
  .kl-naslovna .facts__item span { font-size: 12.5px; line-height: 1.3; }

  .kl-naslovna .micro__icons { justify-content: space-between; gap: 16px; }
  .kl-naslovna .micro__icons div { width: auto; flex: 1 1 0; }
}

@media (max-width: 520px) {
  /* Галерија: табови на пуну ширину, слика добија целу ширину колоне. */
  .kl-naslovna .gallery__zaglavlje { flex-direction: column; align-items: stretch; }
  .kl-naslovna .tab { flex: 1 1 0; padding: 0 10px; }
  .kl-naslovna .carousel { position: relative; }
  /* На мобилном нема стрелица: листа се превлачењем, а тачке показују позицију. */
  .kl-naslovna .carousel__nav { display: none; }
}