/* ==========================================================================
   Opća stomatološka ordinacija dr. Mirela Papić — stil sajta.

   Učitava se POSLJEDNJI, poslije sekcijskih stilova i poslije brend.css,
   pa nadjačava njihove tokene. Raspored (display, grid, position, align,
   text-align) se ovdje NE dira — samo boja, pismo, razmak, zaobljenje,
   sjenka, pozadina i kadar slike.

   Paleta je izmjerena sa logotipa ordinacije (ljubičasta #6B0D6C).
   Naslovi: Nunito. Tijelo: Inter.
   ========================================================================== */

:root {
  --brand:        #6B0D6C;   /* znak sa logotipa — 11,1:1 na bijeloj */
  --brand-dk:     #530A54;   /* hover */
  --brand-lt:     #D9A6DE;   /* ista porodica, ali za TAMNE podloge */
  --brand-soft:   #F4E7F5;
  --plum:         #33103A;   /* tamna ploha, naslovi */
  --plum-dk:      #24092A;
  --paper:        #FCFAFC;
  --paper-alt:    #F5EEF6;
  --head-h:       74px;      /* NE zvati --header-h: to bi bio ciklus */
}

html {
  scroll-behavior: smooth;
  /* clip klipuje, a ne pravi scroll kontejner — sticky zaglavlje preživi */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--paper);
  overflow-x: clip;
}

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

/* Naizmjenične trake sastavljača — pobijeljene, boju nose sekcije same. */
.band-even,
.band-odd { background: transparent; }

/* --------------------------------------------------------------------------
   1. ZAGLAVLJE SE LIJEPI KROZ CIJELU STRANICU

   .site-head je position: sticky, ali mu je roditelj sama sekcija zaglavlja,
   visoka koliko i traka — sticky se drži roditeljevog okvira i traka otklizi
   poslije ~70 px. Ljepljivost se zato prebacuje na traku sastavljača, koja je
   dijete elementa main i time traje cijelu stranicu.
   -------------------------------------------------------------------------- */

