/* Тема: Кнегиње Љубице — топло дрво и злато. */
:root {
  --gold: #c29a62;
  --gold-dark: #a97c33;
  --bar: #2f3f32;
  --panel: #242619;
  --footer: #292b1e;
  --footer-bottom: #1d1e18;
  --grey: #eeede9;
}

:root { --zlato-tekst: #8a6528; }

/* --- токени дизајна: једини извор за боје, радијусе, оквире и сенке --------
   Бранд = зелена блока са знаком (assets/img/logo.svg стоји на њој). Нигде
   у теми не пише радијус као број — све иде преко ових токена. */
:root {
  --color-brand: #2c3d2d;
  --color-gold: var(--gold);
  --color-dark: var(--footer);
  --radius-control: 12px;   /* дугмад, поља, textarea, select */
  --radius-card: 16px;      /* картице, оквири слика, мапа */
  --radius-pill: 999px;     /* ознаке, статуси, табови, чипови */
  --border-card: 1px solid rgba(196, 154, 98, .35);
  --border-card-muted: 1px solid rgba(0, 0, 0, .12);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 20px rgba(0, 0, 0, .06);
  --shadow-card-hover: 0 2px 4px rgba(0, 0, 0, .06), 0 12px 32px rgba(0, 0, 0, .10);
  --control-height: 48px;
  --color-surface-muted: #f4f3ef;   /* позадина продате картице */
  --color-cream: #faf9f6;           /* крем: кутија позива на страници јединице; позадина „Издавања и одржавања“ */
  --color-stripe-a: #e6e4de;        /* траке плочице „Продато“ */
  --color-stripe-b: #eeede9;
  --color-error: #e08c6a;
  /* Ритам (задатак 20, исправка 06.10): размак секције горе и доле, и исти
     размаци у блоку наслова. Странице јединица (и пример издавања) имају
     мањи размак; главна страна свој, у .kl-naslovna испод. Две суседне
     секције исте позадине деле један размак (без удвостручавања). Ширина
     садржаја је свуда --container (1260px) − 2 × --gutter (24px) = 1212px. */
  --section-space: clamp(32px, 3vw, 40px);
  --space-eyebrow: 8px;    /* наднаслов → наслов */
  --space-title: 16px;     /* наслов → увод */
  --space-lead: 32px;      /* увод (или наслов без увода) → садржај */
  --space-block: 24px;     /* између делова у секцији (филтер → објекат, објекат → објекат) */
  --space-label: 12px;     /* наслов објекта → картице */
  --measure: 56ch;         /* најдужи ред пасуса који је само текст (~65 ћириличних слова) */
}
.kl-naslovna { --section-space: clamp(40px, 4vw, 56px); }

/* --- хедер (све ширине) ----------------------------------------------------
   Позадина = бранд, па се блок са знаком (иста боја) стапа без видљиве кутије.
   Без линије испод; сенка тек кад се страна скролује (.is-scrolled, site.js). */
.header { background: var(--color-brand); box-shadow: none; }
.header.is-scrolled { box-shadow: 0 4px 20px rgba(0, 0, 0, .15); }
.logo { background: var(--color-brand); }
/* Нижи хедер на великим екранима (106 → 84px); знак иде пропорционално
   (158 → 126px). Телефон има своје вредности испод. */
:root { --header-h: 84px; }
.logo { width: 126px; }
.nav a { color: rgba(255, 255, 255, .85); transition: color .2s ease-out; }
.nav a:hover, .nav a:focus-visible { color: var(--color-gold); }
.nav a[aria-current] { color: var(--color-gold); text-decoration-color: var(--color-gold); }
.nav-toggle {
  background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--radius-control);
  height: var(--control-height); width: var(--control-height);
}
.nav-toggle:focus-visible { outline-color: var(--color-gold); }
@media (max-width: 1199px) {
  .nav, .kl-naslovna .nav { background: var(--color-brand); border-top: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 14px 28px rgba(0, 0, 0, .18); }
  .kl-naslovna .nav a { border-bottom-color: rgba(255, 255, 255, .12); }
}
/* Телефон: нижи хедер (64px) и пропорционално мањи знак (158 → 95px). */
@media (max-width: 767px) {
  :root { --header-h: 64px; }
  .logo { width: 95px; }
  .header__inner { gap: 16px; }
  /* знак у средини хедера: три колоне (празно | знак | мени), бочне једнаке.
     Дугме „Закажите обилазак" у хедеру је ту већ скривено (≤860px), позив
     и обилазак су у траци при дну (.mobilni-cta); мени отвара дугме десно. */
  .header__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
  .logo { grid-column: 2; grid-row: 1; }
  .nav-toggle { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; }
}

/* ==========================================================================
   Кнегиње Љубице — баннер, картице свих јединица, издавање, страница
   јединице. Све је овде (тема једног пројекта), а не у site.css, па
   ДивчиБор и Стражара остају какви су били.
   ========================================================================== */

/* --- баннер (главна страна) ---------------------------------------------
   Цела слика, пуне ширине прозора, висина следи однос слике (5700 × 3072 =
   padding-top: 53,9%). ЈЕДАН елемент слике — ништа друго не црта банер: нема
   позадинске копије, нема background-image, нема ограничења висине и нема
   трака са стране. Ако је херој виши од прозора на широком екрану, то је
   у реду.

   .hero__stage  пуна ширина; контекст за позиционирање
   .hero__slika  кутија са ОДНОСОМ САМЕ СЛИКЕ (padding-top: 100% / --ar)
   .hero__plato  апсолутно, inset: 0 — слика, маркери су његова деца

   Слика испуњава .hero__plato тачно (width/height 100%, object-fit: fill),
   маркери и легенда су проценти исте кутије. --ar је однос слике (на .hero). */

:is(.kl-naslovna, .kl-izdavanje) .hero {
  position: relative;
  display: block;
  min-height: 0;
  overflow: hidden;
  background: #1a1f17;
}
:is(.kl-naslovna, .kl-izdavanje) .hero__media { position: relative; inset: auto; overflow: hidden; background: none; }
:is(.kl-naslovna, .kl-izdavanje) .hero__media::before,
:is(.kl-naslovna, .kl-izdavanje) .hero__media::after { content: none; display: none; background: none; }
:is(.kl-naslovna, .kl-izdavanje) .hero__stage { --bw: 100vw; position: relative; width: 100%; }
:is(.kl-naslovna, .kl-izdavanje) .hero__slika { position: relative; width: 100%; padding-top: calc(100% / var(--ar)); }
:is(.kl-naslovna, .kl-izdavanje) .hero__plato { position: absolute; inset: 0; }
:is(.kl-naslovna, .kl-izdavanje) .hero__plato picture { position: absolute; inset: 0; display: block; }
:is(.kl-naslovna, .kl-izdavanje) .hero__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 0 0;
  -webkit-mask-image: none;
          mask-image: none;
}

/* Текст и легенда: испод 1280px силазе испод слике (в. блок „Испод 1280px“),
   од 1280px стоје у подељеном херо-у (в. „херо: подела на две колоне“). */
:is(.kl-naslovna, .kl-izdavanje) .hero__copy { z-index: 3; }
:is(.kl-naslovna, .kl-izdavanje) .hero h1 { line-height: 1.14; color: var(--ink); text-shadow: none; }
:is(.kl-naslovna, .kl-izdavanje) .hero h1 .gold { color: var(--gold-dark); }
:is(.kl-naslovna, .kl-izdavanje) .hero__copy p { margin-top: var(--space-title); line-height: 1.55; color: #25251f; text-shadow: none; }
:is(.kl-naslovna, .kl-izdavanje) .hero__akcije { display: none; }

.facts__ikona { width: auto; height: 30px; }

/* маркери јединица на банеру: пилула са ознаком (Г1 … С3). Висина је
   --m; ширина расте са текстом, а најмање је 1,3 × висина. Координате
   (bannerX / bannerY) су средиште маркера, па ширина не помера положај.
   Величина прати ширину саме слике (.hero__plato је container, cqw):
   Објекат 1 (десни) = 2,2% ширине слике (банер 1360px на 1920 → 30px),
   највише 30px, најмање 16px (мање од тога ознака није читљива). Објекат 2
   (леви) је на рендеру мањи, па су његови маркери 20% мањи (клијент 06.10;
   ознаке објеката исправљене 12.10.2026: Објекат 1 = десни). */
:is(.kl-naslovna, .kl-izdavanje) .hero__plato { container-type: inline-size; }
:is(.kl-naslovna, .kl-izdavanje) .hero__markeri { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 3; }
.hero__markeri { --m2: clamp(16px, 2.2cqw, 30px); --m1: calc(var(--m2) * .8); }
.hero__markeri li { position: absolute; transform: translate(-50%, -50%); }
.marker {
  --m: var(--m2, 30px);
  display: grid; place-items: center;
  min-width: calc(var(--m) * 1.3); height: var(--m); padding: 0 calc(var(--m) * .2);
  border-radius: var(--radius-pill);
  font: 800 max(9px, calc(var(--m) * .43))/1 var(--sans);
  white-space: nowrap;
  text-decoration: none;
}
.hero__markeri li[data-objekat="2"] .marker { --m: var(--m1); }
/* додир: видљива пилула може бити мања, површина за додир је најмање
   24 × 24px (невидљиво проширење, центрирано) */
.marker--slobodan { position: relative; }
.marker--slobodan::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: max(100%, 24px); height: max(100%, 24px); transform: translate(-50%, -50%);
}
/* Натписи објеката на банеру: без плочице, исти мали верзал као
   „ОБЈЕКАТ 1“ у „Положају у објекту“, бели са меком сенком. (left, top) је
   врх предњег забата (bannerObjekti): натпис стоји центриран изнад њега, а
   танка линија од 1px силази до самог врха. На телефону мањи, без линије. */
