/* ============================================================
   Ordinacija dr. Mahmić — stil sajta.

   Učitava se POSLJEDNJI: tokens.css → section.css (svih 11) →
   brend.css → OVAJ FAJL. Nadjačava po redoslijedu, sa istom
   specifičnošću kao sekcijska pravila (.sec-ime .klasa).

   Ovdje se NE piše geometrija: display, grid-template-…, grid-area,
   flex-direction, order, position, top/right/bottom/left, align-…,
   justify-…, text-align — sve to ostaje u section.css svake sekcije.
   (Bez zvjezdice sa kosom crtom u ovom tekstu: taj par znakova
   zatvara CSS komentar i pojede pravilo koje dolazi iza njega.)
   Izuzetak je .wa-fab, koji je moj element i nije ni u jednoj sekciji.

   Šta ovaj fajl radi:
     1. jedno pismo na cijelom sajtu — Nunito naslovi, Inter tekst
     2. jedna paleta — hladna klinička neutrala + plava iz logotipa
     3. jedan oblik — isti radijusi, sjenke i ivice u svih 11 sekcija
     4. telefon (375 px) kao mjera: hero staje iznad pregiba
     5. lebdeće WhatsApp dugme
   ============================================================ */

/* ------------------------------------------------------------
   0. Dokument
   ------------------------------------------------------------ */

/* Svaka sekcija postavlja `box-sizing: border-box` samo za SVOJE stablo
   (`.sec-ime *`). Moji elementi izvan sekcija — lebdeće WhatsApp dugme —
   time ostaju na `content-box`, pa im se `padding` dodaje NA zadatu
   visinu: `min-height: 44px` sa 10 px razmaka gore i dole daje dugme od
   64 px. Ovo to izjednačava; unutar sekcija ne mijenja ništa, jer tamo
   border-box već važi. */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* Zaglavlje je sticky: bez ovoga sidro sleti ispod trake. */
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}
@media (max-width: 900px) { html { scroll-padding-top: 78px; } }

body {
  margin: 0;
  background: #F6F8FB;
  color: #1C2739;
  font-family: var(--font-sans);
}

.band { position: relative; }

::selection { background: rgba(18, 60, 134, 0.16); }


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

   Svaka sekcija nosi --ff-display i --ff-body svog templata (petnaestak
   različitih porodica preko biblioteke, nijedna od njih nije u paketu).
   Ovdje se obje varijable prevezuju na isti par, pa sekcije i dalje
   koriste svoje varijable — samo one sada pokazuju na isto mjesto.

   Izbor je propisan (UPUTA.md): pod-industrija je „Specialist medical
   practice", a u ordinaciji radi pedijatar i subspecijalista
   neonatologije → zaobljeno pismo, Nunito. Tijelo je uvijek Inter.
   ------------------------------------------------------------ */

.sec-terra-header,
.sec-sonnenschein-hero,
.sec-sonnenschein-services,
.sec-klar-referenzen,
.sec-rowan-parallax,
.sec-dental-house-about,
.sec-quiet-hours-results,
.sec-fundament-instagram,
.sec-sonnenschein-faq,
.sec-klar-cta,
.sec-terra-footer {
  --ff-display: var(--font-display-rounded);
  --ff-body: var(--font-sans);

  /* Nunito je zaobljeni sans, ne serif: templati koji su računali na
     serif traže manje negativnog razmaka i veću težinu da naslov ne
     ispadne mlitav. */
  --ls-tight: -0.02em;
  --ls-label: 0.14em;
  --lh-tight: 1.08;
  --lh-snug: 1.15;
  --lh-body: 1.65;
}

/* Težine naslova. Terra crta h1–h4 na 400 jer je računala na serif —
   na zaobljenom sansu to izgleda kao nedovršen tekst. */
.sec-terra-header :is(h1, h2, h3),
.sec-sonnenschein-hero :is(h1, h2, h3),
.sec-sonnenschein-services :is(h1, h2, h3),
.sec-klar-referenzen :is(h1, h2, h3),
.sec-rowan-parallax :is(h1, h2, h3),
.sec-dental-house-about :is(h1, h2, h3),
.sec-quiet-hours-results :is(h1, h2, h3),
.sec-fundament-instagram :is(h1, h2, h3),
.sec-sonnenschein-faq :is(h1, h2, h3),
.sec-klar-cta :is(h1, h2, h3),
.sec-terra-footer :is(h1, h2, h3) { font-weight: 800; }

.sec-terra-header h4,
.sec-sonnenschein-hero h4,
.sec-klar-referenzen h4,
.sec-rowan-parallax h4,
.sec-dental-house-about h4,
.sec-quiet-hours-results h4,
.sec-fundament-instagram h4,
.sec-terra-footer h4 { font-weight: 700; }

.sec-terra-header .brand__tx strong,
.sec-terra-header .fmenu__list a { font-weight: 800; }


/* ------------------------------------------------------------
   2. PALETA — jedna, u svih 11 sekcija

   --primary / --accent i njihove nijanse dolaze iz tokens.css preko
   brend.css i ovdje se ne diraju. Ovo su neutrali i vlastite boje
   templata, popisane po sekciji u TOKENI.md: zatečeno su krem
   (#FEF9F3), lila (#F7F6FC), bež (#FAF7F4), siva (#F7F7FA), kamena
   (#F5F4F1) i zeleno-siva (#F4F6F5) — šest različitih podloga na
   jednoj stranici.

   Sve idu na istu hladnu neutralu koja stoji uz tamnoplavu iz logotipa.
   ------------------------------------------------------------ */

.sec-terra-header,
.sec-sonnenschein-hero,
.sec-sonnenschein-services,
.sec-klar-referenzen,
.sec-rowan-parallax,
.sec-dental-house-about,
.sec-quiet-hours-results,
.sec-fundament-instagram,
.sec-sonnenschein-faq,
.sec-klar-cta,
.sec-terra-footer {
  --c-bg:          #F6F8FB;
  --c-bg-alt:      #ECF1F7;
  --c-white:       #FFFFFF;
  --c-surface:     #DDE7F3;

  --c-ink:         #101B2E;   /* 16:1 na --c-bg */
  --c-text:        #1C2739;
  --c-text-muted:  #55637A;   /* 5,4:1 na --c-bg */
  --c-text-invert: #FFFFFF;

  --c-on-dark:     #EAF0F8;
  --c-on-dark-mu:  rgba(234, 240, 248, 0.76);

  --c-line:        rgba(16, 27, 46, 0.10);
  --c-line-strong: rgba(16, 27, 46, 0.20);
  --c-line-dark:   rgba(234, 240, 248, 0.22);

  --c-star:        #E0A32B;
  --c-whatsapp:    #0E7C6F;   /* bijelo na njemu 5,1:1 */
  --c-whatsapp-dk: #0B6357;
}

