/* ==========================================================
   DESTRA HILLS — каталог (книга што се листа + A4 за печатење)
   Големините во страниците се во cqw — растат со страницата.
   ========================================================== */

.kat-body {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(60% 50% at 50% 60%, rgba(217, 167, 90, .1), transparent 70%),
    radial-gradient(80% 60% at 50% 120%, rgba(232, 121, 58, .12), transparent 70%),
    var(--bg);
}

/* ---------- горна и долна лента ---------- */
.kat-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 14px clamp(14px, 3vw, 36px);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 5;
}
.kat-logo { justify-self: start; }
.kat-logo .logo-word { font-size: 15px; }
.kat-logo .logo-sub { font-size: 6.5px; }
.kat-title { margin: 0; font-family: var(--ff-serif); font-weight: 300; font-size: 22px; color: var(--text); white-space: nowrap; }
.kat-title em { color: var(--gold-2); }
.kat-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.kat-dl { min-height: 40px; padding: 0 16px; font-size: 9.5px; gap: 8px; }
.kat-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  display: grid;
  place-items: center;
  color: var(--text);
  transition: border-color .3s, color .3s, opacity .3s;
}
.kat-icon:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-2); }
.kat-icon:disabled { opacity: .3; cursor: default; }
.kat-icon svg { width: 17px; height: 17px; }

.kat-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  position: relative;
  z-index: 5;
}
.kat-mid { display: flex; align-items: center; gap: 16px; }
.kat-count { min-width: 92px; text-align: center; font-size: 11px; letter-spacing: .24em; color: var(--text-2); font-variant-numeric: tabular-nums; }
.kat-jump .select { min-height: 40px; width: 240px; padding: 8px 40px 8px 14px; font-size: 13px; }
.kat-hint {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 74px;
  margin: 0;
  text-align: center;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
  transition: opacity 1s;
}
.kat-hint.off { opacity: 0; }

/* ---------- сцена и книга ---------- */
.kat-stage { position: relative; display: grid; place-items: center; padding: 18px; min-height: 0; }
.book-wrap {
  width: min(94vw, calc((100svh - 170px) * 1.414));
  opacity: 0;
  transform: translateY(20px) scale(.98);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease);
}
.kat-ready .book-wrap { opacity: 1; transform: none; }
.book { margin: 0 auto; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .65)); }
.kat-loading {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  transition: opacity .6s;
}
.kat-loading span { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-2); border-top-color: var(--gold); animation: spin 1s linear infinite; }
.kat-ready .kat-loading { opacity: 0; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- страници ---------- */
.page {
  --gold: #a87a33;
  --gold-2: #a87a33;
  --plan-bg: #ece6da;
  --free: #2f8a5b;
  --res: #b7791f;
  --sold: #a8473f;
  --text: #1d1a17;
  --muted: #8a837a;
  container-type: size;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .07), transparent 5%, transparent 95%, rgba(0, 0, 0, .07)),
    #f4f0e8;
  color: #3b3732;
}
.pg {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 9cqw 8.5cqw 6.5cqw;
  font-family: var(--ff-sans);
  font-weight: 400;
  font-size: 2.55cqw;
  line-height: 1.6;
}
.pg .eb {
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  margin: 0 0 2.6cqw;
  font-size: 1.75cqw;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
}
.pg .eb::before { content: ""; width: 5cqw; height: 1px; background: currentColor; }
.pg h2 { margin: 0 0 4cqw; font-family: var(--ff-serif); font-weight: 400; font-size: 7.6cqw; line-height: 1.04; color: var(--text); }
.pg h2 em, .pg h1 em { font-style: italic; color: var(--gold); }
.pg h3 { margin: 3.5cqw 0 1.6cqw; font-size: 1.9cqw; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--text); }
.pg p { margin: 0 0 2.4cqw; }
.pg .sign { font-family: var(--ff-serif); font-style: italic; font-size: 5cqw; color: var(--gold); margin: 1cqw 0 3.5cqw; }
.pg-img { margin: 0 0 4cqw; aspect-ratio: 3 / 2; overflow: hidden; }
.pg-img.wide { aspect-ratio: 16 / 9; }
.pg-img img { width: 100%; height: 100%; object-fit: cover; }
.pg-foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  padding-top: 2.4cqw;
  border-top: 1px solid rgba(0, 0, 0, .1);
  font-size: 1.55cqw;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.pg .note { font-size: 1.75cqw; color: var(--muted); margin: 2cqw 0 0; }

