/* =================================================================
   Stomatološka ordinacija Dr Vragolić — Loznica
   style.css — editorial redizajn

   1.  Tokeni i reset
   2.  Tipografija
   3.  Layout primitivi (container, section, split-head)
   4.  Dugmad i linkovi
   5.  Header i navigacija
   6.  Hero
   7.  Pristup (principi)
   8.  Usluge
   9.  O nama
   10. Galerija + lightbox
   11. FAQ
   12. Zakazivanje (forma)
   13. Kontakt
   14. Footer
   15. Mobilni sticky CTA
   16. Animacije
   17. Responsive: tablet
   18. Responsive: mobile
   19. Dekoracija na malim ekranima
   20. Hitni modal
   21. Iza ogledalca (blog)
   ================================================================= */

/* --------------------------- 1. TOKENI -------------------------- */
:root {
  /* tamni autoritet */
  --ink:        #0A1D31;
  --ink-2:      #0E2740;
  --ink-3:      #133153;
  --navy:       #143A5E;

  /* plava akcija */
  --blue:       #2E6DB4;
  --blue-600:   #24598F;
  --blue-100:   #E7EFF8;

  /* hladni neutralni tonovi */
  --paper:      #FFFFFF;
  --stone:      #F4F6F9;
  --stone-2:    #E9EEF4;

  /* svetle plave površine izvedene iz logotipa */
  --sky:        #F1F5FB;
  --sky-2:      #E6EEF8;
  --sky-3:      #D9E5F3;

  /* diskretni glow — koristi se vrlo štedljivo */
  --glow-blue:  rgba(46, 109, 180, 0.09);
  --glow-soft:  rgba(91, 155, 213, 0.10);
  --line:       #E2E8F0;
  --line-2:     #D3DCE6;
  --line-ink:   rgba(255, 255, 255, 0.14);

  /* tekst */
  --text:       #1A2332;
  --muted:      #4A5568;
  /* zatamnjeno sa #66738A: na svetloplavoj podlozi tražimo min. 4.5:1 */
  --muted-2:    #626F86;
  --on-ink:     #FFFFFF;
  --on-ink-mut: #AEC0D4;

  --danger:     #C0392B;
  --danger-2:   #A32E22;
  --danger-soft:#FDF3F2;
  --success:    #2D7D46;

  /* prigušena crvena za hitne akcije na mobilnom — zatamnjena/ugašena
     nijansa (ne živa vatrena crvena) da se uklopi u tamnoplavu paletu */
  --danger-muted:       #8C3F37;
  --danger-muted-hover: #71322B;

  --r:          2px;   /* opšti radijus — svedeno, arhitektonski */
  --r-lg:       3px;

  --font-head: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --container: 1280px;
  --pad: 40px;
  --header-h: 84px;

  --t: 240ms cubic-bezier(0.22, 1, 0.36, 1);
  --t-slow: 700ms cubic-bezier(0.22, 1, 0.36, 1);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);   /* smiren ease-out */
  --step: 70ms;                              /* korak stagger-a */
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* `clip` umesto `hidden`: seče vodoravni preliv, ali ne pravi
     scroll-kontejner — pa `position: sticky` nastavlja da radi. */
  overflow-x: clip;
}
body.nav-open { overflow: hidden; }

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

img.img-failed {
  background: var(--stone-2);
  min-height: 220px;
  border: 1px solid var(--line);
}

/* ------------------------ 2. TIPOGRAFIJA ------------------------ */
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 20px;
  line-height: 1.14;
  letter-spacing: -0.015em;
}

h1 { font-size: clamp(2.6rem, 5.4vw, 4.75rem); line-height: 1.04; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.95rem, 3.4vw, 3.125rem); line-height: 1.1; letter-spacing: -0.02em; }
h3 { font-size: 1.375rem; line-height: 1.25; }
h4 { font-size: 1.0625rem; }

p { margin: 0 0 18px; color: var(--muted); }
p:last-child { margin-bottom: 0; }

a { color: var(--blue); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--blue-600); }

ul, ol { margin: 0; padding: 0; list-style: none; }

.eyebrow {
  display: block;
  margin: 0 0 22px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--muted-2);
}

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--ink); color: #fff;
  padding: 14px 22px; font-weight: 600; font-size: 0.875rem;
}
.skip-link:focus { left: 0; color: #fff; }

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

/* --------------------- 3. LAYOUT PRIMITIVI ---------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* --- sekcije kao slojevi: sadržaj uvek iznad dekoracije --- */
.section {
  position: relative;
  padding: 140px 0;
  background: var(--paper);
}
.section > .container,
.section > .about-layout,
.section > .hero-meta { position: relative; z-index: 1; }

/* dekorativni sloj — nikada ne hvata klik i nikada ne prelivа sekciju */
.section::before,
.section::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* bele sekcije: jedva primetan hladan sjaj u gornjem uglu */
.section::before {
  inset: 0;
  background: radial-gradient(1000px 460px at 86% 4%, var(--glow-blue), transparent 62%);
}

/* svetloplave sekcije: meki prelaz na ivicama umesto tvrde linije */
.section-stone {
  background:
    linear-gradient(180deg,
      var(--paper) 0%,
      var(--sky) 12%,
      var(--sky) 88%,
      var(--paper) 100%);
}
.section-stone::before {
  background: radial-gradient(900px 420px at 10% 6%, var(--glow-soft), transparent 60%);
}

/* tamna sekcija: dubina kroz dva vrlo blaga radijalna sloja */
.section-ink {
  background:
    radial-gradient(900px 520px at 76% 6%, rgba(46, 109, 180, 0.30), transparent 62%),
    radial-gradient(760px 460px at 6% 96%, rgba(20, 58, 94, 0.55), transparent 64%),
    var(--ink);
}
.section-ink::before { background: none; }

/* asimetrična glava sekcije: naslov levo, uvod desno */
.split-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: 64px;
  align-items: end;
  margin-bottom: 88px;
}
.split-head-title h1,
.split-head-title h2 { margin: 0; }
/* stranice bez heroja (npr. Iza ogledalca) nose H1 u istoj poziciji gde
   ostale sekcije nose H2 — vizuelno mora ostati na h2 razmeri */
.split-head-title h1 { font-size: clamp(1.95rem, 3.4vw, 3.125rem); line-height: 1.1; letter-spacing: -0.02em; }
.split-head-lead {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--muted);
  margin: 0;
  padding-bottom: 6px;
  max-width: 46ch;
}
.section-ink .split-head-lead,
.section-ink p { color: var(--on-ink-mut); }
.section-ink h1, .section-ink h2, .section-ink h3, .section-ink h4 { color: var(--on-ink); }
.section-ink .eyebrow { color: var(--on-ink-mut); }

/* --------------------------- 4. DUGMAD -------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 30px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--t), color var(--t), border-color var(--t),
              transform var(--t), box-shadow var(--t);
}
.btn:active { transform: translateY(0); }
.btn svg { width: 17px; height: 17px; }

.btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-primary:hover {
  background: var(--ink-2);
  border-color: var(--ink-2);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(14, 39, 64, 0.22);
}

.btn-quiet { background: transparent; border-color: var(--line-2); color: var(--ink); }
.btn-quiet:hover { border-color: var(--ink); color: var(--ink); background: transparent; }

.btn-outline { background: transparent; border-color: var(--line-2); color: var(--text); }
.btn-outline:hover { border-color: var(--blue); color: var(--blue); }

.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover {
  background: var(--danger-2);
  border-color: var(--danger-2);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(163, 46, 34, 0.26);
}

.btn-lg { min-height: 56px; padding: 16px 36px; font-size: 0.9375rem; }
.btn-block { width: 100%; }

/* diskretni „hitan pregled” link u headeru */
.link-urgent {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: var(--danger);
  cursor: pointer;
}
.link-urgent .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--danger);
  flex: 0 0 7px;
}
.link-urgent:hover { color: var(--danger-2); }