/* Sonnenschein (hero, usluge, pitanja) nosi tri boje templata — koralnu,
   sunčanu i mentu. One su nosive: chip, mrlja iza naslova, kartice.
   Prevode se u istu plavu porodicu umjesto da se gase. */
.sec-sonnenschein-hero,
.sec-sonnenschein-services,
.sec-sonnenschein-faq {
  --c-coral:      #7FA6D8;
  --c-coral-dk:   #1B4E8F;   /* tekst na coral-soft, 7,4:1 */
  --c-coral-soft: #E4ECF8;
  --c-sun:        #9FD3E8;   /* mrlja iza naslova, ink na njoj 10,8:1 */
  --c-sun-soft:   #E7F4FB;
  --c-mint:       #A5D8E8;
  --c-mint-soft:  #E3F2FA;
}

/* KLAR (recenzije, poziv na akciju) koristi --c-mint kao boju isticanja
   i naljepnice. */
.sec-klar-referenzen,
.sec-klar-cta {
  --c-mint:      #9FD8EC;
  --c-mint-soft: #E3F2FA;
}

/* Svijetla plava na tamnoj podlozi: color-mix iz brend.css daje nijansu
   koja na grafitu pada ispod 4,5:1. Naslovi i oznake na tamnom uzimaju
   ovu. */
