/* =============================================================
   Stomatološka ordinacija Dr. Karić — vlastiti stil.

   Učitava se POSLIJE `sekcije/brend.css` i nadjačava sekcijske
   stilove po redoslijedu. Ovdje se sajt ujednačava: jedno pismo,
   jedna paleta, jedna skala razmaka — i sloj animacija na skrol.

   Raspored se NE dira: `display`, `grid-template-*`, `grid-area`,
   `flex-direction`, `order`, `position`, `top/right/bottom/left`,
   `align-*`, `justify-*` i `text-align` se na klasama sekcija ne
   pišu iznova (UPUTA.md). Jedini izuzetak je slaganje hero sekcije
   na telefonu, koje ista uputa izričito traži — i ono stoji samo
   ispod 640 px, tako da širok ekran ostaje netaknut.
   ============================================================= */

/* -------------------------------------------------------------
   1. PISMO — jedno na cijelom sajtu

   Svaka sekcija nosi `--ff-display` i `--ff-body` iz svog templata
   (Urbanist, Quicksand, Poppins…). Ovdje se obje varijable prevežu
   na isti par: Nunito za naslove, Inter za tekst.

   Nunito jer je ovo opšta stomatološka praksa — pacijenti idu od
   djece do starijih (UPUTA.md, „Koje pismo").
   ------------------------------------------------------------- */