/* tekstualni link sa strelicom */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 2px;
  transition: color var(--t), border-color var(--t), gap var(--t);
}
.link-arrow svg { width: 17px; height: 17px; }
.link-arrow:hover { color: var(--blue); border-color: var(--blue); gap: 14px; }

/* ----------------------- 5. HEADER / NAV ------------------------ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: background-color var(--t), border-color var(--t);
}
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: var(--header-h);
  transition: height var(--t-slow);
}
/* header se pri skrolu neprimetno skupi — bez skoka, jer je fiksiran
   pa promena visine ne pomera sadržaj (nema CLS) */
.site-header.scrolled .header-inner { height: 72px; }
.logo-mark { transition: width var(--t-slow), height var(--t-slow), flex-basis var(--t-slow); }
.site-header.scrolled .logo-mark { width: 36px; height: 36px; flex: 0 0 36px; }

.logo { display: flex; align-items: center; gap: 14px; color: var(--ink); }
.logo:hover { color: var(--ink); }
.logo-mark {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
}
.logo-mark img {
  width: 78%; height: 78%;
  object-fit: contain;
  transition: width var(--t-slow), height var(--t-slow);
}
.logo-text { display: flex; flex-direction: column; line-height: 1.25; }
.logo-text strong {
  font-family: var(--font-head);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.logo-text span {
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-2);
}

.main-nav { display: flex; align-items: center; gap: 40px; }