.band[data-band="1"] {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* --------------------------------------------------------------------------
   2. TOKENI — jedna paleta i jedno pismo na svih 11 sekcija

   Sekcije ne čitaju tokens.css: svaka nosi tokene svog templata. Ovdje se
   prepisuju svi odjednom, pa ni jedna sekcija ne zadrži boju ni pismo iz
   biblioteke. brend.css vezuje samo dio njih (npr. terra-referenzen i
   atelier-parallax uopšte ne dobiju --c-accent), zato se ovdje vezuju svi.
   -------------------------------------------------------------------------- */

.sec-aperta-header,
.sec-quiet-hours-hero,
.sec-anker-services,
.sec-terra-referenzen,
.sec-atelier-parallax,
.sec-dental-house-about,
.sec-meridian-results,
.sec-rowan-gallery,
.sec-dental-house-faq,
.sec-meridian-cta,
.sec-calm-footer {
  /* ----- pismo ----- */
  --ff-display: var(--font-display-rounded);
  --ff-body:    var(--font-sans);

  /* ----- podloge ----- */
  --c-bg:           #FCFAFC;
  --c-bg-alt:       #F5EEF6;
  --c-white:        #FFFFFF;
  --c-surface:      #F0E4F1;
  --c-surface-soft: #F9F3FA;
  --c-surface-warm: #F7F0F6;

  /* ----- tekst ----- */
  --c-ink:          #2A1030;
  --c-ink-soft:     #3A1B40;
  --c-ink-70:       rgba(42, 16, 48, 0.70);
  --c-ink-12:       rgba(42, 16, 48, 0.12);
  --c-ink-06:       rgba(42, 16, 48, 0.06);
  --c-text:         #2B1F2E;
  --c-text-muted:   #5E4F63;   /* 6,4:1 na --c-bg */
  --c-text-invert:  #FBF6FC;
  --c-on-dark:      #F7F0F8;
  --c-on-dark-mu:   rgba(247, 240, 248, 0.80);

  /* ----- brend ----- */
  --c-primary:      #33103A;
  --c-primary-dk:   #24092A;
  --c-primary-lt:   #7A5881;   /* 5,7:1 na papiru */
  --c-primary-05:   rgba(51, 16, 58, 0.05);
  --c-primary-08:   rgba(51, 16, 58, 0.08);
  --c-primary-10:   rgba(51, 16, 58, 0.10);
  --c-primary-14:   rgba(51, 16, 58, 0.14);
  --c-primary-16:   rgba(51, 16, 58, 0.16);
  --c-primary-20:   rgba(51, 16, 58, 0.20);

  --c-accent:       #6B0D6C;
  --c-accent-dk:    #530A54;
  --c-accent-lt:    #B583B8;
  --c-accent-soft:  #F4E7F5;
  --c-accent-tint:  rgba(107, 13, 108, 0.14);

  --c-gold:         #6B0D6C;
  --c-gold-dk:      #530A54;
  --c-gold-soft:    #F4E7F5;

  /* ----- linije ----- */
  --c-line:         rgba(51, 16, 58, 0.13);
  --c-line-strong:  rgba(51, 16, 58, 0.26);
  --c-line-dark:    rgba(247, 240, 248, 0.24);
  --c-line-invert:  rgba(247, 240, 248, 0.22);
  --c-border:       rgba(51, 16, 58, 0.13);
  --c-border-strong: rgba(51, 16, 58, 0.26);

  /* ----- ostalo ----- */
  --c-whatsapp:       #0E7C6F;   /* bijelo na njoj: 5,1:1 */
  --c-whatsapp-dk:    #0A6055;
  --c-whatsapp-vivid: #1EA34F;
  --c-star:           #A8760F;   /* 3,5:1 i na alt podlozi — znak, ne tekst */
  --c-google-blue:    #4285F4;

  /* ----- zaobljenja: jedna porodica na cijelom sajtu ----- */
  --r-xs:     10px;
  --r-sm:     14px;
  --r-md:     18px;
  --r-lg:     22px;
  --r-xl:     28px;
  --r-2xl:    36px;
  --r-pill:   999px;
  --r-circle: 50%;
  --r-gallery: 14px;
  --r-img:     18px;
  --r-window:     18px;
  --r-window-lg:  28px;
  --r-shoulder:    28px;
  --r-shoulder-br: 28px;
  --r-shoulder-sm: 20px;
  --lframe: 12px;

  /* ----- sjenke: sve u boji brenda, nijedna crna ----- */
  --sh-xs: 0 1px 2px rgba(51, 16, 58, 0.07);
  --sh-sm: 0 4px 16px -8px rgba(51, 16, 58, 0.20);
  --sh-md: 0 14px 34px -16px rgba(51, 16, 58, 0.26);
  --sh-lg: 0 26px 58px -22px rgba(51, 16, 58, 0.30);
  --sh-xl: 0 44px 92px -32px rgba(51, 16, 58, 0.34);
  --sh-focus: 0 0 0 3px var(--c-bg), 0 0 0 6px var(--c-accent);

  /* ----- ritam ----- */
  --section-y: clamp(60px, 8vw, 112px);
  --gutter:    clamp(20px, 5vw, 44px);
  --maxw:      1200px;

  /* ----- tipografska skala ----- */
  --fs-xs:   0.875rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   clamp(1.0625rem, 0.35vw + 1rem, 1.1875rem);
  --fs-h4:   clamp(1.125rem, 0.5vw + 1.02rem, 1.375rem);
  --fs-h3:   clamp(1.3125rem, 0.85vw + 1.12rem, 1.75rem);
  --fs-h2:   clamp(1.75rem, 2vw + 1.25rem, 2.75rem);
  --fs-h1:   clamp(2.125rem, 3.2vw + 1.3rem, 3.5rem);
  --fs-time: clamp(1.0625rem, 0.5vw + 0.95rem, 1.25rem);

  --lh-tight: 1.12;
  --lh-snug:  1.2;
  --lh-body:  1.65;
  --ls-tight: -0.015em;   /* Nunito je zaobljen — manje stiskanja nego serif */
  --ls-label:  0.14em;
}

/* Naslovi u Nunitu nose više težine nego original iz templata. */
.sec-aperta-header :is(h1, h2, h3, h4),
.sec-quiet-hours-hero :is(h1, h2, h3, h4),
.sec-anker-services :is(h1, h2, h3, h4),
.sec-terra-referenzen :is(h1, h2, h3, h4),
.sec-atelier-parallax :is(h1, h2, h3, h4),
.sec-dental-house-about :is(h1, h2, h3, h4),
.sec-meridian-results :is(h1, h2, h3, h4),
.sec-rowan-gallery :is(h1, h2, h3, h4),
.sec-dental-house-faq :is(h1, h2, h3, h4),
.sec-meridian-cta :is(h1, h2, h3, h4),
.sec-calm-footer :is(h1, h2, h3, h4) {
  font-weight: 700;
}

/* TAMNE PLOHE: ljubičasta sa logotipa tamo nema kontrasta, pa akcent
   prelazi na svijetlu varijantu iste boje. Nasljeđuje se na djecu. */
.sec-quiet-hours-hero .u-dark,
.sec-atelier-parallax .plx,
.sec-meridian-cta .cta__ink,
.sec-calm-footer .ftr {
  --c-accent:      #D9A6DE;
  --c-accent-dk:   #C98ACF;
  --c-gold:        #D9A6DE;
  --c-star:        #E7B23F;
}

/* --------------------------------------------------------------------------
   3. ZAGLAVLJE
   -------------------------------------------------------------------------- */

.sec-aperta-header .site-head {
  background: rgba(252, 250, 252, 0.92);
  border-bottom: 1px solid transparent;
}
.sec-aperta-header .site-head.is-stuck {
  background: rgba(252, 250, 252, 0.96);
  border-bottom-color: var(--c-line);
  box-shadow: 0 10px 30px -24px rgba(51, 16, 58, 0.55);
}

.sec-aperta-header .brand__mark {
  width: 34px;
  height: 42px;
  display: grid;
  place-items: center;
}
.sec-aperta-header .brand__mark img { width: auto; height: 100%; }

.sec-aperta-header .brand__tx strong {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--c-primary);
  letter-spacing: -0.01em;
}
.sec-aperta-header .brand__tx small {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-accent);
}

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