.sec-nordlicht-header,
.sec-haven-hero,
.sec-nordlicht-services,
.sec-klar-referenzen,
.sec-nordlicht-parallax,
.sec-sightline-about,
.sec-meridian-results,
.sec-sonnenschein-instagram,
.sec-dental-house-faq,
.sec-terra-cta,
.sec-klar-footer {
  --ff-display: var(--font-display-rounded);
  --ff-body: var(--font-sans);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: #fbfaf8;
  color: #14241f;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Naslovi su na Nunitu nešto teži nego što ih templati crtaju —
   zaobljeno pismo na 600 izgleda mlako. */
.sec h1, .sec h2, .sec h3 { font-weight: 800; letter-spacing: -0.015em; }
.sec p, .sec li, .sec dd, .sec address, .sec small { font-family: var(--font-sans); }


/* -------------------------------------------------------------
   2. PALETA — jedna, na svim sekcijama

   `brend.css` je već vezao `--c-primary` i `--c-accent` za tokene.
   Ostaju neutrali: svaki template nosi svoje (oat, lila, breskva,
   pijesak). Njih ovdje svodimo na jednu toplo-neutralnu skalu, pa
   sve sekcije stoje na istoj podlozi.
   ------------------------------------------------------------- */
.sec-haven-hero,
.sec-klar-referenzen,
.sec-sightline-about,
.sec-meridian-results,
.sec-dental-house-faq,
.sec-terra-cta,
.sec-klar-footer,
.sec-sonnenschein-instagram {
  --c-bg:          #fbfaf8;
  --c-bg-alt:      #f1f5f3;
  --c-white:       #ffffff;
  --c-surface:     #e4efeb;
  --c-text:        #14241f;
  --c-text-muted:  #4f5c57;
  --c-on-dark:     #eaf2ef;
  --c-on-dark-mu:  rgba(234, 242, 239, 0.78);
  --c-line:        rgba(20, 36, 31, 0.10);
  --c-line-strong: rgba(20, 36, 31, 0.20);
  --c-line-dark:   rgba(234, 242, 239, 0.22);
  --c-whatsapp:    #128c7e;
  --c-whatsapp-dk: #0e6f63;
  --c-star:        #c9a227;
}

/* Nordlicht (zaglavlje, usluge, parallax) radi na „canvas" skali. */
.sec-nordlicht-header,
.sec-nordlicht-services,
.sec-nordlicht-parallax {
  --c-canvas:      #10312b;
  --c-canvas-lt:   #1c4a41;
  --c-canvas-dp:   #0a221d;
  --c-panel:       #fbfaf8;
  --c-panel-alt:   #f1f5f3;
  --c-white:       #ffffff;
  --c-surface:     #e4efeb;
  --c-text:        #14241f;
  --c-text-muted:  #4f5c57;
  --c-on-canvas:   #eaf2ef;
  --c-on-canvas-mu: rgba(234, 242, 239, 0.76);
  --c-line:        rgba(20, 36, 31, 0.10);
  --c-line-strong: rgba(20, 36, 31, 0.20);
  --c-line-canvas: rgba(234, 242, 239, 0.18);
  --c-whatsapp:    #128c7e;
  --c-whatsapp-dk: #0e6f63;
  --c-star:        #c9a227;
}

/* KLAR nosi mentu, Sonnenschein koral/sunce/mentu. Te tri boje su
   identitet TUĐEG templata — vežu se na akcent i zlatnu iz logotipa,
   da sajt ne izgleda kao tri sajta. */
.sec-klar-referenzen,
.sec-klar-footer {
  --c-mint:      var(--accent);
  --c-mint-soft: var(--accent-soft);
}
.sec-sonnenschein-instagram {
  --c-coral:      var(--accent);
  --c-coral-dk:   var(--accent-strong);
  --c-coral-soft: var(--accent-soft);
  --c-sun:        #c9a227;
  --c-sun-soft:   #f7efd8;
  --c-mint:       var(--accent);
  --c-mint-soft:  var(--accent-soft);
  --c-text-invert: #ffffff;
}

/* Trake naizmjeničnih podloga — sekcije nose vlastite pozadine, ovo
   je samo osigurač da između njih nema bijelog šava. */
.band { background: #fbfaf8; }
.band-even { background: #f1f5f3; }


/* -------------------------------------------------------------
   3. ZAOBLJENJA I SJENKE — jedan jezik

   Templati idu od 10 px do 52 px i od oštrih do razlivenih sjenki.
   Ujednačeno: mekano, ali ne balonasto.
   ------------------------------------------------------------- */
.sec {
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-gallery: 16px;

  --sh-xs: 0 1px 2px rgba(16, 49, 43, 0.05);
  --sh-sm: 0 4px 14px -8px rgba(16, 49, 43, 0.18);
  --sh-md: 0 14px 32px -16px rgba(16, 49, 43, 0.22);
  --sh-lg: 0 28px 60px -24px rgba(16, 49, 43, 0.28);
  --sh-xl: 0 44px 92px -34px rgba(16, 49, 43, 0.32);
}

/* Fiksno zaglavlje: sidra u navigaciji ne smiju završiti ispod njega. */
.sec [id] { scroll-margin-top: 88px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


/* -------------------------------------------------------------
   4. ZAGLAVLJE

   Traka ostaje onakva kakvu sekcija donosi: znak, navigacija,
   telefon, „Zakaži termin" i hamburger. WhatsApp u nju NE ulazi —
   probano je, i sa šest stavki se „Zakaži termin" gubio preko desne
   ivice, a „Prije i poslije" se lomilo u dva reda. WhatsApp stoji u
   donjoj traci na telefonu i u kontakt sekciji na svakoj širini.

   Stavke navigacije se ne prelamaju; razmak se stišće umjesto toga.
   ------------------------------------------------------------- */
.sec-nordlicht-header .site-nav ul { gap: clamp(14px, 1.7vw, 28px); }
.sec-nordlicht-header .site-nav a { white-space: nowrap; }
.sec-nordlicht-header .site-head__act { gap: 12px; }
.sec-nordlicht-header .head-tel { white-space: nowrap; }

/* Navigacija se pojavljuje na 1042 px, a puna traka staje tek oko
   1340 px. U tom pojasu ispada broj iz trake — ostaje „Zakaži termin",
   a broj i dalje stoji u kontakt sekciji, u pitanjima i u meniju. */
@media (max-width: 1340px) { .sec-nordlicht-header .head-tel { display: none; } }

.sec-nordlicht-header .brand__mark svg { width: 40px; height: 40px; }
.sec-nordlicht-header .brand__text small { letter-spacing: 0.01em; }


/* -------------------------------------------------------------
   5. HERO

   Na širokom ekranu ostaje kako jeste: video preko cijele površine,
   tekst preko njega, sa zatamnjenjem.

   Ispod 640 px, po UPUTA.md, hero se slaže u tri bloka — zaglavlje,
   fotografija kao vlastiti blok, tekst ispod nje na punoj podlozi.
   Video se tu ne učitava (`<source media>`), pozadinski sloj se gasi
   `visibility`-jem, a fotografija dolazi kao običan blok u toku.
   ------------------------------------------------------------- */

/* Kadar: lice je desno od sredine, pa `center` na užem ekranu siječe. */
.sec-haven-hero .hero__media :is(img, video) { object-position: 58% 40%; }

.k-heromob { display: none; }
.k-wide-only { display: inline; }

@media (max-width: 640px) {
  .sec-haven-hero .hero {
    min-height: 0;
    padding-top: calc(var(--header-h) + 12px);
    padding-bottom: 40px;
    background: var(--c-primary-dk);
  }
  /* Pozadinski sloj i njegovo zatamnjenje se gase — tekst više nije
     preko slike, pa zatamnjenju nema razloga. */
  .sec-haven-hero .hero__media,
  .sec-haven-hero .hero__scrim { visibility: hidden; }

  .sec-haven-hero .k-heromob {
    display: block;
    margin: 0 0 26px;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-md);
    background: var(--c-primary-dk);
  }
  .sec-haven-hero .k-heromob video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;      /* snimak ostaje snimak, ne traka */
    object-fit: cover;
    object-position: 58% 40%;
  }

  .sec-haven-hero .hero__copy > * + * { margin-top: 14px; }
  .sec-haven-hero .hero h1 { font-size: clamp(2.1rem, 10vw, 2.75rem); line-height: 1.06; }
  .sec-haven-hero .hero__lead { font-size: 1rem; line-height: 1.55; }
  .k-wide-only { display: none; }   /* uvod ostaje unutar tri reda */

  /* Jedno dugme je glavno; drugo je lakše i stoji ispod njega. */
  .sec-haven-hero .hero__act { gap: 10px; padding-top: 6px; }
  .sec-haven-hero .hero__act .u-btn--lg { min-height: 54px; font-size: 1rem; }
  .sec-haven-hero .hero__act .u-btn--ghost {
    background: transparent;
    border: 1px solid var(--c-line-dark);
    min-height: 48px;
  }
}


/* -------------------------------------------------------------
   6. USLUGE — kartice popunjavaju red

   Mreža je `repeat(4, 1fr)` i ostaje takva. Tab sa tri ili dvije
   usluge bi ostavio rupu s desne strane, pa se te kartice šire.
   Usluga se ne izmišlja da bi red bio pun.
   ------------------------------------------------------------- */
@media (min-width: 1001px) {
  .sec-nordlicht-services .svc--w2 { grid-column: span 2; }
}
.sec-nordlicht-services .svc {
  border-radius: var(--r-lg);
  transition: transform 320ms var(--ease, cubic-bezier(.4,0,.2,1)), box-shadow 320ms var(--ease, cubic-bezier(.4,0,.2,1));
}
.sec-nordlicht-services .svc:hover { transform: translateY(-4px); }
.sec-nordlicht-services .svctab { border-radius: 999px; font-weight: 700; }

/* Podloga sekcije: umjesto tamnog „canvasa" ide svijetli panel-alt, pa
   panel sa karticama stoji na istoj podlozi kao i ostatak stranice. */
.sec-nordlicht-services { background: var(--c-panel-alt); }

/* Ispod 620 px kartica se u templatu slaže u red. Naslov i opis su tamo
   bili dva zasebna člana reda, pa su stajali JEDAN PORED DRUGOG, svaki u
   svom uskom stupcu. Umotani su u jedan blok, pa je red sada [ikona][tekst]
   kako je i zamišljeno. Na širokom ekranu se ništa ne mijenja — kartica je
   tamo stubac, a blok u stupcu izgleda isto kao dva zasebna elementa. */
.sec-nordlicht-services .k-svc-tx { flex: 1 1 auto; min-width: 0; }
.sec-nordlicht-services .k-svc-tx > h3 { margin-top: 0; }


/* -------------------------------------------------------------
   7. RECENZIJE
   ------------------------------------------------------------- */
.sec-klar-referenzen .bub { border-radius: var(--r-lg); }
.sec-klar-referenzen .revs__stars,
.sec-klar-referenzen .bub__stars { color: var(--c-star); letter-spacing: 1px; }
.sec-klar-referenzen .revs__bar { border-radius: 999px; }

/* --- Recenzije kao karusel: tri u kadru, ostale na strelice ---
   Mreža ostaje mreža (tri stupca), samo se kroz nju pomjera prozor od
   tri recenzije. Skripta skriva ostale; bez skripte se vide sve, što je
   ispravno stanje — nijedna recenzija ne smije nestati zbog JS-a. */
.sec-klar-referenzen .bub[hidden] { display: none; }

/* Stepenasti razmaci iz templata su računati po REDOSLIJEDU u markupu.
   Kad se kroz listu pomjera prozor, ti razmaci skaču pri svakoj promjeni
   — zato u karuselu sve tri kartice stoje poravnato. */
.k-on .sec-klar-referenzen .bubbles.is-carousel > li { margin-top: 0; }

.k-revs-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: clamp(28px, 3vw, 40px);
}
.k-revs-nav[hidden] { display: none; }

.k-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  flex: none;
  border: 1px solid var(--c-line-strong);
  border-radius: 50%;
  background: var(--c-white);
  color: var(--c-primary);
  cursor: pointer;
  transition: background 200ms var(--ease, ease), color 200ms, border-color 200ms, transform 200ms;
}
.k-arrow svg { width: 20px; height: 20px; }
.k-arrow:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); }
.k-arrow:disabled { opacity: .35; cursor: default; }
.k-arrow:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.k-revs-count {
  font: 700 0.875rem/1 var(--font-display-rounded);
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}