.sec-terra-header .site-head:not(.is-past) .brand__mark,
.sec-terra-header .fmenu__list a:hover { color: #A9C2EA; }

.sec-rowan-parallax .u-dark .u-label,
.sec-terra-footer .u-dark .u-label { color: #A9C2EA; }


/* ------------------------------------------------------------
   3. OBLIK — isti radijusi, sjenke i ivice svuda

   Zatečeno: Terra ide na 6–40 px, Sonnenschein na svoje, KLAR na treće.
   Kartice, dugmad i trake su nacrtane na tri načina i to je ono što se
   čita kao „sklopljeno od dijelova".
   ------------------------------------------------------------ */

.sec-terra-header,
.sec-sonnenschein-hero,
.sec-sonnenschein-services,
.sec-klar-referenzen,
.sec-rowan-parallax,
.sec-dental-house-about,
.sec-quiet-hours-results,
.sec-fundament-instagram,
.sec-sonnenschein-faq,
.sec-klar-cta,
.sec-terra-footer {
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-2xl: 34px;
  --r-pill: 999px;
  --r-circle: 50%;
  --r-gallery: 16px;

  /* Jedna širina sadržaja. Templati donose tri različite (1200, 1220,
     1240 px), pa se lijeva ivica teksta na stranici pomjerala za po
     10 px iz sekcije u sekciju — dovoljno da se vidi kao neporavnatost,
     a nedovoljno da se odmah shvati zašto. */
  --maxw: 1240px;

  /* Hladna sjenka, ista krivulja u svih 11 sekcija. */
  --sh-xs: 0 1px 2px rgba(16, 27, 46, 0.05);
  --sh-sm: 0 4px 14px -8px rgba(16, 27, 46, 0.20);
  --sh-md: 0 14px 34px -16px rgba(16, 27, 46, 0.24);
  --sh-lg: 0 26px 56px -24px rgba(16, 27, 46, 0.28);
  --sh-xl: 0 44px 90px -34px rgba(16, 27, 46, 0.34);
}

/* Dugmad: jedna visina i jedan radijus, bez obzira iz kojeg templata
   dolaze. */
.sec-terra-header .u-btn,
.sec-sonnenschein-hero .u-btn,
.sec-klar-referenzen .u-btn,
.sec-rowan-parallax .u-btn,
.sec-fundament-instagram .u-btn {
  min-height: 52px;
  padding: 14px 26px;
  font-weight: 700;
  letter-spacing: 0.005em;
}
.sec-terra-header .u-btn--lg,
.sec-sonnenschein-hero .u-btn--lg { min-height: 58px; padding: 17px 30px; }


/* ------------------------------------------------------------
   4. Sekcija po sekcija — razmaci, podloge, sitna dotjerivanja
   ------------------------------------------------------------ */

/* ---------- 1. Zaglavlje ---------- */

.sec-terra-header .site-head { background: var(--c-ink); }
.sec-terra-header .site-head.is-past {
  background: rgba(246, 248, 251, 0.92);
  border-bottom-color: var(--c-line);
}
.sec-terra-header .brand__mark { width: 30px; height: 30px; }
.sec-terra-header .brand__tx strong { font-size: 1.28rem; letter-spacing: -0.015em; }
.sec-terra-header .brand__tx small { font-size: 0.62rem; letter-spacing: 0.13em; opacity: 0.72; }
.sec-terra-header .site-nav a { font-weight: 600; }
.sec-terra-header .head-cta { min-height: 44px; padding: 11px 20px; font-weight: 700; }

/* Ikone u zaglavlju: telefon uz broj, kalendar uz „Zakaži termin". */
.sec-terra-header .head-tel { gap: 8px; }
.sec-terra-header .head-tel svg { width: 17px; height: 17px; flex: none; }
.sec-terra-header .head-cta svg { width: 18px; height: 18px; }

.sec-terra-header .fmenu__note { color: var(--c-on-dark-mu); }

/* Traka na dnu telefona: ista visina kao lebdeće dugme iznad nje. */
.sec-terra-header .mobile-bar {
  padding: 6px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 14px 40px -12px rgba(16, 27, 46, 0.45);
  border: 1px solid var(--c-line);
}
.sec-terra-header .mobile-bar__i { min-height: 50px; font-weight: 700; }

/* Natpisi uz ikone u donjoj traci.

   Sekcija ih ispod 380 px sakriva pravilom
   `.mobile-bar__i span { display: none }` — a `display` je zaključano
   svojstvo i ne prepisuje se. Zato natpis nije `<span>` nego `<b>`:
   pravilo ga ne pogađa, sekcijski CSS ostaje netaknut, a natpis se vidi
   na svakoj širini. */
.sec-terra-header .mobile-bar__lbl { font-weight: 700; }

/* Sigurnosna mreža: ako Inter ne stigne i uskoči šire rezervno pismo,
   natpis se skrati sa tri tačke UNUTAR svog dugmeta, umjesto da razvuče
   traku preko ekrana. Za to stavka mora smjeti da se skupi (`min-width`
   na `auto` bi to spriječila). */
.sec-terra-header .mobile-bar__i { min-width: 0; }
.sec-terra-header .mobile-bar__lbl {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Na najužim ekranima (320 px) tri stavke sa natpisima jedva stanu:
   stupci su tu ~81 px, a „WhatsApp" sa ikonom traži 89 px pri punoj
   veličini. Natpis i ikona se smanje taman toliko da stanu. */
@media (max-width: 400px) {
  .sec-terra-header .mobile-bar { gap: 4px; padding: 5px; }
  .sec-terra-header .mobile-bar__i { gap: 6px; font-size: 0.78rem; }
  .sec-terra-header .mobile-bar__i svg { width: 17px; height: 17px; }
}
/* Na 320 px „WhatsApp" sa ikonom traži tačno onoliko koliko stupac ima —
   staje, ali bez ijednog piksela viška, pa bi ga i najmanja razlika u
   iscrtavanju pisma odsjekla. Ovdje dobija ~5 px zraka. */
@media (max-width: 340px) {
  .sec-terra-header .mobile-bar__i { gap: 5px; font-size: 0.7rem; }
  .sec-terra-header .mobile-bar__i svg { width: 15px; height: 15px; }
}

/* ---------- 2. Hero ---------- */

.sec-sonnenschein-hero .hero {
  background:
    radial-gradient(72% 64% at 88% 6%, var(--c-sun-soft) 0%, transparent 60%),
    radial-gradient(64% 58% at 2% 96%, var(--c-mint-soft) 0%, transparent 64%),
    var(--c-bg-alt);
}
.sec-sonnenschein-hero .hero__dot--a { background: var(--c-coral); opacity: 0.16; }
.sec-sonnenschein-hero .hero__dot--b { background: var(--c-mint); opacity: 0.34; }

.sec-sonnenschein-hero .hero__frame {
  background: var(--c-surface);
  border-radius: 0 var(--r-2xl) var(--r-2xl) 0;
}
.sec-sonnenschein-hero .hero__frame video { object-position: center; }

/* Dugmad heroja u JEDNOM redu, sa ikonama. Zatečeno su se prelamala
   jedno ispod drugog jer zajedno prelaze širinu kolone (.hero__copy je
   34rem). `flex-wrap` nije među zaključanim svojstvima, a razmaci i
   veličina pisma jesu moji — pa se red drži smanjenjem, ne
   preslagivanjem. Na uskom ekranu natpisi se skraćuju (.only-wide /
   .only-narrow), tako da red stoji i na 375 px. */
.sec-sonnenschein-hero .hero__cta { flex-wrap: nowrap; gap: 12px; }
.sec-sonnenschein-hero .hero__cta .u-btn {
  gap: 9px;
  /* Mjereno: sa `u-btn--lg` veličinom pisma (--fs-lg) oba dugmeta u redu
     daju 577 px i prelaze kolonu teksta (34rem = 544 px). Ovo ih vraća
     unutra, a i dalje su iznad 16 px. */
  font-size: 1.02rem;
  padding-inline: 18px;
  white-space: nowrap;
}
.sec-sonnenschein-hero .hero__cta .u-btn svg { width: 20px; height: 20px; flex: none; }
.sec-sonnenschein-hero .only-narrow { display: none; }

.sec-sonnenschein-hero .u-chip { font-weight: 700; }
.sec-sonnenschein-hero .hero h1 { max-width: 16ch; }
.sec-sonnenschein-hero .hero__lead { color: var(--c-text-muted); max-width: 42ch; }

.sec-sonnenschein-hero .hero__sticker {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
}
.sec-sonnenschein-hero .hero__sticker--rate strong { font-size: 1.65rem; color: var(--c-primary); }
.sec-sonnenschein-hero .hero__sticker--fear strong { color: var(--c-primary); }
.sec-sonnenschein-hero .hero__sticker-ic { background: var(--c-mint); color: var(--c-primary-dk); }

/* ---------- 3. Usluge ---------- */

.sec-sonnenschein-services .svcs { background: var(--c-bg); }
.sec-sonnenschein-services .svcs__head { margin-bottom: clamp(30px, 4vw, 56px); }
.sec-sonnenschein-services .u-chip { font-weight: 700; }

.sec-sonnenschein-services .bento {
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-xs);
  transition: box-shadow 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.sec-sonnenschein-services .bento:hover { box-shadow: var(--sh-md); transform: translateY(-3px); }
.sec-sonnenschein-services .bento__ic { border-radius: var(--r-md); }

/* Značka ikone je u templatu bijela. Na karticama koje su i same bijele
   (one bez --mint/--sun/--coral varijante) ikona je time lebdjela na
   ničemu — vidio se samo crtež. Te kartice dobijaju svijetloplavu
   podlogu, pa se značka čita kao značka na svih šest. */
.sec-sonnenschein-services .bento:not(.bento--hero):not(.bento--mint):not(.bento--sun):not(.bento--coral) .bento__ic {
  background: var(--c-mint-soft);
  color: var(--c-primary);
  box-shadow: none;
}
/* PAŽNJA na velikoj kartici (.bento--hero): ona je TAMNA, a ostalih pet
   su svijetle. Pravila ispod imaju istu specifičnost kao sekcijska
   (0,2,1) i dolaze poslije njih, pa bi bez `:not(.bento--hero)` ugasila
   svijetli tekst na tamnoj podlozi — tekst i dugme bi ostali tamnoplavi
   na tamnoplavom. */
.sec-sonnenschein-services .bento:not(.bento--hero) h3 { font-size: var(--fs-h4); }
.sec-sonnenschein-services .bento:not(.bento--hero) p { color: var(--c-text-muted); }
.sec-sonnenschein-services .bento:not(.bento--hero) .bento__go { color: var(--c-primary); }

/* Preliv velike kartice je u templatu vodio u #26584F — zelena iz
   originalnog templata, jedina boja na stranici koja nije iz palete.
   Vodi u akcentnu plavu. */
.sec-sonnenschein-services .bento--hero {
  background: linear-gradient(150deg, var(--c-primary) 0%, #1B6E8F 100%);
}
/* Naslov velike kartice je bio jednak naslovima malih (22 px). U samom
   templatu mu je namijenjen veći stepen, ali ga generično `.bento h3`
   nadjačava — deklarisano je NIŽE u istom fajlu, sa istom specifičnošću.
   Vraćena je hijerarhija: velika kartica nosi veći naslov. */
.sec-sonnenschein-services .bento--hero h3 { font-size: clamp(1.5rem, 1.2vw + 1.05rem, 1.9rem); }
.sec-sonnenschein-services .bento--hero p { color: rgba(255, 255, 255, 0.88); }
.sec-sonnenschein-services .bento--hero .bento__go { color: #fff; }
.sec-sonnenschein-services .bento--hero .bento__go i { background: rgba(255, 255, 255, 0.22); }
.sec-sonnenschein-services .bento__go { font-weight: 700; }

/* ---------- 4. Recenzije ---------- */

.sec-klar-referenzen .revs { background: var(--c-bg-alt); }
.sec-klar-referenzen .revs__head { margin-bottom: clamp(26px, 3vw, 44px); }
.sec-klar-referenzen .revs__bar {
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  background: var(--c-white);
  box-shadow: var(--sh-xs);
}
.sec-klar-referenzen .revs__stars { color: var(--c-star); }
.sec-klar-referenzen .revs__bar-link { font-weight: 700; color: var(--c-primary); }

.sec-klar-referenzen .bub__body {
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-xs);
}
.sec-klar-referenzen .bub__text { color: var(--c-text); }
.sec-klar-referenzen .bub__id strong { font-weight: 700; }
.sec-klar-referenzen .bub__id small { color: var(--c-text-muted); }

/* Recenzije su prenesene s Google profila i nisu prevođene — engleski
   tekst u bosanskom okruženju se lakše čita ako je vizuelno odvojen. */
.sec-klar-referenzen .bub__text { font-style: normal; }

/* ---- Recenzije kao traka: četiri u redu, sa strelicama ----

   NAPOMENA: ovo je jedina izmjena u paketu koja dira RASPORED sekcije,
   a ne samo njen izgled. `UPUTA.md` traži da se sekcija ne preslaguje;
   naručeno je izričito („4 reviews in a row + next/previous"), pa je
   urađeno i ovdje zapisano da se zna gdje se odstupilo.

   Zatečeno: mrežа 3 × n sa stepenastim razmakom. Sada: jedan red koji
   se skroluje vodoravno, sa četiri kartice u vidnom polju. */
.sec-klar-referenzen .bubbles {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 20px) / 4);
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 26px;   /* mjesto za „rep" oblačića i sjenku */
  margin-top: clamp(32px, 4vw, 48px);
}
.sec-klar-referenzen .bubbles::-webkit-scrollbar { display: none; }

/* Stepenasti razmak iz mreže u traci izgleda kao greška poravnanja. */
.sec-klar-referenzen .bubbles > li,
.sec-klar-referenzen .bubbles > li:nth-child(2n),
.sec-klar-referenzen .bubbles > li:nth-child(3n),
.sec-klar-referenzen .bubbles > li:nth-child(3n + 2) {
  margin-top: 0;
  scroll-snap-align: start;
}
/* Sve kartice iste visine.

   Traka ima `align-items: start` (zaključano svojstvo, ne dira se), pa
   se svaka kartica skuplja na svoj tekst — recenzija od tri reda je
   viša od onih od dva i donje ivice se razilaze.

   Bez diranja poravnanja: `height: 100%` rasteže stavku na visinu reda
   (a red je visok koliko najviša kartica), a oblačić zauzme sve osim
   onoga što nosi potpis — potpis je 40 px (avatar) plus 32 px razmaka
   iznad njega, dakle 72 px.

   Ovo se samo ispravlja: ako na užem ekranu najduža recenzija dobije
   još jedan red, red naraste, pa s njim i `100%`. */
.sec-klar-referenzen .bubbles > li { height: 100%; }
.sec-klar-referenzen .bub__body { height: calc(100% - 72px); }
/* Potpis mora ostati tačno 72 px visok zajedno sa razmakom — ako se ime
   prelomi u dva reda, račun iznad bi propao i tekst bi iscurio. */
.sec-klar-referenzen .bub__by { min-height: 40px; margin-top: 32px; }
.sec-klar-referenzen .bub__id strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.revs-nav {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px;
}
.revs-nav[hidden] { display: none; }
.revs-nav__b {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--c-line-strong);
  border-radius: 999px;
  background: var(--c-white);
  color: var(--c-primary);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease,
              color 160ms ease, opacity 160ms ease;
}
.revs-nav__b svg { width: 20px; height: 20px; }
.revs-nav__b:hover:not(:disabled) { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.revs-nav__b:disabled { opacity: 0.34; cursor: default; }
.revs-nav__b:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 3px; }

@media (max-width: 1080px) {
  .sec-klar-referenzen .bubbles { grid-auto-columns: calc((100% - 2 * 20px) / 3); }
}
@media (max-width: 820px) {
  .sec-klar-referenzen .bubbles { grid-auto-columns: calc((100% - 20px) / 2); }
}
@media (max-width: 560px) {
  /* Puna širina umjesto 84 %: kartica je time na sredini ekrana, a ne
     uz lijevu ivicu sa komadićem sljedeće koji viri s desne. Kroz
     recenzije se ide strelicama ispod. */
  .sec-klar-referenzen .bubbles { grid-auto-columns: 100%; }
  .revs-nav { justify-content: center; }
}

/* ---------- 5. Ordinacija (parallax) ---------- */

.sec-rowan-parallax .stage__body { background: transparent; }
.sec-rowan-parallax .stage__facts dt { color: var(--c-on-dark-mu); }
.sec-rowan-parallax .stage__facts dd { color: var(--c-on-dark); font-weight: 800; }

/* Pozadinska fotografija je uklonjena iz markupa (naručeno). Sekcija je
   sada jedna puna plava traka od ivice do ivice — bez svijetlih pojaseva
   iznad i ispod i bez zaobljenih uglova.

   Zaobljenje i uvlačenje sa strana crta parallax efekat: `section.js`
   upisuje `--p` (0 → 1) kao inline stil na okvir, a `section.css` iz
   njega računa `margin-inline` i `border-radius`. `--p` se stilom ne
   može nadjačati (inline pobjeđuje), pa se gase dvije osobine koje ga
   troše — obje su dozvoljene za izmjenu (margin, border-radius). */
.sec-rowan-parallax .stage {
  padding-block: 0;
  background: var(--c-ink);
}
.sec-rowan-parallax .stage__frame {
  min-height: 0;
  margin-inline: 0;
  border-radius: 0;
  box-shadow: none;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(56, 163, 201, 0.28) 0%, transparent 58%),
    var(--c-ink);
}
/* Sekcija je izgubila svoj vanjski razmak (padding-block: 0), pa ga
   preuzima tijelo — inače bi tekst bio zalijepljen za susjedne sekcije. */