.nav-list { display: flex; align-items: center; gap: 26px; flex: 0 0 auto; }
.nav-link {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  white-space: nowrap;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 2px;
  width: 100%; height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link.active { color: var(--ink); }

.nav-actions { display: flex; align-items: center; gap: 22px; flex: 0 0 auto; }
.nav-actions .btn { min-height: 44px; padding: 11px 22px; font-size: 0.8125rem; }

.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.lang-switch a {
  color: var(--muted, #6b7280);
  padding: 4px 2px;
}
.lang-switch a:hover { color: var(--blue); }
.lang-switch a.active {
  color: var(--blue);
  font-weight: 600;
  pointer-events: none;
}
.lang-switch .lang-sep { color: var(--line-2, #d8dde3); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px; height: 44px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.nav-toggle-bar {
  display: block;
  width: 24px; height: 1.5px;
  margin-left: auto;
  background: var(--ink);
  transition: transform var(--t), width var(--t);
}
.nav-toggle-bar:nth-child(2) { width: 17px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { width: 24px; transform: translateY(-3.75px) rotate(-45deg); }

/* ---------------------------- 6. HERO --------------------------- */
/* Hero: fotografija preko cele širine, tipografija položena preko nje.
   Dekorativni oblici su ovde suvišni — sliku nosi sama fotografija. */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--ink);       /* rezerva ako se fotografija ne učita */
}

.hero-layout {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin-inline: auto;
  padding: calc(var(--header-h) + 12vh) var(--pad) 10vh;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* tekst je sada položen preko fotografije (ne pored nje), pa mu
   treba čitljiva max-širina umesto starog padding-right rezervisanog
   za kolonu sa slikom */
.hero-copy { max-width: 640px; }

.hero-place {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 40px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.hero-place .rule {
  display: block;
  width: 56px; height: 1px;
  background: var(--line-2);
  flex: 0 0 56px;
}

.hero-title { margin: 0 0 32px; }
.hero-title-slogan {
  font-style: italic;
  font-size: clamp(2.5rem, 6.2vw, 5.25rem);
  line-height: 1.08;
  letter-spacing: -0.008em;
  text-shadow: 0 6px 32px rgba(4, 12, 24, 0.38);
}

.hero-lead {
  font-size: 1.125rem;
  line-height: 1.72;
  color: var(--muted);
  max-width: 40ch;
  margin: 0 0 44px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* fotografija doktora i sestre je skoro kvadratna — vertikalna
     pozicija drži lica i ruke u kadru, a seče pod i plafon */
  object-position: 50% 38%;
}

/* Tamni sloj: levo je gust da tekst bude čitljiv i preko najsvetlijeg
   dela fotografije, desno se povlači da se prostor ordinacije vidi. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(8, 24, 42, 0.90) 0%,
      rgba(8, 24, 42, 0.86) 34%,
      rgba(8, 24, 42, 0.62) 56%,
      rgba(8, 24, 42, 0.34) 78%,
      rgba(8, 24, 42, 0.28) 100%),
    linear-gradient(180deg,
      rgba(8, 24, 42, 0.55) 0%,
      rgba(8, 24, 42, 0) 26%,
      rgba(8, 24, 42, 0) 62%,
      rgba(8, 24, 42, 0.60) 100%);
}

/* puna širina: hairline traka sa osnovnim informacijama */
.hero-meta {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.hero-meta-item {
  padding: 34px 40px 34px 0;
  border-top: 1px solid var(--line);
}
.hero-meta-item + .hero-meta-item { padding-left: 40px; border-left: 1px solid var(--line); }
.hero-meta dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 8px;
}
.hero-meta dd {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--ink);
  font-weight: 500;
}

/* Tekst u heroju sada leži preko tamne fotografije, ne preko svetle
   podloge — zato svi elementi ovde dobijaju svetlu varijantu boje. */
.hero .hero-place { color: var(--on-ink-mut); }
.hero .hero-place .rule { background: rgba(255, 255, 255, 0.35); }
.hero .hero-title { color: #fff; }
.hero .hero-lead { color: var(--on-ink-mut); }

/* .btn-quiet je podrazumevano tamno-na-svetlom (border + tekst u --ink) —
   na tamnim podlogama (foto-hero i .section-ink) tekst je bez ovoga
   nevidljiv (taman na tamnom). Ista svetla varijanta mora da važi svuda
   gde se .btn-quiet pojavljuje na tamnoj pozadini. */
.hero .btn-quiet,
.section-ink .btn-quiet {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.hero .btn-quiet:hover,
.section-ink .btn-quiet:hover {
  border-color: #fff;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.hero .btn-quiet:focus-visible,
.section-ink .btn-quiet:focus-visible {
  outline-color: #fff;
}

/* dugme "Hitan slučaj" u hero-meta traci: iste proporcije kao okolni
   tekst u toj traci, samo sa okvirom dugmeta — bez upadljive/crvene boje */
.hero-urgent-btn {
  min-height: auto;
  padding: 9px 20px;
  font-size: 0.8125rem;
}

.hero .hero-meta-item { border-top-color: rgba(255, 255, 255, 0.18); }
.hero .hero-meta-item + .hero-meta-item { border-left-color: rgba(255, 255, 255, 0.18); }
.hero .hero-meta dt { color: var(--on-ink-mut); }
.hero .hero-meta dd { color: #fff; }

/* ------------------- HITNO (traka na početnoj) ------------------- */
.urgent-strip { padding: 64px 0; background: var(--stone); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.urgent-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.urgent-strip-text { max-width: 60ch; }
.urgent-strip-text h2 { margin: 0 0 8px; font-size: 1.25rem; }
.urgent-strip-text p { margin: 0; font-size: 0.9375rem; }
.urgent-strip .badge-urgent {
  color: var(--danger-2);
  background: var(--danger-soft);
  border-color: rgba(192, 57, 43, 0.3);
}

/* -------------------------- 7. PRISTUP -------------------------- */
/* jedva vidljiva tačkasta tekstura — daje površini teksturu, ne šum */
.principles-section::after {
  inset: 0;
  background-image: radial-gradient(rgba(46, 109, 180, 0.10) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(760px 420px at 88% 84%, #000, transparent 70%);
  mask-image: radial-gradient(760px 420px at 88% 84%, #000, transparent 70%);
}

.principles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-2);
}
.principles li {
  padding: 40px 36px 8px 0;
  border-right: 1px solid var(--line-2);
}
.principles li:last-child { border-right: 0; padding-right: 0; }
.principles li:not(:first-child) { padding-left: 36px; }

.idx {
  display: block;
  margin-bottom: 26px;
  font-family: var(--font-head);
  font-size: 0.875rem;
  color: var(--muted-2);
  letter-spacing: 0.06em;
  transition: color var(--t);
}
/* mikro-interakcija: broj poprima brend plavu kad je stavka pod pokazivačem */
.principles li:hover .idx { color: var(--blue); }
.principles h3 { font-size: 1.1875rem; margin-bottom: 12px; }
.principles p { font-size: 0.9375rem; line-height: 1.68; margin: 0; }

/* --------------------------- 8. USLUGE -------------------------- */
.svc-featured {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 72px;
  margin-bottom: 40px;
}
.svc-major-offset { margin-top: 116px; }

.svc-photo {
  margin: 0 0 32px;
  overflow: hidden;
  background: var(--sky-2);
  border-radius: var(--r);
  box-shadow: 0 18px 40px rgba(10, 29, 49, 0.10);
  transition: box-shadow var(--t-slow);
}
.svc-major:hover .svc-photo { box-shadow: 0 26px 56px rgba(10, 29, 49, 0.16); }
.svc-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.svc-major-offset .svc-photo img { aspect-ratio: 5 / 4; }
.svc-major:hover .svc-photo img { transform: scale(1.03); }

.svc-num {
  font-family: var(--font-head);
  font-size: 0.875rem;
  color: var(--muted-2);
  letter-spacing: 0.06em;
  margin: 0 0 14px;
}
.svc-major h2, .svc-major h3 { font-size: clamp(1.5rem, 2.1vw, 1.875rem); margin-bottom: 14px; }
.svc-desc { font-size: 1rem; max-width: 44ch; margin: 0; }

.svc-list { margin-top: 96px; border-top: 1px solid var(--line-2); }
.svc-row {
  display: grid;
  grid-template-columns: 96px 200px minmax(0, 1fr);
  align-items: start;
  gap: 32px;
  padding: 38px 24px 38px 8px;
  border-bottom: 1px solid var(--line-2);
  transition: background-color var(--t), padding-left var(--t);
}
.svc-row:hover { background: var(--stone); padding-left: 24px; }
.svc-row .svc-num { margin: 0; padding-top: 4px; }
.svc-row h2, .svc-row h3 { margin: 0; font-size: 1.5rem; transition: color var(--t); }
.svc-row:hover h2, .svc-row:hover h3 { color: var(--blue); }
.svc-row p { margin: 0; font-size: 0.9375rem; max-width: 52ch; }
.section-stone .svc-row:hover { background: var(--stone-2); }

/* sitna fotografija uz naslov u redu usluge */
.svc-row-heading { display: flex; flex-direction: column; gap: 14px; }
.svc-row-photo {
  margin: 0;
  width: 100%;
  max-width: 168px;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--sky-2);
  box-shadow: 0 10px 22px rgba(10, 29, 49, 0.08);
}
.svc-row-photo picture { display: block; width: 100%; }
.svc-row-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.svc-row:hover .svc-row-photo img { transform: scale(1.04); }
.svc-row-heading h2, .svc-row-heading h3 { margin: 0; }

.svc-row-body { display: grid; gap: 16px; }
.svc-row-body > p { margin: 0; }

/* konkretne stavke usluge + poziv na akciju — deli se sa svc-major */
.svc-facts { display: grid; gap: 10px; margin: 0; }
.svc-facts li {
  position: relative;
  padding-left: 22px;
  font-size: 0.9375rem;
  color: var(--muted);
}
.svc-facts li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue);
}
.svc-major .svc-facts { max-width: 44ch; margin-top: 20px; }
.svc-row .svc-facts li { font-size: 0.875rem; }

.svc-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.svc-major .svc-cta { margin-top: 24px; }
.svc-cta .link-arrow { font-size: 0.875rem; min-height: auto; }
.svc-cta .link-arrow-quiet { color: var(--muted-2); border-color: var(--line); }
.svc-cta .link-arrow-quiet:hover { color: var(--blue); border-color: var(--blue); }

/* homepage: kratak spisak usluga sa linkom ka punoj stranici */
.home-svc-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 48px;
  margin-bottom: 48px;
  border-top: 1px solid var(--line-2);
}
.home-svc-list li { border-bottom: 1px solid var(--line-2); }
.home-svc-list .link-arrow {
  justify-content: space-between;
  width: 100%;
  min-height: auto;
  padding: 22px 0;
  border-bottom: 0;
}
@media (max-width: 640px) {
  .home-svc-list { grid-template-columns: 1fr; }
}

/* -------------------------- 9. O NAMA --------------------------- */
.about { padding: 0; }
.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: stretch;
  gap: 0;
}
.about-media { background: var(--stone-2); overflow: hidden; }
.about-media picture { display: block; width: 100%; height: 100%; }
.about-media img {
  width: 100%; height: 100%;
  min-height: 640px;
  object-fit: cover;
  /* selfie sa licem malo desno i iznad centra kadra — drži lice u fokusu
     bez obzira na to koliko se visok/uzan portret seče */
  object-position: 58% 22%;
}
.about-copy {
  padding: 140px clamp(32px, 6vw, 104px) 140px clamp(40px, 6vw, 88px);
  max-width: 720px;
}
.about-copy h2 { margin-bottom: 10px; }
.about-role {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 40px;
}
.about-lead {
  font-family: var(--font-head);
  font-size: clamp(1.25rem, 1.9vw, 1.625rem);
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 28px;
}
.about-copy p { font-size: 1rem; }
.about-copy .link-arrow { margin-top: 24px; }

/* O doktoru — kompaktna najava na početnoj (namerno drugačiji raspored
   od pune editorial fotografije na stranici O nama: mala uokvirena
   fotografija + kratak tekst, ne pola ekrana). */
.doctor-intro-inner {
  display: flex;
  align-items: center;
  gap: 56px;
}
.doctor-photo {
  flex: 0 0 clamp(160px, 18vw, 240px);
  width: clamp(160px, 18vw, 240px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--stone-2);
  box-shadow: 0 18px 40px rgba(10, 29, 49, 0.12);
}
.doctor-photo picture { display: block; width: 100%; height: 100%; }
.doctor-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 58% 22%;
}
.doctor-intro-copy { flex: 1 1 auto; max-width: 560px; }
.doctor-intro-copy .about-role { margin-bottom: 16px; }
.doctor-intro-copy p { font-size: 1rem; margin-bottom: 22px; }
.doctor-intro-copy .link-arrow { margin: 0; }

/* biografija: struktura za dopunu (fakultet, godina, specijalizacije...) */
.bio-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 32px;
  margin: 36px 0 18px;
  padding-top: 30px;
  border-top: 1px solid var(--line-2);
}
.bio-fact dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 6px;
}
.bio-fact dd {
  margin: 0;
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--muted);
}
.bio-note { margin-top: 14px; font-size: 0.8125rem; color: var(--muted-2); }

/* princip rada: izdvojen citat sa akcentnom linijom */
.principle-quote {
  margin: 0 0 56px;
  padding-left: 28px;
  border-left: 2px solid var(--blue);
  font-family: var(--font-head);
  font-style: normal;
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
  max-width: 62ch;
}

/* vrednosti pristupa: tanka traka od 3 stavke */
.value-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-2);
}
.value-row li { padding: 28px 28px 4px 0; border-right: 1px solid var(--line-2); }
.value-row li:last-child { border-right: 0; padding-right: 0; }
.value-row li:not(:first-child) { padding-left: 28px; }
.value-row h3 { font-size: 1.0625rem; margin-bottom: 10px; }
.value-row p { margin: 0; font-size: 0.9375rem; }

