/* ===========================================================================
   Stomatologija dr. Bećirović — vlastiti stil.

   Učitava se POSLJEDNJI, poslije svih `section.css` i `sekcije/brend.css`,
   pa nadjačava tokene sekcija po redoslijedu (ista specifičnost `.sec-…`).
   Nijedno zaključano svojstvo rasporeda se ovdje ne dira: nema `display`,
   `grid-template-*`, `position` na klasama sekcija, `flex-direction`,
   `order`, `align-*`, `justify-*` ni `text-align`.

   Paleta je izvedena iz logotipa firme (drvena tabla u `images/logo/`):
   plavi znak je izmjeren na #1858A0, a topli pijesak je boja same table.
   =========================================================================== */

:root {
  /* ---- Boje brenda; `sekcije/brend.css` ih odavde vuče u sve sekcije ---- */
  --primary:        #14589F;   /* plava iz znaka */
  --accent:         #C08A3E;   /* pijesak iz table */
  --accent-strong:  #7A5518;   /* isti pijesak, dovoljno taman za tekst */
  --accent-soft:    #F6EBD8;

  /* ---- Pisma. Jedan par na cijelom sajtu (UPUTA §„Pismo je JEDNO") ---- */
  --font-sans:            "Inter Var", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display-rounded: "Nunito Var", "Segoe UI", system-ui, sans-serif;

  /* Visina zaglavlja pod DRUGIM imenom — `--header-h` je sekcijski token i
     prevezivanje istim imenom bi bilo ciklus. */
  --head-h: 72px;
}

@media (max-width: 900px) { :root { --head-h: 60px; } }

/* ---------------------------------------------------------------- osnova */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 16px);
  /* klipuje dekorativne mrlje bez pravljenja scroll kontejnera —
     `overflow-x: hidden` bi slomio ljepljivo zaglavlje */
  overflow-x: clip;
}