/* -------------------------------------------------------------
   8. PARALLAX — poster kao slika

   Video je uklonjen sa ove sekcije (isti je klip kao u herou), pa
   ovdje stoji poster kao `<img>`, kako SEKCIJE.md i traži.
   ------------------------------------------------------------- */
/* Sekcija je stajala na tamnom „canvasu", a panel je bio uvučen sa
   strana i zaobljen — fotografija je time bila kartica na podlozi.
   Sada ide preko cijele širine, bez podloge oko sebe. */
.sec-nordlicht-parallax { background: transparent; }
.sec-nordlicht-parallax .u-panel {
  margin-inline: 0;
  margin-bottom: 0;
  border-radius: 0;
}

.sec-nordlicht-parallax .plx__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

/* Zatamnjenje iz templata ide do 0,88 — na telefonu se od fotografije
   više ništa nije razaznavalo. Gustina je spuštena i pomjerena TAMO
   GDJE STOJI TEKST: vodoravni pojas kroz sredinu je taman koliko treba
   za čitanje, a gore i dolje se slika vidi. */
.sec-nordlicht-parallax .plx__veil {
  background:
    linear-gradient(180deg,
      rgba(10, 34, 29, 0.22) 0%,
      rgba(10, 34, 29, 0.60) 32%,
      rgba(10, 34, 29, 0.64) 64%,
      rgba(10, 34, 29, 0.26) 100%),
    radial-gradient(80% 94% at 50% 50%, rgba(10, 34, 29, 0.04), rgba(10, 34, 29, 0.34));
}