.sec-rowan-parallax .stage__body {
  padding-block: clamp(52px, 6.5vw, 92px);
  /* Bočni razmak na `--gutter`, isti kao u `.u-container` svih ostalih
     sekcija: traka je sada od ivice do ivice, pa bi njen vlastiti veći
     razmak (56 px) gurnuo tekst desno od svega ostalog na stranici. */
  padding-inline: var(--gutter);
}

/* ---------- 6. O nama ---------- */

.sec-dental-house-about .about { background: var(--c-bg-alt); }
.sec-dental-house-about .about__lead { color: var(--c-text); }
.sec-dental-house-about .about__points span { color: var(--c-text-muted); }
.sec-dental-house-about .about__points strong { color: var(--c-ink); font-weight: 700; }
.sec-dental-house-about .about__note { color: var(--c-text-muted); }

/* Okvir je uspravniji od fotografije (1700 × 1447), pa se reže po
   širini i cijela visina ostaje vidljiva. Na srednjim širinama okvir
   postane širi od slike i tada se reže po visini — 22 % drži lice u
   kadru i u tom slučaju. Provjereno od 375 do 1440 px. */
.sec-dental-house-about .about__media img {
  object-fit: cover;
  object-position: center 22%;
}

/* ---------- 7. Prije i poslije ---------- */

