/* ==========================================================================
   Stomatološka ordinacija Dr. Rahmana Jusufspahić — stil sajta
   --------------------------------------------------------------------------
   Učitava se POSLJEDNJI, iza `section.css` svih sekcija i iza `brend.css`.
   Ovdje se sajt ujednačava: jedno pismo, jedna paleta, jedni razmaci.

   Šta se ovdje NE dira (raspored je u `section.css`):
     display, grid-template-*, grid-area, flex-direction, order,
     position/top/right/bottom/left, align-*, justify-*, text-align.
   Sve ostalo — boje, pismo, veličine, gap, padding, radijusi, sjenke — je moje.

   Pravila se pišu sa istom specifičnošću kao sekcijska (`.sec-ime .klasa`),
   pa pobjeđuju po redoslijedu učitavanja, a ne po !important.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. OSNOVA
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video, iframe { max-width: 100%; }
:where(img) { height: auto; }

/* Sidro ispod ljepljivog zaglavlja. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Trake se smjenjuju samo tamo gdje sekcija sama ne nosi pozadinu. */
.band { background: transparent; }

/* Vidljiv fokus na cijelom sajtu — sekcije ga rješavaju svaka za sebe. */
.sec :is(a, button, [tabindex]):focus-visible,
.wa-float:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   2. JEDNO PISMO NA CIJELOM SAJTU
   --------------------------------------------------------------------------
   Svaka sekcija nosi `--ff-display` i `--ff-body` iz svog templata (Chivo,
   Quicksand, Rubik, Lexend…). Ovdje obje varijable pokazuju na isto mjesto,
   pa sekcije i dalje koriste svoje varijable — samo je vrijednost jedna.

   Urbanist je tražen izričito. Fajl je u `sekcije/fonts/` i učitava se
   lokalno, bez ijedne veze na CDN.
   -------------------------------------------------------------------------- */

.sec {
  --ff-display: var(--font-display);
  --ff-body:    var(--font-sans);
}

.sec, .sec :is(p, li, td, th, input, button, a, span, small, strong, address, blockquote, figcaption) {
  font-family: var(--ff-body);
}
.sec :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--ff-display);
  letter-spacing: -0.022em;
}

/* Urbanist je geometrijski grotesk: na krupnim naslovima traži nešto uže
   praćenje i punu težinu, a na sitnom tekstu normalnu širinu. */
.sec :is(h1, h2) { font-weight: 700; }
.sec :is(h3, h4) { font-weight: 600; }

/* --------------------------------------------------------------------------
   3. JEDNA PALETA
   --------------------------------------------------------------------------
   `brend.css` već vezuje `--c-primary` i `--c-accent` za tokene firme.
   Ovdje se ujednačavaju NEUTRALI, koje brend ne dira i koji su u svakoj
   sekciji drugačiji (krem, roza, pješčani…). Vrijednosti su izvedene iz
   `--primary` / `--accent`, pa promjena u `tokens.css` i dalje mijenja sve.
   -------------------------------------------------------------------------- */

.sec {
  --c-bg:          #ffffff;
  --c-bg-alt:      #f2f7f5;
  --c-white:       #ffffff;
  --c-surface:     #e8f1ee;
  --c-ink:         #16241f;
  --c-text:        #22312c;
  --c-text-muted:  #5c6c66;
  --c-text-invert: #ffffff;

  --c-on-dark:     #eef5f3;
  --c-on-dark-mu:  rgba(238, 245, 243, 0.78);

  --c-line:        rgba(22, 36, 31, 0.10);
  --c-line-strong: rgba(22, 36, 31, 0.18);
  --c-line-dark:   rgba(238, 245, 243, 0.20);

  --c-whatsapp:    #128c7e;
  --c-whatsapp-dk: #0d6b60;
  --c-star:        #c8922b;

  --dot-c:         rgba(22, 124, 107, 0.14);
}

/* Sonnenschein dolazi sa koralnom, sunčanom i mentol nijansom — tri kartice
   usluga su danas nacrtane u tri boje. Sve tri idu na bijelu podlogu sa
   ivicom, pa se mreža čita kao jedan sistem; velika kartica ostaje tamna,
   jer je ona nosilac hijerarhije u toj sekciji.
   `--c-sun` se koristi i NA TAMNOJ kartici (ikona, tačke, veza), pa mora
   ostati svijetao ton koji na njoj ima kontrast. */
.sec-sonnenschein-services {
  --c-coral:      var(--accent);
  --c-coral-dk:   var(--accent-strong);
  --c-coral-soft: var(--c-white);
  --c-sun:        #a9d8ce;
  --c-sun-soft:   var(--c-white);
  --c-mint:       var(--accent);
  --c-mint-soft:  var(--c-white);
}

/* Trake sa izmjenjivom pozadinom — parne trake dobijaju mekši ton. */
.band-even > .sec:not(.sec-haven-parallax):not(.sec-haven-cta) { background: var(--c-bg-alt); }
.band-odd  > .sec:not(.sec-haven-parallax):not(.sec-haven-cta) { background: var(--c-bg); }
.sec-sonnenschein-services .svcs,
.sec-rowan-gallery .gal,
.sec-terra-faq .faq,
.sec-anker-referenzen .rev,
.sec-calm-about .abt,
.sec-dental-house-results .res { background: transparent; }