/* Nadnaslov je bio akcentna zelena na tamnoj podlozi — nije se vidio. */
.sec-nordlicht-parallax .u-kicker { color: var(--accent-soft); }


/* -------------------------------------------------------------
   9. O NAMA
   ------------------------------------------------------------- */
.sec-sightline-about .about__media img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 30%;   /* lica su u gornjoj polovini kadra */
  border-radius: var(--r-xl);
}
.sec-sightline-about .about__sign-in img {
  width: 104px;
  height: 104px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 6%;   /* lice je u gornjoj trećini kadra */
  border-radius: 50%;
}
.sec-sightline-about .about__sign-in { border-radius: var(--r-lg); }
.sec-sightline-about .about__sign-in p { font-style: italic; }


/* -------------------------------------------------------------
   10. PRIJE I POSLIJE

   Obje fotografije su jedan snimak sa dva kadra jedan iznad drugog:
   POSLIJE gore, PRIJE dolje. Klizač je uspravan, pa se okvir postavi
   na polovinu omjera, a `object-position` bira koja polovina se vidi.
   Time klizač radi ono što piše da radi.
   ------------------------------------------------------------- */
/* Okvir je 4:3 iz templata, a fotografija je kvadrat sastavljen od dva
   kadra. Pola kvadrata je 2:1 — na tom omjeru `cover` pokazuje TAČNO
   jednu polovinu, bez preklapanja. Okvir se prilagođava slici. */
.sec-meridian-results .k-cmp-split {
  aspect-ratio: 2 / 1;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.sec-meridian-results .k-cmp-split .cmp__base {
  object-fit: cover;
  object-position: center bottom;   /* PRIJE — donja polovina */
}
.sec-meridian-results .k-cmp-split .cmp__after {
  object-fit: cover;
  object-position: center top;      /* POSLIJE — gornja polovina */
}
.sec-meridian-results .case__body h3 { margin-bottom: 6px; }
.sec-meridian-results .cmp__tag { border-radius: 999px; font-weight: 700; }


/* -------------------------------------------------------------
   11. INSTAGRAM
   ------------------------------------------------------------- */
.sec-sonnenschein-instagram .reel { border-radius: var(--r-gallery); }
.sec-sonnenschein-instagram .reel__link { border-radius: var(--r-gallery); overflow: hidden; }
.sec-sonnenschein-instagram .reel__link img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 30%;
}
.sec-sonnenschein-instagram .u-mark { background: linear-gradient(transparent 62%, var(--accent-soft) 62%); }
.sec-sonnenschein-instagram .reel__link { cursor: zoom-in; }