.sec-quiet-hours-results .res { background: var(--c-bg); }
.sec-quiet-hours-results .case {
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-xs);
}
.sec-quiet-hours-results .case__pair :is(img, video) {
  aspect-ratio: 900 / 491;   /* stvarni omjer ovih fotografija */
  object-position: center;
}
.sec-quiet-hours-results .case__tag {
  background: var(--c-surface);
  color: var(--c-primary-dk);
  font-weight: 800;
}
.sec-quiet-hours-results .case__tag--a { background: var(--c-accent); color: #0C2029; }

/* Traka ispod brojke: ovdje nema omjera koji bi mjerila (4,8 od 5 jeste
   omjer, 18 recenzija nije), pa je crta, ne mjerač — jednake dužine
   ispod sve tri brojke, --w se postavlja u markupu. */
.sec-quiet-hours-results .fig__bar { height: 4px; background: transparent; }
.sec-quiet-hours-results .fig__bar::after { background: var(--c-accent); border-radius: var(--r-pill); }
.sec-quiet-hours-results .fig__n strong { color: var(--c-primary); }

/* ---------- 8. Galerija ---------- */

/* Fundament template ima uspravnu traku sa mrežama pričvršćenu uz lijevu
   ivicu (.srail), pa svojim kontejnerima od 1140 px naviše dodaje
   `padding-left: calc(gutter + var(--rail-w))` da sadržaj ne završi ispod
   nje. U ovom paketu te trake NEMA — nije u rasporedu — pa je tih 88 px
   ostajalo kao prazan pojas, i galerija je počinjala uvučenije od svih
   ostalih sekcija.

   Rezervacija se gasi tokenom, a ne prepisivanjem `padding-left`:
   sekcijsko pravilo ostaje kakvo jeste, samo mu `--rail-w` postane 0. */
.sec-fundament-instagram { --rail-w: 0px; }

.sec-fundament-instagram .ig { background: var(--c-bg-alt); }
.sec-fundament-instagram .ig__profile {
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line);
  background: var(--c-white);
  box-shadow: var(--sh-xs);
}
/* Značka je u templatu imala Instagram preliv (žuto → crveno → ljubičasto).
   Ovdje stoji Facebook znak, pa preliv odlazi — ostaje sam znak. */
.sec-fundament-instagram .ig__profile-ic {
  background: none;
  color: #1877F2;
  width: 34px;
  height: 34px;
}
.sec-fundament-instagram .ig__profile-ic svg { width: 30px; height: 30px; }
.sec-fundament-instagram .ig__profile-tx strong { font-weight: 700; }
.sec-fundament-instagram .ig__profile-tx small { color: var(--c-text-muted); }
.sec-fundament-instagram .reel__link { border-radius: var(--r-gallery); box-shadow: var(--sh-sm); }
.sec-fundament-instagram .reel__link img { border-radius: var(--r-gallery); }
.sec-fundament-instagram .reel__link:hover { box-shadow: var(--sh-lg); }

/* Slot je crtan za USPRAVNE SNIMKE — 9/16. Ova stranica u paketu nema
   video nego tri fotografije, od kojih su dvije položene: u okviru
   9/16 od položene sale ostane 39 % širine, a ljudi za stolom lijevo
   ostanu presječeni ivicom. UPUTA.md to izričito zabranjuje i isto tako
   izričito dopušta `aspect-ratio` i `object-position`.

   4/5 je najuži okvir u kojem sve tri fotografije prežive. */
.sec-fundament-instagram .reel__link { aspect-ratio: 4 / 5; }

/* Sala: bina s govornicom je lijevo od sredine, platno desno. Kadar se
   pomjera ulijevo da bina i ljudi za stolom uđu cijeli. */
.sec-fundament-instagram .ig__grid .reel:nth-child(2) img { object-position: 30% 50%; }

/* Značka „pusti" i trajanje snimka ne stoje ni u markupu ni ovdje —
   iza ovih pločica nema videa. */

/* ---- Uvećani prikaz fotografije ----
   Okvir, zastor i dugme za zatvaranje su iz sekcije (.reelbox*); ovdje
   je samo ono što nosi sliku i strelice. */
.sec-fundament-instagram .reelbox__panel {
  width: min(92vw, 1040px);
  max-height: 90vh;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.sec-fundament-instagram .lb__fig {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-ink);
  box-shadow: var(--sh-xl);
}
.sec-fundament-instagram .lb__img {
  display: block;
  width: 100%;
  max-height: 76vh;
  object-fit: contain;
  background: #000;
}
.sec-fundament-instagram .lb__cap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 18px 16px;
  color: var(--c-on-dark);
}
.sec-fundament-instagram .lb__cap strong { font-family: var(--ff-display); font-size: 1.02rem; font-weight: 700; }
.sec-fundament-instagram .lb__cap small { font-size: var(--fs-xs); color: var(--c-on-dark-mu); }

