/* =============================================================================
   TEMA "nin-zdrijac" — stylesheet
   =============================================================================
   Izgled je iz RD-a (demo `apartments-kata`): plava paleta uzorkovana sa izvorne
   stranice nin-zdrijac.de, one-page raspored, sistemski font stack.

   Drugi dio filea su KOMPONENTE koje crta core ili zajednički helperi teme —
   galerija i lightbox, kalendar zauzeća, polja forme i status poruke, popis
   značajki i kućnog reda. Preuzete su iz teme `jakasa` (referentna izvedba istih
   core komponenti) i ovdje samo dobivaju boje ove teme: jakasine token varijable
   preslikane su na plavu paletu u `:root` ispod, pa se sama pravila nisu morala
   prepisivati. Mijenja li se izgled komponente, mijenja se OVDJE — jakasa se ne dira.
   ============================================================================= */

/* ATRIBUT `hidden` MORA ZNAČITI SKRIVENO (upute za izradu teme §8a).
   Ugrađeno pravilo preglednika (`[hidden] { display: none }`) dolazi iz UA stylesheeta i gubi
   od SVAKOG autorskog `display` pravila — neovisno o specifičnosti. Element koji JS sakrije s
   `el.hidden = true`, a negdje u ovom fileu ima `display: flex/block`, ostao bi vidljiv. */
[hidden] { display: none !important; }

/* Apartments Kata — demo. Canopy-inspired layout, Adriatic-blue palette from source site header (#204D86). */
:root {
  --blue-900: #12305b;
  --blue-800: #17406f;
  --blue-700: #1f4c85;   /* primary — sampled from source header bg */
  --blue-500: #3573b9;
  --blue-400: #559ad7;   /* from source CSS */
  --blue-100: #dcebf7;
  --blue-50:  #eef4fa;
  --ink:      #17233b;
  --ink-2:    #51607a;
  --line:     #e3e9f1;
  --bg:       #ffffff;
  --radius:   16px;
  --shadow:   0 6px 24px rgba(18, 48, 91, .08);
  --shadow-lg:0 16px 48px rgba(18, 48, 91, .16);
  /* hero carousel: one photo's glide between slots. main.js waits this long before it
     re-seeds the photo that left, so keep HERO_GLIDE in main.js in sync with it. */
  --hero-glide: .95s;
  --hero-ease:  cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.6 -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--blue-700); }
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: 780px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none;
  font-weight: 600; font-size: 16px; border-radius: 999px; padding: 13px 26px;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.btn--primary { background: var(--blue-700); color: #fff; box-shadow: 0 4px 14px rgba(31,76,133,.35); }
.btn--primary:hover { background: var(--blue-800); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--blue-700); box-shadow: inset 0 0 0 2px var(--blue-100); }
.btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--blue-400); }
.btn--light { background: #fff; color: var(--blue-800); }
.btn--light:hover { background: var(--blue-50); }
.btn--sm { padding: 9px 18px; font-size: 14.5px; }
.btn--full { width: 100%; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__inner { display: flex; align-items: center; gap: 28px; height: 68px; }
.nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 700; }
.nav__mark {
  width: 34px; height: 34px; border-radius: 10px; background: var(--blue-700); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 800;
}
.nav__mark-img { height: 30px; width: auto; }
.nav__name { font-size: 17px; white-space: nowrap; }
.nav__stars { color: var(--blue-400); letter-spacing: 1px; margin-left: 2px; }
.nav__links { display: flex; gap: 22px; margin-left: auto; }
.nav__links a { color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 500; }
.nav__links a:hover { color: var(--blue-700); }
.nav__actions { display: flex; align-items: center; gap: 14px; }
.nav__burger { display: none; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav__burger span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; }

/* language dropdown */
.langdd { position: relative; }
.langdd__btn {
  display: flex; align-items: center; gap: 6px; background: none; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; font-size: 14px; font-weight: 600; color: var(--ink);
}
.langdd__btn:hover { border-color: var(--blue-400); }
.langdd__list {
  position: absolute; right: 0; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg);
  min-width: 140px; display: none;
}
.langdd.is-open .langdd__list { display: block; }
.langdd__list li { padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 14.5px; }
.langdd__list li:hover { background: var(--blue-50); }
.langdd__list li.is-cur { color: var(--blue-700); font-weight: 700; }
.langdd__list a { display: flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; }
.langdd__flag {
  display: block; flex: none; width: 20px; height: 14px; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

/* ---------- hero ---------- */
.hero { padding: 72px 0 64px; overflow: hidden; position: relative; }
.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; position: relative; z-index: 1; }