body {
  margin: 0;
  background: #FBFCFD;
  color: #1E2C3A;
  font-family: var(--font-sans);
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

img { max-width: 100%; }

/* Trake sastavljača ne nose vlastitu boju — svaka sekcija se farba sama. */
.band { position: relative; }

/* Zaglavlje: `.site-head` je `sticky`, ali mu je roditelj sama sekcija koja
   je visoka koliko i traka — pa otklizi poslije ~70 px. Ljepljivost ide na
   traku sastavljača, koja je u `<main>` i drži se kroz cijelu stranicu. */
.band[data-band="1"] {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* =========================================================================
   1. JEDNA PALETA I JEDNO PISMO ZA SVIH DESET SEKCIJA

   Svaka sekcija nosi tokene svog templata (krem sa serifom, lila, zelena…).
   Ovdje se prepisuju neutrali i pisma; boje brenda su već vezane u
   `brend.css` za `--primary` / `--accent` iz `:root` iznad.
   ========================================================================= */

.sec-housecall-header,
.sec-klar-hero,
.sec-anker-services,
.sec-bloom-referenzen,
.sec-haven-parallax,
.sec-dental-house-about,
.sec-sightline-gallery,
.sec-calm-faq,
.sec-meridian-cta,
.sec-terra-footer {
  /* pisma */
  --ff-display: var(--font-display-rounded);
  --ff-body:    var(--font-sans);

  /* podloge */
  --c-bg:            #FBFCFD;
  --c-bg-alt:        #F1F5F9;
  --c-white:         #FFFFFF;
  --c-surface:       #E3EDF7;
  --c-surface-soft:  #F2F7FC;
  --c-ink:           #0E2136;

  /* tekst */
  --c-text:          #1E2C3A;
  --c-text-muted:    #52657A;
  --c-text-invert:   #FFFFFF;
  --c-on-dark:       #E8EFF6;
  --c-on-dark-mu:    rgba(232, 239, 246, 0.80);

  /* linije */
  --c-line:          rgba(14, 33, 54, 0.12);
  --c-line-strong:   rgba(14, 33, 54, 0.24);
  --c-line-dark:     rgba(232, 239, 246, 0.22);
  --c-border:        rgba(14, 33, 54, 0.12);
  --c-border-strong: rgba(14, 33, 54, 0.24);

  /* Boje brenda. `brend.css` ih veže za devet sekcija, ali NE i za
     `terra-footer` — taj templat uopšte nema `--c-accent`, pa bi svako
     pravilo sa `var(--c-accent)` u podnožju tiho palo na `unset`
     (zlatna tačkica ispred članstva bila je providna). */
  --c-accent:        var(--accent);
  --c-accent-dk:     var(--accent-strong);
  --c-accent-soft:   var(--accent-soft);

  /* pojedinačne nijanse templata koje bi inače ostale strane */
  --c-mint:          #E3EDF7;
  --c-mint-soft:     #F2F7FC;
  --c-accent-tint:   var(--accent-soft);
  --c-star:          #C8912B;
  --c-whatsapp:      #0E7C6F;
  --c-whatsapp-dk:   #0B6357;
  --c-whatsapp-vivid:#128C7E;

  /* ritam */
  --section-y: clamp(56px, 7.5vw, 104px);
  --gutter:    clamp(20px, 5vw, 44px);
  --maxw:      1160px;

  /* sjenke — jedan set umjesto deset */
  --sh-xs: 0 1px 2px rgba(14, 33, 54, 0.06);
  --sh-sm: 0 4px 14px -8px rgba(14, 33, 54, 0.20);
  --sh-md: 0 16px 34px -18px rgba(14, 33, 54, 0.28);
  --sh-lg: 0 28px 56px -26px rgba(14, 33, 54, 0.34);

  /* zaobljenja */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;
  --r-circle: 50%;
  --r-gallery: 14px;
  --r-window: 14px;
  --r-window-lg: 24px 24px 4px 4px;
}

/* Ujednačena dugmad: ista visina i isti radijus na svim sekcijama. */
.sec-housecall-header .u-btn,
.sec-klar-hero .u-btn {
  border-radius: var(--r-pill);
  font-weight: 700;
  letter-spacing: 0.005em;
}

/* =========================================================================
   2. ZAGLAVLJE
   ========================================================================= */

.sec-housecall-header .site-head {
  background: rgba(251, 252, 253, 0.92);
}
.sec-housecall-header .site-head.is-stuck {
  box-shadow: 0 10px 24px -22px rgba(14, 33, 54, 0.9);
}

.sec-housecall-header .brand__mark {
  width: 36px; height: 36px;
}
.sec-housecall-header .brand__mark img {
  width: 100%; height: 100%;
  object-fit: contain;
}
.sec-housecall-header .brand__tx strong {
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--c-primary);
}
.sec-housecall-header .brand__tx small {
  font-size: 0.66rem;
  letter-spacing: 0.11em;
  color: var(--c-text-muted);
}

.sec-housecall-header .site-nav a { font-weight: 600; }

/* Ljepljiva traka na telefonu — malo mirnija sjenka i puna neprozirnost. */
.sec-housecall-header .mobile-bar__i { font-weight: 700; }
.sec-housecall-header .mobile-bar__i--call { background: var(--c-primary); }

/* =========================================================================
   3. HERO

   Zaglavlje je ljepljivo I U TOKU stranice (traka sastavljača), pa hero ne
   mora čuvati mjesto za njega — templatov `padding-top` sa `--header-h` bi
   ovdje ostavio praznu traku.
   ========================================================================= */

.sec-klar-hero .hero {
  padding-block: clamp(44px, 6vw, 92px) clamp(48px, 7vw, 100px);
  min-height: clamp(520px, 74svh, 800px);
}

/* Kadar je pomjeren naviše u izvoru: sa `center` je gornja ivica sekcije
   sjekla čovjeku tjeme. Nijedno zaključano svojstvo — `object-position` je
   izričito slobodan (UPUTA §„Okvir se prilagođava slici"). */
.sec-klar-hero .hero__bg :is(img, video) { object-position: 74% 6%; }

/* Zavjesa preko fotografije — prepisana u boju platna ovog sajta. */
.sec-klar-hero .hero__bg::after {
  background: linear-gradient(96deg,
    #FBFCFD 0%,
    #FBFCFD 44%,
    rgba(251, 252, 253, 0.86) 57%,
    rgba(251, 252, 253, 0.30) 80%,
    rgba(251, 252, 253, 0) 100%);
}

.sec-klar-hero .hero__glow {
  background: radial-gradient(closest-side, rgba(20, 88, 159, 0.16), transparent 70%);
}

.sec-klar-hero .hero h1 { font-weight: 800; }
.sec-klar-hero .hero__lead { max-width: 40ch; }
.sec-klar-hero .u-hl { background: var(--accent-soft); color: var(--c-primary); }
.sec-klar-hero .u-sticker { background: var(--c-accent); color: #241703; }

/* Drugo dugme je lakše — dva jednako teška dugmeta jedno ispod drugog
   nemaju hijerarhiju (UPUTA §„Hero na telefonu se SKRAĆUJE"). */
.sec-klar-hero .hero__cta .u-btn--line {
  --btn-bd: transparent;
  --btn-fg: var(--c-primary-dk);
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1.5px;
}
.sec-klar-hero .hero__cta .u-btn--line:hover {
  --btn-bd: transparent;
  background: var(--c-surface);
  text-decoration: none;
}

/* ---- Telefon: fotografija je vlastiti blok, tekst ide ISPOD nje ----
   Granica je 760 px jer sama sekcija tu pretvara zatamnjenje u uspravno,
   96 % bijelo preko cijele slike — fotografija tada prestaje biti
   fotografija. `.hero__bg` ima zaključan `inset: 0`; zadata visina čini
   pravilo pretjerano određenim, pa se `bottom` ignoriše i blok dobije
   stvaran okvir. */
@media (max-width: 760px) {
  .sec-klar-hero .hero {
    min-height: 0;
    padding-block: calc(66vw + 26px) 44px;
  }
  .sec-klar-hero .hero__bg { height: 66vw; }
  .sec-klar-hero .hero__bg :is(img, video) { object-position: 62% center; }
  /* zatamnjenja više nema — tekst nije preko slike */
  .sec-klar-hero .hero__bg::after { background: none; }
  .sec-klar-hero .hero__glow { display: none; }
  .sec-klar-hero .hero__copy > * + * { margin-top: 18px; }
  .sec-klar-hero .hero__lead { font-size: 1.0625rem; max-width: 34ch; }
  .sec-klar-hero .hero__price { gap: 10px 12px; }
}

@media (max-width: 560px) {
  .sec-klar-hero .hero__cta .u-btn--line { min-height: 46px; padding: 10px 8px; }
}

/* =========================================================================
   4. USLUGE
   ========================================================================= */

.sec-anker-services .sit {
  border-radius: var(--r-lg);
  background: var(--c-white);
  border-color: var(--c-line);
  box-shadow: var(--sh-xs);
  transition: box-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sec-anker-services .sit:hover { box-shadow: var(--sh-md); }
.sec-anker-services .sit h3 { max-width: 24ch; }
.sec-anker-services .u-tab { font-weight: 700; letter-spacing: 0.04em; }
.sec-anker-services .u-tab--jade { background: var(--accent-soft); color: var(--c-accent-dk); }
.sec-anker-services .sit__first { border-top-color: var(--c-line); }

/* =========================================================================
   5. RECENZIJE
   ========================================================================= */

.sec-bloom-referenzen .gsum { border-radius: var(--r-xl); }
.sec-bloom-referenzen .gsum__bar i { background: var(--c-star); }
.sec-bloom-referenzen .rev { border-radius: var(--r-lg); }
.sec-bloom-referenzen .rev__tx { color: var(--c-text); }
.sec-bloom-referenzen .revs__rail { padding-block-end: 20px; }

/* Sa jednom recenzijom traka nema kuda — strelice se same ugase
   (`section.js` ih onemogući), pa ostaju kao mirna oznaka mjesta. */
.sec-bloom-referenzen .rnav[disabled] { opacity: 0.28; }

/* =========================================================================
   6. KAKO IZGLEDA DOLAZAK (parallax)
   ========================================================================= */

.sec-haven-parallax .scrub__veil {
  background:
    linear-gradient(to right, rgba(9, 24, 40, 0.94) 0%, rgba(9, 24, 40, 0.82) 46%, rgba(9, 24, 40, 0.58) 100%),
    linear-gradient(to top, rgba(9, 24, 40, 0.62), transparent 46%);
}
.sec-haven-parallax .scrub__frame { background: var(--c-ink); }
.sec-haven-parallax .step__n { background: var(--c-accent); color: #241703; font-weight: 800; }

@media (max-width: 860px) {
  .sec-haven-parallax .scrub__veil {
    background:
      linear-gradient(to top, rgba(9, 24, 40, 0.95) 0%, rgba(9, 24, 40, 0.88) 52%, rgba(9, 24, 40, 0.68) 100%);
  }
}

/* =========================================================================
   7. O ORDINACIJI

   Fotografija je uspravna (443×590). Okvir se prilagođava slici, a ne
   obrnuto — i kadar je pomjeren naviše da lice nikad ne dodirne ivicu.
   ========================================================================= */

.sec-dental-house-about .about__media :is(img, video) {
  height: auto;
  aspect-ratio: 4 / 5;
  object-position: 50% 26%;
}
.sec-dental-house-about .about__media { border-radius: var(--r-window-lg); }
.sec-dental-house-about .about__points svg {
  background: var(--accent-soft);
  color: var(--c-accent-dk);
}
.sec-dental-house-about .about__points span { color: var(--c-text); }
.sec-dental-house-about .about__note {
  border-left-color: var(--c-accent);
  font-size: 1.0625rem;
  font-family: var(--ff-display);
  font-weight: 700;
  color: var(--c-primary-dk);
}

@media (max-width: 940px) {
  .sec-dental-house-about .about__media { max-width: 420px; }
}

/* =========================================================================
   8. GALERIJA

   Templatove pločice su uspravne 3:4; fotografije ordinacije su položene,
   pa okvir ide na 4:3 — inače se od sobe vidi zid pored nje.
   ========================================================================= */

.sec-sightline-gallery .tile :is(img, video) { aspect-ratio: 4 / 3; }
.sec-sightline-gallery .tile { border: 1px solid var(--c-line); }
.sec-sightline-gallery .lbox__scrim { background: rgba(9, 24, 40, 0.92); }
.sec-sightline-gallery .lbox__fig :is(img, video) { background: var(--c-ink); }

@media (max-width: 700px) {
  .sec-sightline-gallery .tile :is(img, video) { aspect-ratio: 3 / 2; }
}

/* =========================================================================
   9. PITANJA

   `overflow: hidden` na sekciji pravi scroll kontejner i time gasi
   `position: sticky` na bočnoj koloni. `clip` klipuje isto, a kontejner
   ne pravi — ljepljiva kolona radi.
   ========================================================================= */

.sec-calm-faq .faq {
  overflow: clip;
  background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-alt) 100%);
}
.sec-calm-faq .faq__blob {
  background: radial-gradient(circle at 50% 50%, var(--accent-soft), transparent 70%);
}
.sec-calm-faq .faq__aside { top: calc(var(--head-h) + 32px); }
.sec-calm-faq .faq__q button { color: var(--c-primary-dk); }
.sec-calm-faq .faq__panel-in > p { color: var(--c-text); }

/* =========================================================================
   10. KONTAKT
   ========================================================================= */

.sec-meridian-cta .cta__ink {
  background:
    radial-gradient(80% 120% at 0% 100%, rgba(20, 88, 159, 0.55) 0%, transparent 62%),
    var(--c-ink);
}
.sec-meridian-cta .cta__facts a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.sec-meridian-cta .cta__facts a:hover { color: var(--c-on-dark); }
.sec-meridian-cta .crow { background: var(--c-bg); border-color: var(--c-line); }
.sec-meridian-cta .crow:hover .crow__go { background: var(--c-accent); color: #241703; }
.sec-meridian-cta .crow__tx strong { font-weight: 800; }

/* =========================================================================
   11. PODNOŽJE
   ========================================================================= */

/* Sekcija ostavlja 78 px na dnu za ljepljivu traku sa dugmadima — te trake
   iznad 900 px nema, pa ni prostora ne treba. */
@media (min-width: 901px) {
  .sec-terra-footer .ftr { padding-bottom: var(--sp-5); }
}

.sec-terra-footer .ftr { background: var(--c-ink); }
.sec-terra-footer .ftr__word span { font-weight: 800; letter-spacing: -0.02em; }
.sec-terra-footer .ftr__word small { color: var(--c-accent); letter-spacing: 0.1em; }
.sec-terra-footer .ftr__col h3 { color: var(--c-accent); font-weight: 700; }
.sec-terra-footer .ftr__mats li::before { background: var(--c-accent); }
.sec-terra-footer .ftr__dir { color: var(--c-on-dark); }
.sec-terra-footer .ftr__dir:hover { color: var(--c-accent); }
.sec-terra-footer .ftr__hours th,
.sec-terra-footer .ftr__hours td { font-size: 0.9375rem; }

/* =========================================================================
   12. WHATSAPP — lebdeće dugme

   Na telefonu isto mjesto već drži ljepljiva traka iz zaglavlja (poziv +
   WhatsApp), pa se ovo dugme prikazuje tek iznad 900 px da ne bi bila dva
   ista dugmeta jedno preko drugog.
   ========================================================================= */

.wafab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 120;
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 14px 22px;
  border-radius: 999px;
  background: #0E7C6F;
  color: #fff;
  font-family: var(--font-display-rounded);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 16px 34px -14px rgba(9, 24, 40, 0.55);
  transition: background-color 150ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.wafab svg { width: 22px; height: 22px; flex: none; }
.wafab:hover { background: #0B6357; transform: translateY(-2px); }
.wafab:focus-visible { outline: 3px solid #14589F; outline-offset: 3px; }

@media (min-width: 901px) { .wafab { display: inline-flex; } }
@media (prefers-reduced-motion: reduce) { .wafab { transition: none; } }