/* --------------------------------------------------------------------------
   4. JEDAN OBLIK: radijusi i sjenke
   -------------------------------------------------------------------------- */

.sec {
  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-gallery: 14px;
  --r-pill: 999px;

  --sh-sm: 0 1px 2px rgba(22, 36, 31, 0.05);
  --sh-md: 0 10px 28px -12px rgba(22, 36, 31, 0.16);
  --sh-lg: 0 28px 64px -24px rgba(22, 36, 31, 0.24);
}

/* --------------------------------------------------------------------------
   5. DUGMAD — jedan oblik na svih jedanaest sekcija
   -------------------------------------------------------------------------- */

.sec .u-btn {
  border-radius: var(--r-pill);
  font-family: var(--ff-body);
  font-weight: 600;
  letter-spacing: 0.005em;
  transition: background-color 180ms var(--ease, ease),
              color 180ms var(--ease, ease),
              border-color 180ms var(--ease, ease),
              transform 180ms var(--ease, ease),
              box-shadow 180ms var(--ease, ease);
}
.sec .u-btn:hover { transform: translateY(-1px); }
.sec .u-btn:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .sec .u-btn:hover, .sec .u-btn:active { transform: none; }
}

/* Puno dugme nosi akcent brenda svuda gdje se pojavi. */
.sec :is(.u-btn--solid, .u-btn--primary, .head-cta, .mobile-bar__i--cta) {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
  box-shadow: var(--sh-md);
}
.sec :is(.u-btn--solid, .u-btn--primary, .head-cta, .mobile-bar__i--cta):hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--accent-fg);
}

/* Obrubljeno dugme: lakše od punog, da hijerarhija ostane čitljiva. */
.sec :is(.u-btn--line, .u-btn--ghost) {
  background: transparent;
  color: var(--c-ink);
  border: 1.5px solid var(--c-line-strong);
  box-shadow: none;
}
.sec :is(.u-btn--line, .u-btn--ghost):hover {
  border-color: var(--accent);
  color: var(--accent-strong);
  background: var(--accent-soft);
}
.sec .u-dark :is(.u-btn--line, .u-btn--ghost),
.sec .fmenu :is(.u-btn--line, .u-btn--ghost) {
  color: var(--c-on-dark);
  border-color: var(--c-line-dark);
}
.sec .u-dark :is(.u-btn--line, .u-btn--ghost):hover,
.sec .fmenu :is(.u-btn--line, .u-btn--ghost):hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--c-on-dark);
  color: var(--c-on-dark);
}

.sec .u-btn--white { background: var(--c-white); color: var(--c-ink); border-color: var(--c-white); }
.sec .u-btn--white:hover { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-soft); }