/* -------------------- 10. GALERIJA + LIGHTBOX ------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 92px;
  gap: 20px;
}
.masonry-item {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
  background: var(--sky-2);
  border-radius: var(--r);
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(10, 29, 49, 0.07);
  transition: box-shadow var(--t);
}
.masonry-item:hover { box-shadow: 0 18px 40px rgba(10, 29, 49, 0.13); }
.masonry-item picture { display: block; width: 100%; height: 100%; }
.masonry-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow), opacity var(--t);
}
.masonry-item:hover img { transform: scale(1.035); opacity: 0.94; }

/* dve dominantne fotografije (g1, g6) + pet sekundarnih */
.g1 { grid-column: span 4; grid-row: span 5; }
.g2 { grid-column: span 2; grid-row: span 5; }
.g3 { grid-column: span 3; grid-row: span 3; }
.g4 { grid-column: span 3; grid-row: span 3; }
.g6 { grid-column: span 4; grid-row: span 4; }
.g7 { grid-column: span 2; grid-row: span 4; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  background: rgba(10, 29, 49, 0.95);
  opacity: 0;
  transition: opacity 200ms ease;
}
.lightbox[hidden] { display: none; }
.lightbox.visible { opacity: 1; }

.lightbox-figure {
  margin: 0;
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.lightbox-figure img {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--r);
}
.lightbox-figure figcaption {
  color: var(--on-ink-mut);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-align: center;
}

.lightbox-close, .lightbox-nav {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  flex: 0 0 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color var(--t), border-color var(--t);
}
.lightbox-close:hover, .lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
}
.lightbox-close { position: absolute; top: 24px; right: 24px; }
.lightbox-close svg, .lightbox-nav svg { width: 20px; height: 20px; }

/* ---------------------------- 11. FAQ --------------------------- */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 96px;
  align-items: start;
}
.faq-aside { position: sticky; top: calc(var(--header-h) + 56px); }
.faq-aside h2 { margin-bottom: 24px; }
.faq-aside-note { font-size: 0.9375rem; max-width: 34ch; }

.faq-list { border-top: 1px solid var(--line-2); }
.faq-item {
  border-bottom: 1px solid var(--line-2);
  transition: background-color var(--t);
}
.faq-item:hover { background: rgba(46, 109, 180, 0.03); }
.faq-heading { margin: 0; font-family: var(--font-body); font-size: inherit; }

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  width: 100%;
  min-height: 56px;
  padding: 30px 0;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--font-head);
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  cursor: pointer;
  transition: color var(--t);
}
.faq-question:hover { color: var(--blue); }
.faq-icon {
  flex: 0 0 18px;
  width: 18px; height: 18px;
  color: var(--muted-2);
  transition: transform 300ms ease, color var(--t);
}
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); color: var(--blue); }

.faq-answer { max-height: 0; overflow: hidden; transition: max-height 300ms ease; }
.faq-answer-inner { padding: 0 15% 32px 0; }
.faq-answer-inner p { font-size: 0.9688rem; line-height: 1.75; margin: 0; }

/* ------------------------ 12. ZAKAZIVANJE ----------------------- */
.booking-head { max-width: 620px; margin-bottom: 72px; }
.booking-head h2 { margin-bottom: 16px; }
.booking-lead { font-size: 1.0625rem; }

.booking-grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 28px;
  align-items: start;
}

.booking-block { padding: 52px 48px; border-radius: var(--r-lg); }

.booking-standard {
  background: var(--paper);
  box-shadow: 0 30px 70px rgba(3, 12, 22, 0.42);
}
.booking-standard h2, .booking-standard h3, .booking-standard h4 { color: var(--ink); }
/* .section-ink p (tamna sekcija) inače nadjača svaki <p> unutar svetle
   booking-standard kartice — bez ovoga tekst postaje jedva čitljiv */
.booking-standard p { color: var(--muted); }
.booking-standard .form-submit-error { color: var(--danger-2); }

.booking-urgent {
  background: var(--ink-2);
  border: 1px solid var(--line-ink);
  border-top: 2px solid var(--danger);
}
.booking-urgent h2, .booking-urgent h3, .booking-urgent h4 { color: var(--on-ink); }
.booking-urgent .urgent-text { color: var(--on-ink-mut); }

.booking-block-head { margin-bottom: 36px; }
.booking-block-head h2, .booking-block-head h3 { margin: 0 0 8px; font-size: 1.5rem; }
.booking-block-head p { font-size: 0.9375rem; margin: 0; color: var(--muted); }

.badge-urgent {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 12px;
  border: 1px solid rgba(192, 57, 43, 0.5);
  border-radius: var(--r);
  color: #F08D80;
  background: rgba(192, 57, 43, 0.14);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.urgent-text { font-size: 0.9688rem; margin-bottom: 28px; }

.urgent-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 76px;
  padding: 16px 20px;
  border: 1px solid var(--line-ink);
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 3vw, 1.9375rem);
  letter-spacing: 0.01em;
  transition: background-color var(--t), border-color var(--t), color var(--t);
}
.urgent-phone svg { width: 24px; height: 24px; flex: 0 0 24px; color: #F08D80; transition: color var(--t); }
.urgent-phone:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.urgent-phone:hover svg { color: #fff; }

.urgent-note { margin-top: 24px; }

.urgent-divider { position: relative; text-align: center; margin: 32px 0 26px; }
.urgent-divider::before {
  content: ""; position: absolute; top: 50%; left: 0; right: 0;
  height: 1px; background: var(--line-ink);
}
.urgent-divider span {
  position: relative;
  padding: 0 16px;
  background: var(--ink-2);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-ink-mut);
}

/* forme */
.booking-form { display: grid; gap: 20px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; }

.field label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 10px;
}
.req { color: var(--danger); }
.opt { font-weight: 400; letter-spacing: 0.04em; text-transform: none; }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 15px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  transition: border-color var(--t), box-shadow var(--t);
  appearance: none;
  -webkit-appearance: none;
}
.field textarea { min-height: 118px; resize: vertical; line-height: 1.65; }

.field select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366738A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 42px;
  cursor: pointer;
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(46, 109, 180, 0.16);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 109, 180, 0.38);
}

/* polja unutar tamnog hitnog bloka */
.booking-urgent .field label { color: var(--on-ink-mut); }
.booking-urgent .field input,
.booking-urgent .field textarea {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--line-ink);
  color: #fff;
}
.booking-urgent .field input::placeholder,
.booking-urgent .field textarea::placeholder { color: #92A6BC; }
.booking-urgent .field input:focus,
.booking-urgent .field textarea:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.28);
  background: rgba(255, 255, 255, 0.07);
}
.booking-urgent .field.has-error input,
.booking-urgent .field.has-error textarea { border-color: #E8776A; }
.booking-urgent .field-error { color: #F08D80; }
.booking-urgent .form-note { color: #92A6BC; }

.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
.field.has-error input:focus, .field.has-error select:focus, .field.has-error textarea:focus {
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.18);
}

.field-error {
  display: none;
  margin: 8px 0 0;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--danger);
  letter-spacing: 0;
  text-transform: none;
}
.field.has-error .field-error { display: block; }

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  min-height: 44px;
  padding: 14px 16px;
  border: 1px solid var(--line-ink);
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--on-ink-mut);
  cursor: pointer;
  transition: border-color var(--t);
}
.checkbox-field:hover { border-color: rgba(192, 57, 43, 0.6); }
.checkbox-field input {
  width: 19px; height: 19px;
  flex: 0 0 19px;
  margin: 2px 0 0;
  accent-color: var(--danger);
  cursor: pointer;
}

.form-note { margin: 0; font-size: 0.8125rem; line-height: 1.6; color: var(--muted-2); }

/* dugme dok se forma šalje — sprečava vizuelno i funkcionalno duplo slanje */
.btn.is-loading, .btn:disabled {
  opacity: 0.68;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
}