.sec-fundament-instagram .lb__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--c-ink);
  cursor: pointer;
  box-shadow: var(--sh-md);
  transition: background-color 160ms ease, transform 200ms var(--ease-out);
}
.sec-fundament-instagram .lb__nav svg { width: 22px; height: 22px; }
.sec-fundament-instagram .lb__nav:hover { background: #fff; transform: scale(1.06); }
.sec-fundament-instagram .lb__nav--prev { left: -18px; }
.sec-fundament-instagram .lb__nav--next { right: -18px; }

@media (max-width: 720px) {
  .sec-fundament-instagram .lb__nav { width: 44px; height: 44px; margin-top: -22px; }
  .sec-fundament-instagram .lb__nav svg { width: 19px; height: 19px; }
  .sec-fundament-instagram .lb__nav--prev { left: 6px; }
  .sec-fundament-instagram .lb__nav--next { right: 6px; }
}

/* ---------- 9. Pitanja ---------- */

.sec-sonnenschein-faq .faq { background: var(--c-bg); }
.sec-sonnenschein-faq .u-chip { font-weight: 700; }
.sec-sonnenschein-faq .qa {
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-xs);
}
.sec-sonnenschein-faq .qa__q button { font-weight: 700; }
.sec-sonnenschein-faq .qa__in p { color: var(--c-text-muted); }

/* ---------- 10. Kontakt ---------- */