/* =============================================================
   11b. POPUP ZA SLIKE (Instagram)

   Slika se otvara preko stranice, sa strelicama naprijed/nazad.
   Na POSLJEDNJOJ slici „naprijed" ne vrti se u krug nego otvara
   Instagram profil u novom prozoru — zato i piše šta radi.

   Bez JS-a popup ne postoji, a kartice ostaju obične veze na
   Instagram; to je ispravan zadani ishod, ne kvar.
   ============================================================= */
.k-lb {
  position: fixed;
  inset: 0;
  /* Iznad svega: zaglavlje, donja traka i lebdeće dugme su također fiksni. */
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 40px);
}
.k-lb[hidden] { display: none; }

.k-lb__scrim {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(6, 20, 17, 0.88);
  opacity: 0;
  transition: opacity 260ms ease;
  cursor: zoom-out;
}
.k-lb.is-open .k-lb__scrim { opacity: 1; }

.k-lb__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: min(92vw, 620px);
  transform: scale(.94);
  opacity: 0;
  transition: transform 300ms cubic-bezier(.2,1.1,.4,1), opacity 240ms ease;
}
.k-lb.is-open .k-lb__panel { transform: none; opacity: 1; }

.k-lb__fig {
  margin: 0;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  background: #0a221d;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8);
}
.k-lb__fig img {
  display: block;
  width: 100%;
  max-height: min(72vh, 760px);
  object-fit: contain;
  background: #0a221d;
}
.k-lb__cap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 4px 0;
  color: #eaf2ef;
  font-size: 0.9375rem;
}
.k-lb__cap strong { font-family: var(--font-display-rounded); font-size: 1rem; }
.k-lb__cap small { color: rgba(234, 242, 239, .68); }

.k-lb__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.k-lb__count {
  font: 700 0.875rem/1 var(--font-display-rounded);
  color: rgba(234, 242, 239, .72);
  font-variant-numeric: tabular-nums;
}
.k-lb__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(234, 242, 239, .28);
  border-radius: 999px;
  background: rgba(234, 242, 239, .08);
  color: #eaf2ef;
  font: 700 0.9375rem/1 var(--font-display-rounded);
  cursor: pointer;
  transition: background 200ms, border-color 200ms, transform 200ms;
}
.k-lb__btn svg { width: 20px; height: 20px; }
.k-lb__btn:hover:not(:disabled) { background: rgba(234, 242, 239, .2); transform: translateY(-2px); }
.k-lb__btn:disabled { opacity: .3; cursor: default; }
.k-lb__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* Zadnja slika: „naprijed" vodi na Instagram, pa i izgleda drugačije. */
.k-lb__btn.is-out { background: var(--accent); border-color: var(--accent); }

.k-lb__close {
  position: absolute;
  top: -52px; right: 0;
  width: 44px; height: 44px;
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  .k-lb__scrim, .k-lb__panel { transition: none; }
}


/* -------------------------------------------------------------
   12. PITANJA
   ------------------------------------------------------------- */
.sec-dental-house-faq .qa { border-radius: var(--r-md); }
.sec-dental-house-faq .qa button { font-family: var(--ff-display); font-weight: 700; }
.sec-dental-house-faq .qa__p a { color: var(--accent-strong); }

/* Podloga sekcije na bijelo. */
.sec-dental-house-faq .u-section--alt { background: var(--c-white); }

/* Lista i traka ispod nje bile su ograničene na 60rem unutar kontejnera
   od 1140 px — desno je ostajao prazan pojas. Sada idu punom širinom. */
.sec-dental-house-faq .faq__list,
.sec-dental-house-faq .faq__ask { max-width: none; }
.sec-dental-house-faq .qa__p p { max-width: none; }


/* -------------------------------------------------------------
   13. KONTAKT
   ------------------------------------------------------------- */
/* Kontakt kutije: podloga je bila na omotaču (.cta__act), a razmak od
   1 px je pravio hairline crte između redova. Sada podlogu nosi SVAKA
   kutija, omotač je proziran, i između njih stoji pravi razmak. */
.sec-terra-cta .cta__act {
  background: transparent;
  border: 0;
  gap: 14px;
}
.sec-terra-cta .crow {
  border-radius: var(--r-md);
  border: 1px solid var(--c-line-dark);
  background: rgba(237, 241, 241, 0.06);
}
.sec-terra-cta .crow:hover { background: rgba(237, 241, 241, 0.13); }
.sec-terra-cta .crow__v { word-break: break-word; }