.form-submit-error {
  display: none;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid rgba(192, 57, 43, 0.35);
  border-radius: var(--r);
  background: var(--danger-soft);
  color: var(--danger-2);
  font-size: 0.875rem;
  line-height: 1.55;
}
.form-submit-error.visible { display: block; }
.form-submit-error a { color: inherit; font-weight: 600; }
.booking-urgent .form-submit-error {
  background: rgba(192, 57, 43, 0.14);
  border-color: rgba(192, 57, 43, 0.45);
  color: #F6C4BC;
}

.form-success { text-align: center; padding: 28px 8px 8px; }
.form-success h3, .form-success h4 { font-size: 1.375rem; line-height: 1.3; margin-bottom: 12px; }
.form-success p { margin-bottom: 26px; font-size: 0.9375rem; }
.success-icon {
  display: grid; place-items: center;
  width: 58px; height: 58px;
  margin: 0 auto 24px;
  border-radius: 50%;
  border: 1px solid rgba(45, 125, 70, 0.35);
  color: var(--success);
}
.success-icon svg { width: 26px; height: 26px; }
.form-success-danger p { color: var(--on-ink-mut); }
.success-icon-danger { border-color: rgba(192, 57, 43, 0.5); color: #F08D80; }

/* -------------------------- 13. KONTAKT ------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr);
  border-top: 1px solid var(--line-2);
}
.contact-col { padding: 44px 48px 0 0; }
.contact-col + .contact-col { padding-left: 48px; border-left: 1px solid var(--line-2); }
.contact-col h3 {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 28px;
}

.contact-list { display: grid; gap: 20px; margin-bottom: 32px; }
.contact-list li { display: flex; align-items: flex-start; gap: 14px; font-size: 1rem; color: var(--muted); }
.contact-list svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 5px; color: var(--muted-2); }
.contact-list a { color: var(--ink); font-weight: 500; }
.contact-list a:hover { color: var(--blue); }

.social-row { display: flex; gap: 10px; }
.social-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  color: var(--muted);
  transition: color var(--t), border-color var(--t), background-color var(--t);
}
.social-btn:hover { color: #fff; background: var(--ink); border-color: var(--ink); }
.social-btn svg { width: 18px; height: 18px; }

.hours-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.hours-table th, .hours-table td { padding: 12px 0; font-weight: 400; }
.hours-table th { text-align: left; color: var(--muted); }
.hours-table td { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.hours-table tr + tr { border-top: 1px solid var(--line); }
.hours-table .closed { color: var(--muted-2); }
.hours-table tr.today th, .hours-table tr.today td { color: var(--ink); font-weight: 600; }
.hours-table tr.today th::after {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  vertical-align: 1px;
}
/* tekst oznake zavisi od jezika stranice — html[lang] se postavlja po stranici */
html[lang="sr"] .hours-table tr.today th::after { content: "danas"; }
html[lang="en"] .hours-table tr.today th::after { content: "today"; }

.map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 260px;
  margin-bottom: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background:
    radial-gradient(420px 240px at 50% 42%, #FFFFFF, transparent 72%),
    var(--sky);
  color: var(--muted-2);
  text-align: center;
  padding: 24px;
}
.map-placeholder svg { width: 28px; height: 28px; color: var(--ink); margin-bottom: 4px; }
.map-placeholder span { font-weight: 600; color: var(--ink); font-size: 0.9375rem; }
.map-placeholder small { font-size: 0.75rem; }

.map-embed {
  min-height: 260px;
  margin-bottom: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  max-width: 100%;
}
.map-embed iframe { display: block; width: 100%; height: 100%; min-height: 260px; border: 0; }

/* --------------------------- 14. FOOTER ------------------------- */
.site-footer { background: var(--ink); color: var(--on-ink-mut); padding: 96px 0 0; }
.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 64px;
  padding-bottom: 72px;
}
.logo-light { color: #fff; }
.logo-light:hover { color: #fff; }
.logo-light .logo-text span { color: #7E92A9; }

.footer-brand .social-row { margin-top: 28px; }
.site-footer .social-btn { border-color: var(--line-ink); color: var(--on-ink-mut); }
.site-footer .social-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); color: #fff; }

.footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.footer-nav h4 {
  color: #7E92A9;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.footer-nav ul { display: grid; gap: 12px; }
.footer-nav a, .footer-nav span { font-size: 0.9375rem; }
.footer-nav span { color: var(--on-ink-mut); }
/* linkovi su svetliji od statičkog teksta (npr. adrese) da bi se jasno
   prepoznali kao klikabilni na tamnoj pozadini footera */
.footer-nav a { color: #C7D6E8; transition: color var(--t); }
.footer-nav a:hover { color: #fff; }
.footer-nav a:focus-visible { outline-color: #fff; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 28px;
  padding-bottom: 28px;
  border-top: 1px solid var(--line-ink);
}
.footer-bottom p { margin: 0; font-size: 0.75rem; letter-spacing: 0.03em; color: #7E92A9; }

/* diskretan attribution potpis izrađivača sajta, u dnu footera */
.footer-credit { display: flex; }
.footer-credit .credit-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  opacity: 0.6;
  transition: opacity var(--t);
}
.footer-credit .credit-link:hover,
.footer-credit .credit-link:focus-visible { opacity: 0.95; }
.footer-credit .credit-text { font-size: 0.75rem; letter-spacing: 0.03em; color: #7E92A9; }
.footer-credit .credit-logo { display: block; height: 14px; width: auto; }

/* --------------------- 15. MOBILNI STICKY CTA ------------------- */
.mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.mobile-cta .btn { flex: 1; min-height: 48px; padding: 12px 14px; font-size: 0.875rem; }

/* traka je podrazumevano sklonjena — JS je otkriva pošto hero CTA
   iziđe iz viewporta (vidi IntersectionObserver u main.js) */
.mobile-cta {
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
  transition: opacity 0.25s var(--ease, ease), transform 0.25s var(--ease, ease);
}
.mobile-cta.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ------------------------- 16. ANIMACIJE ------------------------ */
.reveal { opacity: 0; transform: translateY(20px); }
.reveal.in-view {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- hero: sadržaj ulazi u koracima, ne odjednom --- */
.hero-content { opacity: 1; }
.hero-copy > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.hero-content.loaded > * { opacity: 1; transform: none; }
.hero-content.loaded > *:nth-child(1) { transition-delay: 60ms; }
.hero-content.loaded > *:nth-child(2) { transition-delay: 160ms; }
.hero-content.loaded > *:nth-child(3) { transition-delay: 260ms; }
.hero-content.loaded > *:nth-child(4) { transition-delay: 360ms; }

/* okvir se pojavi, a fotografija se nežno otkrije odozgo */
.hero-media { opacity: 0; }
.hero-media.loaded { opacity: 1; transition: opacity 0.9s ease 0.1s; }
.hero-media img {
  opacity: 0;
  clip-path: inset(14% 0 0 0);
  transition: opacity 1s var(--ease) 0.2s, clip-path 1.2s var(--ease) 0.2s;
}
.hero-media.loaded img { opacity: 1; clip-path: inset(0 0 0 0); }

/* informativna traka ulazi poslednja */
.hero-meta-item {
  opacity: 0;
  animation: rise-in 0.8s var(--ease) forwards;
}
.hero-meta-item:nth-child(1) { animation-delay: 520ms; }
.hero-meta-item:nth-child(2) { animation-delay: 600ms; }
.hero-meta-item:nth-child(3) { animation-delay: 680ms; }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* --- prelazak između stranica ---
   Deklarativni cross-document prelaz: pregledač sam radi fade između
   stare i nove strane, bez JS-a, bez zavese i bez loading ekrana.
   Back/forward, anchor linkovi, direktan URL i crawleri ostaju netaknuti.
   NAPOMENA: sajt je trenutno jednostranični, pa se ovo aktivira tek kada
   se doda druga stranica (npr. cenovnik.html). Do tada miruje. */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: vt-out 180ms cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: vt-in 260ms var(--ease) both;
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(8px); } }

/* Bez JS-a nema ni skrivanja: sadržaj je odmah vidljiv i čitljiv
   (bitno za crawlere, čitače ekrana i slučaj da skripta ne stigne). */
html:not(.js) .reveal,
html:not(.js) .reveal.stagger > *,
html:not(.js) .hero-copy > *,
html:not(.js) .hero-media,
html:not(.js) .hero-media img,
html:not(.js) .hero-meta-item,
html:not(.js) .reveal-photo img {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  animation: none !important;
}

/* --- rečnik animacija: tri smera + fotografija --- */
/* diskretan ulazak sa strane — koristi se samo tamo gde kompozicija
   već ima jasnu levu/desnu stranu (npr. split sekcija „O nama”) */
.reveal-x-left  { opacity: 0; transform: translateX(-26px); }
.reveal-x-right { opacity: 0; transform: translateX(26px); }
.reveal-x-left.in-view,
.reveal-x-right.in-view {
  opacity: 1;
  transform: none;
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}

/* fotografija: fade uz minimalno smirivanje razmere */
.reveal-photo img {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.85s var(--ease), transform 0.9s var(--ease);
}
.reveal-photo.in-view img { opacity: 1; transform: none; }

/* --- stagger: roditelj je samo okidač, deca nose animaciju --- */
.reveal.stagger { opacity: 1; transform: none; }
.reveal.stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.62s var(--ease), transform 0.62s var(--ease);
}
.reveal.stagger.in-view > * { opacity: 1; transform: none; }
.reveal.stagger.in-view > *:nth-child(1) { transition-delay: 0ms; }
.reveal.stagger.in-view > *:nth-child(2) { transition-delay: var(--step); }
.reveal.stagger.in-view > *:nth-child(3) { transition-delay: calc(var(--step) * 2); }
.reveal.stagger.in-view > *:nth-child(4) { transition-delay: calc(var(--step) * 3); }
.reveal.stagger.in-view > *:nth-child(5) { transition-delay: calc(var(--step) * 4); }
.reveal.stagger.in-view > *:nth-child(6) { transition-delay: calc(var(--step) * 5); }
.reveal.stagger.in-view > *:nth-child(n + 7) { transition-delay: calc(var(--step) * 6); }

/* Korisnik koji traži manje kretanja dobija statičnu stranicu:
   sve je odmah vidljivo, dekorativne animacije se gase u potpunosti. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  .reveal,
  .hero-content,
  .hero-media,
  .hero-copy > *,
  .hero-media img,
  .hero-meta-item,
  .reveal.stagger > *,
  .reveal-x-left,
  .reveal-x-right,
  .reveal-photo img {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  /* i prelazak između stranica postaje trenutan */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  .header-inner, .logo-mark { transition: none !important; }
}

/* ===================== 17. RESPONSIVE: TABLET ==================== */
/* uska desktop širina: skratiti header da navigacija ostane u jednom redu */
@media (max-width: 1340px) {
  .site-header .logo-text span { display: none; }
  .nav-list { gap: 20px; }
  .main-nav { gap: 30px; }
}

/* EN nav labels ("Pediatric Dentistry", "Behind the Mirror", "Book an appointment"...)
   render noticeably wider than the SR ones. Since .container caps at 1280px regardless
   of viewport, the EN inline nav never actually gains room on wider screens — even with
   tightened gaps it stays too wide to share the header with a full-size logo below
   ~1250px, which forced "Dr Vragolić" itself to wrap and spill out of the header.
   Two EN-only, non-destructive adjustments, both leaving SR untouched:
   1) trim the inline nav's own gaps a bit once it does have room (>1250px), and
   2) fall back to the existing hamburger nav a bit earlier (<=1250px instead of
      <=1080px) so the logo never gets squeezed below that. */
@media (min-width: 1251px) {
  html[lang="en"] .nav-list { gap: 14px; }
  html[lang="en"] .main-nav { gap: 22px; }
  html[lang="en"] .nav-actions { gap: 14px; }
  html[lang="en"] .nav-actions .btn { padding: 11px 16px; }
}

@media (max-width: 1250px) and (min-width: 1081px) {
  html[lang="en"] .nav-toggle { display: flex; }

  html[lang="en"] .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--pad) 32px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--t), transform var(--t), visibility var(--t);
  }
  html[lang="en"] .main-nav.open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }

  html[lang="en"] .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  html[lang="en"] .nav-list li + li { border-top: 1px solid var(--line); }
  html[lang="en"] .nav-link {
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 8px 0;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
  }
  html[lang="en"] .nav-link::after { display: none; }

  html[lang="en"] .nav-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
  }
  html[lang="en"] .nav-actions .btn { min-height: 50px; font-size: 0.875rem; }
  html[lang="en"] .link-urgent { justify-content: center; min-height: 46px; }
}