.sec-klar-cta .cta { background: var(--c-bg-alt); }
.sec-klar-cta .cta__card {
  border-radius: var(--r-2xl);
  background: var(--c-primary);
  box-shadow: var(--sh-xl);
}
.sec-klar-cta .cta__card :is(h2, .cta__copy p) { color: var(--c-white); }
.sec-klar-cta .cta__copy p { color: rgba(255, 255, 255, 0.84); }
.sec-klar-cta .cta__label { color: #A9C2EA; }
.sec-klar-cta .u-sticker { font-weight: 800; box-shadow: var(--sh-md); }

.sec-klar-cta .crow {
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
.sec-klar-cta .crow:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.sec-klar-cta .crow--wa { background: var(--c-whatsapp); color: #fff; }
.sec-klar-cta .crow--wa small { color: rgba(255, 255, 255, 0.82); }

/* WhatsApp znak je bio NEVIDLJIV: templat je računao na bijeli red, pa
   je značci dao blijedozelenu podlogu i ZELEN znak — a ovaj red je cio
   zelen, isti ton. Zeleno na zelenom se ne vidi.
   Sada: bijeli znak na prozirno-bijelom krugu, a na hover se obrne. */
.sec-klar-cta .crow--wa .crow__ic {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.sec-klar-cta .crow--wa:hover .crow__ic {
  background: #fff;
  color: var(--c-whatsapp);
}
.sec-klar-cta .crow--tel { background: var(--c-white); color: var(--c-ink); }
.sec-klar-cta .crow--tel small { color: var(--c-text-muted); }
.sec-klar-cta .crow__tx strong { font-weight: 800; }

/* ---------- 11. Podnožje ---------- */

.sec-terra-footer .ftr {
  background:
    radial-gradient(90% 120% at 88% 0%, rgba(56, 163, 201, 0.16) 0%, transparent 60%),
    var(--c-ink);
}

/* Četiri stupca: brend + stranica + radno vrijeme + kako do nas.
   `.ftr__grid` je u templatu već `1.15fr 1fr 0.9fr 0.9fr` i lomi se na
   2 stupca ispod 1000 px i na 1 ispod 620 px — geometrija se ne dira,
   samo se popunjava sa sva četiri stupca umjesto dva. Veliki natpis
   (.ftr__word) je uklonjen: logotip ga nosi u prvom stupcu. */
.sec-terra-footer .ftr__grid { padding-top: 0; }

.sec-terra-footer .ftr__brand { max-width: 34ch; }
.sec-terra-footer .ftr__logo-link { display: inline-block; }
.sec-terra-footer .ftr__blurb {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--c-on-dark-mu);
}
.sec-terra-footer .ftr__social { margin-top: var(--sp-5); }

/* Pravi logotip firme. Nije u zaglavlju jer je to tamna traka, a fajl je
   tamnoplavo slovo na BIJELOJ podlozi — na grafitu bi bio bijela kutija,
   a na visini trake (34 px) natpis bi ispao ~89 px širok i nečitak.
   Ovdje ima mjesta i svoju bijelu podlogu.
   Naziv firme stoji i kao tekst (u-sr-only, itemprop="name") — zbog
   schema.org; pristupačno ime nosi `alt` slike. */
.sec-terra-footer .ftr__logo {
  width: 200px;
  height: auto;
  max-width: 62vw;
  padding: 13px 16px;
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: var(--sh-sm);
}

/* Naslovi stupaca: sitno, razmaknuto, u svijetloplavoj. */
.sec-terra-footer .ftr__col h3 {
  color: #A9C2EA;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin-bottom: var(--sp-4);
}

.sec-terra-footer .ftr__links a { font-size: var(--fs-base); }
.sec-terra-footer .ftr__links a:hover { color: #A9C2EA; }

/* Spojeni stupac: radno vrijeme, adresa i e-pošta, svaki sa ikonom.
   Tri stupca umjesto četiri — `.ftr__grid` u sekciji ima četiri trake,
   pa bi spojeni sadržaj inače stao u treću (0.9fr) i ostavio četvrtu
   praznu. Podnožje je mjesto gdje UPUTA.md izričito dopušta preslagivanje. */
.sec-terra-footer .ftr__grid { grid-template-columns: 1.15fr 0.85fr 1.3fr; }
/* Sekcija svoje lomove ima u `@media`, a ovo pravilo je izvan njih i
   iste je specifičnosti — bez ponavljanja bi tri stupca ostala i na
   telefonu. Iste granice kao u section.css. */
@media (max-width: 1000px) {
  .sec-terra-footer .ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .sec-terra-footer .ftr__grid { grid-template-columns: 1fr; }
}

.sec-terra-footer .ftr__info { display: grid; gap: var(--sp-4); }
.sec-terra-footer .ftr__info li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
}
.sec-terra-footer .ftr__info-ic { color: #A9C2EA; margin-top: 2px; }
.sec-terra-footer .ftr__info-ic svg { width: 20px; height: 20px; }
.sec-terra-footer .ftr__info-tx { display: block; min-width: 0; }
.sec-terra-footer .ftr__info-tx strong {
  display: block;
  font-size: var(--fs-base); font-weight: 700;
  color: var(--c-on-dark);
  font-variant-numeric: tabular-nums;
}
.sec-terra-footer .ftr__info-tx small {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-xs);
  color: var(--c-on-dark-mu);
}

.sec-terra-footer .ftr__contact address {
  margin: 0;
  color: var(--c-on-dark-mu);
  font-size: var(--fs-base);
  line-height: 1.6;
}
.sec-terra-footer .ftr__contact a { color: var(--c-on-dark-mu); font-size: var(--fs-base); }
.sec-terra-footer .ftr__contact a:hover { color: var(--c-on-dark); }
.sec-terra-footer .ftr__dir {
  gap: 0;
  margin-top: 4px;
  min-height: 32px;
  font-weight: 700;
  color: #A9C2EA;
}
/* Duga adresa e-pošte se lomi na granici riječi, a tek u krajnjoj
   nuždi usred nje — nikad „…gmail." / „com". */
.sec-terra-footer .ftr__mail {
  margin-top: 0;
  min-height: 32px;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Društvene mreže: zaobljeni kvadrati sa blagom svijetlom podlogom,
   umjesto obrubljenih krugova. */
.sec-terra-footer .ftr__social { gap: 10px; }
.sec-terra-footer .ftr__social a {
  width: 46px; height: 46px;
  border: 0;
  border-radius: 14px;
  background: rgba(234, 240, 248, 0.09);
  color: var(--c-on-dark);
  transition: background-color 160ms ease, color 160ms ease;
}
.sec-terra-footer .ftr__social a:hover { background: rgba(234, 240, 248, 0.18); color: #fff; }
.sec-terra-footer .ftr__social svg { width: 20px; height: 20px; }

/* Donja traka: samo potpis, a „na vrh" je zaobljeno dugme uz desnu
   ivicu (`margin-left: auto` je već u sekciji).
   Ikona se centrira RAZMAKOM, ne sa `justify-content` — to svojstvo je
   zaključano: 52 px širine minus 2 × 15 px daje tačno 22 px koliko je
   sama ikona. */
.sec-terra-footer .ftr__bar {
  border-top: 1px solid var(--c-line-dark);
  padding-top: var(--sp-4);
}
.sec-terra-footer .ftr__top-btn {
  gap: 0;
  width: 52px; height: 52px;
  padding: 0 15px;
  border: 0;
  border-radius: 16px;
  background: rgba(234, 240, 248, 0.10);
  color: var(--c-on-dark);
  transition: background-color 160ms ease, transform 220ms var(--ease-out);
}
.sec-terra-footer .ftr__top-btn:hover {
  background: rgba(234, 240, 248, 0.2);
  transform: translateY(-3px);
}
.sec-terra-footer .ftr__top-btn svg { width: 22px; height: 22px; }


/* ------------------------------------------------------------
   5. TELEFON JE MJERA — 375 px

   Hero se ovdje ne prelama nego SKRAĆUJE: iznad pregiba moraju stati
   naslov i prvo dugme. Fotografija (ovdje video) je vlastiti blok i
   tekst je ispod nje, na punoj podlozi — tako je i zatečeno na ovoj
   sekciji ispod 1040 px, pa zatamnjenja nema ni ovdje.

   Prelomne tačke u section.css su pisane max-width i ne prepisuju se;
   ovo su moja pravila, ispod istih granica.
   ------------------------------------------------------------ */

/* Mjereno na 375 × 667 (iPhone SE/8 — najuži ekran koji se još sreće):
   naslov i prvo dugme moraju stati prije nego se ekran dodirne. Svaki
   razmak ispod je odbijen od te mjere, ne odabran po oku. */
@media (max-width: 640px) {
  /* Hero: skraćen, ne samo prelomljen. */
  .sec-sonnenschein-hero .hero {
    /* Zaglavlje je `position: sticky` i zauzima svoje mjesto u toku, pa
       hero NE mora dodavati njegovu visinu — to je i pravilo razmak
       iznad slike gurnulo na ~74 px povrh 65 px trake. Sada je 30 px. */
    padding-top: 30px;
    padding-bottom: 52px;
  }
  .sec-sonnenschein-hero .hero__inner { gap: 28px; }

  /* Omjer 3/2 — slika ostaje slika, a ne traka. */
  .sec-sonnenschein-hero .hero__frame {
    aspect-ratio: 3 / 2;
    border-radius: var(--r-xl);
  }
  .sec-sonnenschein-hero .hero__media { max-width: 100%; }

  .sec-sonnenschein-hero .hero__copy > * + * { margin-top: 12px; }
  .sec-sonnenschein-hero .u-chip {
    min-height: 32px;
    font-size: 0.78rem;
    padding: 5px 12px;
  }
  .sec-sonnenschein-hero .hero h1 {
    font-size: clamp(1.72rem, 7.4vw, 2.2rem);
    max-width: 20ch;
  }
  /* Uvod: najviše tri reda. Rečenica za širok ekran je duža i stoji u
     .only-wide — ovdje se ne prikazuje. */
  .sec-sonnenschein-hero .hero__lead {
    margin-top: 12px;
    font-size: 1rem;
    line-height: 1.45;
  }
  .sec-sonnenschein-hero .only-wide { display: none; }
  .sec-sonnenschein-hero .only-narrow { display: inline; }

  /* Oba dugmeta u jednom redu i na telefonu — sa skraćenim natpisima
     („Pišite nam" / „Pozovite") stanu u 335 px. `section.css` ih ispod
     560 px razvlači na `width: 100%`, što bi u redu bez prelamanja
     prelilo kolonu, pa se širina vraća na sadržaj.
     Hijerarhija ostaje: puno dugme je glavno, obrubljeno je lakše. */
  .sec-sonnenschein-hero .hero__cta { gap: 8px; padding-top: 2px; }
  .sec-sonnenschein-hero .hero__cta .u-btn { width: auto; flex: 0 1 auto; min-width: 0; padding-inline: 16px; }
  .sec-sonnenschein-hero .hero__cta .u-btn--solid { min-height: 52px; font-size: 0.97rem; }
  .sec-sonnenschein-hero .hero__cta .u-btn--line { min-height: 52px; font-size: 0.97rem; }
  .sec-sonnenschein-hero .hero__cta .u-btn svg { width: 18px; height: 18px; }

  /* Naljepnice: manje, i tako da ne naliježu na chip ispod slike. */
  .sec-sonnenschein-hero .hero__sticker { padding: 8px 12px; border-radius: var(--r-sm); }
  .sec-sonnenschein-hero .hero__sticker--rate strong { font-size: 1.25rem; }
  .sec-sonnenschein-hero .hero__sticker--rate small { font-size: 0.68rem; }
  .sec-sonnenschein-hero .hero__sticker--fear { font-size: 0.78rem; }
  .sec-sonnenschein-hero .hero__sticker-ic { width: 26px; height: 26px; }
  .sec-sonnenschein-hero .hero__sticker-ic svg { width: 14px; height: 14px; }
}

@media (max-width: 900px) {
  /* Razmaci sekcija: na telefonu se sve mjeri u ekranima, ne u pikselima. */
  .sec-sonnenschein-services,
  .sec-klar-referenzen,
  .sec-quiet-hours-results,
  .sec-fundament-instagram,
  .sec-sonnenschein-faq,
  .sec-klar-cta { --section-y: clamp(48px, 9vw, 68px); }

  /* Bez izuzetka bi i velika kartica pala na 1.16rem i ispala SITNIJA
     od malih (njihov --fs-h4 je 19 px na telefonu). */
  .sec-sonnenschein-services .bento:not(.bento--hero) h3 { font-size: 1.16rem; }
  .sec-klar-referenzen .revs__bar { gap: 12px; }

  /* Traka na dnu ekrana i lebdeće dugme ne smiju pokriti podnožje.
     Sekcija sama već ostavlja 120 px (`--sp-5` + 88), a lebdeće dugme
     seže 130 px od dna (86 px odmaka + 44 px visine) — treba još malo,
     ne još 84 px, jer se to dvoje zbraja u 204 px praznine.
     Razmak nosi i `env(safe-area-inset-bottom)`: na iPhoneu se za tu
     vrijednost pomjera i lebdeće dugme, pa bez nje sjedne na „na vrh". */
  .sec-terra-footer .ftr__bar {
    padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px));
  }
}

/* Na telefonu svaka sekcija diše isto: 45 px gore i dole. Sekcije to
   čitaju iz `--section-y` (`.u-section { padding-block: var(--section-y) }`),
   pa se mijenja token, ne razmak po sekciji. Dvije koje ga ne koriste —
   plava traka i podnožje — dobijaju istu vrijednost izravno.
   Blok stoji IZA onog na 900 px: `@media` ne nosi specifičnost, odlučuje
   redoslijed u fajlu. */
@media (max-width: 640px) {
  .sec-sonnenschein-services,
  .sec-klar-referenzen,
  .sec-rowan-parallax,
  .sec-dental-house-about,
  .sec-quiet-hours-results,
  .sec-fundament-instagram,
  .sec-sonnenschein-faq,
  .sec-klar-cta { --section-y: 45px; }

  /* Traka je puna boja od ivice do ivice; razmak nosi njeno tijelo. */
  .sec-rowan-parallax .stage__body { padding-block: 45px; }

  /* Podnožju se mijenja samo gornji razmak — donji drži mjesto trake
     na dnu ekrana i računa se posebno. */
  .sec-terra-footer .ftr { padding-top: 45px; }
}

@media (max-width: 420px) {
  /* Par prije/poslije prelama se u jedan stubac (section.css) — bez
     ovoga fotografije ispadnu preširoke za karticu. */
  .sec-quiet-hours-results .case { padding: 16px; }
  .sec-quiet-hours-results .case__pair { gap: 14px; }
}


/* ------------------------------------------------------------
   6. LEBDEĆE WHATSAPP DUGME

   Moj element, nije ni u jednoj sekciji i ne ulazi u spisak iz
   SEKCIJE.md. Ovo je jedino mjesto gdje je `position: fixed` moj.

   Na telefonu sjeda IZNAD trake koju nosi zaglavlje (.mobile-bar je
   fiksirana na dnu, visoka 64 px sa razmakom) — dvije lebdeće stvari
   se ne smiju preklapati.
   ------------------------------------------------------------ */

.wa-fab {
  position: fixed;
  right: 16px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* 44 px je donja granica ugodnog dodira na telefonu — dugme se smanjuje
     do nje, ne ispod. */
  min-height: 44px;
  padding: 10px 17px;
  border-radius: 999px;
  background: #0E7C6F;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 16px 34px -14px rgba(14, 124, 111, 0.75), 0 2px 6px rgba(16, 27, 46, 0.18);
  transition: background-color 160ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.wa-fab svg { width: 18px; height: 18px; flex: none; }
.wa-fab:hover { background: #0B6357; transform: translateY(-2px); box-shadow: 0 22px 44px -16px rgba(14, 124, 111, 0.8); }
.wa-fab:active { transform: translateY(0); }
.wa-fab:focus-visible { outline: 3px solid #123C86; outline-offset: 3px; }

/* Dok je hero na ekranu, dugme se sklanja — u herou već stoji veliko
   WhatsApp dugme, pa se ništa ne gubi, a ugao ostaje čist.

   Zadano stanje je VIDLJIVO: klasu `.is-over-hero` dodaje
   assets/site.js. Ako skripta ne stigne ili pregledač nema
   IntersectionObserver, dugme ostaje na mjestu — obrnut smjer bi u
   istom kvaru ostavio sajt bez WhatsApp dugmeta.

   `visibility` se namjerno NE animira: sa odgodom u `transition` stanje
   dugmeta bi zavisilo od tajminga, a ovo je element koji je ili tu ili
   nije. `opacity` nosi prijelaz, a `visibility: hidden` vadi dugme iz
   reda za Tab. */
.wa-fab.is-over-hero {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(130%);
}

/* Na telefonu lebdećeg dugmeta NEMA — naručeno.

   Ono je nalijetalo na tekst poziva na akciju, a WhatsApp je na telefonu
   ionako dostupan na tri mjesta: u traci na dnu ekrana (nosi je
   zaglavlje, sa ikonom i natpisom), u herou i u sekciji „Kontakt".
   Odstupa od UPUTA.md, gdje piše da dugme na telefonu lebdi — zapisano
   ovdje da se zna gdje se odstupilo i zašto.

   `display` na `.wa-fab` je moj element, ne sekcijska klasa, pa ovdje
   nije zaključan. */
@media (max-width: 900px) {
  .wa-fab { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-fab { transition: none; }
  .wa-fab:hover { transform: none; }
}