/* Pečat je visio preko ugla omotača; sa razmacima ga vraćamo uz ivicu
   posljednje kutije, da ne pokriva e-mail adresu. */
.sec-terra-cta .cta__seal { right: -14px; bottom: -14px; }


/* -------------------------------------------------------------
   14. PODNOŽJE — jednostavno

   Podnožje ne ponavlja ono što kontakt sekcija iznad već nosi:
   telefon, WhatsApp i radno vrijeme stoje tamo, jednom. Ovdje ostaje
   ko smo, gdje smo i karta.
   ------------------------------------------------------------- */
.sec-klar-footer .k-ftr-grid { gap: 40px 56px; }
.sec-klar-footer .ftr__mapband { border-radius: 0; }
.sec-klar-footer .ftr__mapband-pill { border-radius: var(--r-md); }
.sec-klar-footer .ftr__blurb { max-width: 34ch; }
.sec-klar-footer .ftr__bar { padding-block: 20px; }

/* Adresa i e-mail sa ikonama. */
.sec-klar-footer .k-ftr-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
}
.sec-klar-footer .k-ftr-line svg {
  width: 18px; height: 18px;
  flex: none;
  margin-top: 2px;
  color: var(--c-accent);
}
/* Adresa ide u tri reda, pa joj ikona stoji uz PRVI red. E-mail je jedan
   red i tamo se ikona i tekst poravnavaju po sredini — inače ikona visi
   iznad teksta, jer je viša od pisma na 13 px. */
.sec-klar-footer .k-ftr-line--mail { align-items: center; }
.sec-klar-footer .k-ftr-line--mail svg { margin-top: 0; }

.sec-klar-footer .k-ftr-line address { margin: 0; }
/* Adresa e-pošte je na 15 px bila za dlaku šira od stupca i lomila se
   usred riječi („…gmail.co / m"). Korak manje pismo je drži u jednom redu. */
.sec-klar-footer .k-ftr-line .ftr__mail {
  margin: 0;
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

/* Četvrti stupac podnožja bio je prazan — u njemu sada stoji fotografija,
   kvadratna i u krugu. */
.sec-klar-footer .k-ftr-photo {
  display: flex;
  justify-content: center;
}
.sec-klar-footer .k-ftr-photo img {
  width: min(210px, 100%);
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  object-position: 58% 42%;   /* osmijeh u sredini kruga */
  border: 4px solid var(--c-line-dark);
}

/* Ugrađena Google karta zamjenjuje raniju sliku-nadomjestak. */
.sec-klar-footer .ftr__mapband iframe {
  display: block;
  width: 100%;
  height: clamp(220px, 26vw, 320px);
  border: 0;
}

@media (max-width: 900px) {
  .sec-klar-footer .k-ftr-photo { justify-content: flex-start; }
  .sec-klar-footer .k-ftr-photo img { width: 160px; }
}



/* =============================================================
   16. ANIMACIJE NA SKROL

   Sekcije već nose `[data-reveal]` (fade + 22 px prema gore) iz
   svog runtimea. Ovo je sloj iznad toga:

     · traka napretka na vrhu stranice
     · naslovi sa `data-k="line"` se otkrivaju iza maske
     · slike „dišu" dok prolaze kroz ekran (parallax)
     · brojke se broje kad uđu u kadar
     · kartice ulaze u nizu, sa zadrškom

   Sve staje na `prefers-reduced-motion: reduce`.
   ============================================================= */

/* --- traka napretka --- */
.k-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 70;
  background: transparent;
  pointer-events: none;
}
.k-progress > span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), #c9a227);
  transform-origin: left center;
  transition: width 90ms linear;
}

/* --- naslov ---
   Naslov se podiže i izoštrava. Bez `overflow: hidden` na naslovu:
   maska je lijepo izgledala na jednom redu, ali je naslov od tri reda
   dok traje animacija odsijecala po sredini. Naslov ne smije nijedan
   trenutak biti nečitljiv — ovo se penje, ne krije. */
.k-on [data-k="line"] > .k-line {
  display: block;
  transform: translateY(24px);
  opacity: 0;
  transition: transform 760ms cubic-bezier(.16,.84,.34,1), opacity 560ms ease;
}
.k-on [data-k="line"].is-k > .k-line { transform: none; opacity: 1; }