@media (max-width: 1200px) {
  :root { --pad: 32px; }
  .nav-list { gap: 16px; }
  .main-nav { gap: 24px; }
  .nav-actions { gap: 16px; }
  .nav-actions .btn { padding: 11px 18px; }
}

/* hamburger meni */
@media (max-width: 1080px) {
  .nav-toggle { display: flex; }

  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--pad) 32px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--t), transform var(--t), visibility var(--t);
  }
  .main-nav.open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list li + li { border-top: 1px solid var(--line); }
  .nav-link {
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 8px 0;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
  }
  .nav-link::after { display: none; }

  .nav-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
  }
  .nav-actions .btn { min-height: 50px; font-size: 0.875rem; }
  .link-urgent { justify-content: center; min-height: 46px; }
}

@media (max-width: 1024px) {
  .section { padding: 100px 0; }
  .split-head {
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
    margin-bottom: 60px;
  }
  .split-head-lead { padding-bottom: 0; max-width: 60ch; }

  /* hero ostaje full-bleed fotografija sa tekstom preko nje;
     na užem ekranu samo smanjimo minimalnu visinu i razmak */
  .hero-layout {
    min-height: 78vh;
    padding: calc(var(--header-h) + 56px) var(--pad) 8vh;
  }
  .hero-copy { max-width: 560px; }
  .hero-meta { margin-top: 0; }
  .hero-meta-item { padding: 28px 28px 28px 0; }
  .hero-meta-item + .hero-meta-item { padding-left: 28px; }

  .principles { grid-template-columns: repeat(2, 1fr); }
  .principles li { padding: 36px 32px 32px 0; }
  .principles li:nth-child(2n) { border-right: 0; padding-right: 0; }
  .principles li:nth-child(n + 3) { border-top: 1px solid var(--line-2); }
  .principles li:not(:first-child) { padding-left: 0; }
  .principles li:nth-child(2n) { padding-left: 32px; }

  .svc-featured { grid-template-columns: 1fr 1fr; gap: 40px; }
  .svc-major-offset { margin-top: 56px; }
  .svc-list { margin-top: 72px; }
  .svc-row { grid-template-columns: 64px 1fr; gap: 20px; padding: 30px 16px 30px 4px; }
  .svc-row-heading { grid-column: 2; flex-direction: row; align-items: center; gap: 16px; }
  .svc-row-photo { max-width: 96px; flex: 0 0 96px; }
  .svc-row-body { grid-column: 2; margin-top: 16px; }
  .svc-row p { max-width: none; }

  .about-layout { grid-template-columns: 1fr; }
  .about-media img { min-height: 0; height: 52vh; }
  .about-copy { padding: 72px var(--pad) 88px; max-width: 720px; }
  .doctor-intro-inner { gap: 40px; }
  .bio-facts { grid-template-columns: 1fr 1fr; }
  .value-row { grid-template-columns: 1fr; border-top: 0; }
  .value-row li { border-right: 0; padding: 22px 0; border-top: 1px solid var(--line-2); }
  .value-row li:first-child { border-top: 0; }
  .value-row li:not(:first-child) { padding-left: 0; }

  .gallery-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 80px; gap: 16px; }
  .g1 { grid-column: span 4; grid-row: span 5; }
  .g2, .g3 { grid-column: span 2; grid-row: span 4; }
  .g4 { grid-column: span 4; grid-row: span 3; }
  .g6 { grid-column: span 4; grid-row: span 4; }
  .g7 { grid-column: span 4; grid-row: span 3; }

  .faq-layout { grid-template-columns: 1fr; gap: 48px; }
  .faq-aside { position: static; }
  .faq-answer-inner { padding-right: 8%; }

  .booking-grid { grid-template-columns: 1fr; gap: 20px; }
  .booking-urgent { order: -1; }   /* hitno prvo na manjim ekranima */
  .booking-block { padding: 40px 32px; }

  .contact-layout { grid-template-columns: 1fr 1fr; }
  .contact-col { padding: 36px 32px 32px 0; }
  .contact-col + .contact-col { padding-left: 32px; }
  .contact-col-map {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line-2);
  }

  .footer-inner { grid-template-columns: 1fr; gap: 56px; }
}