.sec-aperta-header .head-cta { font-weight: 700; }
.sec-aperta-header .head-wa {
  --btn-bg: var(--c-whatsapp);
  --btn-fg: #fff;
  --btn-bd: transparent;
  min-height: 46px;
  padding: 11px 18px;
  font-size: var(--fs-sm);
  font-weight: 700;
}
.sec-aperta-header .head-wa:hover { --btn-bg: var(--c-whatsapp-dk); }
.sec-aperta-header .head-wa svg { width: 18px; height: 18px; }

/* Ispod 981 px meni ide u burger, a WhatsApp preuzima ljepljiva traka. */
@media (max-width: 980px) {
  .sec-aperta-header .head-wa { display: none; }
}

.sec-aperta-header .menu a { font-weight: 700; }
.sec-aperta-header .menu li:last-child a { color: var(--c-accent); }

/* Ljepljiva traka: skripta je pali tek poslije 400 px skrola, a u njoj je
   jedini WhatsApp na telefonu. transform nije zaključan, pa se traka drži
   od prvog piksela. */
.sec-aperta-header .mobile-bar { transform: none; }
.sec-aperta-header .mobile-bar__i { font-weight: 700; }
.sec-aperta-header .mobile-bar__i--call { background: var(--c-primary); }
.sec-aperta-header .mobile-bar__i--wa { background: var(--c-whatsapp); }

/* --------------------------------------------------------------------------
   4. HERO

   Zaglavlje je U TOKU (ljepljiva traka), a hero je crtan za zaglavlje koje
   lebdi — pa sam sebi čuva mjesto i ostavlja prazan pojas. Skida se.
   -------------------------------------------------------------------------- */

.sec-quiet-hours-hero .hero { padding-top: 0; }

.sec-quiet-hours-hero .hero__media img { object-position: 50% 34%; }

.sec-quiet-hours-hero .hero__rating {
  background: rgba(36, 9, 42, 0.86);
  border-color: rgba(247, 240, 248, 0.26);
}
.sec-quiet-hours-hero .hero__rating:hover { background: rgba(36, 9, 42, 0.95); }