/* bottom-up blue gradient (Canopy hero-shimmer, blue variant) + subtle noise */
.hero-shimmer {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to top, #3f7fc2 0%, #8db9e2 34%, #dcebf7 54%, #ffffff 80%);
  animation: heroFade 1.4s ease-out both;
}
.hero-shimmer::after {
  content: ""; position: absolute; inset: 0; opacity: .4; mix-blend-mode: screen; image-rendering: pixelated;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 2 -0.85'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat; background-size: 90px 90px;
  mask-image: linear-gradient(rgba(0,0,0,0) 30%, #000 66%, #000 100%);
  -webkit-mask-image: linear-gradient(rgba(0,0,0,0) 30%, #000 66%, #000 100%);
}

/* entrance animations (Canopy rise/proto, blue page) */
@keyframes heroFade { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes heroRise { 0% { opacity: 0; transform: translateY(18px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes heroProto { 0% { opacity: 0; transform: translateY(38px) scale(.985); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.hero-anim { opacity: 0; animation: heroRise .9s cubic-bezier(.16,1,.3,1) var(--d, 0s) both; }
.hero-anim--proto { opacity: 0; animation: heroProto 1.1s cubic-bezier(.16,1,.3,1) .1s both; }

/* typewriter title: ghost reserves layout, typed overlays it */
.hero__title { position: relative; }
.hero__ghost { visibility: hidden; }
.hero__typed { position: absolute; inset: 0; }
.hero__caret {
  display: inline-block; width: 4px; height: .82em; margin-left: 3px; border-radius: 2px;
  background: var(--blue-400); vertical-align: -0.06em;
  animation: caretBlink .75s steps(1) infinite;
}
@keyframes caretBlink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }

/* blue glow pulse after the title finishes typing (Canopy canopyHeroPulse) */
@keyframes heroPulse {
  0%   { box-shadow: var(--shadow-lg); }
  24%  { box-shadow: 0 16px 48px rgba(18,48,91,.16), 0 0 0 4px rgba(160,210,255,.9), 0 0 84px 24px rgba(120,185,245,.75); }
  100% { box-shadow: var(--shadow-lg); }
}
.is-glow { animation: heroPulse 1.6s ease-out both; }
@keyframes btnRing {
  0%   { box-shadow: 0 4px 14px rgba(31,76,133,.35), 0 0 0 0 rgba(160,210,255,.9); }
  100% { box-shadow: 0 4px 14px rgba(31,76,133,.35), 0 0 22px 14px rgba(160,210,255,0); }
}
.btn--primary.is-glow { animation: btnRing 1.2s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .hero-anim, .hero-anim--proto, .hero-shimmer, .is-glow, .btn--primary.is-glow { animation: none; opacity: 1; }
  .hero__ph.is-wave::after { animation: none; }
  .hero__caret { display: none; }
  /* main.js also never starts the carousel here, so the photos are not clickable either */
  .hero__ph { transition: none; }
  .hero__ph.is-s1, .hero__ph.is-s2, .hero__ph.is-s3 { cursor: default; }
}
.eyebrow { color: var(--blue-500); font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 14px; }
.eyebrow__stars { color: #f4b63f; letter-spacing: 2px; margin-right: 6px; }
.hero__title { font-size: clamp(40px, 6vw, 64px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 20px; font-weight: 800; }
.hero__sub { font-size: 19px; color: var(--ink-2); margin: 0 0 28px; max-width: 34em; }
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }
.hero__stats { display: flex; gap: 30px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.hero__stats li { display: flex; flex-direction: column; }
.hero__stats strong { font-size: 22px; color: var(--blue-700); }
.hero__stats span { font-size: 13px; color: var(--ink-2); }

.hero__visual { position: relative; min-height: 460px; }
.hero__photos { position: relative; height: 300px; perspective: 1200px; }
/* Every photo has the SAME base box (the big slot) and is placed by transform alone —
   see the slot rules below. Animating left/top/width/height instead would judder on the
   slow tail of the easing: layout positions snap to whole device pixels (sub-pixel steps
   pile up, then jump), and a changing width/height re-rasterizes the image every frame,
   which makes fine detail shimmer. transform + opacity are composited in float on the GPU:
   the photo is rasterized once and only transformed, so the landing stays smooth. */
.hero__ph {
  position: absolute; left: 0; top: 0; width: 62%; height: 230px;
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  will-change: transform, opacity; backface-visibility: hidden;
  transition: transform var(--hero-glide) var(--hero-ease), opacity var(--hero-glide) ease;
}
.hero__ph img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* border-wave ring (Canopy hero-wave, applied to the photo borders): a glowing
   ring revealed by a mask that grows from the center out to both sides */
.hero__ph::after {
  content: ""; position: absolute; inset: -4px; border-radius: calc(var(--radius) + 4px);
  border: 3px solid rgba(175, 218, 255, .95);
  box-shadow: 0 0 16px 4px rgba(120, 185, 245, .85), inset 0 0 12px 2px rgba(120, 185, 245, .55);
  opacity: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(#000 42%, transparent 76%);
  mask-image: radial-gradient(#000 42%, transparent 76%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 0% 220%; mask-size: 0% 220%;
}
.hero__ph.is-wave::after { animation: phWave 1.65s ease-out var(--wd, 0s) both; }
@keyframes phWave {
  0%   { opacity: 0; -webkit-mask-size: 0% 220%; mask-size: 0% 220%; }
  16%  { opacity: .95; }
  100% { opacity: 0; -webkit-mask-size: 260% 220%; mask-size: 260% 220%; }
}
/* hero carousel slots — geometry only, JS moves photos between them:
   deep → s3 (back) → s2 (small, in front) → s1 (big) → out.

   Each slot is pure transform over the shared base box (62% wide × 230px = the s1 slot).
   translate moves the box CENTRE (it is leftmost, so it acts in the container's axes,
   unaffected by the rotations that follow); scale then shrinks around that centre. For a
   slot whose top-left should sit at (X, Y) with scale s:
       translateX% = (X / baseW + (s - 1) / 2) * 100     translateY = Y + baseH * (s - 1) / 2
   Scales are ≤ 1 so the photo is only ever downscaled from its rasterized size.
   Every slot lists the SAME transform functions in the same order, otherwise the browser
   falls back to matrix interpolation and the 3D arc turns into a flat slide.
   s3 is turned away on the Y axis; un-turning it on the way to s2 is what reads as depth. */
.hero__ph.is-s1   { transform: translate(0,       0)       rotateY(0deg)   rotate(-2deg)  scale(1);    z-index: 2; opacity: 1; }
.hero__ph.is-s2   { transform: translate(9.81%,   143.2px) rotateY(0deg)   rotate(-1deg)  scale(.68);  z-index: 3; opacity: 1; }
.hero__ph.is-s3   { transform: translate(69.92%,  22.75px) rotateY(-12deg) rotate(2.5deg) scale(.85);  z-index: 1; opacity: 1; }
/* waiting in depth, turned away and invisible — next tick brings it forward into s3 */
.hero__ph.is-deep { transform: translate(86%,     33.8px)  rotateY(-30deg) rotate(4deg)   scale(.72);  z-index: 0; opacity: 0; }
/* leaving: s1 holds its place and just dissolves under the photo growing over it */
.hero__ph.is-out  { transform: translate(0,       0)       rotateY(0deg)   rotate(-2deg)  scale(1.03); z-index: 0; opacity: 0; }
/* clicking a photo pulls the next turn forward — but only the three that are actually
   visible; the invisible ones still cover hero space and would swallow the click */
.hero__ph.is-s1, .hero__ph.is-s2, .hero__ph.is-s3 { cursor: pointer; }
.hero__ph.is-deep, .hero__ph.is-out { pointer-events: none; }

/* receipt-style report card (Canopy "quality report" homage) */
.report {
  position: relative; margin-top: 56px; margin-left: auto; max-width: 340px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg);
  padding: 18px 20px; font-size: 14.5px; z-index: 4;
}
.report__head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; margin-bottom: 10px; }
.report__badge { background: #e7f6ec; color: #1d7a3f; font-size: 11px; font-weight: 800; letter-spacing: .06em; padding: 3px 9px; border-radius: 999px; }
.report__rows { list-style: none; margin: 0; padding: 0; }
.report__rows li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--line); color: var(--ink-2); }
.report__rows b { color: var(--ink); font-variant-numeric: tabular-nums; }
.report__foot { margin: 10px 0 0; color: var(--blue-500); font-weight: 600; font-size: 13.5px; }

/* ---------- trust strip ---------- */
.trust { border-block: 1px solid var(--line); padding: 22px 0; background: var(--blue-50); }
.trust .container { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.trust__label { margin: 0; font-size: 13px; color: var(--ink-2); }
.trust__logos { display: flex; gap: 28px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.trust__logos li { font-weight: 700; color: #93a5bd; font-size: 15px; }

/* ---------- sections ---------- */
.section { padding: 84px 0; }
.section--tint { background: var(--blue-50); }
.section--deep { background: linear-gradient(135deg, var(--blue-800), var(--blue-700)); color: #fff; }
.section__title { font-size: clamp(28px, 4vw, 40px); letter-spacing: -.01em; margin: 0 0 10px; font-weight: 800; }
.section__sub { color: var(--ink-2); font-size: 18px; margin: 0 0 40px; max-width: 40em; }

/* ---------- cards ---------- */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.card__icon { font-size: 30px; margin-bottom: 12px; }
.card h3 { margin: 0 0 8px; font-size: 19px; }
.card p { margin: 0; color: var(--ink-2); font-size: 15.5px; }

/* ---------- units ---------- */
.unit { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.unit__media { position: relative; cursor: pointer; }
.unit__media img { height: 210px; width: 100%; object-fit: cover; transition: transform .25s; }
.unit__media:hover img { transform: scale(1.04); }
.unit__media { overflow: hidden; }
.unit__galbadge {
  position: absolute; right: 12px; bottom: 12px;
  background: rgba(18, 48, 91, .8); color: #fff; font-size: 12px; font-weight: 600;
  padding: 4px 11px; border-radius: 999px; pointer-events: none;
}
.unit__tag { position: absolute; left: 12px; top: 12px; background: rgba(18,48,91,.85); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.unit__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.unit__body h3 { margin: 0 0 8px; font-size: 20px; }
.unit__meta { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 12px; }
.unit__meta li { background: var(--blue-50); color: var(--blue-700); font-size: 13px; font-weight: 600; padding: 3px 11px; border-radius: 999px; }
.unit__body > p { color: var(--ink-2); font-size: 15px; margin: 0 0 16px; }
.unit__price { margin: auto 0 14px; font-size: 15px; color: var(--ink-2); }
.unit__price b { font-size: 26px; color: var(--blue-700); margin: 0 3px; }
.unit .btn { align-self: flex-start; }

/* ---------- comparison table ---------- */
.compare { margin-top: 56px; }
.compare__title { font-size: 24px; margin: 0 0 18px; }
.tablewrap { overflow-x: auto; }
.cmp { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); min-width: 560px; }
.cmp th, .cmp td { padding: 13px 18px; text-align: center; border-bottom: 1px solid var(--line); font-size: 15px; }
.cmp thead th { background: var(--blue-700); color: #fff; font-size: 15.5px; }
.cmp td:first-child { text-align: left; color: var(--ink-2); font-weight: 500; }
.cmp tr:last-child td { border-bottom: 0; }
.cmp .yes { color: #1d7a3f; font-weight: 700; }
.cmp .no { color: #b6c2d2; }

/* ---------- amenities ---------- */
.amen { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.amen li { background: var(--blue-50); border-radius: 12px; padding: 12px 16px; font-size: 15px; font-weight: 500; }

/* ---------- pricing ---------- */
.pricetab { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); min-width: 640px; }
.pricetab th, .pricetab td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--line); font-size: 15px; }
.pricetab thead th { background: var(--blue-700); color: #fff; font-weight: 600; line-height: 1.35; }
.pricetab td:first-child { text-align: left; font-weight: 600; }
.pricetab tr:last-child td { border-bottom: 0; }
.pricetab__note { font-size: 12px; opacity: .75; }
.pricetab__hot { background: var(--blue-50); font-weight: 700; color: var(--blue-800); position: relative; }
.pricetab thead .pricetab__hot { background: var(--blue-900); color: #fff; }
.hotbadge { display: inline-block; background: #f4b63f; color: #5b3c00; font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; margin-left: 7px; vertical-align: middle; }
.dim { color: var(--ink-2); font-weight: 400; font-size: 13px; }
/* Uvodna napomena uz plaćanje (`object.pricing.description`) — stoji IZNAD popisa napomena,
   pa razmak prema njemu nosi ona, a ne popis. */
.price__note { margin: 22px 0 0; color: var(--ink-2); font-size: 14.5px; }
.price__note + .price__notes { margin-top: 8px; }
.price__notes { margin: 22px 0 0; padding: 0 0 0 20px; color: var(--ink-2); font-size: 14.5px; }
.price__notes li { margin-bottom: 4px; }

/* ---------- booking ---------- */
.booking { display: grid; grid-template-columns: 1.15fr .85fr; gap: 32px; align-items: start; }
.booking__cal { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; }
.unitpick { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.unitpick__btn {
  border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 18px;
  font-size: 14.5px; font-weight: 600; cursor: pointer; color: var(--ink-2);
}
.unitpick__btn.is-active { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
.cal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal__nav button { border: 1px solid var(--line); background: #fff; width: 34px; height: 34px; border-radius: 10px; font-size: 18px; cursor: pointer; color: var(--blue-700); }
.cal__nav button:hover { border-color: var(--blue-400); }
.cal__months { font-weight: 700; font-size: 15.5px; }
.cal__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.calmonth { font-size: 13.5px; }
.calmonth__name { text-align: center; font-weight: 700; margin-bottom: 8px; color: var(--blue-800); }
.calmonth table { width: 100%; border-collapse: collapse; }
.calmonth th { color: var(--ink-2); font-weight: 600; font-size: 11.5px; padding: 3px 0; }
.calmonth td { text-align: center; padding: 0; }
.calmonth td span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 9px; margin: 1.5px;
}
.calmonth .free span { background: #edf7f0; color: #1d7a3f; cursor: pointer; }
.calmonth .free span:hover { outline: 2px solid var(--blue-400); }
.calmonth .busy span { background: #fdeaea; color: #c0392b; text-decoration: line-through; }
.calmonth .past span { color: #b6c2d2; }
.cal__legend { display: flex; gap: 20px; margin-top: 16px; font-size: 13px; color: var(--ink-2); }
.cal__legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { width: 13px; height: 13px; border-radius: 4px; display: inline-block; }
.lg--free { background: #edf7f0; border: 1px solid #bfe3cb; }
.lg--busy { background: #fdeaea; border: 1px solid #f2c2c2; }
.lg--past { background: #f2f5f9; border: 1px solid var(--line); }

.booking__form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px; }
.booking__form h3 { margin: 0 0 18px; font-size: 20px; }
.booking__form label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 14px; }
.booking__form input, .booking__form select, .booking__form textarea {
  width: 100%; margin-top: 5px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: 15px; color: var(--ink); background: #fff;
}
.booking__form input:focus, .booking__form select:focus, .booking__form textarea:focus {
  outline: none; border-color: var(--blue-400); box-shadow: 0 0 0 3px var(--blue-100);
}
.frow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.booking__ok { background: #e7f6ec; color: #1d7a3f; border-radius: 10px; padding: 12px 14px; font-size: 14.5px; margin: 14px 0 0; }
.booking__paypal { font-size: 13px; color: var(--ink-2); margin: 14px 0 0; text-align: center; }
.field-error { border-color: #c0392b !important; }

/* ---------- testimonials ---------- */
.quote { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px; margin: 0; display: flex; flex-direction: column; }
.quote blockquote { margin: 0 0 16px; font-size: 15.5px; color: var(--ink); }
.quote figcaption { margin-top: auto; font-size: 14px; color: var(--ink-2); }
.quote__stars { color: #f4b63f; display: block; margin-top: 3px; letter-spacing: 2px; }

/* ---------- gallery ---------- */
.galfilter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.galfilter button {
  border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 18px;
  font-size: 14.5px; font-weight: 600; cursor: pointer; color: var(--ink-2);
}
/* AKTIVNI CHIP: stanje nosi `aria-selected` (elementi su `role="tab"`, pa je to i pravo mjesto
   za njega), a ne pomoćna klasa — RD je koristio `.is-active` jer njegov JS ne radi s ulogama.
   Jedno stanje, jedan izvor istine: čitač ekrana i oko vide isto. */
.galfilter button[aria-selected="true"] { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
.galfilter button[aria-selected="true"]:hover { background: var(--blue-800); }
.gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gal__it { position: relative; cursor: pointer; border-radius: 12px; transition: transform .15s, box-shadow .15s; }
.gal__it:hover { transform: scale(1.03); box-shadow: var(--shadow-lg); }
.gal__it img { width: 100%; height: 160px; object-fit: cover; border-radius: 12px; display: block; }

/* play badge — YouTube's red button (the videos ARE YouTube), so a thumbnail reads as a
   video at a glance. Same shape on grid tiles and on the lightbox poster slide. */
.playbadge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 58px; height: 41px; border: 0; border-radius: 12px; cursor: pointer;
  background: rgba(228, 0, 0, .93);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35); pointer-events: none;
  transition: background .15s, transform .15s;
}
.playbadge::after { /* white triangle; nudged right of centre so it looks centred */
  content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 8px 0 8px 14px; border-color: transparent transparent transparent #fff;
}
.gal__it--video:hover .playbadge { background: #f00; transform: translate(-50%, -50%) scale(1.08); }
.playbadge--big { width: 86px; height: 60px; border-radius: 17px; pointer-events: auto; }
.playbadge--big::after { border-width: 12px 0 12px 21px; }
.playbadge--big:hover { background: #f00; transform: translate(-50%, -50%) scale(1.06); }

/* video tiles in the grid — the thumbnails are frames of the same rooms, so a wash sets
   them apart from the photos. The red badge carries the message; it paints on top
   because ::before draws under the element's children. */
.gal__it--video::before {
  content: ""; position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
  background: linear-gradient(to top, rgba(10, 24, 46, .60) 0%, rgba(10, 24, 46, .10) 46%, rgba(10, 24, 46, 0) 72%);
}

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(10, 20, 38, .92); display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox__media { display: flex; align-items: center; justify-content: center; }
.lightbox__media > img { max-width: min(92vw, 900px); max-height: 86vh; border-radius: 10px; box-shadow: 0 20px 80px rgba(0,0,0,.5); }
.lightbox__video {
  position: relative; width: min(92vw, 960px); aspect-ratio: 16 / 9;
  border-radius: 10px; overflow: hidden; box-shadow: 0 20px 80px rgba(0,0,0,.5); background: #000;
}
.lightbox__video iframe { width: 100%; height: 100%; display: block; }
.lightbox__video--poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* chrome only (close/prev/next are direct children) — must not catch the play button
   inside #lbMedia, which is a .playbadge and styles itself */
.lightbox > button { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; cursor: pointer; border-radius: 999px; font-size: 22px; width: 44px; height: 44px; }
.lightbox > button:hover { background: rgba(255,255,255,.25); }
.lightbox__close { top: 20px; right: 20px; }
.lightbox__prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 18px; top: 50%; transform: translateY(-50%); }

/* ---------- location ---------- */
/* LOKACIJA — karta je FLOAT, ne stupac rastera. Oba teksta (uvod i priča o mjestu) teku jednim
   tijekom pokraj nje i ispod nje se šire na punu širinu; u rasteru bi priča čekala kraj oba
   stupca, pa bi između uvoda i nje ostala rupa visine karte. */
.loc { overflow: hidden; }   /* zatvara float, da ne iscuri iz sekcije */
.loc__side { float: right; width: 48%; margin: 0 0 28px 36px; }
.loc__text p { color: var(--ink-2); margin: 0 0 16px; }
.loc__addr { font-style: normal; margin: 0 0 18px; padding: 14px 18px; background: #fff; border-left: 4px solid var(--blue-700); border-radius: 8px; box-shadow: var(--shadow); }
.disttab { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.disttab td { padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.disttab td:nth-child(odd) { color: var(--ink-2); }
.disttab td:nth-child(even) { font-weight: 700; color: var(--blue-800); font-variant-numeric: tabular-nums; }
.disttab tr:last-child td { border-bottom: 0; }
.loc__map iframe { width: 100%; height: 420px; border: 0; border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---------- faq ---------- */
.faq__item { background: #fff; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 12px; box-shadow: var(--shadow); overflow: hidden; }
.faq__item summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 700; font-size: 16.5px; position: relative; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); color: var(--blue-500); font-size: 22px; font-weight: 400; }
.faq__item[open] summary::after { content: "–"; }
.faq__item p { margin: 0; padding: 0 22px 18px; color: var(--ink-2); font-size: 15.5px; }

/* ---------- hosts / cta ---------- */
.hosts { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hosts__info h2 { font-size: clamp(28px, 4vw, 40px); margin: 0 0 14px; letter-spacing: -.01em; }
.hosts__info > p { font-size: 17px; opacity: .92; margin: 0 0 22px; }
.hosts__contacts { list-style: none; margin: 0 0 26px; padding: 0; }
.hosts__contacts li { margin-bottom: 8px; font-size: 15.5px; }
.hosts__contacts a { color: #fff; }
.hosts__photo img { border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 100%; height: 340px; object-fit: cover; }

/* ---------- footer ---------- */
.footer { padding: 40px 0; border-top: 1px solid var(--line); }
.footer__grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 32px; align-items: start; }
.footer__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; margin: 0 0 10px; }
.footer__small { color: var(--ink-2); font-size: 13.5px; margin: 0; line-height: 1.7; }
.footer__nav { display: flex; flex-direction: column; gap: 6px; }
.footer__nav a { text-decoration: none; color: var(--ink-2); font-size: 14.5px; }
.footer__nav a:hover { color: var(--blue-700); }
.footer__grid > p:last-child { text-align: right; }

/* ---------- demo notice — uskladi s paletom stranice ---------- */
#demo-notice {
  --dn-bg: #ffffff;
  --dn-color: var(--ink);
  --dn-muted: var(--ink-2);
  --dn-accent: var(--blue-700);
  --dn-accent-hover: var(--blue-800);
  --dn-accent-color: #ffffff;
  --dn-border: var(--line);
  --dn-radius: var(--radius);
  --dn-shadow: var(--shadow-lg);
  --dn-font: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .nav__name { display: none; }
  .nav__inner { gap: 18px; }
}
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__visual { min-height: 0; }
  .report { margin-left: 0; }
  .cards3 { grid-template-columns: 1fr 1fr; }
  .booking { grid-template-columns: 1fr; }
  /* Bez dvaju stupaca float nema smisla: flex vraća sve u jedan niz, a `order` tekst ispred
     karte — u DOM-u je karta prva samo zato da je tekst na širokom ekranu obilazi. */
  .loc { display: flex; flex-direction: column; gap: 28px; }
  .loc__side { float: none; width: auto; margin: 0; }
  .loc__text { order: -1; }
  .hosts { grid-template-columns: 1fr; }
  .gal { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__grid > p:last-child { text-align: left; }
}
@media (max-width: 760px) {
  .nav__links {
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line); flex-direction: column; padding: 16px 24px; gap: 14px;
    box-shadow: var(--shadow-lg);
  }
  .nav__links.is-open { display: flex; }
  .nav__burger { display: block; }
  .nav__name { display: none; }
  .nav .btn { display: none; }
  .cards3 { grid-template-columns: 1fr; }
  .cal__grid2 { grid-template-columns: 1fr; }
  .gal { grid-template-columns: repeat(2, 1fr); }
  .gal img { height: 120px; }
  .section { padding: 60px 0; }
  .hero { padding: 48px 0; }
  /* narrow: back to two photos, and main.js keeps the carousel stopped so nothing
     rotates through a hidden slot — the photos do not react to clicks here either */
  .hero__ph.is-s2, .hero__ph.is-deep { display: none; }
  /* same two-class specificity as the rule that set the pointer, or it would not win */
  .hero__ph.is-s1, .hero__ph.is-s2, .hero__ph.is-s3 { cursor: default; }
}


/* ---------------------------------------------------------------------------
   MOST PREMA KOMPONENTAMA — jakasini nazivi tokena, vrijednosti ove teme.
   Postoji da se komponentni CSS ispod može držati blizu izvorniku: jedna izmjena
   boje ovdje prebojava kalendar, galeriju, lightbox i formu odjednom.
   --------------------------------------------------------------------------- */
:root {
  --pink:      var(--blue-700);
  --pink-dark: var(--blue-900);
  --dark:      var(--blue-900);
  --dark-2:    var(--blue-800);
  --body:      var(--ink-2);
  --muted:     #7a879c;
  --gray-1:    var(--blue-50);
  --gray-2:    #eef2f7;
  --shell:     1120px;
  --font:      -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Komponente su pisane za `.shell` kontejner; RD koristi `.container`. */
.shell { max-width: var(--shell); margin: 0 auto; padding: 0 24px; }


/* =============================================================================
   KOMPONENTE (galerija, lightbox, kalendar zauzeća, forma, značajke, kućni red)
   ============================================================================= */

/* ---------- poveznica u tekstu koji je napisao vlasnik ----------
   Core svakoj poveznici iz bogatog teksta (opis objekta/jedinice iz EAD-a, SSD tekst, članak
   bloga) pri ispisu doda `.ap-link` — vanjskoj i `.ap-link-ext` (\ApCore\Html::decorateLinks).
   Tema mora reći kako izgleda: bez ovoga je reset iznad (`color: inherit; text-decoration: none`)
   pretvara u običan tekst, pa gost ne vidi da se na nju može kliknuti.
   Ne dira poveznice koje tema sama sastavlja (gumbi, `.link-arrow`) — one klasu ne nose. */
.ap-link {
  color: var(--pink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s;
}

.ap-link:hover { color: var(--pink-dark); text-decoration-thickness: 2px; }

/* Na tamnoj podlozi (CTA traka, podnožje) pink utone — ista poveznica, svjetlija varijanta. */
.band .ap-link, .site-footer .ap-link { color: #ff87b0; }

.band .ap-link:hover, .site-footer .ap-link:hover { color: #fff; }

/* Vanjska poveznica se otvara u novoj kartici, pa to i kaže — strelica je dio poveznice, ne
   susjedni znak: `nowrap` na zadnjoj riječi bi bio bolji, ali traži zahvat u sam tekst. */
.ap-link-ext::after {
  content: "\2197";
  display: inline-block;
  margin-left: .18em;
  font-size: .82em;
  font-weight: 600;
  text-decoration: none;
  vertical-align: baseline;
}

/* staggered overlapping photo pair */
.pics {
  position: relative;
  aspect-ratio: 10 / 9;
}

.pics .p1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 74%;
  height: 78%;
  object-fit: cover;
  border-radius: 8px;
}

.pics .p2 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
  height: 56%;
  object-fit: cover;
  border: 8px solid #fff;
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(11, 11, 18, .22);
}

.pics::before {
  content: "";
  position: absolute;
  top: 10%;
  right: 6%;
  width: 34%;
  height: 34%;
  border-radius: 8px;
  background: var(--pink);
  opacity: .12;
}

/* photo pairs wired to the lightbox */
.pics[data-prefix] img,
.pics[data-images] img { cursor: zoom-in; }

/* JEDNA NASLOVNA SLIKA (`cover: single`) — treći oblik galerije uz par i traku minijatura.
   Vidi se prva stavka + oznaka koliko ih ima; klik otvara sve u popupu. Roditelj mora biti
   `position: relative` zbog oznake i gumba „Play" (isto pravilo kao `.img-more-badge`). */
.cover-one { position: relative; }

.cover-one img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 8px;
}

/* Oblik se bira po MJESTU, pa svaki od tri oblika može završiti i u redu sadržaja (`.case-media`)
   i kao samostalna sekcija. Ova dva pravila drže raster netaknutim kad se mjesto prebaci na
   oblik koji ondje nije zadan. */
.case-media.cover-one img { aspect-ratio: 10 / 9; }

/* `min-width: 0` NIJE kozmetika: raster je grid, a grid stavka se po defaultu (`min-width: auto`)
   ne smije stisnuti ispod širine sadržaja. Traka minijatura je flex red od dvadesetak sličica
   po 92px, pa je stupac rastezala na ~1900px i cijela je stranica dobivala vodoravni scroll —
   `overflow-x: auto` na samoj traci to ne spriječi jer se prelijeva stupac, ne traka. */
.case-media.gallery { margin: 0; min-width: 0; }

/* Uvodni red "cijeli objekt": opis je cijeli tekst objekta, pa je stupac s tekstom osjetno viši
   od ostalih redova. Par slika NAMJERNO ne prati tu visinu — tekst je promjenjiv (mijenja ga
   vlasnik kroz Apartlio), pa bi se slike razvlačile s njim. Zato fiksna visina u pikselima;
   par ostaje okomito centriran uz tekst. */
.case-intro .pics { aspect-ratio: auto; height: 550px; }

/* MULTISLIKA na mjestu zamišljenom za JEDNU sliku: vidi se prva, oznaka kaže da ih ima više,
   a klik otvara sve u lightboxu (site.js). Roditelj mora biti `position: relative`. */
.img-more-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(11, 11, 18, .62);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  pointer-events: none;
}

/* ---------- video (facade) ----------
   Galerija smije sadržavati i video (YouTube). Svugdje se prikazuje kao SMRZNUTA SLIKA s
   gumbom „Play"; pravi okvir se ubacuje tek na klik (site.js), pa posjetitelj koji video ne
   otvori ne plati ~1 MB i ne dobije kolačiće. Roditelj gumba mora biti pozicioniran — isto
   pravilo kao za `.img-more-badge`.

   IZGLED GUMBA JE RD-OV `.playbadge` (crveni YouTube gumb, gore u ovom fileu) — svako mjesto
   koje gumb ispisuje nosi i tu oznaku, pa je izgled definiran na JEDNOM mjestu. Ovdje ostaje
   samo ono što RD ne zna: kod nas je to STVARAN gumb koji mora primiti klik (u RD-u je ukras,
   jer ondje klik hvata cijela pločica), pa mu se vraća pokazivač. */
.video-play {
  pointer-events: auto;
  z-index: 2;
}

/* Preko gumba se prelazi mišem i ondje gdje pločica nema vlastiti hover (kartica jedinice,
   par slika) — boja je RD-ova hover boja, da se ta dva stanja ne raziđu. */
.video-play:hover,
.video-play:focus-visible { background: #f00; transform: translate(-50%, -50%) scale(1.06); }

/* Oznaka nad inline galerijom — NIJE gumb (klik otvara lightbox); `.playbadge` joj već ne daje
   pokazivač, pa joj ovdje treba samo mjesto u sloju. */
.gal-play { z-index: 2; }

/* Slika u PARU (`.pics .p1/.p2`) koja je zapravo video. Par je JEDAN okvir s dvije apsolutno
   položene slike, pa gumb ne može naslijediti centar od roditelja — pozicionira se na centar
   iste geometrije koju ima slika kojoj pripada (`.p1` = 74%×78% iz gornjeg lijevog kuta,
   `.p2` = 52%×56% iz donjeg desnog). Manji je nego drugdje jer su i slike manje. */
.pics .video-play { width: 46px; height: 32px; border-radius: 10px; }

.pics .video-play::after { border-width: 6px 0 6px 11px; }

.pics .video-play.for-p1 { left: 37%; top: 39%; }

.pics .video-play.for-p2 { left: 74%; top: 72%; }

/* Minijatura videa u traci — mala oznaka u kutu, da se traka ne pretvori u niz krugova. */
.gal-thumbs button.is-video { position: relative; }

.gal-thumbs button.is-video::after {
  content: '▶';
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(11, 11, 18, .7);
  color: #fff;
  font-size: 8px;
}

.lb-stage { position: relative; }

/* PLAYER VIDEA (`video-frame`, slaže ga site.js na klik „Play") — preuzima CIJELO mjesto slike:
   pozornicu lightboxa, hero, okvir slike. Bez ovog pravila okvir je obična statična kutija, pa
   iframe ostane na svojih zadanih 300×150 i sjedne POKRAJ slike — video se otvori, ali u sličici
   u kutu. Isti propust kao kod `.lb` (§4.5c uputa): pravilo koje RD nema, jer RD video vrti
   vlastitim markupom. */
.video-frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #000;
  /* zaobljenje pozornice, da player ne izlazi iz oblika slike koju pokriva */
  border-radius: 10px;
  overflow: hidden;
}

.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* AMBIJENTALNI video (`video: "inline"` — hero): pozadina, ne sadržaj. Bez zvuka i kontrola, ne
   prima klikove (tekst i CTA preko njega moraju ostati dohvatljivi), i POKRIVA okvir kao
   `object-fit: cover` — YouTube okvir je 16:9, a hero je viši, pa se skalira i prelije. */
.video-frame.is-ambient { pointer-events: none; z-index: 0; border-radius: 0; }

.video-frame.is-ambient iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;          /* 16:9 prema širini */
  min-height: 100%;
  min-width: 177.78vh;      /* 16:9 prema visini — što je veće, to pobjeđuje */
  transform: translate(-50%, -50%);
}

/* PREPORUKE GOSTIJU — u RD-u su KARTICE (`.quote`, gore u ovom fileu), a ne niz odlomaka
   odvojenih crtom. Zatečeni blok preuzete teme je taj `.quote` gazio (`padding: 26px 0`,
   `border-top`), pa su kutije ostajale bez ijednog razmaka — zato ga ovdje nema. */

/* ---------- blog sekcija: traka alata, filtri, infinity loader ---------- */

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

.price-tag { margin: 4px 0 26px; font-size: 15px; color: var(--muted); }

.price-tag b { color: var(--ink); font-size: 26px; font-weight: 900; }

/* RD sadržaj smještaja: rešetka svijetloplavih pločica koja se sama prelama po širini
   (`auto-fill`), a ne dvostupčani tekstualni popis. Znak stanja i naziv stoje u istom retku. */
.amenities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.amenities li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  background: var(--blue-50);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 500;
}

/* ZNAČAJKE — tri stanja (PROTOCOL.md §4.2.6). Znak ✓/✗ je SADRŽAJ (ide u HTML), ne ::before:
   „nije uključeno" je vlasnikova tvrdnja, pa je mora pročitati i čitač ekrana. */
.amenities .ap-feat-mark {
  flex: 0 0 auto;
  color: var(--blue-700);
  font-weight: 900;
  cursor: default;
}

/* Sadržaja NEMA: stavka ostaje na popisu, prigušena i precrtanog naziva. Nikad display:none —
   vlasnik bi time izgubio mjesto na koje u MEM-u klikne da stanje vrati. */
.amenities li.is-off { opacity: .55; }

.amenities li.is-off .ap-feat-mark { color: var(--ink); opacity: .5; }

.amenities li.is-off .ap-feat-name { text-decoration: line-through; text-decoration-thickness: 1px; }

.amenities li.is-highlighted .ap-feat-name { font-weight: 700; }

/* Nadoplata i opis — dodatak uz naziv, nikad umjesto njega. */
.amenities .ap-feat-fee {
  margin-left: 6px;
  padding: 1px 7px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .02em;
  white-space: nowrap;
  opacity: .7;
}

.amenities .ap-feat-desc { flex: 1 0 100%; font-size: 13px; opacity: .7; line-height: 1.45; }

/* Pločica se ne smije razbiti kad je naziv dug — riječ se prelama, a pločica ostaje u rasteru. */
.amenities .ap-feat-name { overflow-wrap: anywhere; }

/* gallery (kept from the original demo, restyled) */

.gallery { margin: 50px 0 20px; }

.gal-stage {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--gray-2);
}

.gal-stage > img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }

.gal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(11, 11, 18, .55);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s;
}

.gal-nav:hover { background: var(--pink); }

.gal-prev { left: 16px; }

.gal-next { right: 16px; }

.gal-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

.gal-thumbs button {
  flex: 0 0 92px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: .55;
  transition: opacity .2s, box-shadow .2s;
}

.gal-thumbs button img { width: 92px; height: 64px; object-fit: cover; }

.gal-thumbs button[aria-selected="true"] {
  opacity: 1;
  box-shadow: inset 0 0 0 3px var(--pink);
}

.gal-thumbs button:hover { opacity: 1; }

/* SAM SLOJ lightboxa. Bez ovog pravila `.lb` je obican `<div>` na dnu `<body>`-ja: popup se
   otvori, ali stoji ispod cijele stranice i nista se ne vidi. Boja zastora i okrugli gumbi
   preuzeti su iz RD-a (`.lightbox`), a raspored je stupac jer tema ispod slike ima jos i
   brojac i traku minijatura, kojih u RD-u nema. */
.lb {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 26px clamp(16px, 5vw, 90px);
  background: rgba(10, 20, 38, .92);
}

.lb.open { display: flex; }

.lb-stage {
  margin: 0;
  width: 100%;
  max-width: 1100px;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* slika koja u prijelazu odlazi mora nestati na rubu pozornice, ne preko pola ekrana */
  overflow: hidden;
}

/* PRESLIKA slike koja odlazi (site.js) — pravi `<img>` je jedan i već nosi novu sliku.
   Leži točno preko pozornice i ne prima klikove; njezin `<img>` hvata `.lb-stage img`. */
.lb-ghost {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.lb-stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* radijus i sjena kao u RD-u, da slika i na tamnom zastoru ostane kartica */
  border-radius: 10px;
  box-shadow: 0 20px 80px rgba(0, 0, 0, .5);
}

.lb-close,
.lb-nav {
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  line-height: 1;
  cursor: pointer;
  transition: background .2s;
  z-index: 2;
}

.lb-close:hover,
.lb-nav:hover { background: var(--pink); }

.lb-close {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 46px;
  height: 46px;
  font-size: 26px;
}

.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 30px;
}

.lb-prev { left: clamp(10px, 2vw, 26px); }

.lb-next { right: clamp(10px, 2vw, 26px); }

.lb-count {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, .75);
}

.lb-thumbs {
  width: 100%;
  max-width: 1100px;
  flex: 0 0 auto;
  margin-top: 0;
}

.lb-thumbs button { flex: 0 0 72px; }

.lb-thumbs button img { width: 72px; height: 50px; }

.field { margin-bottom: 22px; }

.field label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--gray-1);
  font-family: var(--font);
  font-size: 15px;
  color: var(--ink);
  transition: border-color .2s, background .2s;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--pink);
  background: #fff;
}

.field textarea { min-height: 140px; resize: vertical; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* STATUS POZICIJA ([#MEFS]) — stalno mjesto za poruku forme (potvrda ili upozorenje).
   Kontejner stoji u statici i kad je prazan, jer nosi `magic_group` pozicije; prazan nema ni
   visinu ni razmak, pa se forma bez poruke izgleda točno kao prije. Razmak i dalje donosi sama
   poruka (`.form-ok` / `.form-warn`), ne kontejner. */
.form-status:empty {
  display: none;
}

/* Napomena o obaveznom unosu datuma — stoji iznad polja, prije nego gost išta pošalje. */
.form-hint {
  margin: 0 0 14px;
  color: var(--muted, #6b7280);
  font-size: 13.5px;
}

/* ---------- availability calendar (contact page) ---------- */

.avail { padding: 96px 0 0; }

.avail-head { max-width: 720px; margin: 0 auto 45px; text-align: center; }

.avail-head p { margin: 0; }

/* Red gumba "Vidi cjenik" ispod uvodnog teksta — vlastiti razmak, jer paragraf iznad nema margin. */
.avail-cta { margin-top: 26px; }

.avail-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.cal-switch {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.cal-switch button {
  padding: 13px 22px;
  border: 0;
  background: #fff;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: background .2s, color .2s;
}

.cal-switch button + button { border-left: 1px solid var(--line); }

.cal-switch button:hover { color: var(--ink); }

.cal-switch button[aria-selected="true"] { background: var(--pink); color: #fff; }

.cal-nav-btns { display: flex; gap: 10px; }

.cal-mnav {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}

.cal-mnav:hover:not(:disabled) { background: var(--pink); border-color: var(--pink); color: #fff; }

.cal-mnav:disabled { opacity: .35; cursor: default; }

/* Kalendar se lista klizanjem, pa `.cal-months` više NIJE sama rešetka nego okvir kroz koji
   stranice mjeseci prolaze; rešetku nosi `.cal-page` (site.js). */
.cal-months {
  position: relative;
  overflow: hidden;
}

.cal-page {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 34px clamp(24px, 3vw, 44px);
}

/* Za trajanja prijelaza obje stranice leže preko istog prostora — inače bi okvir nakratko
   narastao na zbroj njihovih visina i stranica bi poskočila. */
.cal-page.is-sliding {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.cal-month h3 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 14px;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-dow {
  padding: 4px 0;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

.cal-day {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
}

.cal-day.is-free { background: var(--gray-2); color: var(--ink); }

.cal-day.is-booked { background: #fbdce8; color: var(--pink-dark); text-decoration: line-through; }

/* POLU-DAN (PROTOCOL.md §5): dan dolaska je zauzet tek od popodneva, dan odlaska samo do jutra —
   pa je pola tog dana i dalje slobodno za gosta. Bez ove razlike bi kalendar pokazivao punih
   zauzeća više nego što ih objekt ima, a to je izravno izgubljena rezervacija: gost odustane od
   termina koji je zapravo dostupan. Dijagonala nosi ružičastu polovicu na strani koja je zauzeta. */
.cal-day.is-half { background: var(--gray-2); color: var(--ink); }

.cal-day.is-half-pm { background: linear-gradient(to bottom right, var(--gray-2) 49.5%, #fbdce8 50.5%); }

.cal-day.is-half-am { background: linear-gradient(to bottom right, #fbdce8 49.5%, var(--gray-2) 50.5%); }

.cal-day.is-past { color: var(--muted); opacity: .45; }

.cal-day.is-today { box-shadow: inset 0 0 0 2px var(--pink); }

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 30px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  color: var(--body);
}

.cal-legend .dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  margin-right: 8px;
  vertical-align: -2px;
}

.cal-legend .dot-free { background: var(--gray-2); }

.cal-legend .dot-booked { background: #fbdce8; }

.cal-legend .dot-half { background: linear-gradient(to bottom right, var(--gray-2) 49.5%, #fbdce8 50.5%); }

.cal-legend .dot-past { background: var(--gray-2); opacity: .45; }

.cal-note {
  margin: 14px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
}

.map-links {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 26px 0 0;
}

/* KUĆNO PRAVILO — tekst pa, ispod njega, ono što ga pobliže određuje.  [#itemnotes5k9wq3xzvm]
   `.ap-rule-note` je GENERIRANA napomena (dob djece), `.ap-rule-desc` vlasnikov opis; izgledaju
   isto, jer su za gosta ista vrsta podatka — dodatni uvjet uz pravilo. Ista mjera koju uz
   sadržaj smještaja ima `.amenities .ap-feat-desc` (13px, prigušeno), da se dva popisa na istoj
   stranici ne razilaze. */
.gtk li .ap-rule-note,
.gtk li .ap-rule-desc {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

/* ---------- reveal on scroll ---------- */

.rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }

.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {

  .rv { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 980px) {


  /* jednostupčano — par slika se vraća na svoj omjer */
  .case-intro .pics { aspect-ratio: 10 / 9; height: auto; }
}

@media (max-width: 700px) {


  .amenities { columns: 1; }


  .field-row { grid-template-columns: 1fr; gap: 0; }


  /* ---- kalendar zauzeća: jedinice jedna ispod druge, strelice ISPOD kalendara ----
     Na uskom ekranu nazivi jedinica u jednom redu se lome u nečitljive stupce riječi, pa
     traka postaje popis. Strelice se pritom sele pod kalendar: gost do njih ionako dolazi
     tek kad mjesec pregleda, a iznad rešetke su na mobitelu bile prije nego što je imao
     što prelistati. Selidba ide preslagivanjem, bez drugog markupa — `.avail-bar` prepušta
     svoju djecu roditelju (`display: contents`), pa `order` vrijedi nad svima. Uvjet
     `:not([hidden])` čuva JS koji traku skriva kad podataka nema. */
  .avail-wrap { display: flex; flex-direction: column; }


  .avail-bar:not([hidden]) { display: contents; }


  /* razmak koji je nosila `.avail-bar` (nju `display: contents` briše iz rasporeda) */
  .cal-switch { flex-direction: column; margin-bottom: 28px; order: 1; }


  .cal-switch button + button { border-left: 0; border-top: 1px solid var(--line); }


  .cal-months { order: 2; }


  .cal-nav-btns { order: 3; justify-content: center; margin-top: 26px; }


  .cal-legend { order: 4; }
}

.hero-bg.is-lqip { filter: grayscale(45%) contrast(1.05) blur(16px); }

img.is-lqip { filter: blur(8px); transition: filter .45s ease; }

/* Debug natpis kontakt forme — pali ga konfiguracija slota `contact_form` (`debug`).
   Namjerno upadljiv: to je razvojno stanje koje ne smije proći nezapaženo na živoj stranici. */
.form-debug{display:inline-block;margin:0 0 1rem;padding:.4rem .7rem;border:1px dashed #b45309;border-radius:8px;background:#fffbeb;color:#92400e;font-size:.8rem;font-weight:600}

/* =============================================================================
   SPOJNI SLOJ — mjesta koja u RD-u nemaju parnjaka
   =============================================================================
   RD je statični demo: nema kalendara iz Apartlija, nema kućnog reda, nema
   posebnih ponuda ni načina plaćanja. Ta mjesta postoje tek u temi, pa im stil
   živi ovdje — u jeziku RD-a (isti tokeni, isti radijusi, ista tipografija).
   ============================================================================= */

/* rešetka jedinica: kartica je šira od „cards3" trojke, pa ide u dva stupca */
.cards3--units { grid-template-columns: repeat(2, 1fr); }

/* Hero kolaž nema vlastitih pravila: oblik `collage` ispisuje točno RD markup (`.hero__photos`
   + četiri `.hero__ph`), pa vrijede pravila iz RD dijela ovog filea. */

.unit__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* --------- kalendar zauzeća: vlastita kartica, kao u RD-u --------- */
/* Blok stoji IZNAD reda „kalendar | forma", pa mu treba i donji razmak — bez njega je gumb
   „Vidi cjenik" na dnu kartice zalijepljen za upitnu formu ispod. */
.avail-wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 32px;
}

/* --------- traka portala: jedan red --------- */
/* RD je drži u jednom redu; kad stavke ne stanu, `site.js` ih rotira (popis se pomiče, stavke se
   ne dupliciraju). Zato `nowrap` + skriveni prelijev, a ne `flex-wrap`.

   DVA ELEMENTA, DVIJE ULOGE: `.trust__track` REŽE i miruje, `.trust__logos` KLIZI. Rezanje ne
   smije stajati na popisu koji se pomiče — vlastiti `overflow` putuje s `transform`-om, pa je
   stavka koja otklizi ulijevo izlazila iz trake i prelazila preko natpisa. */
.trust .container { flex-wrap: nowrap; }
.trust__track { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.trust__logos {
  flex-wrap: nowrap;
  transition: transform .6s ease;
  will-change: transform;
}
.trust__logos li { white-space: nowrap; }
.trust__logos a { color: inherit; text-decoration: none; }
.trust__logos a:hover { color: var(--blue-700); }
.trust__label { flex: 0 0 auto; }

/* --------- stupac uz upitnu formu (kontakt, plaćanje, kućni red) --------- */
.booking__info {
  background: var(--blue-50); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
}
.booking__info h4 { margin: 22px 0 10px; font-size: 15px; letter-spacing: .02em; }
.booking__info h4:first-child { margin-top: 0; }

.infolist { margin: 0; font-size: 15px; }
.infolist dt { font-weight: 700; color: var(--ink); margin-top: 12px; }
.infolist dt:first-child { margin-top: 0; }
.infolist dd { margin: 2px 0 0; color: var(--ink-2); }
.infolist dd a { color: var(--blue-700); }
/* Razdjelnik među brojevima u istoj liniji — isti znak i ista težina kao u kontaktu na
   dnu stranice (`.hosts__sep`), jer je to isti podatak prikazan na drugom mjestu. */
.infolist__sep { opacity: .6; }

.paylist, .ruleslist { list-style: none; margin: 0; padding: 0; font-size: 14.5px; color: var(--ink-2); }
.paylist li, .ruleslist li { padding: 5px 0 5px 20px; position: relative; }
.paylist li::before, .ruleslist li::before {
  content: "·"; position: absolute; left: 4px; color: var(--blue-400); font-weight: 700;
}
/* Napomena i vlasnikov opis uz pravilo — isti oblik kao opis uz sadržaj smještaja
   (upute §4.2d): sitnije i prigušeno, jer su gostu ista vrsta podatka. */
.ap-rule-note, .ap-rule-desc { display: block; font-size: 13px; opacity: .7; line-height: 1.45; }
.paynote { margin: 12px 0 0; font-size: 13.5px; color: var(--ink-2); }

/* --------- cjenik: napomene i posebne ponude --------- */
.price__notes--ead { list-style: none; padding: 0; }
.price__notes--ead li {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.price__notes--ead b { color: var(--blue-700); }
.price__notes--ead .pricenotes__desc { grid-column: 1 / -1; font-size: 13.5px; color: var(--ink-2); }

.extras { margin-top: 34px; }
.extras h3 { margin: 0 0 14px; font-size: 20px; }
.extras__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.extras__list li {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px;
}
.extras__list b { color: var(--blue-700); }
.extras__desc { grid-column: 1 / -1; font-size: 13.5px; color: var(--ink-2); }

/* --------- galerija: grupe iza filtra --------- */
/* Svaka grupa je VLASTITA EAD galerija (objekt, pa jedinice) — mora biti vlastiti element, da
   klik u MEM-u uređuje baš nju. RD je pritom crta kao JEDNU neprekinutu rešetku, pa bi tri
   odvojene rešetke ostavile po pola praznog reda na svakom šavu.

   Rješenje je da raster drži ZAJEDNIČKI omotač, a grupe i njihove galerije se iz rasporeda
   povuku (`display: contents`): pločice tako postaju djeca istog rastera, a elementi grupa
   ostaju u DOM-u sa svim markerima. Skrivanje filtrom i dalje radi, jer `[hidden]` pobjeđuje. */
.galgroups {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.galgroups .galgroup,
.galgroups .gal { display: contents; }

/* --------- lokacija: desni stupac (karta + adresa i udaljenosti) --------- */
/* Adresa i udaljenosti stoje ISPOD karte, u istom stupcu. Mjesto je zadano rasporedom, a ne
   mjerenjem visina — `site.js` ovdje od 2026-09-22 više ništa ne premješta. */
.loc__side > * + * { margin-top: 18px; }

/* --------- FAQ: odgovor --------- */
/* RD razmak odgovora stoji na `p`, a jednoodlomčani odgovor `nz_para()` vraća kao goli tekst —
   pa pravilo mora ciljati sam kontejner. Unutarnji odlomci tada ne smiju dodavati svoj razmak. */
.faq__item .faq__a { padding: 0 22px 18px; color: var(--ink-2); font-size: 15.5px; }
.faq__item .faq__a p { margin: 0 0 10px; }
.faq__item .faq__a p:last-child { margin-bottom: 0; }

/* --------- blok domaćina --------- */
/* Opis dolazi kao niz odlomaka (`nz_para`), pa se RD pravilo za `> p` ovdje ne poklapa. */
.hosts__info p { font-size: 17px; opacity: .92; margin: 0 0 22px; }
.hosts__info .btn { margin-top: 4px; }
.hosts__contacts li { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.hosts__contacts a { text-decoration: none; }
.hosts__contacts a:hover { text-decoration: underline; }
.hosts__sep { opacity: .6; }
.hosts__photo { position: relative; }

@media (max-width: 980px) {
  /* RD isti prijelom radi nad `.gal`; ovdje raster drži omotač, pa pravilo ide na njega. */
  .galgroups { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .cards3--units { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .galgroups { grid-template-columns: repeat(2, 1fr); }
  /* traka portala na mobitelu: natpis iznad, popis ispod — i dalje jedan red koji se rotira */
  .trust .container { flex-wrap: wrap; }
  .trust__track { flex-basis: 100%; }
}

/* --------- sekcija „O nama" --------- */
/* Isti raster kao blok domaćina (tekst | fotografija), ali na svijetloj podlozi: fotografija je
   uz tekst, a ne pod njim, pa se opis kuće i priča o domaćinima čitaju kao jedna cjelina. */
.about { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: start; }
.about__text > div { color: var(--ink-2); }
.about__text p { color: var(--ink-2); margin: 0 0 16px; }
.about__who { font-size: 20px; margin: 26px 0 10px; color: var(--blue-800); letter-spacing: -.01em; }
.about__photo { position: relative; }
.about__photo img { border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 100%; height: 360px; object-fit: cover; }

/* --------- lokacija: priča o mjestu --------- */
/* Stoji ispod rastera (tekst | karta) i preko cijele širine sekcije, ali s mjerom retka koja se
   još da čitati — deset odlomaka razvučenih na 1200 px nitko ne pročita. */
/* Uvodni tekst i rubrika o plažama su DVA diva (dva izvora, dva magic mjesta), a razmak među
   odlomcima nosi `<br><br>` unutar njih — pa bi se bez ovoga spojili u jedan blok. */
.loc__text > div + div { margin-top: 16px; }
.about__text > div + div { margin-top: 16px; }

/* Bez crte i velikog odmaka: priča se od 2026-09-22 nastavlja na uvodni tekst kao isti tijek,
   a ne kao zaseban blok ispod rastera. Puna crta bi usto presjekla i kartu koja pluta desno. */
/* Crta između uvoda i priče o mjestu. `flow-root` je ovdje NUŽAN: bez njega bi se protegnula
   punom širinom sekcije i presjekla kartu koja pluta desno — BFC okvir se ne smije preklopiti s
   floatom, pa se crta sama skrati na stupac teksta. */
.loc__rule { display: flow-root; height: 0; margin: 26px 0 0; border: 0; border-top: 1px solid var(--line); }
.loc__story { margin-top: 22px; max-width: 78ch; }
.loc__story p { color: var(--ink-2); margin: 0 0 14px; font-size: 15.5px; }
.loc__story p:first-child { font-size: 17px; color: var(--ink); }
.loc__story p:last-child { margin-bottom: 0; }

/* --------- kontakt bez fotografije --------- */
/* Sekcija je od 2026-09-22 samo kontakt, pa drugog stupca nema; bez ovoga bi blok ostao stisnut
   u 1.1fr i desna polovica bi zjapila prazna. */
.hosts--solo { grid-template-columns: 1fr; max-width: 60ch; }

@media (max-width: 980px) {
  .about { grid-template-columns: 1fr; gap: 32px; }
  .about__photo img { height: 280px; }
}

/* ---------- puni prikaz jedinice („Pročitaj više", site.js → UnitDetail) ----------
   Popup stoji ISPOD lightboxa (z-index 100): klik na sliku u popupu otvara galeriju preko njega. */
.unit__more {
  appearance: none; border: 0; background: none; padding: 0; margin: -4px 0 14px; align-self: flex-start;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--blue-700); cursor: pointer;
}
.unit__more:hover { text-decoration: underline; }
.ud { position: fixed; inset: 0; z-index: 95; display: none; overflow-y: auto; padding: 40px 16px; background: rgba(10, 20, 38, .62); }
.ud.open { display: block; }
.ud__box {
  position: relative; max-width: 940px; margin: 0 auto; background: #fff;
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 34px 36px 30px;
}
.ud__close {
  position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%; border: 0;
  background: var(--blue-50); color: var(--blue-700); font-size: 28px; line-height: 1; cursor: pointer;
}
.ud__close:hover { background: var(--blue-100); }
.ud__head { padding-right: 48px; }
.ud__title { margin: 0 0 10px; font-size: 30px; }
.ud__head .unit__price { margin: 6px 0 0; }
/* galerija: prva slika velika, ostale u rešetki */
.ud__gal { grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 22px 0 26px; }
.ud__gal .gal__it img { height: 150px; }
.ud__gal .gal__it:first-child { grid-column: span 2; grid-row: span 2; }
.ud__gal .gal__it:first-child img { height: 310px; }
.ud__text { color: var(--ink-2); font-size: 16px; line-height: 1.7; }
.ud__text p { margin: 0 0 14px; }
.ud__sub { margin: 26px 0 12px; font-size: 19px; }
.ud__amen { margin-bottom: 6px; }
.ud__cta { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
@media (max-width: 640px) {
  .ud { padding: 0; }
  .ud__box { border-radius: 0; min-height: 100%; padding: 26px 18px 24px; }
  .ud__title { font-size: 24px; }
  .ud__gal { grid-template-columns: repeat(2, 1fr); }
  .ud__gal .gal__it img { height: 120px; }
  .ud__gal .gal__it:first-child img { height: 220px; }
}
/* ---------- cookie privola (popup dolje desno; markup gradi site.js) ---------- */
.cookie-pop {
  position: fixed; right: 24px; bottom: 24px; z-index: 95;
  max-width: min(380px, calc(100vw - 48px));
  opacity: 0; visibility: hidden; transform: translateY(24px);
  transition: opacity .35s ease, visibility .35s, transform .35s ease;
}
.cookie-pop.show { opacity: 1; visibility: visible; transform: none; }
.cookie-card {
  padding: 26px 26px 24px; background: #fff; color: var(--ink);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 1px solid var(--line);
}
.cookie-card .kicker {
  display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--blue-500);
}
.cookie-card h3 { margin: 0 0 10px; font-size: 19px; font-weight: 700; }
.cookie-card p { margin: 0 0 20px; font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.cookie-card .btn { padding: 9px 22px; font-size: 14.5px; background: var(--blue-700); color: #fff; }
.cookie-card .btn:hover { background: var(--blue-800); }
/* na mobitelu traka preko cijele širine dna */
@media (max-width: 700px) {
  .cookie-pop { right: 0; bottom: 0; left: 0; max-width: none; transform: translateY(110%); }
  .cookie-pop.show { transform: none; }
  .cookie-card {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px;
    padding: 16px 20px; border-radius: 0; border: 0;
    background: var(--blue-900); box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
  }
  .cookie-card .kicker, .cookie-card h3 { display: none; }
  .cookie-card p { margin: 0; color: rgba(255, 255, 255, .85); }
  .cookie-card .btn { background: #fff; color: var(--blue-800); }
}