/* ===================== 18. RESPONSIVE: MOBILE ==================== */
@media (max-width: 768px) {
  :root { --pad: 20px; --header-h: 68px; }

  .section { padding: 76px 0; }
  h1 { font-size: clamp(2.25rem, 9vw, 2.75rem); }
  h2 { font-size: clamp(1.75rem, 6.6vw, 2.125rem); }

  .split-head { margin-bottom: 44px; }
  .eyebrow { margin-bottom: 16px; }

  /* hero ostaje full-bleed fotografija sa tekstom preko nje, isto kao
     na računaru — ali na telefonu visina prati sadržaj (bez 86vh
     minimuma), inače ostaje prazan prostor između dugmeta i trake
     sa informacijama i hero guta ceo ekran bez razloga */
  .hero-layout {
    min-height: 0;
    padding: calc(var(--header-h) + 12px) var(--pad) 18px;
  }

  /* na uskom i visokom ekranu se cover inače širi po celoj visini
     hero-a i otkriva lavabo u donjem delu fotografije — ograničimo
     visinu trake sa slikom i pomerimo kadar na gornji deo (doktor i
     sestra), ostatak hero-a ispod nje ostaje na tamnoj podlozi */
  .hero-media {
    bottom: auto;
    height: 300px;
  }
  .hero-media img { object-position: 50% 10%; }
  .hero-media::after {
    background:
      linear-gradient(100deg,
        rgba(8, 24, 42, 0.88) 0%,
        rgba(8, 24, 42, 0.72) 45%,
        rgba(8, 24, 42, 0.45) 78%,
        rgba(8, 24, 42, 0.30) 100%),
      linear-gradient(180deg,
        rgba(8, 24, 42, 0.50) 0%,
        rgba(8, 24, 42, 0) 26%,
        rgba(8, 24, 42, 0) 52%,
        rgba(8, 24, 42, 0.98) 100%);
  }

  .hero-place { gap: 10px; margin-bottom: 14px; font-size: 0.625rem; letter-spacing: 0.16em; }
  .hero-place .rule { width: 28px; flex-basis: 28px; }
  .hero-title { margin-bottom: 14px; }
  .hero-lead { font-size: 1rem; margin-bottom: 18px; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-actions .btn { width: 100%; }

  /* na mobilnom hero-u dugme "Zakažite termin" je manje upadljivo —
     prigušena tamna popuna i tanak okvir umesto pune plave površine,
     niže i kompaktnije nego podrazumevani .btn-lg */
  .hero-actions .btn-primary {
    min-height: 46px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: none;
  }
  .hero-actions .btn-primary:hover,
  .hero-actions .btn-primary:active {
    background: rgba(255, 255, 255, 0.16);
    border-color: #fff;
    color: #fff;
    transform: none;
    box-shadow: none;
  }

  /* dugme "Hitan slučaj" dobija prigušenu crvenu samo na telefonu —
     lakše se prepoznaje kao hitna akcija u nizu ostalih info-stavki */
  .hero .hero-urgent-btn {
    background: var(--danger-muted);
    border-color: var(--danger-muted);
    color: #fff;
  }
  .hero .hero-urgent-btn:hover,
  .hero .hero-urgent-btn:focus-visible {
    background: var(--danger-muted-hover);
    border-color: var(--danger-muted-hover);
    color: #fff;
  }
  .hero .hero-urgent-btn:focus-visible { outline-color: var(--danger-muted-hover); }

  /* poslednja stavka (Adresa) je često blizu dna prvog ekrana — malo
     rezerve da je pri učitavanju ne dodiruje fiksna CTA traka */
  .hero-meta { grid-template-columns: 1fr; padding-bottom: 28px; }
  .hero-meta-item { padding: 13px 0; }
  .hero-meta-item + .hero-meta-item { padding-left: 0; border-left: 0; }
  .hero-meta dt { margin-bottom: 4px; }

  .principles { grid-template-columns: 1fr; }
  .principles li,
  .principles li:nth-child(2n) { padding: 30px 0; border-right: 0; padding-left: 0; }
  .principles li + li { border-top: 1px solid var(--line-2); }
  .idx { margin-bottom: 14px; }

  .svc-featured { grid-template-columns: 1fr; gap: 56px; }
  .svc-major-offset { margin-top: 0; }
  .svc-photo { margin-bottom: 24px; }
  .svc-list { margin-top: 56px; }
  .svc-row {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 26px 0;
  }
  .svc-row:hover { padding-left: 0; background: transparent; }
  .svc-row-heading, .svc-row-body { grid-column: 1; }
  .svc-row-heading { flex-direction: row; align-items: center; gap: 14px; }
  .svc-row-photo { max-width: 84px; flex: 0 0 84px; }
  .svc-row h2, .svc-row h3 { font-size: 1.3125rem; }

  .about-media img { height: 60vw; min-height: 280px; }
  .about-copy { padding: 56px var(--pad) 72px; }
  .about-role { margin-bottom: 28px; }

  .doctor-intro-inner { gap: 20px; align-items: flex-start; }
  .doctor-photo { flex-basis: 104px; width: 104px; }
  .doctor-intro-copy .about-role { margin-bottom: 10px; }
  .doctor-intro-copy p { font-size: 0.9375rem; margin-bottom: 16px; }

  .bio-facts { grid-template-columns: 1fr; gap: 18px; }
  .principle-quote { padding-left: 20px; margin-bottom: 40px; }

  .urgent-strip { padding: 40px 0; }
  .urgent-strip-inner { flex-direction: column; align-items: flex-start; gap: 22px; }
  .urgent-strip .btn { width: 100%; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 64px; gap: 12px; }
  .g1 { grid-column: span 2; grid-row: span 5; }
  .g2, .g3 { grid-column: span 1; grid-row: span 4; }
  .g4 { grid-column: span 2; grid-row: span 4; }
  .g6 { grid-column: span 2; grid-row: span 5; }
  .g7 { grid-column: span 2; grid-row: span 4; }

  .faq-question { font-size: 1.0625rem; padding: 24px 0; gap: 18px; }
  .faq-answer-inner { padding: 0 0 26px; }

  .booking-head { margin-bottom: 40px; }
  .booking-block { padding: 32px 22px; }
  .field-row { grid-template-columns: 1fr; gap: 20px; }
  .urgent-phone { min-height: 66px; }

  .contact-layout { grid-template-columns: 1fr; }
  .contact-col,
  .contact-col + .contact-col {
    padding: 32px 0;
    border-left: 0;
    border-top: 1px solid var(--line-2);
  }
  .contact-col:first-child { border-top: 0; }
  .contact-col-map { border-top: 1px solid var(--line-2); }

  .footer-nav { grid-template-columns: 1fr 1fr; gap: 32px; }
  .site-footer { padding-top: 72px; }
  .footer-bottom { justify-content: center; text-align: center; }
  .footer-credit { width: 100%; justify-content: center; }

  /* sticky CTA traka */
  .mobile-cta { display: flex; }
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }

  /* isto prigušeno crveno kao dugme u heroju — hitni poziv se
     prepoznaje na prvi pogled, ali ne probija plavu paletu sajta */
  .mobile-cta-urgent {
    background: var(--danger-muted);
    border-color: var(--danger-muted);
    color: #fff;
  }
  .mobile-cta-urgent:hover,
  .mobile-cta-urgent:focus-visible {
    background: var(--danger-muted-hover);
    border-color: var(--danger-muted-hover);
    color: #fff;
  }
  .mobile-cta-urgent:focus-visible { outline-color: var(--danger-muted-hover); }

  .lightbox { padding: 12px; gap: 4px; }
  .lightbox-close { top: 12px; right: 12px; width: 42px; height: 42px; }
  .lightbox-nav { width: 40px; height: 40px; flex-basis: 40px; }
}