/* --- ulazak elemenata: varijante --- */
.k-on [data-k="up"],
.k-on [data-k="fade"],
.k-on [data-k="left"],
.k-on [data-k="right"],
.k-on [data-k="zoom"] {
  opacity: 0;
  transition:
    opacity 780ms cubic-bezier(.16,.84,.34,1),
    transform 780ms cubic-bezier(.16,.84,.34,1),
    filter 780ms ease;
  transition-delay: var(--k-delay, 0ms);
  will-change: transform, opacity;
}
.k-on [data-k="up"]    { transform: translateY(34px); }
.k-on [data-k="left"]  { transform: translateX(-36px); }
.k-on [data-k="right"] { transform: translateX(36px); }
.k-on [data-k="zoom"]  { transform: scale(.94); filter: blur(6px); }
.k-on [data-k="fade"]  { filter: blur(4px); }

.k-on [data-k].is-k {
  opacity: 1;
  transform: none;
  filter: none;
}

/* --- sekcijski reveal iz templata: malo duže i mekše, da se
       slaže sa gornjim varijantama --- */
.sec.has-js [data-reveal] {
  transition-duration: 820ms;
  transition-timing-function: cubic-bezier(.16,.84,.34,1);
}

/* --- parallax na slikama ---
   `--k-shift` upisuje skripta dok element prolazi kroz ekran. */
.k-on .k-para { will-change: transform; }
.k-on .k-para > img,
.k-on .k-para > video {
  transform: translate3d(0, var(--k-shift, 0px), 0) scale(1.08);
  transition: transform 120ms linear;
}

/* --- brojke ---
   Brojke se NE broje od nule. Ocjena, broj recenzija i godina su
   tvrdnje o firmi: dok brojač radi, na ekranu stoji netačan broj.
   Zato se brojka ne mijenja — samo naraste na svoje mjesto. */
.k-pop { font-variant-numeric: tabular-nums; display: inline-block; }
.k-on .k-pop {
  transform: scale(.82);
  opacity: 0;
  transition: transform 620ms cubic-bezier(.2,1.5,.4,1), opacity 380ms ease;
}
.k-on .k-pop.is-k { transform: none; opacity: 1; }

