/* ==========================================================================
   QUATTRO DENT — stil sajta
   Učitava se POSLIJE `sekcije/*/section.css` i `sekcije/brend.css`.

   Pravilo: raspored (display, grid-*, flex-direction, order, position,
   align-*, justify-*, text-align) ostaje u `section.css`. Ovdje su boja,
   pismo, razmak, zaobljenje, sjenka i kadar slike.

   Sekcije dolaze iz 12 različitih templata i svaka nosi SVOJ set tokena
   sa istim imenima. Zato se cijeli sajt ujednačava tako što se ti tokeni
   prevežu — jednim blokom, bez diranja markupa.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Osnova dokumenta
   -------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #f7fafc;
  color: #16303f;
  font-family: 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main { overflow-x: clip; }

::selection { background: #0c74a8; color: #fff; }

:is(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid #0c74a8;
  outline-offset: 3px;
  border-radius: 6px;
}

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

/* --------------------------------------------------------------------------
   2. Jedan set tokena za svih 12 sekcija
   Pismo, skala, zaobljenja, sjenke, ritam i pokret — isti svuda.
   -------------------------------------------------------------------------- */

.sec-terra-header,
.sec-bloom-hero,
.sec-meridian-services,
.sec-bloom-referenzen,
.sec-nordlicht-parallax,
.sec-dental-house-about,
.sec-quiet-hours-results,
.sec-fundament-instagram,
.sec-radix-faq,
.sec-klar-cta,
.sec-sonnenschein-footer {
  /* ---- pismo: JEDAN par na cijelom sajtu ---- */
  --ff-display: var(--font-display-rounded);   /* Nunito — opšta praksa */
  --ff-body:    var(--font-sans);              /* Inter */

  /* ---- tipografska skala ---- */
  --fs-xs:   0.8125rem;
  --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.55vw + 1rem, 1.375rem);
  --fs-h3:   clamp(1.3125rem, 0.95vw + 1.1rem, 1.75rem);
  --fs-h2:   clamp(1.75rem, 2.2vw + 1.15rem, 2.625rem);
  --fs-h1:   clamp(1.9375rem, 3.9vw + 1.05rem, 3.5rem);
  --fs-metric: clamp(2rem, 2.4vw + 1.3rem, 3rem);

  --lh-tight: 1.12;
  --lh-snug:  1.25;
  --lh-body:  1.65;
  --ls-tight: -0.018em;
  --ls-label:  0.14em;

  /* ---- zaobljenja ---- */
  --r-xs:  8px;
  --r-sm:  12px;
  --r-md:  16px;
  --r-lg:  22px;
  --r-xl:  28px;
  --r-2xl: 36px;
  --r-gallery: 16px;
  --r-panel: 28px;
  --r-squircle: 26px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* ---- sjenke: hladne, plitke ---- */
  --sh-xs: 0 1px 2px rgba(13, 38, 55, 0.05);
  --sh-sm: 0 2px 10px -4px rgba(13, 38, 55, 0.14);
  --sh-md: 0 14px 32px -16px rgba(13, 38, 55, 0.20);
  --sh-lg: 0 26px 56px -24px rgba(13, 38, 55, 0.26);
  --sh-xl: 0 44px 90px -34px rgba(13, 38, 55, 0.30);

  /* ---- ritam ---- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 16px;
  --sp-4: 24px;
  --sp-5: 32px;
  --sp-6: 44px;
  --sp-7: 64px;
  --sp-8: 88px;
  --sp-9: 120px;

  --section-y: clamp(56px, 7.5vw, 104px);
  --panel-y:   clamp(56px, 7.5vw, 104px);
  --panel-gap: clamp(20px, 3vw, 36px);
  --gutter:    clamp(18px, 5vw, 40px);
  --pad:       clamp(18px, 5vw, 40px);
  --maxw:      1180px;
  --header-h:  72px;

  /* ---- pokret ---- */
  --t-fast: 140ms;
  --t-base: 260ms;
  --t-slow: 560ms;
}

/* --------------------------------------------------------------------------
   3. Paleta — svijetle sekcije
   -------------------------------------------------------------------------- */

.sec-terra-header,
.sec-bloom-hero,
.sec-meridian-services,
.sec-bloom-referenzen,
.sec-dental-house-about,
.sec-quiet-hours-results,
.sec-fundament-instagram,
.sec-klar-cta,
.sec-sonnenschein-footer {
  --c-bg:          #f7fafc;
  --c-bg-alt:      #eef4f8;
  --c-white:       #ffffff;
  --c-surface:     #e2edf4;

  --c-ink:         #0d2637;
  --c-text:        #16303f;
  --c-text-muted:  #4a5c69;

  --c-on-dark:     #eaf3f8;
  --c-on-dark-mu:  rgba(234, 243, 248, 0.76);

  --c-line:        rgba(13, 38, 55, 0.10);
  --c-line-strong: rgba(13, 38, 55, 0.20);
  --c-line-dark:   rgba(234, 243, 248, 0.22);

  --c-whatsapp:    #0b7a63;
  --c-whatsapp-dk: #08624f;
  --c-star:        #d9a520;

  --dot-c: rgba(12, 116, 168, 0.14);
}

/* --------------------------------------------------------------------------
   3a. Naizmjenične podloge
   Neparne sekcije su bijele, parne blago plave, a dvije tamne trake
   (panel i pitanja) razdvajaju cjeline.
   -------------------------------------------------------------------------- */

.sec-terra-header,
.sec-bloom-hero,
.sec-meridian-services,
.sec-dental-house-about,
.sec-fundament-instagram { --c-bg: #ffffff; }

.sec-bloom-referenzen,
.sec-quiet-hours-results,
.sec-klar-cta { --c-bg: #eef4f8; }

/* Sekcije koje podlogu ne čitaju iz `--c-bg` nego iz vlastitog pravila. */
.sec-meridian-services .u-section--alt { background: #ffffff; }
.sec-fundament-instagram .ig { background: #ffffff; }


/* --------------------------------------------------------------------------
   4. Paleta — tamne sekcije
   -------------------------------------------------------------------------- */

.sec-nordlicht-parallax {
  --c-canvas:      #0d2637;
  --c-canvas-lt:   #16455e;
  --c-canvas-dp:   #081c29;
  --c-panel:       #ffffff;
  --c-panel-alt:   #eef4f8;
  --c-surface:     #e2edf4;
  --c-text:        #16303f;
  --c-text-muted:  #4a5c69;
  --c-on-canvas:   #eef6fb;
  --c-on-canvas-mu: rgba(238, 246, 251, 0.80);
  --c-line:        rgba(13, 38, 55, 0.10);
  --c-line-strong: rgba(13, 38, 55, 0.20);
  --c-line-canvas: rgba(238, 246, 251, 0.22);
  --c-whatsapp:    #0b7a63;
  --c-whatsapp-dk: #08624f;
  --c-star:        #d9a520;
}

.sec-radix-faq {
  --c-canvas:      #0d2637;
  --c-canvas-2:    #081c29;
  --c-surface:     #16394e;
  --c-surface-2:   #1d4a63;
  --c-sand:        #cfe3ef;
  --c-on-canvas:   #eef6fb;
  --c-on-canvas-mu: rgba(238, 246, 251, 0.78);
  --c-on-canvas-lo: rgba(238, 246, 251, 0.55);
  --c-light:       #f7fafc;
  --c-ink:         #0d2637;
  --c-ink-mu:      #4a5c69;
  --c-line:        rgba(238, 246, 251, 0.16);
  --c-line-strong: rgba(238, 246, 251, 0.30);
  --c-line-dark:   rgba(13, 38, 55, 0.14);
  --c-whatsapp:    #0b7a63;
  --c-whatsapp-dk: #08624f;
  --c-star:        #e0b23c;
}

/* Podnožje je iz „sunčanog" templata — koral, sunce i menta idu na brend. */
.sec-sonnenschein-footer {
  --c-bg:        #0d2637;
  --c-bg-alt:    #081c29;
  --c-coral:     #0c74a8;
  --c-coral-dk:  #7fc4e6;
  --c-coral-soft: rgba(12, 116, 168, 0.18);
  --c-sun:       #0c74a8;
  --c-sun-soft:  rgba(12, 116, 168, 0.16);
  --c-mint:      #7fc4e6;
  --c-mint-soft: rgba(127, 196, 230, 0.16);
  --c-text:        #eef6fb;
  --c-text-muted:  rgba(238, 246, 251, 0.72);
  --c-text-invert: #ffffff;
  --c-line:        rgba(238, 246, 251, 0.14);
  --c-line-strong: rgba(238, 246, 251, 0.26);
}

/* --------------------------------------------------------------------------
   5. Zajednički potez: naslovi, oznake, dugmad
   -------------------------------------------------------------------------- */

.sec-terra-header :is(h1, h2, h3, h4),
.sec-bloom-hero :is(h1, h2, h3, h4),
.sec-meridian-services :is(h1, h2, h3, h4),
.sec-bloom-referenzen :is(h1, h2, h3, h4),
.sec-nordlicht-parallax :is(h1, h2, h3, h4),
.sec-dental-house-about :is(h1, h2, h3, h4),
.sec-quiet-hours-results :is(h1, h2, h3, h4),
.sec-fundament-instagram :is(h1, h2, h3, h4),
.sec-radix-faq :is(h1, h2, h3, h4),
.sec-klar-cta :is(h1, h2, h3, h4),
.sec-sonnenschein-footer :is(h1, h2, h3, h4) {
  font-family: var(--ff-display);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

.sec-bloom-hero .u-label,
.sec-meridian-services .u-label,
.sec-bloom-referenzen .u-label,
.sec-dental-house-about .u-label,
.sec-quiet-hours-results .u-label,
.sec-fundament-instagram .u-label,
.sec-radix-faq .u-label,
.sec-klar-cta .u-label,
.sec-nordlicht-parallax .u-kicker {
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* Dugmad: jedan oblik na cijelom sajtu. */
.sec-terra-header .u-btn,
.sec-bloom-hero .u-btn,
.sec-nordlicht-parallax .u-btn,
.sec-sonnenschein-footer .u-btn {
  font-family: var(--ff-body);
  font-weight: 600;
  letter-spacing: 0;
  border-radius: var(--r-pill);
}

/* --------------------------------------------------------------------------
   6. 01 — zaglavlje
   -------------------------------------------------------------------------- */

.sec-terra-header .site-head {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--c-line);
}

.sec-terra-header .brand__mark { color: var(--accent); width: 38px; height: 38px; }
.sec-terra-header .brand__mark svg { width: 100%; height: 100%; }

.sec-terra-header .brand__tx strong {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  color: var(--c-ink);
}
.sec-terra-header .brand__tx small {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.sec-terra-header .site-nav a {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-text);
}
.sec-terra-header .site-nav a:hover { color: var(--accent); }

.sec-terra-header .head-tel {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-ink);
}
.sec-terra-header .head-tel:hover { color: var(--accent); }

.sec-terra-header .head-cta--wa {
  background: var(--c-whatsapp);
  border-color: var(--c-whatsapp);
  color: #fff;
  gap: 8px;
}
.sec-terra-header .head-cta--wa:hover {
  background: var(--c-whatsapp-dk);
  border-color: var(--c-whatsapp-dk);
  color: #fff;
}
.sec-terra-header .head-cta--wa svg { width: 18px; height: 18px; }

.sec-terra-header .fmenu { background: var(--c-ink); }
.sec-terra-header .fmenu__list a { font-family: var(--ff-display); font-weight: 700; }

/* Traka na dnu telefona: ostaje puno dugme sa riječju, i na 375 px. */
.sec-terra-header .mobile-bar {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-md);
}
.sec-terra-header .mobile-bar__i { font-weight: 600; font-size: 0.875rem; }
.sec-terra-header .mobile-bar__i--wa { color: var(--c-whatsapp-dk); }
.sec-terra-header .mobile-bar__i--cta { background: var(--accent); }
@media (max-width: 380px) {
  .sec-terra-header .mobile-bar__i span { display: inline; }
  .sec-terra-header .mobile-bar__i { font-size: 0.8125rem; gap: 6px; }
  .sec-terra-header .mobile-bar__i svg { width: 17px; height: 17px; }
}

/* --------------------------------------------------------------------------
   7. 02 — hero
   -------------------------------------------------------------------------- */

.sec-bloom-hero .hero {
  background: linear-gradient(168deg, #ffffff 0%, #f2f8fc 48%, #e7f1f8 100%);
  border-bottom-left-radius: 46% 64px;
  border-bottom-right-radius: 46% 64px;
  padding-block: clamp(28px, 5vw, 72px) clamp(64px, 10vw, 140px);
}

.sec-bloom-hero .hero__blob {
  background: radial-gradient(closest-side, rgba(12, 116, 168, 0.16), transparent 72%);
}

.sec-bloom-hero .u-label { color: var(--accent-strong); }

.sec-bloom-hero .hero__copy h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  max-width: 17ch;
}

.sec-bloom-hero .u-arc { color: var(--accent); }

.sec-bloom-hero .hero__lead {
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--c-text-muted);
  max-width: 46ch;
}

/* Uvod na telefonu: jedna rečenica. Druga se pojavljuje na širem ekranu. */
.u-wide-only { display: none; }
@media (min-width: 641px) { .u-wide-only { display: inline; } }

/* Iznad pregiba: naslov i JEDNO glavno dugme. Drugo je lakše. */
.sec-bloom-hero .hero__act { gap: 10px; }
.sec-bloom-hero .hero__act .u-btn { border-radius: var(--r-pill); gap: 9px; }
.sec-bloom-hero .hero__act .u-btn svg { width: 19px; height: 19px; }
.sec-bloom-hero .hero__act .u-btn--solid {
  background: var(--c-whatsapp);
  border-color: var(--c-whatsapp);
  color: #fff;
  box-shadow: var(--sh-sm);
}
.sec-bloom-hero .hero__act .u-btn--solid:hover {
  background: var(--c-whatsapp-dk);
  border-color: var(--c-whatsapp-dk);
}
.sec-bloom-hero .hero__act .u-btn--line {
  background: transparent;
  border-color: var(--c-line-strong);
  color: var(--c-ink);
}
.sec-bloom-hero .hero__act .u-btn--line:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.sec-bloom-hero .hero__wa { color: var(--c-text-muted); font-size: var(--fs-sm); }

/* Okvir se prilagođava fotografiji: fajl je 1600×900, pa 16:9 znači da
   ništa nije odsječeno — ni žena lijevo ni pacijent u sredini. */
.sec-bloom-hero .hero__cap,
.sec-bloom-hero .hero__cap :is(img, video) {
  aspect-ratio: 16 / 9;
}
.sec-bloom-hero .hero__cap {
  max-height: none;
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-lg);
}
.sec-bloom-hero .hero__cap :is(img, video) { object-position: center; }

/* Krug je logotip, ne fotografija — mora se vidjeti cijeli. */
.sec-bloom-hero .hero__detail {
  border-color: #fff;
  background: #fff;
  box-shadow: var(--sh-md);
}
.sec-bloom-hero .hero__detail img {
  object-fit: contain;
  padding: 9px;
  background: #fff;
}

@media (max-width: 620px) {
  .sec-bloom-hero .hero {
    border-bottom-left-radius: 40% 40px;
    border-bottom-right-radius: 40% 40px;
  }
  .sec-bloom-hero .hero__cap { max-height: none; border-radius: var(--r-xl); }
  .sec-bloom-hero .hero__act .u-btn--solid { flex: 1 1 100%; }
  .sec-bloom-hero .hero__act .u-btn--line { flex: 0 1 auto; }
  /* Zaobljena donja ivica hero sekcije siječe krug sa logotipom ako on visi
     ispod fotografije — na telefonu stoji unutar kadra. */
  .sec-bloom-hero .hero__detail { left: -8px; bottom: 22px; width: 94px; border-width: 4px; }
}

/* --------------------------------------------------------------------------
   8. 03 — usluge
   -------------------------------------------------------------------------- */

.sec-meridian-services .u-label { color: var(--accent-strong); }
.sec-meridian-services .u-head h2 { color: var(--c-ink); font-size: var(--fs-h2); line-height: var(--lh-snug); }
.sec-meridian-services .u-head p { color: var(--c-text-muted); font-size: var(--fs-md); }

.sec-meridian-services .svc {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  padding: clamp(20px, 3vw, 30px);
  box-shadow: var(--sh-xs);
  transition: box-shadow var(--t-base) var(--ease-out),
              transform var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out);
}
.sec-meridian-services .svc:hover {
  box-shadow: var(--sh-md);
  border-color: rgba(12, 116, 168, 0.28);
  transform: translateY(-3px);
}

.sec-meridian-services .svc__ic {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent-strong);
  margin-bottom: var(--sp-3);
}
.sec-meridian-services .svc__ic svg { width: 27px; height: 27px; }

.sec-meridian-services .svc h3 {
  font-size: var(--fs-h4);
  color: var(--c-ink);
  margin-bottom: 8px;
}
.sec-meridian-services .svc > p {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
  margin-bottom: var(--sp-4);
}

.sec-meridian-services .svc__ask {
  color: var(--accent-strong);
  font-weight: 600;
  font-size: var(--fs-sm);
}
.sec-meridian-services .svc__ask:hover { color: var(--c-ink); }

/* --------------------------------------------------------------------------
   9. 04 — recenzije
   -------------------------------------------------------------------------- */

.sec-bloom-referenzen .u-label { color: var(--accent-strong); }
.sec-bloom-referenzen .u-head h2 { color: var(--c-ink); font-size: var(--fs-h2); line-height: var(--lh-snug); }
.sec-bloom-referenzen .u-head p { color: var(--c-text-muted); font-size: var(--fs-md); }

/* Kartica sa ocjenom mora ostati odvojena od podloge sekcije. */
.sec-bloom-referenzen .gsum {
  background: #ffffff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  padding: clamp(20px, 3vw, 28px);
  box-shadow: var(--sh-xs);
}
.sec-bloom-referenzen .gsum__score strong {
  font-family: var(--ff-display);
  font-weight: 800;
  color: var(--c-ink);
}
.sec-bloom-referenzen .u-stars { color: var(--c-star); }
.sec-bloom-referenzen .gsum__count { color: var(--c-text-muted); font-size: var(--fs-sm); }
.sec-bloom-referenzen .gsum__bar { background: var(--c-line); border-radius: var(--r-pill); }
.sec-bloom-referenzen .gsum__bar i { background: var(--c-star); border-radius: var(--r-pill); }
.sec-bloom-referenzen .gsum__k,
.sec-bloom-referenzen .gsum__n { color: var(--c-text-muted); font-size: var(--fs-xs); }
.sec-bloom-referenzen .gsum__link { color: var(--accent-strong); font-weight: 600; font-size: var(--fs-sm); }
.sec-bloom-referenzen .gsum__link:hover { color: var(--c-ink); }

/* --------------------------------------------------------------------------
   10. 05 — panel sa fotografijom
   -------------------------------------------------------------------------- */

/* Bez pozadinske fotografije i bez zaobljenja — puna traka u boji brenda,
   od ivice do ivice. */
.sec-nordlicht-parallax .u-panel {
  margin-inline: 0;
  margin-bottom: 0;
  border-radius: 0;
}
.sec-nordlicht-parallax .plx {
  border-radius: 0;
  min-height: 0;
  background: linear-gradient(160deg, #0d2637 0%, #12455f 100%);
  padding-block: clamp(64px, 8vw, 112px);
}

.sec-nordlicht-parallax .u-kicker { color: #a8d8ef; }
.sec-nordlicht-parallax .plx__title {
  color: #fff;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
}
.sec-nordlicht-parallax .plx__lead {
  color: var(--c-on-canvas-mu);
  font-size: var(--fs-md);
  max-width: 46ch;
}
.sec-nordlicht-parallax .u-btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.sec-nordlicht-parallax .u-btn--accent:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
.sec-nordlicht-parallax .u-btn--ghost {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}
.sec-nordlicht-parallax .u-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

/* --------------------------------------------------------------------------
   11. 06 — o nama
   -------------------------------------------------------------------------- */

.sec-dental-house-about .u-label { color: var(--accent-strong); }
.sec-dental-house-about .about__copy h2 { color: var(--c-ink); font-size: var(--fs-h2); line-height: var(--lh-snug); }
.sec-dental-house-about .about__lead { color: var(--c-text-muted); font-size: var(--fs-lg); }

.sec-dental-house-about .about__media {
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--sh-lg);
}
/* Fiksna visina okvira siječe fotografiju 3:2 — okvir se prilagođava njoj. */
.sec-dental-house-about .about__media :is(img, video) {
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 42% 45%;
  width: 100%;
}

.sec-dental-house-about .about__points li { color: var(--c-text-muted); font-size: var(--fs-sm); }
.sec-dental-house-about .about__points strong { color: var(--c-ink); }
.sec-dental-house-about .about__points svg {
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--r-circle);
  padding: 4px;
  width: 24px; height: 24px;
}

.sec-dental-house-about .about__note {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  border-left: 3px solid var(--accent);
  padding-left: 14px;
}

/* --------------------------------------------------------------------------
   13. 08 — prije i poslije
   -------------------------------------------------------------------------- */

.sec-quiet-hours-results .u-label { color: var(--accent-strong); }
.sec-quiet-hours-results .u-head h2 { color: var(--c-ink); font-size: var(--fs-h2); line-height: var(--lh-snug); }
.sec-quiet-hours-results .u-head p { color: var(--c-text-muted); font-size: var(--fs-md); }

.sec-quiet-hours-results .case {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  padding: clamp(16px, 2.4vw, 24px);
  box-shadow: var(--sh-xs);
}
.sec-quiet-hours-results .case h3 { font-size: var(--fs-h4); color: var(--c-ink); }

.sec-quiet-hours-results .case__pair figure { margin: 0; }
.sec-quiet-hours-results .case__pair img {
  border-radius: var(--r-md);
  aspect-ratio: 900 / 491;
  object-fit: cover;
  width: 100%;
}
.sec-quiet-hours-results .case__pair figcaption {
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  line-height: 1.45;
}
.sec-quiet-hours-results .case__tag {
  background: var(--c-surface);
  color: var(--c-ink);
  border-radius: var(--r-pill);
  font-weight: 600;
}
.sec-quiet-hours-results .case__tag--a { background: var(--accent); color: #fff; }

/* --------------------------------------------------------------------------
   14. 09 — galerija
   -------------------------------------------------------------------------- */

.sec-fundament-instagram .u-label { color: var(--accent-strong); }
.sec-fundament-instagram .u-head h2 { color: var(--c-ink); font-size: var(--fs-h2); line-height: var(--lh-snug); }
.sec-fundament-instagram .u-head p { color: var(--c-text-muted); font-size: var(--fs-md); }

/* Uz profil koji je uklonjen, zaglavlje sekcije uzima punu širinu — inače
   ostaje prazan stubac sa desne strane. */
.sec-fundament-instagram .ig__head .u-head { max-width: none; width: 100%; }
.sec-fundament-instagram .ig__head { margin-bottom: clamp(24px, 3vw, 40px); }

/* Templat ove sekcije ostavlja mjesto za uspravnu traku uz lijevu ivicu
   (`--rail-w`). Te trake na ovom sajtu nema, pa je ostajao prazan pojas od
   88 px i sekcija se nije poklapala sa ostalima. */
.sec-fundament-instagram .u-container { padding-left: var(--gutter); }

/* Okvir 9:16 na telefonu daje tri pločice od skoro 600 px — kraći je omjer
   koji i dalje pokazuje šta je na fotografiji. */
.sec-fundament-instagram .reel__link {
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-gallery);
  box-shadow: var(--sh-sm);
  background: var(--c-surface);
}
@media (min-width: 761px) {
  .sec-fundament-instagram .reel__link { aspect-ratio: 3 / 4; }
}
.sec-fundament-instagram .reel__link :is(img, video) {
  object-position: center;
  transition: transform var(--t-slow) var(--ease-out);
}
.sec-fundament-instagram .reel:hover .reel__link :is(img, video) { transform: scale(1.04); }

/* Sekcija već crta zatamnjenje kroz ::after — drugo preko njega bi ubilo
   fotografiju, pa ovdje ostaje samo tekst. */
.sec-fundament-instagram .reel__link::after {
  background: linear-gradient(180deg, transparent, rgba(8, 28, 41, 0.82));
}
.sec-fundament-instagram .reel__meta {
  background: none;
  color: #fff;
  padding: 14px;
}

/* Pločica je sada dugme koje otvara fotografiju. */
.sec-fundament-instagram button.reel__link {
  width: 100%;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: zoom-in;
  -webkit-appearance: none;
  appearance: none;
}

/* ---- Fotografija preko cijelog ekrana ---- */

.lbx {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 40px);
}
.lbx[hidden] { display: none; }

.lbx__scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 20, 30, 0.92);
  cursor: zoom-out;
}

.lbx__fig {
  position: relative;
  z-index: 1;
  margin: 0;
  display: grid;
  gap: 14px;
  justify-items: center;
  max-width: min(1000px, 100%);
}
.lbx__fig img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 180px);
  width: auto;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
  background: #0d2637;
}
.lbx__fig figcaption {
  color: #eef6fb;
  font-family: 'Inter Variable', Inter, system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
}

/* Dugmad stoje uz ivicu ekrana, a ne preko fotografije: bijel krug sa tamnom
   ikonom se vidi i na svijetloj i na tamnoj fotografiji. */
.lbx__btn {
  position: absolute;
  z-index: 3;
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: #0d2637;
  cursor: pointer;
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.65);
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.lbx__btn svg { width: 25px; height: 25px; }
.lbx__btn:hover { background: #0c74a8; color: #ffffff; }
.lbx__btn:focus-visible { outline: 3px solid #7fc4e6; outline-offset: 3px; }

.lbx__btn--close { top: 20px; right: 20px; }
.lbx__btn--prev  { top: 50%; left: 20px; margin-top: -27px; }
.lbx__btn--next  { top: 50%; right: 20px; margin-top: -27px; }

@media (max-width: 860px) {
  .lbx__fig img { max-height: calc(100vh - 210px); }
  .lbx__btn { width: 50px; height: 50px; }
  .lbx__btn--close { top: 14px; right: 14px; }
  .lbx__btn--prev  { top: auto; bottom: 22px; left: calc(50% - 64px); margin-top: 0; }
  .lbx__btn--next  { top: auto; bottom: 22px; right: calc(50% - 64px); margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .lbx__btn { transition: none; }
}
.sec-fundament-instagram .reel__meta strong {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: #fff;
}

/* --------------------------------------------------------------------------
   15. 10 — pitanja
   -------------------------------------------------------------------------- */

.sec-radix-faq .faq { background: var(--c-canvas); }
.sec-radix-faq .u-section--alt { background: var(--c-canvas); }
.sec-radix-faq .u-label { color: #a8d8ef; }
.sec-radix-faq .u-head h2 { color: #fff; font-size: var(--fs-h2); line-height: var(--lh-snug); }
.sec-radix-faq .u-head p { color: var(--c-on-canvas-mu); font-size: var(--fs-md); }

/* Kartice stoje razmaknuto, pa linija iznad prve nema šta da odvaja. */
.sec-radix-faq .faq__list {
  gap: 12px;
  border-top: 0;
}

.sec-radix-faq .qa {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.sec-radix-faq .qa__q button {
  color: #fff;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-md);
  padding: 20px clamp(20px, 3vw, 30px);
}
.sec-radix-faq .qa__in p {
  color: var(--c-on-canvas-mu);
  font-size: var(--fs-sm);
  line-height: 1.65;
  padding-inline: clamp(20px, 3vw, 30px);
}
.sec-radix-faq .qa__in > p:last-child { padding-bottom: var(--sp-4); }
.sec-radix-faq .qa__sign { color: #a8d8ef; }

.sec-radix-faq .faq__more { color: var(--c-on-canvas-mu); font-size: var(--fs-sm); }
.sec-radix-faq .faq__more a { color: #a8d8ef; font-weight: 600; }
.sec-radix-faq .faq__more a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   16. 11 — kontakt
   -------------------------------------------------------------------------- */

.sec-klar-cta .cta__card {
  background: linear-gradient(155deg, #0d2637 0%, #124a68 100%);
  border-radius: var(--r-2xl);
  padding: clamp(26px, 4vw, 52px);
  box-shadow: var(--sh-lg);
}
.sec-klar-cta .cta__label { color: #a8d8ef; }
.sec-klar-cta .cta__copy h2 { color: #fff; font-size: var(--fs-h2); line-height: var(--lh-snug); }
.sec-klar-cta .cta__copy p { color: rgba(238, 246, 251, 0.80); font-size: var(--fs-md); max-width: 40ch; }
.sec-klar-cta .u-hl { color: #ffffff; }

.sec-klar-cta .crow {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(238, 246, 251, 0.18);
  border-radius: var(--r-lg);
  color: #fff;
  transition: background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.sec-klar-cta .crow:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(238, 246, 251, 0.42);
}
.sec-klar-cta .crow__ic {
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--r-md);
  color: #fff;
}
/* Ikona je bila u istoj boji kao podloga kruga — otud prazan zeleni kvadrat. */
.sec-klar-cta .crow--wa .crow__ic,
.sec-klar-cta .crow--wa:hover .crow__ic { background: var(--c-whatsapp); color: #fff; }
.sec-klar-cta .crow--tel .crow__ic,
.sec-klar-cta .crow--tel:hover .crow__ic { background: rgba(255, 255, 255, 0.12); color: #fff; }
.sec-klar-cta .crow__tx strong { font-family: var(--ff-display); font-weight: 700; font-size: var(--fs-md); color: #fff; }
.sec-klar-cta .crow__tx small { color: rgba(238, 246, 251, 0.72); font-size: var(--fs-xs); }

/* --------------------------------------------------------------------------
   17. 12 — podnožje
   -------------------------------------------------------------------------- */

.sec-sonnenschein-footer .ftr { background: var(--c-bg); color: var(--c-text); }
.sec-sonnenschein-footer .ftr__mark { color: #7fc4e6; width: 40px; height: 40px; }
.sec-sonnenschein-footer .ftr__mark svg { width: 100%; height: 100%; }
.sec-sonnenschein-footer .ftr__logo strong {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 1.125rem;
  color: #fff;
}
.sec-sonnenschein-footer .ftr__blurb { color: var(--c-text-muted); font-size: var(--fs-sm); max-width: 34ch; }

.sec-sonnenschein-footer .ftr__col h3 {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: #7fc4e6;
  font-family: var(--ff-body);
  font-weight: 600;
}
.sec-sonnenschein-footer .ftr__col a { color: var(--c-text-muted); font-size: var(--fs-sm); }
.sec-sonnenschein-footer .ftr__col a:hover { color: #fff; }

.sec-sonnenschein-footer .ftr__hours { font-size: var(--fs-sm); width: 100%; }
.sec-sonnenschein-footer .ftr__hours th { color: var(--c-text-muted); font-weight: 500; }
.sec-sonnenschein-footer .ftr__hours td { color: #fff; font-weight: 600; }

.sec-sonnenschein-footer address {
  font-style: normal;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

/* Lažna siva „karta" iz templata je uklonjena — ostaje veza na Google Mape,
   kao dugme. Stil ide na `span`, da se `display` sekcije ne dira. */
.sec-sonnenschein-footer .ftr__map span {
  margin-top: 14px;
  padding: 10px 18px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-pill);
  color: #fff;
  font-size: var(--fs-sm);
  transition: background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.sec-sonnenschein-footer .ftr__map:hover span {
  background: rgba(255, 255, 255, 0.10);
  border-color: #7fc4e6;
  color: #fff;
}

.sec-sonnenschein-footer .ftr__bar { border-top: 1px solid var(--c-line); }
.sec-sonnenschein-footer .ftr__bar p { color: var(--c-text-muted); font-size: var(--fs-xs); }
.sec-sonnenschein-footer .ftr__top {
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  font-family: var(--ff-body);
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  cursor: pointer;
}
.sec-sonnenschein-footer .ftr__top:hover { color: #fff; border-color: #7fc4e6; }

/* Podnožje na telefonu ima mjesta za lebdeće dugme. */
@media (max-width: 900px) {
  .sec-sonnenschein-footer .ftr { padding-bottom: 96px; }
}

/* --------------------------------------------------------------------------
   17a. Telefon: uspravni razmak sekcija
   Na telefonu je razmak iznad i ispod sadržaja 45 px, na svakoj sekciji.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .sec-terra-header,
  .sec-bloom-hero,
  .sec-meridian-services,
  .sec-bloom-referenzen,
  .sec-nordlicht-parallax,
  .sec-dental-house-about,
  .sec-quiet-hours-results,
  .sec-fundament-instagram,
  .sec-radix-faq,
  .sec-klar-cta,
  .sec-sonnenschein-footer {
    --section-y: 45px;
    --panel-y: 45px;
  }

  .sec-bloom-hero .hero { padding-block: 45px; }
  .sec-nordlicht-parallax .plx { padding-block: 45px; }
  .sec-sonnenschein-footer .ftr { padding-top: 45px; }
}

/* --------------------------------------------------------------------------
   18. Lebdeće WhatsApp dugme
   Uz ikonu ide riječ. Na telefonu se sklanja dok stoji traka iz zaglavlja,
   da ne pokriva drugo dugme.
   -------------------------------------------------------------------------- */

.wa-fab {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px 12px 15px;
  border-radius: 999px;
  background: #0b7a63;
  color: #fff;
  font-family: 'Inter Variable', Inter, system-ui, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 14px 30px -12px rgba(13, 38, 55, 0.55);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 220ms ease,
              background 220ms ease;
}
.wa-fab svg { width: 22px; height: 22px; flex: none; }
.wa-fab:hover { background: #08624f; transform: translateY(-2px); }

/* Dok je traka iz zaglavlja na ekranu, lebdeće dugme se povlači. */
.wa-fab.is-hidden {
  opacity: 0;
  transform: translateY(24px) scale(0.94);
  pointer-events: none;
}

@media (max-width: 900px) {
  .wa-fab { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .wa-fab { transition: none; }
}