/* na uskim telefonima tekst pored fotografije pada ispod ~220px i
   lomi se u previše redova — na ovoj širini je čitljivije da
   fotografija bude iznad teksta nego uz njega */
@media (max-width: 480px) {
  .doctor-intro-inner { flex-direction: column; align-items: flex-start; gap: 22px; }
  .doctor-photo { flex-basis: auto; width: 132px; }
}

@media (max-width: 420px) {
  .footer-nav { grid-template-columns: 1fr; gap: 28px; }
  .logo-text span { font-size: 0.625rem; }
}

/* ============ 19. DEKORACIJA NA MALIM EKRANIMA ============
   Na uskim ekranima pozadinski oblici se povlače: ostaju samo
   meki prelazi i slabiji sjaj, bez krugova i teksture. */
@media (max-width: 768px) {
  .principles-section::after { display: none; } /* tačkasta tekstura se sklanja */

  .section::before {
    background: radial-gradient(620px 320px at 88% 2%, var(--glow-blue), transparent 64%);
  }
  .section-stone::before {
    background: radial-gradient(560px 300px at 6% 4%, var(--glow-soft), transparent 62%);
  }
  .section-ink {
    background:
      radial-gradient(620px 400px at 76% 4%, rgba(46, 109, 180, 0.28), transparent 64%),
      var(--ink);
  }
  .booking-standard { box-shadow: 0 18px 40px rgba(3, 12, 22, 0.35); }
  .svc-photo { box-shadow: 0 12px 28px rgba(10, 29, 49, 0.10); }

  /* --- animacije na telefonu: manje toga i kraće --- */
  :root { --step: 45ms; }                      /* kraći stagger */
  .reveal.stagger > * { transform: translateY(12px); transition-duration: 0.5s; }
  .reveal.in-view { transition-duration: 0.5s; }
  .hero-copy > * { transform: translateY(12px); transition-duration: 0.6s; }
  .hero-media img { clip-path: none; transition: opacity 0.7s var(--ease) 0.15s; }

  /* hover efekti nemaju smisla na dodir — bez pomeranja dugmadi */
  .btn-primary:hover, .btn-danger:hover { transform: none; box-shadow: none; }

  /* na telefonu samo opacity + mali pomak nagore: bez bočnih ulazaka
     i bez skaliranja fotografija */
  .reveal-x-left, .reveal-x-right { transform: translateY(12px); }
  .reveal-x-left.in-view, .reveal-x-right.in-view { transition-duration: 0.5s; }
  .reveal-photo img { transform: none; transition: opacity 0.55s var(--ease); }

  /* header ne menja visinu na malim ekranima — nema mesta za to */
  .site-header.scrolled .header-inner { height: var(--header-h); }
  .site-header.scrolled .logo-mark { width: 40px; height: 40px; flex-basis: 40px; }
}

/* ======================= 20. HITNI MODAL ========================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 29, 49, 0.62);
  opacity: 0;
  transition: opacity 220ms ease;
}
.modal-overlay[hidden] { display: none; }
.modal-overlay.visible { opacity: 1; }

.modal-panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  padding: 44px 40px 40px;
  background: var(--paper);
  border-radius: var(--r-lg);
  border-top: 3px solid var(--danger);
  box-shadow: 0 40px 90px rgba(3, 12, 22, 0.45);
  text-align: center;
  transform: translateY(14px) scale(0.98);
  opacity: 0;
  transition: transform 260ms var(--ease), opacity 220ms ease;
}
.modal-overlay.visible .modal-panel { transform: none; opacity: 1; }

.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color var(--t), border-color var(--t), color var(--t);
}
.modal-close:hover { background: var(--stone); border-color: var(--ink); color: var(--ink); }
.modal-close svg { width: 18px; height: 18px; }

.modal-panel .badge-urgent { margin-bottom: 18px; }
.modal-panel h2 { margin-bottom: 14px; }
.modal-panel p { font-size: 0.9688rem; margin-bottom: 28px; }
.modal-call-btn { width: 100%; margin-bottom: 22px; }
.modal-panel .form-note { text-align: left; }

@media (max-width: 480px) {
  .modal-panel { padding: 36px 26px 32px; }
}

/* =================== 21. IZA OGLEDALCA (BLOG) ==================== */
.blog-intro { max-width: 68ch; margin-bottom: 48px; }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 18px 40px rgba(10, 29, 49, 0.10);
  transition: box-shadow var(--t-slow), transform var(--t-slow);
}
.blog-card:hover { box-shadow: 0 26px 56px rgba(10, 29, 49, 0.16); transform: translateY(-2px); }

.blog-card-photo { margin: 0; overflow: hidden; background: var(--sky-2); }
.blog-card-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.blog-card:hover .blog-card-photo img { transform: scale(1.04); }

.blog-card-body { display: flex; flex-direction: column; flex: 1; padding: 28px 28px 30px; }
.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.blog-card-category {
  padding: 3px 10px;
  border-radius: var(--r);
  background: var(--sky-2);
  color: var(--blue-600);
}
.blog-card-body h3 { margin: 0 0 12px; font-size: 1.25rem; }
.blog-card-excerpt { margin: 0 0 20px; font-size: 0.9375rem; flex: 1; }
.blog-card-link { font-size: 0.875rem; min-height: auto; margin-top: auto; }

.blog-empty {
  grid-column: 1 / -1;
  padding: 72px 40px;
  text-align: center;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  background: var(--stone);
}
.blog-empty h3 { margin-bottom: 12px; }
.blog-empty p { max-width: 46ch; margin: 0 auto; }

.blog-cta {
  margin-top: 96px;
  padding-top: 64px;
  border-top: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.blog-cta h2 { margin: 0 0 10px; }
.blog-cta p { margin: 0; max-width: 46ch; }
.blog-cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* zasebna stranica članka */
.article-header { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.article-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.article-meta .blog-card-category { background: var(--sky-2); }
.article-header h1 { margin-bottom: 0; }
.article-cover { margin: 0 0 64px; overflow: hidden; border-radius: var(--r-lg); background: var(--sky-2); }
.article-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.article-body { max-width: 700px; margin: 0 auto; }
.article-body p { font-size: 1.0625rem; line-height: 1.8; }
.article-body h2 { margin-top: 48px; }
.article-back { display: block; max-width: 700px; margin: 56px auto 0; }
.article-footer-cta {
  max-width: 700px;
  margin: 64px auto 0;
  padding: 40px;
  border-radius: var(--r-lg);
  background: var(--sky);
  text-align: center;
}
.article-footer-cta h2 { margin-bottom: 12px; }
.article-footer-cta p { margin-bottom: 24px; }

@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .blog-cta { margin-top: 72px; padding-top: 48px; }
}

@media (max-width: 768px) {
  .blog-grid { grid-template-columns: 1fr; gap: 24px; }
  .blog-empty { padding: 56px 24px; }
  .blog-cta { flex-direction: column; align-items: flex-start; margin-top: 56px; padding-top: 40px; }
  .article-cover { margin-bottom: 40px; }
  .article-footer-cta { padding: 28px; }
}