/* --- ništa se ne miče onome ko je tražio manje pokreta --- */
@media (prefers-reduced-motion: reduce) {
  .k-on [data-k],
  .k-on [data-k="line"] > .k-line {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .k-on .k-para > img,
  .k-on .k-para > video { transform: none; }
  .k-progress { display: none; }
}


/* =============================================================
   17. TELEFON — posljednja riječ

   Sajt se mjeri na 375 px. Ovo su ispravke koje se tamo vide.
   ============================================================= */
@media (max-width: 640px) {
  /* --- Kontejner: bez unutrašnjeg razmaka, 80 % širine, centriran.
         Razmak sa strana više ne pravi `padding` nego sama širina. --- */
  .sec .u-container,
  .sec .u-inner {
    width: 80%;
    max-width: none;
    padding-inline: 0;
    margin-inline: auto;
  }

  /* --- Razmak iznad i ispod sadržaja sekcije: 45 px --- */
  .sec .u-section,
  .sec .u-panel,
  .sec .svcs,
  .sec .plx,
  .sec .cta,
  .sec .ig,
  .sec .revs,
  .sec .about,
  .sec .res,
  .sec .faq { padding-block: 45px; }

  .sec-haven-hero .hero { padding-block: 45px; }

  .sec-nordlicht-header { padding-bottom: 66px; }

  /* --- Traka zaglavlja poravnata sa ostatkom stranice ---
     Zaglavlje je nosilo vlastiti `padding-inline` od 34 px, pa mu sadržaj
     nije stajao u istoj liniji sa kontejnerom (37,5 px). Sada dijele mjeru. */
  .sec-nordlicht-header .site-head__inner {
    width: 80%;
    max-width: none;
    padding-inline: 0;
    margin-inline: auto;
  }

  /* --- Meni na telefonu ---
     List sekcije centrira sadržaj (`justify-content: center`) i drži ga u
     kutiji visine ekrana. Sadržaj je bio 55 px viši od ekrana, pa ga je
     centriranje izguralo IZNAD gornjeg razmaka — prva stavka je završila
     ispod fiksnog zaglavlja, preko naziva ordinacije.

     Raspored se ne dira; skraćuje se ono što je moje: razmaci i visina
     stavke. Sadržaj sada staje u ekran, pa centriranje nema šta izgurati. */
  .sec-nordlicht-header .gmenu__sheet {
    padding-top: calc(var(--header-h) + 12px);
    padding-bottom: 28px;
    gap: 28px;
  }
  .sec-nordlicht-header .gmenu__grid { gap: 8px; }
  .sec-nordlicht-header .gmenu__grid a { min-height: 60px; padding: 12px 16px; }
  .sec-nordlicht-header .gmenu__foot { gap: 10px; }
  .sec-nordlicht-header .gmenu__tel { font-size: 1.25rem; padding: 4px; }

  /* --- Kartice usluga: sve četiri se vide ---
     Traka je bila vodoravni skroler, pa su se vidjele dvije od četiri.
     Sada se prelamaju u dva reda i sve stoje na ekranu. */
  .sec-nordlicht-services .svcs__tabs {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 6px;
    /* Pilula je bila okrugla dok je traka bila jedan red; u četiri reda
       ista zaobljenost pravi mjehur, pa ide blaža. */
    border-radius: 16px;
    padding: 8px;
  }
  .sec-nordlicht-services .svctab { flex: 1 1 auto; }

  /* --- Traka sa ocjenom: blaže zaobljenje umjesto pilule --- */
  .sec-klar-referenzen .revs__bar { border-radius: 10px; }

  /* --- Galerija: jedna slika po ekranu, bez odsječene sljedeće --- */
  /* Traka je šira od kontejnera (negativne margine iz templata), pa je
     sljedeća kartica virila sa desne strane. Ovdje se traka svede na
     širinu kontejnera, a kartica na istu mjeru — jedna po ekranu, bez
     odsječenog komada. */
  .sec-sonnenschein-instagram .ig__rail {
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    margin-inline: 0;
    padding-inline: 0;
    width: 100%;
  }
  /* Traka dobija ODREĐENU širinu (širinu skrolera). Bez toga je bila
     fleks kutija bez zadane širine, pa je `100%` na kartici bilo
     kruženje — zato je ranije stajalo `80vw`. Ali `vw` broji i traku
     za skrolanje, a kontejner je ne broji: čim se pojavi, kartica i
     skroler se raziđu i sa strane ostane prazan pojas.

     Sa određenom širinom trake `100%` znači tačno širinu skrolera, na
     svakom uređaju, sa trakom za skrolanje ili bez nje. */
  .sec-sonnenschein-instagram .ig__track {
    gap: 12px;
    width: 100%;
  }
  .sec-sonnenschein-instagram .reel {
    flex: 0 0 100%;
    width: 100%;
    max-width: none;
    scroll-snap-align: start;
  }
  /* Sama veza je iz templata ograničena na `clamp(190px, 21vw, 250px)`,
     pa je stajala uz lijevu ivicu kartice, a desno je ostajao pojas.
     Ovim se centrira unutar kartice. */
  .sec-sonnenschein-instagram .reel__link { margin: 0 auto; }

  /* Strelice i dugme „Sve na Instagramu" u sredinu. */
  .sec-sonnenschein-instagram .ig__nav { justify-content: center; }

  /* --- Fotografija u podnožju: puna širina, blago zaobljena --- */
  .sec-klar-footer .k-ftr-photo img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    border-radius: 10px;
    border: 0;
  }
}

/* Nizak ekran (npr. iPhone SE): meni se stisne još jednom, da centriranje
   iz sekcije ni tamo nema šta izgurati iznad zaglavlja. */
@media (max-width: 640px) and (max-height: 720px) {
  .sec-nordlicht-header .gmenu__sheet { padding-bottom: 18px; gap: 18px; }
  .sec-nordlicht-header .gmenu__grid a { min-height: 52px; }
  .sec-nordlicht-header .gmenu__grid span { font-size: 0.625rem; }
  .sec-nordlicht-header .gmenu__hours { font-size: 0.8125rem; }
}

@media (max-width: 560px) {
  /* Naslovi sekcija su na telefonu često prekrupni za dva reda. */
  .sec h2 { font-size: clamp(1.6rem, 7.2vw, 2rem); line-height: 1.12; }
  .sec h3 { font-size: 1.0625rem; }

  .sec-klar-footer .ftr__bar { padding-bottom: 20px; }

  /* Adresa e-pošte na krupnom pismu kontakt kutije ne stane u 300 px i
     lomi se usred riječi („…gmail.co / m"). Samo taj red ide manje. */
  .sec-terra-cta .crow[href^="mailto:"] .crow__v { font-size: 1.0625rem; }

  /* Dugmad preko cijele širine, ali sa hijerarhijom. */
  .sec .u-btn--block { width: 100%; }

  /* Kartica sa potpisom doktorice: slika iznad teksta, ne pored. */
  .sec-sightline-about .about__sign-in img { width: 88px; height: 88px; }
}