.sec-quiet-hours-hero .hero__copy h1 {
  max-width: 20ch;
  font-weight: 800;
  text-shadow: 0 2px 20px rgba(20, 6, 24, 0.4);
}
.sec-quiet-hours-hero .hero__copy .u-arc::after { border-bottom-color: #D9A6DE; }

.sec-quiet-hours-hero .hero__lead { max-width: 52ch; }

.sec-quiet-hours-hero .u-btn--white { --btn-fg: var(--c-primary-dk); font-weight: 700; }
.sec-quiet-hours-hero .u-btn--ghost { font-weight: 700; }

.sec-quiet-hours-hero .chapters__n { color: #D9A6DE; }

/* Telefon: tekst SILAZI ISPOD slike. Visina data okviru poništava donju
   ivicu iz inset: 0 (okvir postaje preodređen), pa fotografija dobije
   stvaran omjer i prestaje biti pozadina pod zatamnjenjem. */
@media (max-width: 900px) {
  .sec-quiet-hours-hero .hero { padding-block: 0 0; }
}

@media (max-width: 640px) {
  .sec-quiet-hours-hero .hero {
    min-height: 0;
    height: auto;
    background: var(--c-primary-dk);
    padding-block: calc(66vw + 22px) 30px;
  }
  .sec-quiet-hours-hero .hero__media { height: 66vw; }
  .sec-quiet-hours-hero .hero__media img { object-position: 50% 38%; }
  /* Tekst više nije preko slike — zatamnjenja nema. */
  .sec-quiet-hours-hero .hero__scrim { background: none; }

  .sec-quiet-hours-hero .hero__in { padding-top: 0; }
  .sec-quiet-hours-hero .hero__rating { margin-bottom: var(--sp-4); }
  .sec-quiet-hours-hero .hero__copy > * + * { margin-top: 14px; }
  .sec-quiet-hours-hero .hero__copy h1 { font-size: clamp(1.9rem, 8.4vw, 2.3rem); }
  .sec-quiet-hours-hero .hero__lead { font-size: 1rem; line-height: 1.55; }
  .sec-quiet-hours-hero .hero__act { margin-top: 20px; gap: 10px; }
  /* Jedno dugme je glavno; drugo je lakše i ne uzima drugu polovinu ekrana. */
  .sec-quiet-hours-hero .hero__act .u-btn--lg { min-height: 54px; padding: 15px 24px; font-size: 1rem; }
  .sec-quiet-hours-hero .chapters { margin-top: 26px; }
}

/* --------------------------------------------------------------------------
   5. USLUGE
   -------------------------------------------------------------------------- */

.sec-anker-services .u-tab { font-weight: 700; }
.sec-anker-services .sit__ic { color: var(--c-accent); }
.sec-anker-services .sit h3 { font-weight: 700; }
.sec-anker-services .sit__first span { color: var(--c-accent-dk); }

/* --------------------------------------------------------------------------
   6. RECENZIJE
   -------------------------------------------------------------------------- */

.sec-terra-referenzen .zcard__av {
  background: var(--c-accent-soft);
  color: var(--c-accent-dk);
  font-weight: 800;
}
.sec-terra-referenzen .revs__score strong { color: var(--c-primary); }

/* Djelimična zvjezdica: 4,7 od 5. Znak u viewBoxu 0 0 24 24 ide od x=3,6 do
   x=20,1 — za 70 % znaka rez je na (3,6 + 0,7·16,5)/24 = 63 %, dakle
   inset(0 37% 0 0). Po širini okvira bi ispalo 20 % i razlika se ne bi ni
   vidjela. */
.star-part {
  position: relative;
  display: inline-block;
  width: 17px;
  height: 17px;
  flex: none;
}
.u-stars--lg .star-part { width: 22px; height: 22px; }
.star-part svg { width: 100%; height: 100%; }
.star-part svg:first-child { color: rgba(51, 16, 58, 0.22); }
.sec-quiet-hours-hero .star-part svg:first-child { color: rgba(247, 240, 248, 0.3); }
.star-part svg:last-child {
  position: absolute;
  inset: 0;
  color: var(--c-star);
  clip-path: inset(0 37% 0 0);
}

/* --------------------------------------------------------------------------
   7. PARALAKSA
   -------------------------------------------------------------------------- */

.sec-atelier-parallax .plx { background: var(--plum-dk); }
.sec-atelier-parallax .plx__bg img { object-position: 50% 38%; }
.sec-atelier-parallax .plx__scrim {
  background:
    linear-gradient(100deg, rgba(24, 8, 28, 0.88) 0%, rgba(24, 8, 28, 0.66) 46%, rgba(24, 8, 28, 0.38) 100%),
    linear-gradient(180deg, rgba(24, 8, 28, 0.55) 0%, transparent 30%, transparent 70%, rgba(24, 8, 28, 0.55) 100%);
}
.sec-atelier-parallax .plx__arch { border-color: rgba(217, 166, 222, 0.45); }
.sec-atelier-parallax .plx__panel {
  border-color: rgba(247, 240, 248, 0.2);
  background: rgba(24, 8, 28, 0.5);
}
.sec-atelier-parallax .plx__title { font-weight: 700; }
.sec-atelier-parallax .u-em { color: #D9A6DE; }
.sec-atelier-parallax .plx__sig-name { color: var(--c-text-invert); }

@media (max-width: 760px) {
  .sec-atelier-parallax .plx { min-height: 520px; padding-block: 60px; }
}

/* --------------------------------------------------------------------------
   8. O ORDINACIJI

   Okvir slike ima zadatu visinu, pa uspravnu fotografiju (720×960) siječe i
   ljudi ispadaju iz kadra. Okvir se prilagođava slici, ne obrnuto.
   -------------------------------------------------------------------------- */

.sec-dental-house-about .about__media img {
  height: auto;
  aspect-ratio: 720 / 960;
  object-fit: cover;
  object-position: 50% 42%;
}
.sec-dental-house-about .about__points svg { color: var(--c-accent); }
.sec-dental-house-about .about__points strong { color: var(--c-primary); }

/* --------------------------------------------------------------------------
   9. PRIJE / POSLIJE
   -------------------------------------------------------------------------- */

.sec-meridian-results .cmp__tag--b {
  background: rgba(255, 255, 255, 0.94);
  color: var(--c-primary-dk);
}
.sec-meridian-results .cmp__tag--a {
  background: var(--c-accent);
  color: #fff;
}
.sec-meridian-results .cmp__grip { color: var(--c-primary-dk); }

.sec-meridian-results .res__note {
  max-width: 68ch;
  margin: clamp(26px, 3.4vw, 40px) auto 0;
  padding: 16px 20px;
  border-radius: var(--r-md);
  background: var(--c-accent-soft);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.sec-meridian-results .res__note a { color: var(--c-accent-dk); font-weight: 600; }

/* --------------------------------------------------------------------------
   10. GALERIJA
   -------------------------------------------------------------------------- */

.sec-rowan-gallery .gal__t.is-active { border-color: var(--c-accent); }
.sec-rowan-gallery .gal__zoom { color: var(--c-primary-dk); font-weight: 700; }
.sec-rowan-gallery .lbox__scrim { background: rgba(24, 8, 28, 0.86); }

/* --------------------------------------------------------------------------
   11. PITANJA
   -------------------------------------------------------------------------- */

.sec-dental-house-faq .qa h3 button { font-weight: 700; }
.sec-dental-house-faq .qa__pm { color: var(--c-accent); }
.sec-dental-house-faq .faq__ask strong { color: var(--c-primary); }

/* --------------------------------------------------------------------------
   12. KONTAKT
   -------------------------------------------------------------------------- */

.sec-meridian-cta .cta__ink { background: var(--plum); }
.sec-meridian-cta .cta__facts svg { color: #D9A6DE; }
.sec-meridian-cta .cta__facts a { color: inherit; }
.sec-meridian-cta .crow--tel { background: var(--c-accent-soft); }
.sec-meridian-cta .crow--tel .crow__ic { background: var(--c-accent); color: #fff; }
.sec-meridian-cta .crow--tel .crow__tx strong { color: var(--c-primary-dk); }
.sec-meridian-cta .crow--wa { background: var(--c-whatsapp); color: #fff; }
.sec-meridian-cta .crow--wa .crow__ic { background: rgba(255, 255, 255, 0.16); color: #fff; }
.sec-meridian-cta .crow--wa .crow__tx small,
.sec-meridian-cta .crow--wa .crow__tx span { color: rgba(255, 255, 255, 0.86); }
.sec-meridian-cta .crow--wa .crow__tx strong,
.sec-meridian-cta .crow--wa .crow__go { color: #fff; }
.sec-meridian-cta .crow--wa:hover { background: var(--c-whatsapp-dk); }

/* --------------------------------------------------------------------------
   13. PODNOŽJE

   Sekcija se sama farba u --c-bg izvan token-bloka; kad je --c-bg bijela,
   ispod tamnog gradijenta stoji bijela ploha i vidi se na rubu.
   -------------------------------------------------------------------------- */

.sec-calm-footer { background: var(--plum-dk); }
.sec-calm-footer .ftr {
  background:
    radial-gradient(110% 90% at 12% 0%, #4A1A52 0%, var(--plum) 46%, var(--plum-dk) 100%);
}
/* Val na vrhu podnožja mora biti u boji sekcije IZNAD njega (kontakt). */
.sec-calm-footer { --c-bg-alt: #FCFAFC; }

.sec-calm-footer .ftr__logo-mark {
  width: 46px;
  height: 46px;
  background: rgba(255, 255, 255, 0.12);
}
.sec-calm-footer .ftr__logo-mark img { width: auto; height: 30px; }
.sec-calm-footer .ftr__logo-text strong { font-weight: 800; }
.sec-calm-footer .ftr__h { color: #D9A6DE; }
.sec-calm-footer .ftr__map svg { color: #D9A6DE; }
.sec-calm-footer .ftr__social a { border-color: rgba(255, 255, 255, 0.18); }

/* --------------------------------------------------------------------------
   14. WHATSAPP — vlastito lebdeće dugme

   Na širokom ekranu lebdi u donjem desnom uglu. Ispod 901 px ga zamjenjuje
   ljepljiva traka sekcije zaglavlja, koja je i sama position: fixed, drži se
   od prvog piksela (vidi §3) i nosi WhatsApp sa natpisom u desnoj polovini —
   dva zelena dugmeta jedno iznad drugog na 375 px nisu raspored nego nered.
   -------------------------------------------------------------------------- */

.wa-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 13px 22px 13px 18px;
  border-radius: 999px;
  background: #0E7C6F;
  color: #fff;
  font-family: var(--font-display-rounded);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 16px 34px -14px rgba(14, 60, 54, 0.7);
  transition: background-color 200ms ease, transform 200ms ease;
}
.wa-fab svg { width: 22px; height: 22px; flex: none; }
.wa-fab:hover { background: #0A6055; transform: translateY(-2px); }
.wa-fab:focus-visible { outline: 3px solid #D9A6DE; outline-offset: 3px; }

@media (max-width: 900px) {
  .wa-fab { display: none; }
}

/* --------------------------------------------------------------------------
   15. SITNICE KOJE PADNU NA TELEFONU
   -------------------------------------------------------------------------- */

/* Ljepljiva traka stoji stalno, pa joj podnožje mora ostaviti mjesto. */
@media (max-width: 900px) {
  .sec-calm-footer .ftr__bar-inner { padding-bottom: calc(var(--sp-4) + 78px); }
}

/* Nizak telefon (375×667): slika i tipografija se dodatno stisnu da naslov
   i prvo dugme ostanu iznad pregiba. */
@media (max-width: 640px) and (max-height: 720px) {
  .sec-quiet-hours-hero .hero { padding-block: calc(55vw + 18px) 24px; }
  .sec-quiet-hours-hero .hero__media { height: 55vw; }
  .sec-quiet-hours-hero .hero__copy h1 { font-size: clamp(1.7rem, 7.6vw, 2rem); }
  .sec-quiet-hours-hero .hero__lead { font-size: 0.95rem; }
}

/* Fokus se vidi na svakom dugmetu, i na tamnoj i na svijetloj plohi. */
.sec a:focus-visible,
.sec button:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
}
.sec .u-dark a:focus-visible,
.sec .cta__ink a:focus-visible,
.sec-calm-footer a:focus-visible,
.sec-atelier-parallax a:focus-visible {
  outline-color: #D9A6DE;
}

/* --------------------------------------------------------------------------
   16. DOPUNE POSLIJE PRVOG SNIMKA
   -------------------------------------------------------------------------- */

/* Zatamnjenje heroja je u templatu tvrdo upisano u škriljasto plavu, van
   token-bloka. Ista računica, samo u boji brenda: svijetli tekst traži
   podlogu ispod 0,156 luminance da pređe 4,5:1, pa gustina ostaje ista. */
/* MEKSE ZATAMNJENJE.

   hero.js upisuje --scrim-full na .hero: tacku 5 % iznad prve linije
   teksta. Ovdje je izmjerena na 28,3 %. Templat je do nje isao PRAVOM
   linijom od nule, pa je vec na 14 % visine gustina 0,45 i fotografija
   prestane da se vidi.

   Stopovi zato NISU fiksni procenti nego djelovi te tacke (calc sa
   mnozenjem) — inace se ramp pomjeri cim se tekst pomjeri, i na kracem
   heroju pocne izvan kadra. Kriva drzi gornju petinu prakticno cistom
   (0,03–0,05), pa u 18 % visine prelazi u punu gustinu.

   Ispod --scrim-full ostaje 0,90, nepromijenjeno: svijetli tekst
   (#F7F0F8) trazi podlogu ispod 0,156 luminance da predje 4,5:1, a nad
   bijelom fotografijom to je alfa oko 0,87. Tu se ne stedi.

   Natpis sa ocjenom u gornjem uglu ne zavisi od ovoga — nosi vlastitu
   podlogu rgba(36, 9, 42, 0.86). */
.sec-quiet-hours-hero .hero .hero__scrim {
  background:
    linear-gradient(180deg,
      rgba(30, 10, 34, 0.03) 0%,
      rgba(30, 10, 34, 0.05) calc(var(--scrim-full, 30%) * 0.34),
      rgba(30, 10, 34, 0.16) calc(var(--scrim-full, 30%) * 0.58),
      rgba(30, 10, 34, 0.40) calc(var(--scrim-full, 30%) * 0.78),
      rgba(30, 10, 34, 0.68) calc(var(--scrim-full, 30%) * 0.91),
      rgba(30, 10, 34, 0.90) var(--scrim-full, 30%),
      rgba(30, 10, 34, 0.94) 100%),
    linear-gradient(90deg, rgba(30, 10, 34, 0.16) 0%, rgba(30, 10, 34, 0) 40%);
}
/* Svijetla fotografija (hero.js doda .is-bright): isti oblik, samo malo
   vise poda. To pravilo je 0,3,1 i nadjacalo bi svaku prelomnu tacku
   pisanu na .hero__scrim, pa oba stanja idu u paru svuda ispod. */
.sec-quiet-hours-hero .hero.is-bright .hero__scrim {
  background:
    linear-gradient(180deg,
      rgba(30, 10, 34, 0.06) 0%,
      rgba(30, 10, 34, 0.09) calc(var(--scrim-full, 30%) * 0.34),
      rgba(30, 10, 34, 0.21) calc(var(--scrim-full, 30%) * 0.58),
      rgba(30, 10, 34, 0.45) calc(var(--scrim-full, 30%) * 0.78),
      rgba(30, 10, 34, 0.72) calc(var(--scrim-full, 30%) * 0.91),
      rgba(30, 10, 34, 0.92) var(--scrim-full, 30%),
      rgba(30, 10, 34, 0.96) 100%),
    linear-gradient(90deg, rgba(30, 10, 34, 0.20) 0%, rgba(30, 10, 34, 0) 44%);
}
.sec-quiet-hours-hero .hero { background: var(--c-primary-dk); }

/* hero.js dodaje .is-bright kad je ugao fotografije svijetao. To pravilo je
   specificnosti 0,3,1 i nadjacalo bi svaku prelomnu tacku pisanu na
   .hero__scrim (0,2,1) — zato oba stanja moraju biti u istom pravilu. */
/* Tablet (640–900 px): sekcija sama slaze hero u tok i tekst pocinje visoko,
   pa clean zone nema koliko na sirokom ekranu. Umjesto ravne plohe od 0,88
   preko cijele slike ide kratak ramp — natpis sa ocjenom nosi vlastitu
   podlogu, a prva linija teksta je tek na ~23 % visine, gdje je vec 0,90. */
@media (max-width: 900px) {
  .sec-quiet-hours-hero .hero .hero__scrim,
  .sec-quiet-hours-hero .hero.is-bright .hero__scrim {
    background: linear-gradient(180deg,
      rgba(30, 10, 34, 0.48) 0%,
      rgba(30, 10, 34, 0.68) 8%,
      rgba(30, 10, 34, 0.84) 15%,
      rgba(30, 10, 34, 0.90) 20%,
      rgba(30, 10, 34, 0.94) 100%);
  }
}
@media (max-width: 640px) {
  .sec-quiet-hours-hero .hero .hero__scrim,
  .sec-quiet-hours-hero .hero.is-bright .hero__scrim { background: none; }
}

/* Strelica u zelenom redu nasljeđivala je svijetlu podlogu iz templata i
   ispadala kao bijeli krug na zelenom. */
.sec-meridian-cta .crow--wa .crow__go {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.sec-meridian-cta .crow--wa:hover .crow__go { background: rgba(255, 255, 255, 0.3); color: #fff; }
.sec-meridian-cta .crow--tel:hover .crow__go { background: var(--c-accent); color: #fff; }

/* Devet sličica u mreži od dva stupca ostavlja zadnji red sa jednom
   sličicom, što se čita kao greška. Zadnja ide preko oba stupca.
   grid-column nije među zaključanim svojstvima (to su grid-template-* i
   grid-area), a red ostaje red. */
.sec-rowan-gallery .gal__thumbs li:last-child { grid-column: 1 / -1; }
/* Ispod 621 px mreza je od tri stupca i devet slicica popuni tacno tri reda,
   pa siroka zadnja tu nije potrebna. */
@media (max-width: 620px) {
  .sec-rowan-gallery .gal__thumbs li:last-child { grid-column: auto; }
}

/* Google znak stoji apsolutno u gornjem desnom uglu kartice; bez razmaka
   prvi red citata prolazi ispod njega. */
.sec-terra-referenzen .zcard__tx { padding-right: 32px; }

/* Traka sa ocjenom je inline-flex sa flex-wrap (oba zakljucana), pa na
   uskom ekranu "na Googleu" pada u svoj red i izgleda kao odlomljen dio.
   Smanjenje zvjezdica i pisma vrati sve u jedan red. */
@media (max-width: 560px) {
  .sec-terra-referenzen .revs__score { gap: 8px; font-size: var(--fs-sm) !important; }
  .sec-terra-referenzen .u-stars--lg svg { width: 18px; height: 18px; }
  .sec-terra-referenzen .u-stars--lg .star-part { width: 18px; height: 18px; }
}

/* --------------------------------------------------------------------------
   17. DOPUNE POSLIJE PREGLEDA KLIJENTA
   -------------------------------------------------------------------------- */

/* Inicijal u krugu recenzije stajao je 11 px iznad centra. Uzrok nije
   opticki: .zcard__who span (0,2,1) je specificnije od .zcard__av (0,2,0),
   pa krug uopste NIJE grid nego uspravan flex — place-items: center tu ne
   centrira po glavnoj osi, i slovo padne na vrh stupca.
   display, align-items i justify-content su zakljucani, pa se centrira
   visinom reda: linija visoka koliko i krug nosi slovo u svoju sredinu.
   Zadnjih 1,5 px je opticka korekcija — velika slova sjede iznad sredine
   em-kvadrata, jer prostor za donje produzetke ostaje prazan. */
.sec-terra-referenzen .zcard__who .zcard__av {
  line-height: 42px;
  padding-top: 1px;
}