.sec .u-btn--wa { background: var(--c-whatsapp); color: #fff; border-color: var(--c-whatsapp); }
.sec .u-btn--wa:hover { background: var(--c-whatsapp-dk); border-color: var(--c-whatsapp-dk); color: #fff; }

/* Oznake i čipovi — isti oblik, ista težina. */
.sec :is(.u-label, .u-chip, .u-eyebrow, .u-tab) {
  font-family: var(--ff-body);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: var(--fs-xs, 0.8125rem);
}
.sec :is(.u-label, .u-eyebrow) { color: var(--accent-strong); }
.sec .u-dark :is(.u-label, .u-eyebrow) { color: var(--c-on-dark-mu); }
.sec .u-chip {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-radius: var(--r-pill);
}
.sec .u-stars { color: var(--c-star); }

/* --------------------------------------------------------------------------
   5b. POZADINSKI VIDEO
   --------------------------------------------------------------------------
   Video stoji u VLASTITOM omotaču (`.secvid`), koji je moj element — tako se
   `position` piše samo na mojoj klasi, a ne na sekcijskoj (UPUTA, zaključana
   svojstva). Omotač ide na `z-index: -1` unutar sekcije koja ima
   `isolation: isolate`, pa sjeda iznad podloge a ispod teksta, bez ijedne
   izmjene sekcijske geometrije.

   Preko videa uvijek ide `.secvid__veil` — onoliko gustine koliko treba da
   tekst bude čitljiv, i ni piksel više.
   -------------------------------------------------------------------------- */

.secvid {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
/* Dvije klase, jer sekcije nose `... video { height: auto }` (jedna klasa +
   jedan tip), što bi inače nadjačalo pravilo sa jednom klasom i vratilo
   video na vlastiti omjer umjesto da popuni okvir. */
.secvid .secvid__v {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.secvid__veil {
  position: absolute;
  inset: 0;
  display: block;
}

/* Kartica usluge: portret je desno u kadru, pa gustina raste ulijevo,
   gdje stoji tekst. */
.secvid__veil--card {
  background:
    linear-gradient(100deg,
      rgba(12, 32, 27, 0.95) 0%,
      rgba(12, 32, 27, 0.88) 42%,
      rgba(12, 32, 27, 0.60) 100%);
}
/* CTA: tekst je centriran, pa je gustina ravnomjerna, malo jača pri dnu
   gdje stoje dugmad. */
.secvid__veil--cta {
  background:
    linear-gradient(180deg,
      rgba(10, 28, 24, 0.86) 0%,
      rgba(10, 28, 24, 0.80) 45%,
      rgba(10, 28, 24, 0.90) 100%);
}

/* Kartica i CTA dobijaju vlastiti stacking context, da `z-index: -1`
   ostane UNUTAR njih i ne propadne iza podloge sekcije.
   `isolation` nije među zaključanim svojstvima. */
.sec-sonnenschein-services .bento--hero { isolation: isolate; }
.sec-haven-cta .cta { isolation: isolate; }

/* Dugme za pauzu — WCAG 2.2.2: sve što se samo pokreće duže od pet sekundi
   mora imati način da se zaustavi. Ubacuje ga `assets/app.js`. */
.vid-ctl {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 13px;
  border: 0;
  border-radius: 999px;
  background: rgba(12, 32, 27, 0.60);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 160ms ease, background-color 160ms ease;
}
.vid-ctl:hover, .vid-ctl:focus-visible { opacity: 1; background: rgba(12, 32, 27, 0.82); }
.vid-ctl__ic { width: 11px; height: 12px; flex: none; fill: currentColor; }

/* U CTA sekciji su dugmad centrirana i široka, pa bi kontrola u donjem uglu
   sjela preko njih. Ide u gornji ugao, gdje je prazno. */
.sec-haven-cta .vid-ctl { top: 12px; bottom: auto; }

/* --------------------------------------------------------------------------
   6. ZAGLAVLJE
   -------------------------------------------------------------------------- */

/* Zaglavlje stoji na vrhu i kad se skrola.
   Sekcija ga je nosila kao `position: sticky`, ali ljepljivi element ostaje
   na ekranu samo dok je NJEGOV roditelj u kadru — a `.sec-terra-header` je
   visok koliko i sama traka (65 px). Zato je zaglavlje nestajalo već poslije
   prvog ekrana (mjereno: top -1200 na skrolu od 1200).
   `fixed` to rješava; sekcija zadržava svoju visinu kroz `min-height`, da
   sadržaj ispod ne odskoči kad traka izađe iz toka. */
.sec-terra-header .site-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color 220ms var(--ease, ease), border-color 220ms var(--ease, ease), box-shadow 220ms var(--ease, ease);
}
.sec-terra-header .site-head.is-past {
  background: rgba(255, 255, 255, 0.95);
  border-bottom-color: var(--c-line);
  box-shadow: var(--sh-sm);
}
/* Mjesto koje je traka zauzimala dok je bila u toku.
   +1 px je donja ivica trake, da sadržaj ispod ne odskoči ni za piksel. */
.sec-terra-header { min-height: calc(var(--header-h) + 1px); }

/* Sidra: naslov sekcije ne smije završiti ispod fiksne trake. Sekcije koje
   same nose `scroll-margin-top` ovim se ne diraju — ovo je zadano za ostale. */
.sec [id] { scroll-margin-top: calc(var(--header-h) + 16px); }

/* Dugme menija: sekcija mu daje `currentColor`, a to je na svijetloj traci
   skoro bijelo (mjereno rgb(238,245,243)) — dugme se praktično ne vidi.
   Ide u zelenu boju brenda, i kad je meni otvoren i kad nije. */
.sec-terra-header .burger { color: var(--accent); }
.sec-terra-header .burger:hover { color: var(--accent-strong); }
.sec-terra-header .brand__mark {
  width: 46px; height: 46px;
  border-radius: var(--r-md);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  padding: 4px;
  overflow: hidden;
}
.sec-terra-header .brand__mark img { width: 100%; height: 100%; object-fit: contain; }
.sec-terra-header .brand__tx strong {
  font-family: var(--ff-display);
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -0.02em;
}
.sec-terra-header .brand__tx small {
  color: var(--c-text-muted);
  letter-spacing: 0.02em;
}
.sec-terra-header .site-nav a {
  font-weight: 500;
  color: var(--c-text);
  border-radius: var(--r-pill);
  white-space: nowrap;   /* „Prije i poslije" se ne lomi u dva reda */
}
.sec-terra-header .head-tel { white-space: nowrap; }
.sec-terra-header .site-nav a:hover,
.sec-terra-header .site-nav a.is-current { color: var(--accent-strong); }
.sec-terra-header .head-tel {
  font-weight: 700;
  color: var(--c-ink);
  gap: 8px;
}
.sec-terra-header .head-tel svg { width: 17px; height: 17px; flex: none; color: var(--accent); }
.sec-terra-header .head-tel:hover { color: var(--accent-strong); }
.sec-terra-header .head-tel:hover svg { color: var(--accent-strong); }

.sec-terra-header .fmenu { background: var(--primary); }
/* Sedam stavki na telefonu: templatnih 24–32 px je preveliko, pa spisak
   traži skrol i guši dugmad ispod sebe. Manje pismo i niži redovi. */
.sec-terra-header .fmenu__list a {
  font-family: var(--ff-display);
  font-size: clamp(1.0625rem, 3.4vw, 1.25rem);
  font-weight: 600;
  min-height: 52px;
  padding-block: 8px;
  color: var(--c-on-dark);
}
.sec-terra-header .fmenu__list a:hover { color: #fff; }
.sec-terra-header .fmenu__note { color: var(--c-on-dark-mu); }

.sec-terra-header .mobile-bar {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -8px 28px -18px rgba(22, 36, 31, 0.5);
}
.sec-terra-header .mobile-bar__i { font-weight: 600; color: var(--c-text); }
.sec-terra-header .mobile-bar__i--wa { color: var(--c-whatsapp-dk); }
.sec-terra-header .mobile-bar__i--cta { border-radius: var(--r-pill); }

/* Ispod 380 px sekcija skriva natpise u traci i ostavlja same ikone. Ovdje
   se vraćaju, jer je traka na telefonu jedini WhatsApp na ekranu — a gola
   ikona bez riječi se čita kao ukras, ne kao dugme.
   Ovo je JEDINO mjesto gdje se `display` piše preko sekcijske klase, i piše
   se na mojoj klasi `.bar-label`, sa manjim pismom da tri natpisa stanu. */
@media (max-width: 380px) {
  .sec-terra-header .mobile-bar__i span.bar-label { display: inline; }
  .sec-terra-header .mobile-bar__i { gap: 5px; font-size: 0.6875rem; }
  .sec-terra-header .mobile-bar__i svg { width: 17px; height: 17px; }
}

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */

.sec-bloom-hero .hero {
  background: linear-gradient(168deg, var(--accent-soft) 0%, var(--c-bg-alt) 48%, var(--c-bg) 100%);
  border-bottom-left-radius: 46% 84px;
  border-bottom-right-radius: 46% 84px;
}
.sec-bloom-hero .hero h1 {
  color: var(--c-ink);
  line-height: 1.06;
}
.sec-bloom-hero .hero__lead {
  color: var(--c-text-muted);
  font-size: var(--fs-lg);
  max-width: 34ch;
}
.sec-bloom-hero .hero__wa { color: var(--c-text-muted); font-size: var(--fs-sm); }
.sec-bloom-hero .hero__wa a { color: var(--c-whatsapp-dk); font-weight: 600; }

.sec-bloom-hero .hero__cap {
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  border: 6px solid var(--c-white);
  overflow: hidden;
}
.sec-bloom-hero .hero__detail {
  border-radius: var(--r-lg);
  border: 5px solid var(--c-white);
  box-shadow: var(--sh-md);
  overflow: hidden;
}
/* Oba kadra su portreti — lice ide u gornju trećinu, da ga okvir ne siječe. */
.sec-bloom-hero .hero__cap img { object-fit: cover; object-position: 50% 22%; }
.sec-bloom-hero .hero__detail img { object-fit: cover; object-position: 50% 40%; }

/* --------------------------------------------------------------------------
   8. USLUGE
   -------------------------------------------------------------------------- */

.sec-sonnenschein-services .bento {
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  background: var(--c-white);
  box-shadow: var(--sh-sm);
  transition: box-shadow 220ms var(--ease, ease), transform 220ms var(--ease, ease), border-color 220ms var(--ease, ease);
}
.sec-sonnenschein-services .bento:hover {
  box-shadow: var(--sh-md);
  border-color: var(--accent-soft);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .sec-sonnenschein-services .bento:hover { transform: none; }
}
/* Velika kartica ostaje tamna — ona nosi hijerarhiju sekcije. Samo joj se
   gradijent prevodi u boje brenda. */
.sec-sonnenschein-services .bento--hero {
  background: linear-gradient(150deg, var(--primary) 0%, var(--accent-strong) 100%);
  border-color: transparent;
  box-shadow: var(--sh-md);
}
.sec-sonnenschein-services .bento__ic {
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.sec-sonnenschein-services .bento--hero .bento__ic {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
/* Tekst se prebojava samo na SVIJETLIM karticama — tamna zadržava bijeli. */
.sec-sonnenschein-services .bento:not(.bento--hero) h3 { color: var(--c-ink); }
.sec-sonnenschein-services .bento:not(.bento--hero) p { color: var(--c-text-muted); }
.sec-sonnenschein-services .bento--hero p { color: rgba(255, 255, 255, 0.92); }
.sec-sonnenschein-services .bento--hero .bento__list li { color: #fff; }
.sec-sonnenschein-services .bento__go {
  font-weight: 700;
  text-decoration: none;
  color: var(--c-sun);
}
.sec-sonnenschein-services .bento__go:hover { color: #fff; }

/* --------------------------------------------------------------------------
   9. RECENZIJE — najviše tri odjednom, sa strelicama
   --------------------------------------------------------------------------
   Kartice ostaju kartice i mreža ostaje mreža (`grid-template-columns` je u
   `section.css` i ne dira se). Skripta samo sakriva one koje nisu na redu.
   Strelice se pojavljuju tek kad recenzija ima više od tri.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   NAPOMENA O RASPOREDU OVE SEKCIJE
   --------------------------------------------------------------------------
   Naslov, Google ocjena i kartice stoje u JEDNOM redu — tako je izričito
   traženo. To znači da se sekcijski raspored ovdje prepisuje (`display`,
   `grid-template-columns`, `align-items` na `.rev__top` i `.rev__grid`), a to
   je jedino mjesto na sajtu gdje se to radi. UPUTA §„Raspored nije u markupu
   nego u section.css" traži suprotno, pa provjera rasporeda ovu sekciju može
   označiti. Odluka je naručiočeva i ovdje je zapisana da se zna zašto.

   Red se lomi sam (`flex-wrap`), pa na užem ekranu blokovi idu jedan ispod
   drugog bez ijedne prelomne tačke.
   -------------------------------------------------------------------------- */

.sec-anker-referenzen .rev__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(22px, 2.6vw, 40px);
}
.sec-anker-referenzen #anker-referenzen-rev-title { font-size: 25px; }
.sec-anker-referenzen .rev__top > .u-head { flex: 1 1 17rem; min-width: 0; }
.sec-anker-referenzen .rev__top > .gsum   { flex: 0 0 auto; }

.rev__cards { flex: 2 1 20rem; min-width: 0; }

/* Kartice se same slažu u onoliko stubaca koliko stane u preostalu širinu,
   umjesto fiksna tri — jer im je ovdje na raspolaganju dio reda, a ne cijeli. */
.sec-anker-referenzen .rev__grid {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin-top: 0;
  gap: clamp(14px, 1.4vw, 20px);
}

.sec-anker-referenzen .rcard {
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  background: var(--c-white);
  box-shadow: var(--sh-sm);
}
.sec-anker-referenzen .rcard__tr p { color: var(--c-text); font-size: var(--fs-md); }
.sec-anker-referenzen .rcard__who { font-family: var(--ff-display); font-weight: 700; }
.sec-anker-referenzen .u-tab { border-radius: var(--r-pill); }

.sec-anker-referenzen .gsum {
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  background: var(--c-white);
  box-shadow: var(--sh-sm);
}
.sec-anker-referenzen .gsum__score strong { color: var(--c-ink); }
.sec-anker-referenzen .gsum__link { color: var(--accent-strong); font-weight: 700; }
.sec-anker-referenzen .gsum__link:hover { color: var(--accent); }

/* Kartica koja nije na trenutnoj stranici skriva se INLINE stilom iz
   `assets/app.js`, a ne pravilom ovdje: `section.css` daje `.rcard`
   svoj `display`, pa bi ga pravilo iz ovog fajla moralo prepisati — a
   `display` je na sekcijskim klasama zaključan (UPUTA). Inline stil to
   rješava bez diranja sekcijske geometrije. */

/* Strelice su moj element, pa se `display` na njemu smije pisati. */
.sec-anker-referenzen .rev__nav[hidden] { display: none; }
.sec-anker-referenzen .rev__nav {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.sec-anker-referenzen .rev__arrow {
  width: 48px; height: 48px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--c-line-strong);
  background: var(--c-white);
  color: var(--c-ink);
  cursor: pointer;
  padding: 0;
  transition: background-color 180ms var(--ease, ease), border-color 180ms var(--ease, ease), color 180ms var(--ease, ease);
}
.sec-anker-referenzen .rev__arrow svg { width: 20px; height: 20px; }
.sec-anker-referenzen .rev__arrow:hover:not(:disabled) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}
.sec-anker-referenzen .rev__arrow:disabled { opacity: 0.36; cursor: default; }
.sec-anker-referenzen .rev__count {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   10. KAKO DO TERMINA (parallax)
   -------------------------------------------------------------------------- */

/* Preko cijele širine, bez zaobljenja i BEZ razmaka: sekcija nosi i bočni i
   gornji/donji razmak oko okvira, pa se sve poništava — traka videa tako
   dodiruje sekcije iznad i ispod. Tekst i dalje stoji u `.u-container`,
   tako da se širi samo POZADINA, a ne i slog. */
.sec-haven-parallax .scrub { padding: 0; }
.sec-haven-parallax .scrub__frame { border-radius: 0; overflow: hidden; }
/* Zatamnjenje ide taman toliko da tekst bude čitljiv — fotografija ostaje
   fotografija (UPUTA §„Fotografija mora ostati fotografija"). */
.sec-haven-parallax .scrub__veil {
  background:
    linear-gradient(180deg, rgba(11, 22, 18, 0.28) 0%, rgba(11, 22, 18, 0.62) 40%, rgba(11, 22, 18, 0.84) 100%);
}
.sec-haven-parallax .scrub__media :is(img, video) { object-fit: cover; object-position: 50% 42%; }
.sec-haven-parallax .scrub h2 { color: #fff; }
.sec-haven-parallax .step h3 { color: #fff; }
.sec-haven-parallax .step p { color: var(--c-on-dark-mu); }
.sec-haven-parallax .step__n {
  font-family: var(--ff-display);
  font-weight: 700;
  color: var(--accent-soft);
}

/* --------------------------------------------------------------------------
   11. O NAMA
   -------------------------------------------------------------------------- */

.sec-calm-about .abt__photo,
.sec-calm-about .abt__portrait {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
.sec-calm-about .abt__portrait { border: 6px solid var(--c-white); border-radius: var(--r-lg); }
/* Oba kadra su uspravna i puna ljudi — kadriramo na lica, nikad kroz njih. */
.sec-calm-about .abt__photo img { object-fit: cover; object-position: 50% 30%; }
.sec-calm-about .abt__portrait img { object-fit: cover; object-position: 46% 34%; }

.sec-calm-about .abt__badge {
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-md);
}
.sec-calm-about .abt__badge-icon { color: var(--accent); }
.sec-calm-about .abt__badge-text strong { font-family: var(--ff-display); color: var(--c-ink); }
.sec-calm-about .abt__badge-text small { color: var(--c-text-muted); }
.sec-calm-about .abt__lead { color: var(--c-text-muted); font-size: var(--fs-lg); }
.sec-calm-about .abt__points li { color: var(--c-text); }
.sec-calm-about .abt__points strong { color: var(--c-ink); }
.sec-calm-about .abt__tick { background: var(--accent); }
.sec-calm-about .abt__sign-name { font-family: var(--ff-display); font-weight: 700; color: var(--c-ink); }
.sec-calm-about .abt__sign-role { color: var(--c-text-muted); }
.sec-calm-about .abt__blob { background: var(--accent-soft); }

/* --------------------------------------------------------------------------
   12. PRIJE I POSLIJE
   -------------------------------------------------------------------------- */

.sec-dental-house-results .ba__case {
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  background: var(--c-white);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.sec-dental-house-results .ba__case figure { margin: 0; overflow: hidden; }
/* Snimci su portreti 3:4 — okvir prati fotografiju umjesto obrnuto. */
.sec-dental-house-results .ba__case img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 45%;
}
.sec-dental-house-results .ba__tag {
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.94);
  color: var(--c-ink);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sec-dental-house-results .ba__tag--a { background: var(--accent); color: var(--accent-fg); }
.sec-dental-house-results .ba__meta strong { font-family: var(--ff-display); color: var(--c-ink); }
.sec-dental-house-results .ba__meta span { color: var(--c-text-muted); }

/* --------------------------------------------------------------------------
   13. GALERIJA
   -------------------------------------------------------------------------- */

/* Naslov galerije ide preko pune širine: sekcija ga steže na 19 znakova,
   pa se „Pogledajte prije nego dođete" lomi u dva reda bez potrebe.
   `max-width` nije zaključano svojstvo. */
.sec-rowan-gallery .gal__head h2 { max-width: none; }

.sec-rowan-gallery .gal__stage {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  box-shadow: var(--sh-md);
  cursor: zoom-in;
  padding: 0;
}
.sec-rowan-gallery .gal__stage img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 40%;
  width: 100%;
}
.sec-rowan-gallery .gal__zoom {
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.94);
  color: var(--c-ink);
  font-weight: 600;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.sec-rowan-gallery .gal__t {
  border-radius: var(--r-gallery);
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--c-surface);
  cursor: pointer;
  padding: 0;
  transition: border-color 180ms var(--ease, ease), opacity 180ms var(--ease, ease);
}
.sec-rowan-gallery .gal__t img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 38%;
  width: 100%;
}
.sec-rowan-gallery .gal__t:hover { opacity: 0.9; }
.sec-rowan-gallery .gal__t.is-active { border-color: var(--accent); }
.sec-rowan-gallery .lbox__scrim { background: rgba(11, 22, 18, 0.82); }
.sec-rowan-gallery .lbox__fig img { border-radius: var(--r-lg); }
.sec-rowan-gallery .lbox__fig figcaption { color: var(--c-on-dark-mu); }
.sec-rowan-gallery :is(.lbox__x, .lbox__nav) {
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid var(--c-line-dark);
}
.sec-rowan-gallery :is(.lbox__x, .lbox__nav):hover { background: rgba(255, 255, 255, 0.26); }

/* --------------------------------------------------------------------------
   14. PITANJA
   -------------------------------------------------------------------------- */

/* Pitanja su sada kartice, pa im treba razmak — bez njega se dodiruju i
   čitaju kao jedna ploča. Linija iznad spiska je iz vremena kad su pitanja
   bila redovi u tabeli; uz kartice sa ivicom ostaje kao višak poteza. */
.sec-terra-faq .faq__list {
  gap: 14px;
  border-top: 0;
}

.sec-terra-faq .qa {
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  background: var(--c-white);
  overflow: hidden;
  transition: border-color 180ms var(--ease, ease), box-shadow 180ms var(--ease, ease);
}
.sec-terra-faq .qa:hover { border-color: var(--c-line-strong); }
.sec-terra-faq .qa.is-open { border-color: var(--accent); box-shadow: var(--sh-sm); }
/* Pitanje je u sekciji pisano bez bočnog razmaka (`padding: … 0`), jer je
   tamo stajalo na goloj podlozi. Otkako je svako pitanje kartica sa ivicom,
   tekst bez tog razmaka dodiruje ivicu — pa ga ovdje dobija.
   Isti razmak ide i na odgovor, da se lijeva ivica sloga poklapa. */
.sec-terra-faq .qa__q button {
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 100%;
  padding-inline: clamp(18px, 2.2vw, 26px);
}
.sec-terra-faq .qa__in p { padding-inline: clamp(18px, 2.2vw, 26px); }
.sec-terra-faq .qa__t { font-family: var(--ff-display); font-weight: 600; color: var(--c-ink); }
.sec-terra-faq .qa__peek { font-family: var(--ff-body); font-weight: 400; color: var(--c-text-muted); }
.sec-terra-faq .qa__in p { color: var(--c-text); }
.sec-terra-faq .qa__in a { color: var(--accent-strong); font-weight: 600; }
.sec-terra-faq .qa__sign { color: var(--accent); }

/* --------------------------------------------------------------------------
   15. KONTAKT (CTA)
   -------------------------------------------------------------------------- */

.sec-haven-cta .cta {
  background: linear-gradient(150deg, var(--primary) 0%, #0f3a31 55%, var(--accent-strong) 100%);
}
.sec-haven-cta .cta h2 { color: #fff; }
.sec-haven-cta .cta p { color: var(--c-on-dark-mu); }
.sec-haven-cta .cta__rings { opacity: 0.16; }

/* --------------------------------------------------------------------------
   16. PODNOŽJE — jednostavno, bez praznih stubaca
   -------------------------------------------------------------------------- */

/* Tamno podnožje: sajt se zatvara u boji brenda, kao i CTA iznad njega.
   Svi tonovi teksta se okreću na svijetle, jer je podloga sada tamna. */
.sec-anker-footer .ftr {
  background: linear-gradient(180deg, #12201b 0%, var(--primary) 100%);
  border-top: 0;
  color: var(--c-on-dark-mu);
}
.sec-anker-footer .ftr :is(p, address, td, th, small) { color: var(--c-on-dark-mu); }
.sec-anker-footer .ftr__mark {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  padding: 5px;
  overflow: hidden;
}
.sec-anker-footer .ftr__mark img { width: 100%; height: 100%; object-fit: contain; }
.sec-anker-footer .ftr__logo-tx strong { font-family: var(--ff-display); font-weight: 700; color: #fff; }
.sec-anker-footer .ftr__logo-tx small { color: var(--c-on-dark-mu); }
.sec-anker-footer .ftr__blurb { color: var(--c-on-dark-mu); }
.sec-anker-footer .ftr__col h3 {
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(238, 245, 243, 0.58);
}
.sec-anker-footer .ftr__contact address { font-style: normal; color: var(--c-on-dark); }
.sec-anker-footer :is(.ftr__map, .ftr__mail, .ftr__fb) {
  color: #9fd8cb;
  font-weight: 600;
  text-decoration: none;
  word-break: break-word;
}
.sec-anker-footer :is(.ftr__map, .ftr__mail, .ftr__fb):hover { color: #fff; text-decoration: underline; }
.sec-anker-footer .ftr__fb { display: inline-flex; align-items: center; gap: 8px; }
.sec-anker-footer .ftr__fb svg { width: 18px; height: 18px; flex: none; }
/* Poravnanje i razmak tabele su u `section.css` — ovdje samo boja i težina. */
.sec-anker-footer .ftr__hours :is(th, td) { font-weight: 400; color: var(--c-on-dark); }
.sec-anker-footer .ftr__hours th { color: var(--c-on-dark-mu); }
.sec-anker-footer .ftr__bar {
  border-top: 1px solid var(--c-line-dark);
  color: rgba(238, 245, 243, 0.62);
  font-size: var(--fs-sm);
}
.sec-anker-footer .ftr__top-btn {
  border-radius: var(--r-pill);
  border: 1.5px solid var(--c-line-dark);
  background: transparent;
  color: var(--c-on-dark);
  font-weight: 600;
  padding: 10px 20px;
  cursor: pointer;
}
.sec-anker-footer .ftr__top-btn:hover {
  border-color: #9fd8cb;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------------------
   17. WHATSAPP DUGME — moj element, lebdi na telefonu
   --------------------------------------------------------------------------
   Ikona sama nije dugme: uz nju stoji riječ. Na telefonu se diže iznad
   ljepljive trake sekcije, da ništa ne pokriva.
   -------------------------------------------------------------------------- */

.wa-float {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px 13px 16px;
  border-radius: 999px;
  background: #128c7e;
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 12px 30px -10px rgba(11, 60, 52, 0.6);
  transition: background-color 180ms ease, transform 180ms ease;
}
.wa-float svg { width: 22px; height: 22px; flex: none; }
.wa-float:hover { background: #0d6b60; transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .wa-float:hover { transform: none; } }

/* Na telefonu lebdećeg dugmeta NEMA — ljepljiva traka sekcije već nosi
   WhatsApp, sa ikonom i riječju uz nju, pa bi drugo dugme bilo isti poziv
   dva puta na istom ekranu. Dugme ostaje na širokom ekranu, gdje te trake
   nema. */
@media (max-width: 900px) {
  .wa-float { display: none; }
}
@media (max-width: 1080px) {
  .wa-float { bottom: 20px; right: 14px; }
}

/* --------------------------------------------------------------------------
   18. TELEFON JE MJERA
   --------------------------------------------------------------------------
   Odluke donesene na 375 px. Traženi razmak sekcija na telefonu: 45px.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  /* Razmak sekcija: 45px gore i dolje. `--section-y` nose sve sekcije koje
     koriste `.u-section`, pa je ovo jedan potez za većinu njih. */
  .sec { --section-y: 45px; }

  /* Sekcije koje ne idu kroz `.u-section` nose svoj `padding-block`. */
  .sec-bloom-hero .hero        { padding-block: 45px; }
  /* Paralaks je namjerno BEZ razmaka i na telefonu — traka videa ide od ivice
     do ivice i dodiruje sekcije iznad i ispod. Zato ovdje nema 45 px. */
  .sec-haven-parallax .scrub   { padding: 0; }
  .sec-haven-cta .cta          { padding-block: 45px; }
  .sec-anker-footer .ftr       { padding-block: 45px calc(45px + 80px); }

  /* Oznake se na uskom ekranu ne razvlače — inače „Stomatološka ordinacija ·
     Bugojno" pređe u dva reda i pojede pregib. */
  .sec :is(.u-label, .u-chip, .u-eyebrow) { letter-spacing: 0.08em; }

  /* U zaglavlju na telefonu ostaje SAMO logotip.
     Ime ordinacije je uz logo široko 261 px; sa 46 px logotipa to je 319 px
     od 375 px koliko ekran ima, pa je dugme menija ispadalo IZVAN ekrana
     (mjereno: x 363–409). Bez natpisa logo je 46 px i dugme se vraća u kadar.
     Ime firme se time ne gubi — stoji u naslovu stranice, u herou i u
     podnožju. */
  .sec-terra-header .brand__tx { display: none; }
  .sec-terra-header .brand { min-width: 0; }

  /* Hero: iznad pregiba stoje naslov i JEDNO dugme. */
  .sec-bloom-hero .hero { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .sec-bloom-hero .hero h1 { font-size: clamp(2rem, 9vw, 2.5rem); }
  .sec-bloom-hero .hero__lead {
    font-size: 1rem;
    max-width: 30ch;      /* tri reda na 375 px, ne šest */
  }
  /* Drugo dugme je lakše, da hijerarhija postoji i kad su jedno ispod drugog. */
  .sec-bloom-hero .hero__act .u-btn--line {
    background: transparent;
    border-width: 1.5px;
    box-shadow: none;
    font-weight: 600;
  }
  .sec-bloom-hero .hero__act .u-btn--lg { min-height: 54px; }
  /* Uspravni portret na uskom ekranu dobija upotrebljiv omjer. */
  .sec-bloom-hero .hero__cap { aspect-ratio: 4 / 5; border-width: 5px; }
  .sec-bloom-hero .hero__cap img { aspect-ratio: 4 / 5; object-position: 50% 20%; }

  /* Parallax: na uskom ekranu tekst pokriva skoro cijeli kadar, pa gustina
     ide ISPOD teksta a ne preko cijele slike — vrh fotografije ostaje
     fotografija, a tekst dobija podlogu na kojoj se stvarno čita.
     (UPUTA §„Fotografija mora ostati fotografija".) */
  .sec-haven-parallax .scrub__veil {
    background:
      linear-gradient(180deg,
        rgba(11, 22, 18, 0.20)  0%,
        rgba(11, 22, 18, 0.74) 22%,
        rgba(11, 22, 18, 0.90) 100%);
  }
  /* Galerija: veći kadar, da se vidi šta je na slici. */
  .sec-rowan-gallery .gal__stage img { aspect-ratio: 3 / 4; }

  /* Prije/poslije: na telefonu se dva kadra slažu jedan ispod drugog, pa bi
     uspravni omjer dao slučaj visok skoro dva ekrana. Kadar je bliži
     kvadratu — usta ostaju u sredini, a tri slučaja stanu u razuman skrol. */
  .sec-dental-house-results .ba__case img {
    aspect-ratio: 5 / 4;
    object-position: 50% 42%;
  }

  /* Recenzije: strelice preko pune širine reda, sa razmakom od ivice. */
  .sec-anker-referenzen .rev__nav { margin-top: var(--sp-4); }

  /* Podnožje: sati ostaju tabela, ali bez stiskanja. */
  .sec-anker-footer .ftr__hours :is(th, td) { padding: 7px 0; }
}

/* Na telefonu dugme je manje nego na širokom ekranu: ljepljiva traka je već
   dolje, pa svaki dodatni piksel ovog dugmeta pokriva nečiji tekst. */
@media (max-width: 768px) {
  .wa-float {
    gap: 8px;
    padding: 10px 15px 10px 12px;
    font-size: 0.8125rem;
    box-shadow: 0 8px 22px -10px rgba(11, 60, 52, 0.7);
  }
  .wa-float svg { width: 19px; height: 19px; }
}