.nums { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 4cqw; border-top: 1px solid rgba(0, 0, 0, .1); border-bottom: 1px solid rgba(0, 0, 0, .1); }
.nums div { padding: 3cqw 0; text-align: center; }
.nums div + div { border-left: 1px solid rgba(0, 0, 0, .1); }
.nums b { display: block; font-family: var(--ff-serif); font-weight: 400; font-size: 7cqw; line-height: 1; color: var(--text); }
.nums span { font-size: 1.6cqw; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

.dist { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(0, 0, 0, .1); }
.dist li { display: flex; justify-content: space-between; padding: 2cqw 0; border-bottom: 1px solid rgba(0, 0, 0, .1); }
.dist b { font-weight: 500; color: var(--text); }

.feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4.5cqw 5cqw; }
.feats li { display: grid; gap: .8cqw; }
.feats svg { width: 6cqw; height: 6cqw; fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 1cqw; }
.feats b { font-size: 2cqw; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.feats span { font-size: 2.2cqw; line-height: 1.5; }

.ov { width: 100%; border-collapse: collapse; font-size: 2.05cqw; }
.ov th { text-align: left; font-size: 1.5cqw; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding: 0 0 1cqw; border-bottom: 1px solid rgba(0, 0, 0, .15); }
.ov td { padding: 1.05cqw 0; border-bottom: 1px solid rgba(0, 0, 0, .07); color: var(--text); }
.ov .dot { display: inline-block; width: 1.5cqw; height: 1.5cqw; border-radius: 50%; margin-right: 1.2cqw; vertical-align: middle; }
.ov .dot.slobodan { background: var(--free); }
.ov .dot.rezerviran { background: var(--res); }
.ov .dot.prodaden { background: var(--sold); }
.pg h3 + .ov { margin-bottom: 1cqw; }

/* страница за стан */
.pg-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1cqw; }
.pg-head .eb { margin: 0; }
.pg .status { font-size: 1.55cqw; padding: .9cqw 2cqw .9cqw 1.6cqw; gap: 1.2cqw; }
.pg .status::before { width: 1.3cqw; height: 1.3cqw; box-shadow: none; }
.st-title { font-size: 9.6cqw !important; margin: 0 0 .5cqw !important; }
.st-type { font-size: 2cqw; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 0 0 2.4cqw !important; }
.plan-box { display: block; height: 33cqw; padding: 2cqw; margin: 0 0 2.6cqw; background: var(--plan-bg); border: 1px solid rgba(0, 0, 0, .06); }
.plan-box .plan-svg { width: 100%; height: 100%; max-height: none; }
.page .plan-svg .rl { fill: #2a2622; }
.page .plan-svg .ra { fill: #7a746a; }
.page .plan-svg .north-t { fill: #7a746a; }
.page .plan-svg .north { stroke: #9a9389; }
.page .plan-svg .room { fill: rgba(168, 122, 51, .05); }
.page .plan-svg .room.living { fill: rgba(168, 122, 51, .1); }
.page .plan-svg .win { stroke: #8a6326; }
.opis { font-size: 2.25cqw; line-height: 1.5; color: #3b3732; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 2.4cqw; border-top: 1px solid rgba(0, 0, 0, .1); border-bottom: 1px solid rgba(0, 0, 0, .1); }
.facts div { padding: 1.5cqw 0; }
.facts div + div { padding-left: 2.4cqw; border-left: 1px solid rgba(0, 0, 0, .1); }
.facts small { display: block; font-size: 1.45cqw; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.facts b { font-family: var(--ff-serif); font-weight: 500; font-size: 3.6cqw; color: var(--text); }
.rooms { margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 5cqw; }
.rooms div { display: flex; justify-content: space-between; gap: 2cqw; padding: .65cqw 0; border-bottom: 1px solid rgba(0, 0, 0, .07); font-size: 1.95cqw; }
.rooms dt { color: #4a453f; }
.rooms dd { margin: 0; font-weight: 500; color: var(--text); white-space: nowrap; }

.pay3 { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 2cqw; border-top: 1px solid rgba(0, 0, 0, .1); border-bottom: 1px solid rgba(0, 0, 0, .1); }
.pay3 div { padding: 3cqw 2cqw 3cqw 0; }
.pay3 div + div { padding-left: 2.6cqw; border-left: 1px solid rgba(0, 0, 0, .1); }
.pay3 b { display: block; font-family: var(--ff-serif); font-weight: 400; font-size: 6cqw; line-height: 1; color: var(--gold); margin-bottom: 1.4cqw; }
.pay3 span { font-size: 1.85cqw; line-height: 1.45; }
.pg .ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2cqw; }
.pg .ticks li { position: relative; padding-left: 4.5cqw; }
.pg .ticks li::before { content: ""; position: absolute; left: 0; top: .8em; width: 2.8cqw; height: 1px; background: var(--gold); }

/* корици */
.p-cover { background: #050506; color: #f7f4ef; --gold: #d9a75a; --text: #f7f4ef; --muted: #b9b4ab; }
.p-cover .pg { padding: 10cqw 9cqw 8cqw; }
.pg-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.p-cover .pg::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(5, 5, 6, .85), rgba(5, 5, 6, .35) 42%, rgba(5, 5, 6, .92)); }
.p-cover::after { content: ""; position: absolute; inset: 3.2cqw; z-index: 4; border: 1px solid rgba(217, 167, 90, .5); pointer-events: none; }
.p-cover .pg { z-index: 3; }
.cov { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cov .logo { gap: 1.6cqw; }
.cov .logo-word { font-size: 4.2cqw; }
.cov .logo-sub { font-size: 1.6cqw; gap: 2cqw; }
.cov-mid { margin: auto 0; }
.cov .eb { justify-content: center; }
.cov h1 { margin: 0; font-family: var(--ff-serif); font-weight: 300; font-size: 15cqw; line-height: .95; color: #f7f4ef; }
.cov h1 em { color: #f2cf8e; }
.cov .yr { margin: 3cqw 0 0; font-family: var(--ff-serif); font-size: 5cqw; color: #f2cf8e; letter-spacing: .3em; }
.cov-foot { margin: 0 !important; font-size: 1.7cqw; letter-spacing: .24em; text-transform: uppercase; color: #cfc9bf; }
.back h2 { margin: auto 0 5cqw; color: #f7f4ef; font-size: 8.5cqw; }
.back h2 em { color: #f2cf8e; }
.contact { list-style: none; margin: 0 0 auto; padding: 0; display: grid; gap: 3cqw; }
.contact li { font-family: var(--ff-serif); font-size: 5cqw; color: #f7f4ef; line-height: 1.1; }
.contact small { display: block; font-family: var(--ff-sans); font-size: 1.5cqw; letter-spacing: .24em; text-transform: uppercase; color: #d9a75a; margin-bottom: .8cqw; }

/* ---------- без библиотеката: страниците една под друга ---------- */
.noflip .kat-body, .noflip.kat-body { overflow: auto; }
.noflip .kat-stage { display: block; overflow: auto; }
.noflip .book-wrap { width: min(92vw, 560px); margin: 0 auto; opacity: 1; transform: none; }
.noflip .page { position: relative; aspect-ratio: 210 / 297; margin: 0 0 18px; }

/* ---------- печатење / PDF (?print) ---------- */
@page { size: A4; margin: 0; }
.print .kat-body { display: block; height: auto; overflow: visible; background: #fff; }
.print .kat-top, .print .kat-nav, .print .kat-hint, .print .kat-loading { display: none !important; }
.print .kat-stage { display: block; padding: 0; }
.print .book-wrap { width: auto; opacity: 1; transform: none; }
.print .book { filter: none; }
.print .page { position: relative; width: 210mm; height: 297mm; break-after: page; page-break-after: always; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.print body::after { display: none; }

/* ---------- телефон ---------- */
@media (max-width: 760px) {
  .book-wrap { width: min(92vw, calc((100svh - 190px) * .707)); }
  .kat-top { grid-template-columns: auto 1fr; }
  .kat-title { display: none; }
  .kat-dl span { display: none; }
  .kat-dl { width: 40px; padding: 0; border-radius: 50%; }
  .kat-jump .select { width: 170px; font-size: 12px; }
  .kat-mid { gap: 10px; }
  .kat-count { min-width: 70px; }
  .kat-nav { gap: 10px; }
}

/* преглед на сите станови — збиени табели за да собере на една страна */
.ov { font-size: 1.85cqw; line-height: 1.3; }
.ov td { padding: .62cqw 0; }
.ov th { padding-bottom: .8cqw; }
.ov + .note, .pg h3 + .ov + h3 { margin-top: 2.2cqw; }
.pg .ov-wrap h3, .page .pg h3:has(+ .ov) { margin: 2.6cqw 0 1cqw; }

.back .contact li, .back h2, .cov h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, .6); }