:is(.kl-naslovna, .kl-izdavanje) .hero__objekti { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero__objekat {
  position: absolute; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center;
  line-height: 1.3; white-space: nowrap; color: #fff;
  text-shadow: 0 1px 2px rgba(12, 18, 11, .6), 0 1px 12px rgba(12, 18, 11, .5);
}
.hero__objekat::after {
  content: ""; width: 1px; height: 14px; margin-top: 4px;
  background: #fff; box-shadow: 0 0 2px rgba(12, 18, 11, .6);
}
.marker--slobodan {
  background: var(--gold-dark); color: var(--ink);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 2px 10px rgba(0, 0, 0, .45);
  transition: background-color .2s ease-out, transform .2s ease-out;
}
.marker--slobodan:hover, .marker--slobodan:focus-visible { background: #fff; color: var(--ink); transform: scale(1.12); }
.marker--slobodan:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* Продато: један изглед за све јединице. Попуна је непровидна (--panel):
   са провидном је С2 у левом објекту, који лежи на светлом стаклу, изгледао сиво. */
.marker--prodato, .marker--zauzeto {
  background: var(--panel); color: #fff;
  border: 1.5px solid #fff;
  cursor: default; pointer-events: none;
}
/* издавање: јединица ван програма — пригушена, испрекидана контура, да се
   разликује од „заузето" */
.marker--van {
  background: rgba(20, 26, 18, .55); color: rgba(255, 255, 255, .85);
  border: 1.5px dashed rgba(255, 255, 255, .85);
  cursor: default; pointer-events: none;
}
.hero__legenda {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  padding: 10px 16px; border-radius: var(--radius-pill);
  font-size: 13px;
}
.hero__legenda { background: rgba(20, 26, 18, .84); color: #F1EEE4; }
.hero__legenda[hidden] { display: none; }
.hero__legenda-stavka { display: inline-flex; align-items: center; gap: 8px; }
.hero__legenda-broj { font-weight: 700; color: #fff; }
.marker-uzorak { display: inline-block; width: 16px; height: 16px; border-radius: 50%; }
.marker-uzorak--slobodan { background: var(--gold-dark); }
.marker-uzorak--prodato { border: 1.5px solid #fff; background: var(--panel); }
.marker-uzorak--van { border: 1.5px dashed #fff; background: rgba(20, 26, 18, .55); }

/* Испод 1280px текст силази испод слике, на пуну тамну подлогу; слика је и
   даље цела. */
@media (max-width: 1279px) {
  :is(.kl-naslovna, .kl-izdavanje) .hero { background: var(--panel); }
  :is(.kl-naslovna, .kl-izdavanje) .hero__media { background: var(--panel); }
  :is(.kl-naslovna, .kl-izdavanje) .hero__copy { position: static; width: auto; background: var(--panel); padding: 28px var(--gutter) 28px; }
  :is(.kl-naslovna, .kl-izdavanje) .hero__copy .hero__tekst { max-width: var(--container); margin: 0 auto; }
  :is(.kl-naslovna, .kl-izdavanje) .hero h1 { font-size: clamp(26px, 5.4vw, 40px); color: #F6F4EC; text-shadow: none; }
  :is(.kl-naslovna, .kl-izdavanje) .hero h1 .gold { color: var(--gold-dark); }
  :is(.kl-naslovna, .kl-izdavanje) .hero__copy p { font-size: 16px; color: #E6E3D7; text-shadow: none; }
  .hero__legenda { border-radius: 0; justify-content: center; padding: 12px var(--gutter); background: var(--panel); }
}
/* Телефон: прозор око слике показује 82% ширине (од 16% до 98%) — обе
   зграде остају целе (леви зид почиње на ~22%, бочни зид десне се завршава
   на ~96%; банер од 08.10), само
   се реже небо и ивице, па су маркери већи у односу на зграду. Маркери су и
   даље у процентима саме слике (.hero__plato је само већи и померен). */
@media (max-width: 620px) {
  :is(.kl-naslovna, .kl-izdavanje) .hero__slika { overflow: hidden; padding-top: 62.5%; }
  /* суседни маркери у истом спрату (С1 и Г3, Г1 и Г2) су на ~30px један
     од другог (390px); величина је у правилу .marker горе */
  .marker--prodato, .marker--zauzeto, .marker--van { border-width: 1px; }
  :is(.kl-naslovna, .kl-izdavanje) .hero__objekat { font-size: clamp(9px, 2.6vw, 11px); transform: translate(-50%, calc(-100% - 3px)); }
  :is(.kl-naslovna, .kl-izdavanje) .hero__objekat::after { content: none; }
  :is(.kl-naslovna, .kl-izdavanje) .hero__plato {
    inset: auto;
    left: -19.5%;
    bottom: 0;
    width: 122%;
    height: 0;
    padding-top: calc(122% / var(--ar));
  }
}

/* --- картице свих 12 јединица ------------------------------------------- */

/* Филтер изнад мреже („Све (n)“ / „На продају (n)“): иста сегментна
   контрола као табови галерије, дугмад са aria-pressed. */
.kl-naslovna .filter-jedinica { display: inline-flex; margin: 0 0 var(--space-block); }
.filter-jedinica[hidden] { display: none; }
.kl-naslovna .filter-jedinica .tab { white-space: nowrap; }
/* телефон: преко целе ширине, као табови галерије */
@media (max-width: 520px) { .kl-naslovna .filter-jedinica:not([hidden]) { display: flex; } }

/* Групе по објекту: мали наслов („Објекат 1“) па мрежа картица тог
   објекта. Типографија као натпис објекта у „Положају у објекту“. */
.units-grupa + .units-grupa { margin-top: var(--space-block); }
.units-grupa__naslov { margin: 0 0 var(--space-label); color: var(--zlato-tekst); }
.units-grupa__naslov, .polozaj__objekat, .hero__objekat { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.kartica__tlocrt { border: 0; border-radius: var(--img-radius); background: var(--grey); }
.kartica__tlocrt img { object-fit: cover; }

/* Све картице: исти оквир, радијус и сенка. Слике унутра — 10px. */
.kartica {
  --img-radius: 10px;
  border: var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.kartica__foto, .kartica__foto--prazno, .kartica__tlocrt, .kartica__tlocrt img { border-radius: var(--img-radius); }
.oznaka-stanja { border-radius: var(--radius-pill); }
@media (hover: hover) and (pointer: fine) {
  a.kartica:hover { --dizanje: -2px; border: var(--border-card); box-shadow: var(--shadow-card-hover); }
}
a.kartica:focus-visible { --dizanje: -2px; border: var(--border-card); box-shadow: var(--shadow-card-hover); }

/* Продата: пригушен оквир, остаје црно-бела, без ховера. */
.kartica--prodato {
  cursor: default;
  background: var(--color-surface-muted);
  border: var(--border-card-muted);
  box-shadow: var(--shadow-card);
}
.kartica--prodato .kartica__foto,
.kartica--prodato .kartica__tlocrt img { filter: grayscale(1); opacity: .55; }
.kartica--prodato .kartica__oznaka,
.kartica--prodato .kartica__ukupno { color: #6b6257; }
.kartica--prodato .oznaka-stanja { font-weight: 800; border-width: 2px; }

/* Празне јединице (без ознаке): иста структура и висина као остале картице;
   слика је неутрални блок са дијагоналним тракама и малом ознаком. */
.kartica--prazna { pointer-events: none; cursor: default; }
.kartica--prazna .kartica__tlocrt { visibility: hidden; border: 0; }
.kartica--prazna .kartica__foto--prazno {
  position: relative; display: grid; place-items: center;
  background: repeating-linear-gradient(135deg, var(--color-stripe-a) 0 10px, var(--color-stripe-b) 10px 20px);
  color: #6b6257; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.kartica--prazna .kartica__foto--prazno span {
  padding: 4px 12px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .85);
}

/* --- издавање и одржавање ------------------------------------------------
   Светла подлога стране, иста ширина као остале секције. Лево текст, десно
   три услуге — пригушене, док програм није активан. */

.izdavanje__okvir { display: grid; gap: 36px 64px; align-items: start; }
.izdavanje__naslov { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.izdavanje .badge { font-family: var(--sans); font-size: 11px; letter-spacing: .14em; color: var(--zlato-tekst); border-color: var(--gold-dark); border-radius: var(--radius-pill); padding: 4px 12px; }
.izdavanje .badge[hidden] { display: none; }
.izdavanje__tekst { margin-top: var(--space-title); max-width: var(--measure); font-size: 16px; line-height: 1.7; color: #4e4e46; }
.izdavanje__dugme {
  margin-top: 24px;
  height: var(--control-height);
  background: transparent; color: #6f6f68;
  border: 1px solid #b4b2aa;
  cursor: not-allowed;
}
.izdavanje__dugme:hover { background: transparent; color: #6f6f68; }
/* ред дугмади: исти горњи размак као раније само дугме; поред њега site.js
   додаје линк на пример издавања (док је "rentalPreview" true) */
.izdavanje__akcije { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: var(--space-lead); }
.izdavanje__akcije .izdavanje__dugme { margin-top: 0; }
.izdavanje__akcije[hidden] { display: none; }
/* телефон: натпис дугмета за пример се ломи у два реда, па добија горњи
   и доњи унутрашњи размак и центриран текст (постојеће дугме се не мења) */
@media (max-width: 560px) {
  .izdavanje__primer { text-align: center; padding-block: calc(var(--gutter) / 3); }
}
/* ред за контакт испод дугмади; линк као текстуално дугме сајта (.dugme-tekst):
   ситан окер текст (--zlato-tekst, АА на крем подлози), подвучен */
.izdavanje__kontakt { margin-top: var(--space-block); font-size: 15px; line-height: 1.6; color: #4e4e46; }
.izdavanje__kontakt a { font-weight: 700; color: var(--zlato-tekst); text-decoration: underline; text-underline-offset: 3px; }
.izdavanje__kontakt a:hover, .izdavanje__kontakt a:focus-visible { color: var(--ink); }
.izdavanje__usluge { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; color: #6f6f68; }
.izdavanje__usluge[hidden] { display: none; }
/* секција је крем (.kl-naslovna .izdavanje), па су картице услуга беле */
.izdavanje__usluge li { padding: 14px 18px; border: var(--border-card-muted); border-radius: var(--radius-card); background: #fff; }
.izdavanje__usluge h3 { font-size: 15px; font-weight: 700; color: #6f6f68; }
.izdavanje__usluge p { margin-top: 4px; font-size: 14px; line-height: 1.6; color: #6f6f68; }

/* Доступност за издавање на почетку секције: сажета трака без слике (банер
   са маркерима је заглавље стране издавања). Тамна плоча као легенда
   банера, па чипови имају исте боје као маркери (класе marker--slobodan /
   --zauzeto / --van); .marker--cip их само повећава за додир (44px).
   Објекти: на телефону један испод другог, као картице за продају (1 па
   2); од 768px један поред другог, Објекат 2 лево као на слици. */
.izdavanje__dostupnost { margin-bottom: calc(var(--space-block) * 2); }
.izdavanje__dostupnost[hidden] { display: none; }
.dostupnost-traka {
  display: grid; gap: 18px;
  padding: 20px clamp(16px, 3vw, 32px);
  border-radius: var(--radius-card); background: var(--panel); color: #F1EEE4;
  box-shadow: var(--shadow-card);
}
.dostupnost-traka p { margin: 0; }
.dostupnost-traka__vrh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.dostupnost-traka__broj { font-size: 17px; font-weight: 700; color: #fff; }
.dostupnost-traka__napomena { font-size: 15px; color: #D8D4C6; }
.dostupnost-traka__napomena[hidden] { display: none; }
.dostupnost-traka__objekti { display: flex; flex-direction: column; gap: 14px; }
.dostupnost-traka .dostupnost-traka__naslov {
  margin-bottom: 8px; color: var(--gold-dark);
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.dostupnost-traka__cipovi { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.dostupnost-traka__cipovi li { flex: 0 1 56px; min-width: 44px; }
.marker--cip { --m: 44px; width: 100%; min-width: 0; padding: 0; font-size: 15px; }
.marker--cip.marker--slobodan { box-shadow: none; }
.marker--cip.marker--slobodan:hover, .marker--cip.marker--slobodan:focus-visible { transform: none; }
.dostupnost-traka__dno { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.dostupnost-traka__legenda { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; }
.dostupnost-traka .btn--outline { color: #fff; border-color: rgba(255, 255, 255, .7); }
.dostupnost-traka .btn--outline:hover { background: #fff; color: var(--ink); }
@media (min-width: 768px) {
  .dostupnost-traka__objekti { flex-direction: row-reverse; justify-content: flex-end; gap: 48px; }
}
@media (max-width: 560px) {
  .dostupnost-traka__link { width: 100%; text-align: center; }
}
/* две колоне само кад се виде картице услуга ("rentalDetails"); иначе једна,
   поравната уз садржај осталих секција */
@media (min-width: 900px) {
  .izdavanje__okvir:has(> .izdavanje__usluge:not([hidden])) { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}
/* Сведена секција ("rentalDetails": false, једна колона): све центрирано —
   наднаслов, наслов са „УСКОРО" (у истом реду, по средини висине; на уском
   екрану ознака прелази испод наслова, такође по средини), пасус до
   --measure и ред за контакт (клијент 29.10). */
.izdavanje__okvir:has(> .izdavanje__usluge[hidden]) .izdavanje__glavno { text-align: center; }
.izdavanje__okvir:has(> .izdavanje__usluge[hidden]) .izdavanje__naslov { justify-content: center; }
.izdavanje__okvir:has(> .izdavanje__usluge[hidden]) .izdavanje__tekst { margin-inline: auto; }
.izdavanje__okvir:has(> .izdavanje__usluge[hidden]) .izdavanje__akcije { justify-content: center; }

/* --- пример издавања (izdavanje-pregled/, rentalPreview) ------------------
   Распоред као код великих платформи за смештај, а изглед овог сајта: само
   постојећи токени (боје, радијуси, оквири, сенке, --gutter,
   --control-height). Списак: тамна трака са насловом, претрага (долазак,
   одлазак, гости) која належе на њу, чипови по објекту, водоравне картице.
   Шаблон: мозаик, па две колоне — лево подаци, календар и правила, десно
   лепљива кутија за упит; на телефону уместо кутије трака на дну. Поља
   која још не постоје су [заграде], пригушено (.primer-polje). Елементи
   који сами постављају display добијају изричито [hidden]. */
/* напомена на врху примера: трака одмах испод хедера */
.primer-napomena { background: var(--color-surface-muted); border-bottom: var(--border-card); }
.primer-napomena p {
  display: flex; align-items: center; gap: 10px; margin: 0;
  padding: calc(var(--gutter) / 2) 0; font-size: 15px; font-weight: 700; color: var(--ink);
}
.primer-napomena svg { flex: none; color: var(--gold-dark); }
/* поља за издавање која још не постоје: [заграде], пригушено */
.primer-polje { color: var(--muted); font-style: italic; }

/* календар: један или два месеца (site.js), дани су дугмад; заузети дани
   у тракама као плочица „Продато“, изабрани у окер акценту */
.kalendar { position: relative; }
.kalendar__strelice {
  position: absolute; top: 0; left: 0; right: 0; height: var(--control-height);
  display: flex; align-items: center; justify-content: space-between; pointer-events: none;
}
.kalendar__strelice .carousel__nav { pointer-events: auto; }
.kalendar .carousel__nav:disabled { visibility: hidden; }
.kalendar__meseci { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: calc(var(--gutter) * 1.5); }
.kalendar__odabrano { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.termini__legenda { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--muted); }
.termini__legenda li { display: inline-flex; align-items: center; gap: 8px; }
.termini__uzorak { display: inline-block; width: 16px; height: 16px; border-radius: 4px; }
.termini__naziv {
  display: flex; align-items: center; justify-content: center; min-height: var(--control-height);
  margin: 0 0 calc(var(--gutter) / 3); font-size: 16px; font-weight: 700;
}
.termini__tabela { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: center; }
.termini__tabela th { padding: 0 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.termini__dan {
  display: grid; place-items: center; width: 100%; height: var(--control-height); padding: 0;
  border: 0; border-radius: var(--radius-control); background: none;
  font: inherit; font-size: 15px; color: var(--ink); cursor: pointer;
}
.termini__dan:hover:not(:disabled) { background: var(--grey); }
.termini__dan:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: -2px; }
.termini__dan:disabled { color: var(--muted); cursor: default; }
.termini__dan--zauzeto { background: repeating-linear-gradient(135deg, var(--color-stripe-a) 0 10px, var(--color-stripe-b) 10px 20px); text-decoration: line-through; }
.termini__dan--opseg { background: var(--grey); border-radius: 0; }
.termini__dan--kraj { background: var(--gold-dark); color: var(--ink); font-weight: 700; text-decoration: none; }

/* текстуално дугме („Обриши датуме“) */
.dugme-tekst {
  padding: calc(var(--gutter) / 3) 0; border: 0; background: none;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--zlato-tekst);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.dugme-tekst:hover { color: var(--ink); }

/* бројач гостију: − n + */
.brojac { display: inline-flex; align-items: center; gap: calc(var(--gutter) / 2); }
.brojac__dugme {
  display: grid; place-items: center; flex: none;
  width: calc(var(--control-height) * .75); height: calc(var(--control-height) * .75); padding: 0;
  border: var(--border-card-muted); border-radius: var(--radius-pill); background: #fff;
  font: inherit; font-size: 18px; line-height: 1; color: var(--ink); cursor: pointer;
}
.brojac__dugme:hover:not(:disabled) { border-color: var(--gold-dark); }
.brojac__dugme:disabled { color: var(--muted); cursor: default; opacity: .5; }
.brojac__vrednost { min-width: 2ch; text-align: center; font-size: 16px; font-weight: 700; color: var(--ink); }

/* слободно / заузето за изабране датуме: исте боје као ознаке стања,
   али реченица, не версал */
.dostupnost {
  display: inline-flex; align-items: center; gap: calc(var(--gutter) / 4);
  padding: calc(var(--gutter) / 6) calc(var(--gutter) / 2);
  font-size: 13px; letter-spacing: .01em; text-transform: none; white-space: normal;
}
.dostupnost svg { flex: none; }
.dostupnost[hidden] { display: none; }

/* цена: „[цена по ноћи] / ноћ“ */
.cena-noc { margin: 0; font-size: 15px; color: var(--muted); white-space: nowrap; }
.cena-noc .primer-polje { font-size: clamp(18px, 1.6vw, 21px); font-weight: 800; }

/* кључне чињенице са иконама (гости, лежајеви, површина, тераса) */
.cinjenice { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: calc(var(--gutter) / 3) var(--gutter); font-size: 15px; color: var(--ink); }
.cinjenice li { display: inline-flex; align-items: center; gap: calc(var(--gutter) / 3); }
.cinjenice svg { flex: none; color: var(--gold-dark); }
/* површина је споредан податак */
.cinjenice .cinjenice__sporedno { font-size: 14px; color: var(--muted); }
.cinjenice .cinjenice__sporedno svg { color: var(--muted); }

/* --- списак смештаја --- */
/* Заглавље: херо главне стране у издавању (правила :is(.kl-naslovna,
   .kl-izdavanje) .hero… горе). Разлике: путања изнад наслова, легенда са
   напоменом, а претрага не належе на банер — стоји испод њега. */
.hero--izdavanje { scroll-margin-top: var(--header-h); }
.hero--izdavanje .breadcrumb ol { margin-bottom: 12px; }
.hero--izdavanje .hero__legenda-napomena { color: #D8D4C6; }
.hero--izdavanje + .container .pretraga { margin-top: var(--gutter); }
@media (min-width: 1280px) {
  .hero--izdavanje .breadcrumb ol { color: var(--muted); }
  .hero--izdavanje .breadcrumb a:hover { color: var(--ink); }
  .hero--izdavanje .breadcrumb [aria-current="page"] { color: var(--ink); }
}

.pretraga {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: calc(var(--control-height) * -1);
  background: #fff; border: var(--border-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card-hover);
}
.pretraga__polje {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; align-items: center;
  column-gap: calc(var(--gutter) / 2);
  min-height: calc(var(--control-height) + var(--gutter) / 2);
  padding: calc(var(--gutter) / 2) var(--gutter);
  border: 0; border-radius: 0; background: none;
  font: inherit; color: var(--ink); text-align: left;
}
.pretraga__polje:first-child { border-radius: var(--radius-card) 0 0 var(--radius-card); }
.pretraga__polje + .pretraga__polje { border-left: var(--border-card-muted); }
.pretraga__polje > svg { grid-row: 1 / 3; color: var(--gold-dark); }
button.pretraga__polje { cursor: pointer; transition: background-color .2s ease-out; }
button.pretraga__polje:hover, button.pretraga__polje[aria-expanded="true"] { background: var(--color-surface-muted); }
.pretraga__polje:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: -2px; }
.pretraga__natpis { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pretraga__vrednost { overflow: hidden; font-size: 16px; font-weight: 700; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.pretraga__vrednost--prazno { font-weight: 500; color: var(--muted); }
.pretraga__gosti .brojac { grid-column: 2; justify-self: start; }
.pretraga__kalendar {
  position: absolute; top: calc(100% + var(--gutter) / 3); left: 0; z-index: 5;
  width: min(100%, 760px); padding: var(--gutter);
  background: #fff; border: var(--border-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card-hover);
}
.pretraga__kalendar[hidden] { display: none; }
.pretraga__kalendar-dno {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(var(--gutter) / 2);
  margin-top: calc(var(--gutter) / 2); padding-top: calc(var(--gutter) / 2); border-top: var(--border-card-muted);
}

.smestaji { padding-top: calc(var(--gutter) * 1.5); }
.smestaji__alati {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: calc(var(--gutter) / 2) var(--gutter); margin-bottom: var(--gutter);
}
.cipovi { display: flex; flex-wrap: wrap; gap: calc(var(--gutter) / 3); }
.cip {
  min-height: calc(var(--control-height) - var(--gutter) / 3); padding: 0 calc(var(--gutter) * .75);
  border: var(--border-card-muted); border-radius: var(--radius-pill); background: #fff;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--muted); cursor: pointer;
  transition: background-color .2s ease-out, border-color .2s ease-out, color .2s ease-out;
}
.cip:hover { border-color: var(--gold-dark); color: var(--ink); }
.cip[aria-pressed="true"] { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--ink); }
.cip:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 2px; }
.smestaji__broj { margin: 0; font-size: 15px; color: var(--muted); }
.smestaji__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gutter); }

/* картица: фотографија ~40 %, средина (ознака, објекат, доступност,
   чињенице, садржаји), десно цена и дугме */
.smestaj-kartica {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3.5fr) minmax(0, 2.5fr);
  gap: var(--gutter); padding: calc(var(--gutter) / 2);
  background: #fff; border: var(--border-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  transition: box-shadow 200ms ease;
}
.smestaj-kartica__foto { display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--radius-control); background: var(--grey); }
.smestaj-kartica__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease-out; }
@media (hover: hover) and (pointer: fine) {
  .smestaj-kartica:hover { box-shadow: var(--shadow-card-hover); }
  .smestaj-kartica:hover .smestaj-kartica__foto img { transform: scale(1.03); }
}
.smestaj-kartica__telo { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--gutter) / 2); min-width: 0; padding: calc(var(--gutter) / 2) 0; }
.smestaj-kartica__naslov { font-family: var(--serif); font-size: clamp(22px, 2vw, 26px); font-weight: 600; line-height: 1.2; color: var(--gold-dark); }
.smestaj-kartica__naslov a:hover { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.smestaj-kartica__naslov a:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 3px; }
.smestaj-kartica__mesto { margin-top: calc(var(--gutter) / -3); font-size: 14px; font-weight: 600; color: var(--muted); }
.sadrzaji-mali { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--gutter) / 3); margin: 0; font-size: 14px; }
.sadrzaji-mali__ikone { display: inline-flex; gap: calc(var(--gutter) / 4); color: var(--muted); }
.smestaj-kartica__cena {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; gap: calc(var(--gutter) / 2);
  padding: calc(var(--gutter) / 2) calc(var(--gutter) / 2) calc(var(--gutter) / 2) var(--gutter);
  border-left: var(--border-card-muted); text-align: right;
}
.smestaj-kartica__cena .btn { align-self: stretch; padding: 0 calc(var(--gutter) / 2); }
/* таблет: фотографија лево преко два реда, цена и дугме испод средине */
@media (max-width: 1099px) {
  .smestaj-kartica { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--gutter); row-gap: 0; }
  .smestaj-kartica__foto { grid-row: 1 / 3; aspect-ratio: auto; min-height: 100%; }
  .smestaj-kartica__cena {
    grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between;
    padding: calc(var(--gutter) / 2) 0 0; border-left: 0; border-top: var(--border-card-muted); text-align: left;
  }
  .smestaj-kartica__cena .btn { align-self: auto; padding: 0 var(--gutter); }
}
/* телефон: фотографија горе, цена и дугме на дну */
@media (max-width: 600px) {
  .pretraga { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* без икона у пољима, да „Изаберите датум“ стане у пола ширине */
  .pretraga__polje { grid-template-columns: minmax(0, 1fr); padding: calc(var(--gutter) / 2); }
  .pretraga__polje > svg { display: none; }
  .pretraga__gosti { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; border-top: var(--border-card-muted); }
  .pretraga__polje + .pretraga__gosti { border-left: 0; }
  .pretraga__polje:first-child { border-radius: var(--radius-card) 0 0 0; }
  .pretraga__gosti .brojac { grid-column: 2; }
  .pretraga__kalendar { padding: calc(var(--gutter) / 2); }
  .smestaj-kartica { grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--gutter) / 2); }
  .smestaj-kartica__foto { grid-row: auto; aspect-ratio: 16 / 10; min-height: 0; }
  .smestaj-kartica__telo { padding: 0 calc(var(--gutter) / 3); }
  .smestaj-kartica__cena { grid-column: auto; padding: calc(var(--gutter) / 2) calc(var(--gutter) / 3) calc(var(--gutter) / 3); }
  .smestaj-kartica__cena .btn { flex: 1 1 auto; }
}

/* --- шаблон смештаја --- */
.smestaj-nazad { padding-top: calc(var(--gutter) / 2); }
.smestaj-nazad a {
  display: inline-flex; align-items: center; gap: calc(var(--gutter) / 3);
  padding: calc(var(--gutter) / 3) 0; font-size: 14px; font-weight: 700; color: var(--ink);
}
.smestaj-nazad a:hover { color: var(--zlato-tekst); }
.smestaj-nazad svg { transform: scaleX(-1); color: var(--gold-dark); }
.smestaj-nazad + .unit-galerija-sekcija { padding-top: 0; }

.smestaj { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: calc(var(--gutter) * 1.5); padding-bottom: var(--section-space); }
.smestaj__naslov { font-family: var(--serif); font-size: clamp(28px, 3vw, 40px); font-weight: 600; line-height: 1.18; color: var(--gold-dark); }
.smestaj__mesto { display: flex; align-items: center; gap: calc(var(--gutter) / 3); margin-top: calc(var(--gutter) / 3); font-size: 15px; font-weight: 600; color: var(--muted); }
.smestaj__mesto svg { flex: none; color: var(--gold-dark); }
.cinjenice--velike { margin-top: var(--gutter); padding: calc(var(--gutter) * .75) 0; border-top: var(--border-card-muted); border-bottom: var(--border-card-muted); font-size: 16px; gap: calc(var(--gutter) / 2) calc(var(--gutter) * 1.25); }
.smestaj__opis { margin-top: var(--gutter); font-size: 16px; line-height: 1.7; }
.smestaj__blok { margin-top: calc(var(--gutter) * 1.5); padding-top: calc(var(--gutter) * 1.5); border-top: var(--border-card-muted); }
.sadrzaji { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter) calc(var(--gutter) / 2); }
.sadrzaji li { display: flex; align-items: center; gap: calc(var(--gutter) / 2); font-size: 15px; }
.sadrzaji svg { flex: none; color: var(--muted); }
.smestaj__termini-vrh { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: calc(var(--gutter) / 2) var(--gutter); margin-bottom: calc(var(--gutter) / 2); }
.smestaj__termini-vrh .section__label { margin-bottom: 0; }
.smestaj__odabrano { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(var(--gutter) / 2); margin-top: calc(var(--gutter) / 2); }
.smestaj__odabrano .dugme-tekst[hidden] { display: none; }
.pravila { width: 100%; border-collapse: collapse; }
.pravila th, .pravila td { padding: calc(var(--gutter) / 2) 0; border-bottom: var(--border-card-muted); text-align: left; vertical-align: top; }
.pravila tr:first-child th, .pravila tr:first-child td { border-top: var(--border-card-muted); }
.pravila th { width: 40%; padding-right: var(--gutter); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pravila td { font-size: 15px; }
.smestaj__dodatno .contact__map { margin-top: calc(var(--gutter) / 2); }

/* кутија за упит: на десктопу лепљива десна колона, на телефону блок
   одмах испод календара */
.smestaj__strana { margin-top: calc(var(--gutter) * 1.5); }
.rezervacija {
  display: grid; gap: calc(var(--gutter) / 2); padding: var(--gutter);
  background: #fff; border: var(--border-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card-hover);
}
.rezervacija .cena-noc { margin-bottom: calc(var(--gutter) / 6); }
.rezervacija__datumi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: var(--border-card-muted); border-radius: var(--radius-control); }
.rezervacija__polje {
  display: grid; align-content: center; gap: calc(var(--gutter) / 12);
  min-height: calc(var(--control-height) + var(--gutter) / 2); padding: calc(var(--gutter) / 3) calc(var(--gutter) / 2);
  border: 0; border-radius: var(--radius-control); background: none; font: inherit; color: var(--ink); text-align: left;
}
button.rezervacija__polje { cursor: pointer; }
button.rezervacija__polje:hover { background: var(--color-surface-muted); }
.rezervacija__polje:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: -2px; }
.rezervacija__datumi .rezervacija__polje + .rezervacija__polje { border-left: var(--border-card-muted); border-radius: 0 var(--radius-control) var(--radius-control) 0; }
.rezervacija__gosti { display: flex; align-items: center; justify-content: space-between; border: var(--border-card-muted); }
.rezervacija .dostupnost { justify-self: start; }
.rezervacija__racun { margin: 0; padding-top: calc(var(--gutter) / 2); border-top: var(--border-card-muted); font-size: 15px; color: var(--ink); }
.rezervacija__upit { width: 100%; }
@media (min-width: 900px) {
  .smestaj { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); column-gap: calc(var(--gutter) * 2); }
  .smestaj__glavno, .smestaj__termini, .smestaj__dodatno { grid-column: 1; }
  .smestaj__strana { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  .rezervacija { position: sticky; top: calc(var(--header-h) + var(--gutter)); }
}
@media (max-width: 700px) {
  .sadrzaji { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pravila th { width: 45%; }
}

/* трака на дну (телефон): цена и „Изаберите термин“ */
.smestaj-traka { display: none; }
@media (max-width: 899px) {
  .smestaj-traka:not([hidden]) {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: flex; align-items: center; justify-content: space-between; gap: calc(var(--gutter) / 2);
    padding: calc(var(--gutter) / 2) var(--gutter) calc(var(--gutter) / 2 + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: var(--border-card);
    transition: transform .3s ease-out, visibility 0s;
  }
  .smestaj-traka.is-skrivena { transform: translateY(110%); visibility: hidden; transition: transform .3s ease-out, visibility 0s linear .3s; }
  .smestaj-traka__cena { display: grid; margin: 0; min-width: 0; }
  .smestaj-traka__datumi { font-size: 13px; color: var(--muted); }
  .smestaj-traka .cena-noc .primer-polje { font-size: 16px; }
  .smestaj-traka__datumi:empty { display: none; }
  .smestaj-traka .btn { flex: none; padding: 0 calc(var(--gutter) / 2); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .smestaj-traka, .smestaj-traka.is-skrivena, .smestaj-kartica__foto img, .cip, button.pretraga__polje { transition: none; }
}

/* --- о пројекту: три стубца испод плоче (задатак 21) ----------------------
   Стубци су раније били у плочи текста (пола контејнера, пасус до 460px):
   три стубца по 90–150px, 9–17 знакова у реду. Сада су засебан ред исте
   тамне плоче, испод наслова, увода и слике, преко целе ширине контејнера:
   од 1024px три у реду, испод тога један испод другог. Док су плоча и
   слика једна до друге (од 861px), текст плоче стоји уз њен врх (наднаслов
   почиње уз врх слике, после унутрашњег размака плоче — клијент 29.10). */
/* бочни размак плоче и реда стубаца (исти, да текст стоји у истој линији);
   био је clamp(24px, 4.5vw, 64px), сада највише 48px — стубцима остаје
   ширина за ~45 знакова у реду */
.kl-naslovna { --projekat-bocno: clamp(var(--gutter), 3.75vw, calc(var(--gutter) * 2)); }
@media (min-width: 861px) {
  .kl-naslovna .split__panel { justify-content: flex-start; padding-bottom: 0; }
  /* наднаслов је <p>, па би од „.split__panel p“ добио 16px више од размака плоче */
  .kl-naslovna .split__panel .eyebrow { margin-top: 0; }
}
/* Тамна плоча и иза слике: заобљени углови слике показују боју плоче, а не
   белу подлогу стране (на свим ширинама; величина и радијус слике исти). */
.kl-naslovna .split__media { background: var(--panel); }
/* Плоча „О пројекту" заобљена као картице и велике слике (--radius-card).
   Плочу чине текст, слика и ред стубаца. Од 861px слика стоји у горњем
   десном углу плоче: тај угао сече омотач слике (overflow: hidden) истим
   радијусом, а слика ту нема свој — једна крива, без шава; остали углови
   слике остају какви су. На телефону (један испод другог) заобљени су
   горњи углови текста и доњи углови стубаца. */
.kl-naslovna .split__panel { border-radius: var(--radius-card) var(--radius-card) 0 0; }
.kl-naslovna .projekat__okvir .pillars { border-radius: 0 0 var(--radius-card) var(--radius-card); }
@media (min-width: 861px) {
  .kl-naslovna .split__panel { border-radius: var(--radius-card) 0 0 0; }
  .kl-naslovna .split__media { overflow: hidden; border-top-right-radius: var(--radius-card); }
  /* .split у селектору: јаче од заједничког правила за радијус слика ниже у фајлу */
  .kl-naslovna .split .split__media img { border-top-right-radius: 0; }
}
.kl-naslovna .projekat__okvir .pillars {
  margin-top: 0;
  padding: var(--space-lead) var(--projekat-bocno) var(--section-space);
  background: var(--panel);
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-block);
}
.kl-naslovna .projekat__okvir .pillars p { max-width: var(--measure); }
.kl-naslovna .projekat__okvir .pillars > div + div { border-left: 0; padding-left: 0; border-top: 1px solid #3a3c2e; padding-top: var(--space-block); }
/* између стубаца пола --space-lead са обе стране црте (16 + 16): стубац
   је тако довољно широк за ~45 знакова у реду на 1280–1536px */
@media (min-width: 1024px) {
  .kl-naslovna .projekat__okvir .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 calc(var(--space-lead) / 2); }
  .kl-naslovna .projekat__okvir .pillars > div + div { border-top: 0; padding-top: 0; border-left: 1px solid #3a3c2e; padding-left: calc(var(--space-lead) / 2); }
}

/* --- туризам током целе године (локација) -------------------------------- */

/* пуна ширина мреже (--container), као остале секције. Од 1024px две
   колоне: текст (ред највише --measure) и постојећа фотографија у висини
   текста (object-fit: cover, радијус као остале слике); испод 1024px
   слика иде испод текста. Размак колона је размак колона „Локације“. */
.kl-naslovna .location { --lokacija-kolone: 56px; column-gap: var(--lokacija-kolone); grid-template-columns: minmax(0, 1fr); }
/* Ред 1 од 1024px: „Савршена локација“ и „Премијум микролокација“ у две
   једнаке колоне (исти размак колона као туризам испод). Испод 1024px једна
   колона, исти редослед. Наслови сва три дела су .naslov, као остали наслови
   секција. */
.kl-naslovna .micro { grid-column: auto; padding-top: 0; }
@media (min-width: 1024px) {
  .kl-naslovna .location { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.kl-naslovna .turizam { grid-column: 1 / -1; }
/* иста тема и иста бела позадина: танка линија (боја оквира картица) преко
   ширине контејнера раздваја ред 1 од туризма, 32px изнад и испод
   (32 = --space-block између редова мреже + 8) */
.kl-naslovna .turizam {
  border-top: var(--border-card);
  margin-top: calc(var(--space-lead) - var(--space-block));
  padding-top: var(--space-lead);
}
.turizam__slika { margin: var(--space-lead) 0 0; }
.turizam__slika img { width: 100%; height: auto; border-radius: var(--radius-card); }
@media (min-width: 1024px) {
  .kl-naslovna .turizam { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--lokacija-kolone); }
  .turizam__slika { position: relative; margin: 0; min-height: 100%; }
  .turizam__slika picture, .turizam__slika img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .turizam__slika img { object-fit: cover; object-position: center 60%; }
}
/* увод је подебљан, у боји осталог текста „Локације“ (#4e4e46, из
   .kl-naslovna .location p) — тако је и био; окер није */
.kl-naslovna .turizam .turizam__uvod { margin-top: var(--space-title); font-weight: 700; }
.kl-naslovna .turizam .turizam__uvod + p { margin-top: var(--space-lead); }
/* пасуси и листа су само текст: ред највише --measure */
.kl-naslovna .turizam p, .turizam__lista { max-width: var(--measure); }
.turizam__lista { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.kl-naslovna .turizam__lista li { font-size: 15px; line-height: 1.7; color: #4e4e46; padding-left: 16px; border-left: 3px solid var(--gold-dark); }
.turizam__lista b { color: var(--ink); }

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

/* горњи ред: наслов и површине; испод њега слике заузимају екран */
.unit-hero--tekst { display: block; min-height: 0; overflow: visible; background: var(--panel); }
.unit-hero--tekst::after { display: none; }
.unit-hero__red { display: grid; gap: 14px 40px; align-items: end; padding-top: 22px; padding-bottom: 22px; }
.unit-hero--tekst .breadcrumb ol { margin-bottom: 8px; }
.unit-hero--tekst h1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: var(--space-eyebrow); color: var(--gold-dark); }
.unit-hero--tekst .oznaka-stanja { color: #F2EFE6; font-size: 11px; }
.unit-hero--tekst .povrsine-traka { background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.unit-hero--tekst .povrsine-traka__unutra { padding: 0; }
/* цена: на телефону испод наслова (DOM редослед), на десктопу десно уз
   блок површина */
.unit-hero__cena { color: #F2EFE6; }
.unit-cena { margin: 0; font-size: clamp(28px, 3vw, 36px); line-height: 1.1; font-weight: 800; color: var(--gold); white-space: nowrap; }
.unit-cena__pdv { margin: 4px 0 0; font-size: 13px; color: rgba(242, 239, 230, .75); }
/* трећа колона само кад цена постоји — иначе би остао празан размак десно */
@media (min-width: 900px) {
  .unit-hero__red { grid-template-columns: minmax(0, 1fr) auto; }
  .unit-hero__red:has(> .unit-hero__cena) { grid-template-columns: minmax(0, 1fr) auto auto; }
  .unit-hero__red > .povrsine-traka { order: 2; }
  .unit-hero__cena { order: 3; padding-left: 40px; border-left: 1px solid rgba(255, 255, 255, .18); }
  .unit-hero__red > .unit-hero__lev:only-child { grid-column: 1 / -1; }
}

.unit-galerija-sekcija { padding: 14px 0 0; }
.unit-galerija {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  height: clamp(360px, calc(100vh - var(--header-h) - 170px), 780px);
  height: clamp(360px, calc(100svh - var(--header-h) - 170px), 780px);
}
.unit-galerija--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.unit-galerija--2 { grid-template-rows: 1fr; }
.unit-galerija__slika { position: relative; display: block; width: 100%; padding: 0; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; min-height: 0; overflow: hidden; border-radius: var(--radius-card); background: var(--grey); }
.unit-galerija__slika--glavna { grid-row: 1 / -1; }
.unit-galerija__slika[hidden] { display: none; }
.unit-galerija__slika picture { display: block; width: 100%; height: 100%; }
.unit-galerija__slika img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; transition: transform .5s ease-out; }
@media (hover: hover) and (pointer: fine) { .unit-galerija__slika:hover img { transform: scale(1.03); } }
.unit-galerija__slika:focus-visible { outline: 3px solid var(--gold-dark); outline-offset: 3px; }
.unit-galerija__sve {
  position: absolute; right: 12px; bottom: 12px;
  padding: 8px 14px; border-radius: var(--radius-pill);
  background: rgba(20, 26, 18, .86); color: #fff;
  font-size: 13px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
@media (max-width: 700px) {
  .unit-galerija { height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .unit-galerija--1 { grid-template-columns: 1fr; }
  .unit-galerija__slika { aspect-ratio: 1; }
  .unit-galerija__slika--glavna { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
}

/* опис јединице: размак као секција, ред највише --measure */
.unit-intro { padding-top: var(--section-space); padding-bottom: var(--section-space); }
.unit-intro p { max-width: var(--measure); }
/* секције странице јединице: исти размак горе и доле као на главној */
section.spec, section.osnova, section.polozaj, section.unit-kraj { padding-top: var(--section-space); padding-bottom: var(--section-space); }
/* све су беле: секција одмах иза беле секције нема горњи размак, па између
   њих остаје један размак, не два */
:is(section.spec, .unit-intro, section.osnova, section.polozaj, section.unit-kraj, .osnova-polozaj) + :is(section.spec, .unit-intro, section.osnova, section.polozaj, section.unit-kraj, .osnova-polozaj) { padding-top: 0; }
/* основа и положај су у омотачу .osnova-polozaj: прва секција у њему иде по
   истом правилу као да омотача нема */
:is(section.spec, .unit-intro) + .osnova-polozaj > section:first-child { padding-top: 0; }
/* мали наслов секције (верзал) → садржај */
.section__label { margin-bottom: var(--space-lead); }
/* подножје на свим странама пројекта: исти размак и блок наслова */
.contact__grid { padding-top: var(--section-space); padding-bottom: var(--section-space); }
.contact .eyebrow + h2 { margin-top: var(--space-eyebrow); }
.contact__lines { margin-top: var(--space-lead); }
/* доња трака (клијент 29.10): три дела у мрежи 1fr auto 1fr — © лево,
   „Сва права задржана" тачно по средини (ма колике биле стране), заслуга за
   дизајн десно; сви су исти <small> (величина, боја). У .container-у, па не
   додирује ивице екрана. На телефону једно испод другог, центрирано. */
.colophon { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 2px 24px; }
.colophon__copy { justify-self: start; }
.colophon__prava { justify-self: center; text-align: center; }
.colophon__dizajn { justify-self: end; text-align: right; }
.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 { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding-block: 10px; }
  .colophon__copy, .colophon__prava, .colophon__dizajn { justify-self: center; text-align: center; }
}

/* основа + подаци */
.osnova-slot__dugme { display: block; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.osnova-slot__dugme:focus-visible { outline: 3px solid var(--gold-dark); outline-offset: 3px; }
.osnova-slot--crtez { background: #000; padding: 0; overflow: hidden; border-radius: var(--radius-card); }
/* height: auto — width/height у маркапу дају само однос (без скока), а
   величину и даље одређују max-width / max-height */
.osnova-slot--crtez img { width: auto; height: auto; max-width: 100%; max-height: min(560px, 62svh); }
@media (min-width: 861px) { .osnova-slot--crtez { width: auto; max-width: 100%; } }
.osnova__oznaka { display: flex; align-items: center; gap: 12px; }
.osnova__ikona { width: auto; height: 38px; flex: none; }

/* подаци о јединици: два стубца на десктопу, један на телефону */
.spec-mreza { display: grid; grid-template-columns: 1fr; gap: 0 56px; margin: 0; }
@media (min-width: 760px) { .spec-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.spec-mreza > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(0, 0, 0, .1); }
.spec-mreza dt { flex: none; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.spec-mreza dd { margin: 0; text-align: right; font-size: 15px; font-weight: 600; color: var(--ink); }
.spec-cipovi { list-style: none; margin: var(--space-block) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.spec-cipovi li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px 6px 11px; border: var(--border-card); border-radius: var(--radius-pill); background: #faf9f6; font-size: 14px; font-weight: 600; }
.spec-cipovi svg { flex: none; color: var(--gold-dark); }
.spec-zavrsetak { margin: var(--space-block) 0 0; font-size: 15px; font-weight: 600; color: var(--zlato-tekst); }

/* положај у објекту: провидни пресек + слој зона у процентима слике */
/* сива за „продато": rgba(20, 26, 18, .45) на белом, непровидна да ознака
   преко фотографије буде иста као узорак у легенди */
.polozaj { --polozaj-prodato: #959894; }
.polozaj__mreza { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .polozaj__mreza { grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); gap: 56px; } }
.polozaj__slika { margin: 0; }
.polozaj__platno { position: relative; width: 100%; }
.polozaj__platno picture, .polozaj__platno img { display: block; width: 100%; height: auto; }
.polozaj__zone { position: absolute; inset: 0; pointer-events: none; }
.polozaj__zona { position: absolute; display: block; box-sizing: border-box; pointer-events: auto; border-radius: 6px; }
/* без оквира и плоча преко слике: остају само ознаке јединица */
.polozaj__labela, .polozaj__prodato {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 3px 12px; border-radius: var(--radius-pill); white-space: nowrap; line-height: 1.3;
}
.polozaj__labela { background: var(--gold-dark); color: var(--ink); font-size: clamp(12px, 1.4vw, 18px); font-weight: 800; }
.polozaj__labela--slobodna {
  background: rgba(20, 26, 18, .72); color: #fff; font-size: clamp(11px, 1.2vw, 15px);
  transition: background-color .2s ease-out, color .2s ease-out, transform .2s ease-out;
}
.polozaj__zona--slobodna { cursor: pointer; }
.polozaj__zona--slobodna:hover .polozaj__labela--slobodna,
.polozaj__zona--slobodna:focus-visible .polozaj__labela--slobodna { background: var(--gold-dark); color: var(--ink); transform: translate(-50%, -50%) scale(1.08); }
.polozaj__zona--slobodna:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.polozaj__zona--slobodna::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  padding: 6px 12px; border-radius: 8px; background: rgba(20, 26, 18, .94); color: #fff;
  font-size: 13px; font-weight: 700; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .15s ease-out; z-index: 2;
}
.polozaj__zona--slobodna:hover::after, .polozaj__zona--slobodna:focus-visible::after { opacity: 1; }
.polozaj__zona--prodato { cursor: default; }
/* продата: иста ознака као „на продају", у сивој из легенде, није линк */
.polozaj__prodato { background: var(--polozaj-prodato); color: var(--ink); font-size: clamp(11px, 1.2vw, 15px); font-weight: 700; }
.polozaj__objekti { position: relative; height: 30px; margin-top: 6px; }
.polozaj__objekat { position: absolute; top: 0; transform: translateX(-50%); color: var(--muted); white-space: nowrap; }
.polozaj__objekat--tekuci { color: var(--zlato-tekst); }
.polozaj__recenica { margin: 0; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.5; color: var(--ink); }
.polozaj__legenda { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; font-size: 15px; font-weight: 600; }
.polozaj__legenda li { display: flex; align-items: center; gap: 12px; }
.polozaj__uzorak { flex: none; width: 30px; height: 18px; border-radius: var(--radius-pill); }
.polozaj__uzorak--tekuca { background: var(--gold-dark); }
.polozaj__uzorak--slobodna { background: rgba(20, 26, 18, .72); }
.polozaj__uzorak--prodato { background: var(--polozaj-prodato); }
@media (prefers-reduced-motion: reduce) { .polozaj__zona, .polozaj__zona::after { transition: none; } }

/* Основа и положај једно поред другог (од 1024px): основа лево (2/5),
   положај десно (3/5), наслови и слике у истом реду; реченица о положају
   и легенда у једном реду испод, преко целе ширине. Секције и њихови
   .container су display: contents, па наслови, слике и текст постају
   ћелије мреже омотача. Слике се не секу (зоне су у процентима): основа
   добија висину слике положаја (ширина десног стубца / --polozaj-odnos).
   Испод 1024px омотач нема стил и распоред је као раније. */
@media (min-width: 1024px) {
  .osnova-polozaj {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 56px; align-items: start;
    grid-template-areas: "o-naslov p-naslov" "o-slika p-slika" "tekst tekst";
    max-width: var(--container); margin: 0 auto; padding: var(--section-space) var(--gutter);
    container-type: inline-size;
  }
  .osnova-polozaj > section, .osnova-polozaj > section > .container, .osnova-polozaj .polozaj__mreza { display: contents; }
  .osnova-polozaj .osnova .section__label { grid-area: o-naslov; }
  .osnova-polozaj .polozaj .section__label { grid-area: p-naslov; }
  .osnova-polozaj .osnova__mreza { grid-area: o-slika; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  /* − 2px: оквир слота (1px горе и доле), да се доње ивице поклопе */
  .osnova-polozaj .osnova-slot--crtez img { max-height: calc((100cqw - 56px) * 3 / 5 / var(--polozaj-odnos) - 2px); }
  .osnova-polozaj .polozaj__slika { grid-area: p-slika; }
  .osnova-polozaj .polozaj__bocno { grid-area: tekst; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 40px; margin-top: var(--space-block); }
  .osnova-polozaj .polozaj__legenda { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; }
  /* ознака уз основу постаје потпис испод ње, у једном реду */
  .osnova-polozaj .osnova__podaci { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: 14px; line-height: 1.4; color: var(--muted); }
  .osnova-polozaj .osnova__oznaka { gap: 8px; font-size: inherit; font-weight: 700; line-height: inherit; color: var(--ink); }
  .osnova-polozaj .osnova__ikona { height: 22px; }
  .osnova-polozaj .osnova__sprat { margin: 0; font-size: inherit; }
  .osnova-polozaj .osnova__sprat::before { content: "·"; content: "·" / ""; margin-right: 6px; }
}
/* ?debug=1 (site.js): оквир и назив сваке зоне, за проверу поравнања */
.polozaj--debug .polozaj__zona { outline: 1px dashed #ff00d4; background: rgba(255, 0, 212, .12); }
.polozaj--debug .polozaj__zona::before { content: attr(data-zona); position: absolute; left: 2px; top: 2px; font: 700 9px/1 monospace; color: #ff00d4; }

/* --- локација: удаљености као редови (мокап) ------------------------------ */

.kl-naslovna .distances { margin: var(--space-lead) 0 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; }
.kl-naslovna .distances div { flex-direction: row; align-items: baseline; gap: 14px; padding: 6px 0; border-top: 0; }
.kl-naslovna .distances span:first-child { width: 72px; flex: none; font-family: var(--sans); font-size: 16px; font-weight: 700; color: var(--ink); }
.kl-naslovna .distances span:last-child { font-size: 16px; font-weight: 400; color: #4e4e46; }
/* Удаљености и веза „Отвори мапу“ (клијент 30.10).
   Телефон (до 559px): удаљености једна испод друге (у две колоне „Београд“
   није стао на 320px), веза центрирано испод њих.
   Од 560px: лева колона (Нови Сад, Чачак) | веза | десна колона (Београд,
   Ваљево). Крајње колоне су широке колико садржај, па је веза тачно у
   средини празнине између њих, а по висини између два реда. Мрежа није
   шира од колоне „Локације“ на десктопу (578px), па на таблету (једна
   колона) изгледа исто као на десктопу. */
.kl-naslovna .distances { grid-template-columns: minmax(0, 1fr); }
.kl-naslovna .distances__mapa {
  justify-self: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin-top: var(--space-block);
  padding: 4px 6px;
  border-radius: 8px;
  font-size: 13px; line-height: 1.4; color: #4e4e46; text-align: center;
}
/* танка икона као у „О пројекту“ (34×32, линија 1,2), у благом кругу 56px */
.kl-naslovna .distances__mapa svg {
  box-sizing: content-box;
  width: 28px; height: 28px; padding: 13px;
  border: 1px solid rgba(169, 124, 51, .45);
  border-radius: 50%;
  color: var(--gold-dark);
  transition: border-color .2s ease, background-color .2s ease;
}
/* као остале мале везе (нпр. „Све стамбене јединице“): тамнији текст и
   подвлака; круг као „outline“ дугме (злато + блага позадина). Фокус:
   опште :focus-visible (златни обод). */
.kl-naslovna .distances__mapa:hover,
.kl-naslovna .distances__mapa:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.kl-naslovna .distances__mapa:hover svg,
.kl-naslovna .distances__mapa:focus-visible svg { border-color: var(--gold-dark); background: rgba(194, 154, 98, .12); }
@media (min-width: 560px) {
  .kl-naslovna .distances {
    grid-template-columns: max-content minmax(max-content, 1fr) max-content;
    max-width: calc((var(--container) - 2 * var(--gutter) - var(--lokacija-kolone)) / 2);
  }
  .kl-naslovna .distances > div:nth-child(1),
  .kl-naslovna .distances > div:nth-child(3) { grid-column: 1; }
  .kl-naslovna .distances > div:nth-child(2),
  .kl-naslovna .distances > div:nth-child(4) { grid-column: 3; }
  .kl-naslovna .distances > div:nth-child(-n+2) { grid-row: 1; }
  .kl-naslovna .distances > div:nth-child(n+3) { grid-row: 2; }
  .kl-naslovna .distances__mapa { grid-column: 2; grid-row: 1 / 3; align-self: center; margin-top: 0; }
}

/* --- дугмад: мекши облик, један језик за све странице пројекта ------------- */

.btn {
  min-height: var(--control-height);
  padding: 0 28px;
  border-radius: var(--radius-control);
  letter-spacing: .02em;
  transition: background-color .25s ease-out, color .25s ease-out, border-color .25s ease-out,
              box-shadow .25s ease-out, transform .25s ease-out;
}
.btn svg { transition: transform .25s ease-out; }
.btn:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 3px; }
.btn--gold {
  color: var(--ink);
  background: var(--gold-dark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 18px rgba(169, 124, 51, .22);
}
/* .hero …:hover: заједнички site.css ту ставља бео текст (3,74:1 на окер) */
.btn--gold:hover, .btn--gold:focus-visible, .hero .btn--gold:hover {
  color: var(--ink);
  background: var(--gold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 10px 24px rgba(169, 124, 51, .3);
}
.btn--outline {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--gold-dark);
}
.btn--outline:hover, .btn--outline:focus-visible {
  color: var(--ink);
  background: rgba(194, 154, 98, .12);
  border-color: var(--gold-dark);
}
@media (hover: hover) and (pointer: fine) {
  .btn--gold:hover, .btn--outline:hover { transform: translateY(-1px); }
  .btn:hover svg { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn svg { transition: none; }
  .btn:hover, .btn:hover svg { transform: none !important; }
}
.header__cta { border-radius: var(--radius-control); }
.kl-naslovna .mobilni-cta .btn { border-radius: var(--radius-control); }
/* онемогућено дугме остаје сиво, без позлате и без помераја */
.izdavanje__dugme, .izdavanje__dugme:hover { height: var(--control-height); box-shadow: none; transform: none; background: transparent; border: 1px solid #b4b2aa; color: #6f6f68; }


/* --- окер акценат: наслови, дугмад, иконе ---------------------------------
   Акценат је --gold-dark (#a97c33), исти као m² на картицама. Крупни наслови,
   подлоге дугмади (таман текст, 4,57:1) и иконе/знаци иду у њега. Ситан
   текст у океру мора да прође АА (4,5:1), а --gold-dark на белој даје 3,74:1,
   па ситан окер текст иде у --zlato-tekst (светла подлога) или --gold (тамна).
   Трака садржаја у хероју остаје светла: --gold-dark на њеној зеленој даје
   2,99:1, а три иконе тамо су клијентови бели SVG-ови. */
.section__label { color: var(--zlato-tekst); }
.contact h2 { color: var(--gold-dark); }
.breadcrumb li + li::before { color: var(--gold-dark); }
.kartica__cta { color: var(--zlato-tekst); }
.kartica__cta svg { color: var(--gold-dark); }
a.kartica .kartica__ukupno small { color: var(--zlato-tekst); }
.kl-naslovna .carousel__tacka[aria-current]::before { background: var(--gold-dark); }
.lb__btn:hover { background: var(--gold-dark); }

/* --- галерија: сегментна контрола са клизним табом -------------------------
   Контејнер је пилула; изабрани сегмент је златна пилула коју site.js
   помера (--tab-x / --tab-w). Без JS-а изабрани таб носи сопствену позадину. */
.kl-naslovna .tabs {
  position: relative;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0, 0, 0, .12);
  padding: 4px; gap: 0;
}
.kl-naslovna .tab { position: relative; z-index: 1; border-radius: var(--radius-pill); }
.kl-naslovna .tabs.has-slider .tab[aria-selected="true"] { background: transparent; }
.kl-naslovna .tabs__klizac {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0;
  width: var(--tab-w, 0); transform: translateX(var(--tab-x, 0));
  border-radius: var(--radius-pill); background: var(--gold-dark);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), width .3s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
.kl-naslovna .carousel__track img { border-radius: var(--radius-card); }
@media (prefers-reduced-motion: reduce) { .kl-naslovna .tabs__klizac { transition: none; } }

/* --- контакт форма ---------------------------------------------------------- */
.kl-naslovna .form input,
.kl-naslovna .form textarea {
  height: var(--control-height);
  padding: 0 16px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius-control);
  transition: border-color .2s ease-out, box-shadow .2s ease-out;
}
.kl-naslovna .form textarea { height: auto; min-height: 120px; padding: 12px 16px; }
.kl-naslovna .form input::placeholder,
.kl-naslovna .form textarea::placeholder { color: rgba(255, 255, 255, .5); }
.kl-naslovna .form input:focus,
.kl-naslovna .form textarea:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px rgba(196, 154, 98, .25);
}
.kl-naslovna .form input[aria-invalid="true"],
.kl-naslovna .form textarea[aria-invalid="true"] { border-color: var(--color-error); }
.kl-naslovna .form .btn { height: var(--control-height); border-radius: var(--radius-control); }
.contact__map { border-radius: var(--radius-card); overflow: hidden; }
/* Подножје без форме: мапа није развучена на целу колону — највише 520px.
   На широком екрану стоји десно, а испод 1100px (ред преко целе ширине) лево. */
.contact__grid--2col .contact__map { width: 100%; max-width: 520px; justify-self: end; }
@media (max-width: 1100px) { .contact__grid--2col .contact__map { justify-self: start; } }
/* Једна врста фотографије на главној страни: исти радијус, без оквира и
   сенке, object-fit: cover. Изузетак је банер са маркерима у хероју: он се
   не сече (contain), јер су маркери постављени у процентима слике. */
.kl-naslovna :is(.kartica__foto, .split__media img, .carousel__track img, .turizam__slika img) {
  border-radius: var(--radius-card); border: 0; box-shadow: none; object-fit: cover;
}


/* --- херо: подела на две колоне (≥1280px) ----------------------------------
   Лево топла светла плоча са текстом и дугмадима, десно слика у ЦЕЛИНИ — без
   исецања. Бина (.hero__bina) стоји уз доњи десни угао: десна ивица јој је
   ивица прозора, доња ивица дно херо-а (изнад траке са садржајима). Има тачан
   однос слике (2560 × 1380), а ширина јој је мања од ширине колоне и од
   највеће дозвољене висине херо-а (--hero-cap) помножене односом. Висина
   херо-а прати већу од две ствари — текст са размаком или бину — па нема
   празних трака. Меки прелаз само тамо где слика додирује плочу: лево и
   горе (небо). Маркери су у % бине, па остају на својим апартманима.
   Испод 1280px важи распоред изнад, непромењен. */
:root { --color-hero-panel: #f6f4ef; }
@media (min-width: 1280px) {
  :is(.kl-naslovna, .kl-izdavanje) .hero {
    --hero-cap: min(calc(100svh - var(--header-h)), 900px);
    background: var(--color-hero-panel);
  }
  :is(.kl-naslovna, .kl-izdavanje) .hero__media { background: var(--color-hero-panel); }
  :is(.kl-naslovna, .kl-izdavanje) .hero__stage {
    display: grid;
    grid-template-columns: clamp(420px, 38%, 560px) minmax(0, 1fr);
    max-height: var(--hero-cap);
    background: var(--color-hero-panel);
  }
  :is(.kl-naslovna, .kl-izdavanje) .hero__bina {
    grid-column: 2; grid-row: 1;
    align-self: end; justify-self: end;
    position: relative;
    width: min(100%, calc(var(--hero-cap) * 2560 / 1380));
  }
  :is(.kl-naslovna, .kl-izdavanje) .hero__slika {
    width: 100%;
    padding-top: 0;
    aspect-ratio: 2560 / 1380;
    overflow: visible;
  }
  :is(.kl-naslovna, .kl-izdavanje) .hero__media img { object-fit: contain; }
  /* један прекривач за оба прелаза (лево 100px, горе 80px): слојеви се
     множе по алфи, па у углу нема шава */
  :is(.kl-naslovna, .kl-izdavanje) .hero__plato::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background:
      linear-gradient(90deg, var(--color-hero-panel), transparent) left top / 100px 100% no-repeat,
      linear-gradient(180deg, var(--color-hero-panel), transparent) left top / 100% 80px no-repeat;
  }
  /* Легенда је у горњем ЛЕВОМ углу слике (небо изнад левог објекта, чији је
     кров низак). Горњи десни угао је небо тик изнад крова десног објекта,
     где стоји натпис „Објекат 1“ — ту би се преклапали (1280–1700px). */
  :is(.kl-naslovna, .kl-izdavanje) .hero__legenda { position: absolute; top: 20px; left: 20px; z-index: 4; }
  /* на најужој бини (1280–1399) је мања и ближа углу */
  @media (max-width: 1399px) {
    :is(.kl-naslovna, .kl-izdavanje) .hero__legenda { top: 12px; left: 12px; padding: 8px 14px; font-size: 12px; gap: 6px 14px; }
  }
  :is(.kl-naslovna, .kl-izdavanje) .hero__copy {
    grid-column: 1; grid-row: 1;
    position: static; width: auto;
    padding: clamp(40px, 6vh, 72px) clamp(24px, 3vw, 56px) clamp(40px, 6vh, 72px) clamp(32px, 4vw, 96px);
    align-self: center; background: none;
  }
  :is(.kl-naslovna, .kl-izdavanje) .hero__copy .hero__tekst { max-width: 500px; }
  :is(.kl-naslovna, .kl-izdavanje) .hero h1 { font-size: clamp(34px, calc(34px + (100vw - 1280px) * .021875), 48px); line-height: 1.12; }
  :is(.kl-naslovna, .kl-izdavanje) .hero__copy p { margin-top: var(--space-title); font-size: clamp(16px, calc(16px + (100vw - 1280px) * .003125), 18px); line-height: 1.6; }
  :is(.kl-naslovna, .kl-izdavanje) .hero__akcije { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--space-lead); }
  :is(.kl-naslovna, .kl-izdavanje) .hero__akcije .btn { padding: 0 20px; white-space: nowrap; }
}


/* --- крај странице јединице: позив на акцију + навигација ----------------- */

.unit-kraj__poziv {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
  padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 36px);
  border: var(--border-card); border-radius: var(--radius-card); background: #faf9f6;
}
.unit-kraj__tekst { margin: 0; font-size: clamp(18px, 2vw, 22px); font-weight: 700; color: var(--ink); }
.unit-kraj__tekst small { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; color: var(--muted); }
.unit-kraj__dugmad { display: flex; flex-wrap: wrap; gap: 12px; }
.unit-kraj__dugmad .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; }

.unit-susedi {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 14px; margin-top: var(--space-block);
}
/* продата јединица нема кутију позива: картице су прве у секцији, па размак
   изнад њих не би ишао између кутије и картица, него између секција */
.unit-susedi:first-child { margin-top: 0; }
/* Претходна / следећа: цела картица је линк, обе исте ширине (колоне 1 и 3,
   и кад постоји само једна). Стрелица је на спољној страни. */
.unit-sused {
  position: relative; display: flex; align-items: center; gap: 14px; min-width: 0;
  padding: 14px 20px; text-decoration: none; color: var(--ink);
  border: var(--border-card-muted); border-radius: var(--radius-card); background: #fff;
  box-shadow: var(--shadow-card);
  transition: border-color .2s ease-out, box-shadow .2s ease-out;
}
.unit-sused { align-self: stretch; }
.unit-sused--prev { grid-column: 1; grid-row: 1; }
.unit-sused--next { grid-column: 3; grid-row: 1; flex-direction: row-reverse; text-align: right; }
.unit-sused:hover, .unit-sused:focus-visible { color: var(--ink); border-color: var(--gold-dark); box-shadow: var(--shadow-card-hover); }
.unit-sused:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 3px; }
.unit-sused__strelica { flex: none; color: var(--gold-dark); transition: transform .2s ease-out; }
.unit-sused--prev .unit-sused__strelica { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) {
  .unit-sused--prev:hover .unit-sused__strelica { transform: scaleX(-1) translateX(3px); }
  .unit-sused--next:hover .unit-sused__strelica { transform: translateX(3px); }
}
.unit-sused__slika { flex: none; width: 96px; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-control); }
.unit-sused--prodato .unit-sused__slika { filter: grayscale(1); opacity: .55; }
.unit-sused__tekst { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.unit-sused--next .unit-sused__tekst { align-items: flex-end; }
.unit-sused__smer, .unit-sused__mesto { font-size: 12px; color: var(--muted); }
.unit-sused__oznaka { font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; }
.unit-sused .oznaka-stanja { margin-top: 6px; }
/* „Све стамбене јединице": лакши, секундарни линк (текст + иконица мреже) */
.unit-susedi__sve {
  grid-column: 2; grid-row: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--control-height); padding: 0 8px;
  font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; text-decoration: none;
}
.unit-susedi__sve svg { flex: none; color: var(--gold-dark); }
.unit-susedi__sve:hover, .unit-susedi__sve:focus-visible { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
/* до 1100px три колоне су тесне: картице једна до друге, линк у свом реду */
@media (max-width: 1100px) {
  .unit-susedi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .unit-sused--next { grid-column: 2; }
  .unit-susedi__sve { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 760px) {
  /* две збијене картице једна до друге (ознака + стрелица), испод њих
     „Све стамбене јединице" преко целе ширине */
  .unit-susedi { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .unit-sused { justify-content: space-between; padding: 12px 16px; }
  .unit-sused--next { grid-column: 2; }
  .unit-sused__slika, .unit-sused__mesto, .unit-sused .oznaka-stanja { display: none; }
  .unit-sused__smer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .unit-sused__oznaka { font-size: 20px; }
  .unit-susedi__sve { grid-column: 1 / -1; grid-row: 2; border: var(--border-card-muted); border-radius: var(--radius-control); }
  .unit-kraj__dugmad, .unit-kraj__dugmad .btn { width: 100%; }

  /* Позив на акцију је залепљен на дну екрана (као трака на главној
     страни): остаје само „Позовите" + „Закажите обилазак", без наслова.
     site.js додаје .is-skriven кад се појави подножје са контактом. */
  .unit-kraj__poziv {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: block; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    border: 0; border-top: 1px solid #e2ded5; border-radius: 0;
    background: rgba(255, 255, 255, .97); box-shadow: 0 -6px 24px rgba(22, 40, 26, .10);
    transition: transform .3s ease-out, visibility 0s;
  }
  .unit-kraj__poziv.is-skriven {
    transform: translateY(110%); visibility: hidden;
    transition: transform .3s ease-out, visibility 0s linear .3s;
  }
  .unit-kraj__tekst { display: none; }
  .unit-kraj__dugmad { flex-wrap: nowrap; gap: 10px; }
  .unit-kraj__dugmad .btn { width: auto; min-height: 48px; padding: 0 12px; flex: 1 1 0; }
  .unit-kraj__dugmad .btn--outline { order: 1; background: #fff; }
  .unit-kraj__dugmad .btn--gold { order: 2; flex-grow: 1.6; }
  /* „Позовите“ и „Закажите обилазак“ остају у једном реду (min-width: 0:
     прелом реда не рачуна са њиховом пуном ширином текста), а испод 360px,
     где не стају, иду један испод другог — пре тога је друго дугме излазило
     из екрана. Иконе се не скупљају: на 360–374px натпис уместо тога заузме
     део унутрашњег размака (12px). */
  .unit-kraj__dugmad { flex-wrap: wrap; }
  .unit-kraj__dugmad .btn { min-width: 0; }
  .unit-kraj__dugmad .btn svg { flex: none; }
}
@media (max-width: 359px) {
  .unit-kraj__dugmad .btn { min-width: auto; }
}
@media (prefers-reduced-motion: reduce) { .unit-sused, .unit-sused__strelica { transition: none; } }

@media (max-width: 700px) {
  .polozaj__mreza { gap: 18px; }
}

/* --- појављивање при скролу ------------------------------------------------
   Исто као лендинг Горске Фаббрике: провидност и подизање 18px, .7s ease.
   Почетно стање важи само уз kl-anim на <html> (додаје га скрипта у <head>-у
   главне стране и страница јединица): без JS-а, без IntersectionObserver-а
   и уз prefers-reduced-motion садржај је видљив одмах. Подиже се својством
   translate (не transform), па се не меша са transform-ом картица; site.js
   скида data-pojava кад се елемент појави, па им враћа и transition.
   Секције које су циљ сидра се не подижу — само њихов садржај. */
.kl-anim [data-pojava] { opacity: 0; translate: 0 18px; }
.kl-anim [data-pojava].is-in { opacity: 1; translate: none; transition: opacity .7s ease, translate .7s ease; }
@media (prefers-reduced-motion: reduce) {
  .kl-anim [data-pojava] { opacity: 1; translate: none; transition: none; }
}