/* ============================================================
   Stomatološki specijalistički centar Dr Abdagić — Cazin
   Stil sajta. Učitava se POSLIJE tokens.css, section.css (svih 11)
   i brend.css, pa nadjačava njihove boje, pismo i razmake.

   Šta ovaj fajl radi:
     1. jedno pismo na cijelom sajtu — Nunito za naslove, Inter za tekst
     2. jedna paleta — crna i zlatna sa table i logotipa ordinacije
     3. jedna skala zaobljenja, sjenki i vertikalnog ritma
     4. telefon prvo: hero se ispod 640px slaže u blokove

   Raspored se ovdje NE dira: nijedno pravilo ne piše display,
   grid-*, flex-direction, order, position, top/right/bottom/left,
   align-*, justify-* ni text-align na klasama sekcija. Gdje je
   telefonu trebalo drugačije slaganje (hero), pravilo stoji na
   VLASTITOJ klasi (.dr-*) dodanoj u markup, a section.css ostaje
   netaknut.
   ============================================================ */

:root {
  /* Crna i zlatna — sa svjetleće table i logotipa u čekaonici. */
  --dr-ink:        #15120e;
  --dr-ink-2:      #241f18;
  --dr-gold:       #c9a227;   /* zlatna na tamnoj podlozi */
  --dr-gold-lt:    #dcc27a;
  --dr-gold-dp:    #8a6c28;   /* zlatna kao tekst/dugme na svijetloj (4.9:1) */
  --dr-gold-dk:    #6d5420;

  --dr-cream:      #fbf9f5;
  --dr-cream-2:    #f4f0e8;
  --dr-cream-3:    #efe9dd;
  --dr-white:      #ffffff;

  --dr-text:       #1f1a14;
  --dr-muted:      #5c5348;
  --dr-on-dark:    #f3efe8;
  --dr-on-dark-mu: rgba(243, 239, 232, 0.76);

  --dr-line:       rgba(21, 18, 14, 0.12);
  --dr-line-2:     rgba(21, 18, 14, 0.22);
  --dr-line-dark:  rgba(243, 239, 232, 0.20);

  --dr-shadow-c:   rgba(40, 32, 20, 0.18);
}

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

body {
  margin: 0;
  background: var(--dr-cream);
  color: var(--dr-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; }

/* Sidro ispod fiksnog zaglavlja. */
[id] { scroll-margin-top: 86px; }
@media (max-width: 760px) { [id] { scroll-margin-top: 74px; } }

/* ============================================================
   1 · JEDNO PISMO, JEDNA PALETA, JEDNA SKALA — na svih 11 sekcija
   ============================================================ */

.sec-nordlicht-header,
.sec-atelier-hero,
.sec-sonnenschein-services,
.sec-bloom-referenzen,
.sec-calm-parallax,
.sec-aperta-about,
.sec-rowan-results,
.sec-sonnenschein-instagram,
.sec-sonnenschein-faq,
.sec-fundament-cta,
.sec-terra-footer {
  /* --- pismo: naslovi Nunito, tekst Inter (opšta praksa) --- */
  --ff-display: var(--font-display-rounded);
  --ff-body: var(--font-sans);

  /* --- podloge --- */
  --c-bg: var(--dr-cream);
  --c-bg-alt: var(--dr-cream-2);
  --c-white: var(--dr-white);
  --c-surface: var(--dr-cream-3);
  --c-surface-soft: var(--dr-cream-2);
  --c-surface-warm: var(--dr-cream-2);
  --c-panel: var(--dr-white);
  --c-panel-alt: var(--dr-cream-2);

  /* --- tekst --- */
  --c-ink: var(--dr-ink);
  --c-ink-soft: var(--dr-ink-2);
  --c-text: var(--dr-text);
  --c-text-muted: var(--dr-muted);
  --c-text-invert: var(--dr-on-dark);
  --c-on-dark: var(--dr-on-dark);
  --c-on-dark-mu: var(--dr-on-dark-mu);
  --c-on-canvas: var(--dr-on-dark);
  --c-on-canvas-mu: var(--dr-on-dark-mu);

  /* --- linije --- */
  --c-line: var(--dr-line);
  --c-line-strong: var(--dr-line-2);
  --c-line-dark: var(--dr-line-dark);
  --c-line-invert: var(--dr-line-dark);
  --c-line-canvas: var(--dr-line-dark);
  --c-border: var(--dr-line);
  --c-border-strong: var(--dr-line-2);

  /* --- zlatna umjesto tirkizne/koralne/žute iz templata --- */
  --c-accent: var(--dr-gold-dp);
  --c-accent-dk: var(--dr-gold-dk);
  --c-accent-lt: var(--dr-gold-lt);
  --c-accent-soft: var(--accent-soft);
  --c-accent-tint: var(--accent-soft);
  --c-gold: var(--dr-gold-dp);
  --c-gold-dk: var(--dr-gold-dk);
  --c-gold-soft: var(--accent-soft);
  --c-star: var(--dr-gold-dp);

  /* --- tonske varijante kartica (bile koralna, žuta, mint) --- */
  --c-coral: var(--dr-gold-dp);
  --c-coral-dk: var(--dr-gold-dk);
  --c-coral-soft: #f6ecdc;
  --c-sun: var(--dr-gold-lt);
  --c-sun-soft: #f8f2e2;
  --c-mint: #b8ae95;
  --c-mint-soft: #eeece3;

  /* --- značke i podvlake --- */
  --chip-bg: var(--accent-soft);
  --chip-fg: var(--dr-gold-dk);
  --chip-dot: var(--dr-gold-dp);
  --mark: var(--dr-gold-lt);

  /* --- zaobljenja: mirna, ista svuda --- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 28px;
  --r-img: 14px;
  --r-gallery: 14px;
  --r-panel: 18px;
  --r-squircle: 18px;
  --r-shoulder: 18px;
  --r-shoulder-sm: 14px;
  --r-shoulder-br: 18px;

  /* --- sjenke: jedna porodica, topla i tiha --- */
  --sh-xs: 0 1px 2px rgba(40, 32, 20, 0.06);
  --sh-sm: 0 2px 8px rgba(40, 32, 20, 0.07);
  --sh-md: 0 10px 24px -10px var(--dr-shadow-c);
  --sh-lg: 0 20px 44px -18px var(--dr-shadow-c);
  --sh-xl: 0 34px 70px -24px var(--dr-shadow-c);

  /* --- isti vertikalni ritam u svakoj sekciji --- */
  --section-y: clamp(56px, 7vw, 104px);
}

/* Naslovi: jedna težina i jedan razmak slova na cijelom sajtu. */
.sec-nordlicht-header :is(h1, h2, h3),
.sec-atelier-hero :is(h1, h2, h3),
.sec-sonnenschein-services :is(h1, h2, h3),
.sec-bloom-referenzen :is(h1, h2, h3),
.sec-calm-parallax :is(h1, h2, h3),
.sec-aperta-about :is(h1, h2, h3),
.sec-rowan-results :is(h1, h2, h3),
.sec-sonnenschein-instagram :is(h1, h2, h3),
.sec-sonnenschein-faq :is(h1, h2, h3),
.sec-fundament-cta :is(h1, h2, h3),
.sec-terra-footer :is(h1, h2, h3) {
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Naizmjenične trake — sekcije nose svoju podlogu, ovo je ispod njih. */
.band-odd { background: var(--dr-cream); }
.band-even { background: var(--dr-cream-2); }

/* ============================================================
   2 · ZAGLAVLJE
   ============================================================ */

.sec-nordlicht-header {
  --c-canvas: var(--dr-ink);
  --c-canvas-lt: var(--dr-ink-2);
  --c-canvas-dp: #0d0b08;
}

.sec-nordlicht-header .brand__mark { color: var(--dr-ink); }
.sec-nordlicht-header .brand__text strong {
  font-family: var(--ff-display);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.sec-nordlicht-header .brand__text small {
  color: var(--dr-muted);
  letter-spacing: 0.02em;
}
.sec-nordlicht-header .site-nav a { font-weight: 600; }
.sec-nordlicht-header .head-tel { font-weight: 600; }

/* WhatsApp dugme u zaglavlju — zeleno da se prepozna, ne zlatno. */
.sec-nordlicht-header .head-cta.dr-wa,
.sec-nordlicht-header .gmenu__foot .dr-wa {
  --btn-bg: #128c7e;
  --btn-fg: #ffffff;
  --btn-bd: transparent;
  gap: 8px;
  font-weight: 700;
}
.sec-nordlicht-header .head-cta.dr-wa:hover,
.sec-nordlicht-header .gmenu__foot .dr-wa:hover { --btn-bg: #0e6f63; }
.sec-nordlicht-header .head-cta.dr-wa svg { width: 18px; height: 18px; flex: none; }

.sec-nordlicht-header .gmenu__hours { color: var(--dr-on-dark-mu); }

/* Donja traka na telefonu. */
.sec-nordlicht-header .mobile-bar {
  background: rgba(21, 18, 14, 0.95);
  border-color: var(--dr-line-dark);
}
.sec-nordlicht-header .mobile-bar__i--wa { color: #7fe0c8; }
.sec-nordlicht-header .mobile-bar__i--cta {
  background: var(--dr-gold);
  color: var(--dr-ink);
}

/* ============================================================
   3 · HERO
   ============================================================ */

.sec-atelier-hero .hero { background: var(--dr-ink); }
.sec-atelier-hero .hero__label { color: var(--dr-gold); letter-spacing: 0.12em; }
.sec-atelier-hero .hero h1 { font-weight: 800; line-height: 1.06; }
.sec-atelier-hero .hero h1 .u-em {
  color: var(--dr-gold);
  font-style: normal;
}
.sec-atelier-hero .hero__lead { color: rgba(243, 239, 232, 0.86); }

/* Glavno dugme: zlatno na crnom. Drugo je lakše, obrubljeno. */
.sec-atelier-hero .u-btn--ivory {
  --btn-bg: var(--dr-gold);
  --btn-fg: var(--dr-ink);
  --btn-bd: transparent;
  font-weight: 700;
}
.sec-atelier-hero .u-btn--ivory:hover { --btn-bg: var(--dr-gold-lt); }

/* Kadar: lica tima su u sredini fotografije, ne uz ivicu. */
.sec-atelier-hero .hero__media :is(img, video) { object-position: 58% 42%; }

/* ============================================================
   4 · USLUGE / KAKO RADIMO
   ============================================================ */

.sec-sonnenschein-services .bento { border-radius: var(--r-lg); }
.sec-sonnenschein-services .bento__ic { border-radius: var(--r-md); }
.sec-sonnenschein-services .bento h3 { font-weight: 700; }
.sec-sonnenschein-services .bento__go {
  color: var(--dr-gold-dk);
  font-weight: 700;
}
.sec-sonnenschein-services .bento--hero { background: var(--dr-ink); color: var(--dr-on-dark); }
.sec-sonnenschein-services .bento--hero :is(h3, p, li) { color: inherit; }
.sec-sonnenschein-services .bento--hero p,
.sec-sonnenschein-services .bento--hero .bento__list li { color: var(--dr-on-dark-mu); }
.sec-sonnenschein-services .bento--hero .bento__ic {
  background: rgba(201, 162, 39, 0.16);
  color: var(--dr-gold);
}
.sec-sonnenschein-services .bento--hero .bento__go { color: var(--dr-gold); }

/* ============================================================
   5 · RECENZIJE
   ============================================================ */

.sec-bloom-referenzen .u-label { color: var(--dr-gold-dk); letter-spacing: 0.12em; }
.sec-bloom-referenzen .gsum {
  background: var(--dr-white);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}
.sec-bloom-referenzen .gsum__score strong { font-family: var(--ff-display); font-weight: 800; }
.sec-bloom-referenzen .u-stars { color: var(--dr-gold-dp); }
.sec-bloom-referenzen .u-stars .is-off { color: var(--dr-line-2); }
.sec-bloom-referenzen .gsum__link { color: var(--dr-gold-dk); font-weight: 600; }
.sec-bloom-referenzen .rev {
  background: var(--dr-white);
  border-radius: var(--r-lg);
  border: 1px solid var(--dr-line);
  box-shadow: var(--sh-sm);
}
.sec-bloom-referenzen .rev__av {
  background: var(--dr-ink);
  color: var(--dr-gold);
  font-family: var(--ff-display);
  font-weight: 700;
}
.sec-bloom-referenzen .rev__who strong { font-weight: 700; }
.sec-bloom-referenzen .rev__more { margin-top: 14px; }
.sec-bloom-referenzen .rev__more a {
  color: var(--dr-gold-dk);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.sec-bloom-referenzen .rev__more a:hover { color: var(--dr-ink); }
.sec-bloom-referenzen .rnav {
  border-radius: 999px;
  border: 1px solid var(--dr-line-2);
  background: var(--dr-white);
  color: var(--dr-ink);
}
.sec-bloom-referenzen .rnav:hover:not(:disabled) { background: var(--dr-ink); color: var(--dr-gold); }

/* ============================================================
   6 · TRAKA SA BROJEVIMA (parallax)
   ============================================================ */

.sec-calm-parallax .plx__veil {
  background:
    linear-gradient(180deg, rgba(21, 18, 14, 0.62) 0%, rgba(21, 18, 14, 0.74) 60%, rgba(21, 18, 14, 0.86) 100%);
}
.sec-calm-parallax .plx__eyebrow { color: var(--dr-gold); letter-spacing: 0.12em; }
.sec-calm-parallax .plx__title { font-weight: 800; }
.sec-calm-parallax .plx__num {
  font-family: var(--ff-display);
  font-weight: 800;
  color: var(--dr-gold);
}
.sec-calm-parallax .plx__label { color: var(--dr-on-dark-mu); }
.sec-calm-parallax .u-btn--white {
  --btn-bg: var(--dr-gold);
  --btn-fg: var(--dr-ink);
  --btn-bd: transparent;
  font-weight: 700;
}
.sec-calm-parallax .u-btn--white:hover { --btn-bg: var(--dr-gold-lt); }

/* ============================================================
   7 · O NAMA
   ============================================================ */

.sec-aperta-about .u-label { color: var(--dr-gold-dk); letter-spacing: 0.12em; }
.sec-aperta-about .u-arc { --arc-c: var(--dr-gold-dp); }
.sec-aperta-about .abt__media img { border-radius: var(--r-lg); }
.sec-aperta-about .abt__media figcaption { color: var(--dr-muted); }
.sec-aperta-about .abt__facts dt { color: var(--dr-muted); letter-spacing: 0.1em; }
.sec-aperta-about .abt__facts dd { font-family: var(--ff-display); font-weight: 700; }
.sec-aperta-about .promise {
  background: var(--dr-ink);
  color: var(--dr-on-dark);
  border-radius: var(--r-xl);
}
.sec-aperta-about .promise h3 { color: var(--dr-gold); }
.sec-aperta-about .promise p { color: var(--dr-on-dark-mu); }

/* ============================================================
   8 · PRIJE I POSLIJE
   ============================================================ */

.sec-rowan-results .u-label { color: var(--dr-gold-dk); letter-spacing: 0.12em; }
.sec-rowan-results .cmp { border-radius: var(--r-lg); }
.sec-rowan-results .cmp__tag {
  background: rgba(21, 18, 14, 0.78);
  color: var(--dr-on-dark);
  border-radius: 999px;
  font-weight: 600;
}
.sec-rowan-results .cmp__line { background: var(--dr-gold); }
.sec-rowan-results .case__b {
  border-radius: 999px;
  border: 1px solid var(--dr-line-2);
  font-weight: 600;
}
.sec-rowan-results .case__b:hover,
.sec-rowan-results .case__b[aria-pressed="true"] {
  background: var(--dr-ink);
  color: var(--dr-gold);
  border-color: var(--dr-ink);
}
.sec-rowan-results .case h3 { font-weight: 700; }

/* ============================================================
   9 · GALERIJA
   ============================================================ */

.sec-sonnenschein-instagram .reel__link { border-radius: var(--r-lg); }
.sec-sonnenschein-instagram .reel img { border-radius: var(--r-lg); }
.sec-sonnenschein-instagram .reel__meta strong { font-family: var(--ff-display); font-weight: 700; }
.sec-sonnenschein-instagram .ig__arrow {
  border-radius: 999px;
  border: 1px solid var(--dr-line-2);
  background: var(--dr-white);
  color: var(--dr-ink);
}
.sec-sonnenschein-instagram .ig__arrow:hover:not(:disabled) { background: var(--dr-ink); color: var(--dr-gold); }

/* ============================================================
   10 · PITANJA
   ============================================================ */

.sec-sonnenschein-faq .qa { border-radius: var(--r-lg); }
.sec-sonnenschein-faq .qa--mint { background: var(--c-mint-soft); }
.sec-sonnenschein-faq .qa--sun { background: var(--c-sun-soft); }
.sec-sonnenschein-faq .qa--coral { background: var(--c-coral-soft); }
.sec-sonnenschein-faq .qa__q button { font-family: var(--ff-display); font-weight: 700; }
.sec-sonnenschein-faq .qa__in p { color: var(--dr-muted); }

/* ============================================================
   11 · KONTAKT
   ============================================================ */

.sec-fundament-cta .cta { background: var(--dr-ink); color: var(--dr-on-dark); }
.sec-fundament-cta .cta__label { color: var(--dr-gold); letter-spacing: 0.12em; }
.sec-fundament-cta .cta h2 { color: var(--dr-on-dark); font-weight: 800; }
.sec-fundament-cta .cta__copy p { color: var(--dr-on-dark-mu); }
.sec-fundament-cta .cta__status { color: var(--dr-on-dark-mu); }
.sec-fundament-cta .crow {
  border-radius: var(--r-lg);
  border: 1px solid var(--dr-line-dark);
  background: rgba(243, 239, 232, 0.06);
  color: var(--dr-on-dark);
}
.sec-fundament-cta .crow:hover { background: rgba(243, 239, 232, 0.12); }
.sec-fundament-cta .crow small { color: var(--dr-on-dark-mu); }
.sec-fundament-cta .crow strong { font-family: var(--ff-display); font-weight: 700; }
.sec-fundament-cta .crow--wa { background: #128c7e; border-color: #128c7e; color: #fff; }
.sec-fundament-cta .crow--wa:hover { background: #0e6f63; border-color: #0e6f63; }
.sec-fundament-cta .crow--wa small { color: rgba(255, 255, 255, 0.82); }
.sec-fundament-cta .crow--tel .crow__ic { color: var(--dr-gold); }

/* ============================================================
   12 · PODNOŽJE
   ============================================================ */

.sec-terra-footer .ftr { background: var(--dr-ink); color: var(--dr-on-dark); }
.sec-terra-footer .ftr__word span { font-family: var(--ff-display); font-weight: 800; color: var(--dr-on-dark); }
.sec-terra-footer .ftr__word small { color: var(--dr-gold); }
.sec-terra-footer .ftr__col h3 { color: var(--dr-gold); letter-spacing: 0.1em; }
.sec-terra-footer :is(address, .ftr__hours, .ftr__links a, .ftr__bar p) { color: var(--dr-on-dark-mu); }
.sec-terra-footer .ftr__hours th { color: var(--dr-on-dark); font-weight: 600; }
.sec-terra-footer .ftr__links a:hover { color: var(--dr-gold); }
.sec-terra-footer .ftr__dir { color: var(--dr-gold); font-weight: 600; }
.sec-terra-footer .ftr__top-btn {
  border-radius: 999px;
  border: 1px solid var(--dr-line-dark);
  color: var(--dr-on-dark);
}
.sec-terra-footer .ftr__top-btn:hover { background: rgba(243, 239, 232, 0.1); color: var(--dr-gold); }

/* ============================================================
   13 · TELEFON — odluke donesene na 375px
   ============================================================ */

@media (max-width: 640px) {

  /* --- Hero: fotografija je vlastiti blok, tekst ide ISPOD nje.
         Pravila stoje na .dr-* klasama (moje, dodane u markup),
         udvostručenim da nadjačaju section.css po specifičnosti —
         geometrija u section.css ostaje netaknuta. --- */
  .sec-atelier-hero .hero {
    min-height: 0;
    padding-block: 0 0;
    flex-wrap: wrap;
    background: var(--dr-ink);
  }
  .dr-hero-media.dr-hero-media {
    position: static;
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    margin-top: 0;                    /* sekcija zaglavlja već čuva prostor */
    transform: none !important;       /* bez paralakse kad slika stoji u toku */
  }
  .dr-hero-media.dr-hero-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: 50% 38%;         /* lica tima ostaju u kadru */
  }
  .dr-hero-scrim.dr-hero-scrim { display: none; }
  .dr-hero-inner.dr-hero-inner {
    flex: 0 0 100%;
    padding-top: 18px;
    padding-bottom: 30px;
    row-gap: 22px;
  }

  /* Iznad pregiba: naslov i jedno dugme. */
  .sec-atelier-hero .hero h1 { font-size: 2rem; line-height: 1.08; }
  .sec-atelier-hero .hero__lead { font-size: 1rem; max-width: 34ch; }
  .sec-atelier-hero .hero__cta { gap: 10px; }
  .sec-atelier-hero .hero__cta .u-btn { width: 100%; }


  /* Kartice i naslovi: manje razmaka, isti ritam. */
  .sec-sonnenschein-services .bento { border-radius: var(--r-md); }
  .sec-sonnenschein-faq .qa { border-radius: var(--r-md); }
  .sec-bloom-referenzen .rev { border-radius: var(--r-md); }
}

/* Fokus se vidi svuda isto. */
.sec :is(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--dr-gold-dp);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   14 · UJEDNAČAVANJE PRIMITIVA
   Dugmad, značke i strelice bile su nacrtane u tri različita
   pisma i tri težine — od sekcije do sekcije. Ovdje postaju
   jedna porodica. Specifičnost je ista kao u section.css, a
   pravilo dolazi poslije, pa pobjeđuje po redoslijedu.
   ============================================================ */

.sec .u-btn {
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: 0.005em;
}
.sec .u-label {
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: 0.12em;
}
.sec .case__b { font-family: var(--ff-display); font-weight: 700; }
.sec .rnav,
.sec .ig__arrow { font-family: var(--ff-display); font-weight: 700; }
.sec-terra-footer .ftr__col h3 { font-family: var(--ff-display); font-weight: 700; }

/* Traka recenzija je crtana za šest kartica, a firma ih ima dvije
   objavljene ovdje. Na širokom ekranu kartice se šire da popune traku
   umjesto da ostane prazan prostor desno; ispod 900px ostaje klizanje. */
@media (min-width: 900px) {
  .sec-bloom-referenzen .rev { flex: 1 1 clamp(320px, 48%, 560px); }
}

/* ============================================================
   15 · DORADE PO ZAHTJEVU KLIJENTA
   ============================================================ */

/* --- Zaglavlje: podnaslov brenda u zlatnoj. Traka je tamna i kad
       stoji preko heroja i kad se zalijepi pri skrolu, pa svijetlo
       zlatna ovdje ima pun kontrast. --- */
.sec-nordlicht-header .brand__text small { color: var(--dr-gold); }

/* Zalijepljena traka je nosila tirkiznu iz templata (nije bila token,
   pa je brend.css nije mogao dohvatiti). Sada je crna kao ostatak. */
.sec-nordlicht-header .site-head.is-stuck { background: rgba(21, 18, 14, 0.92); }

/* --- Prva kartica u „Kako radimo": fotografija tima kao pozadina.
       Zatamnjenje je gradijent koji je najgušći tamo gdje stoji tekst,
       a popušta prema desnoj strani da se na fotografiji i dalje
       razaznaje tim — a ne da postane siva ploha. --- */
.sec-sonnenschein-services .bento--hero {
  background-color: var(--dr-ink);
  background-image:
    linear-gradient(
      100deg,
      rgba(21, 18, 14, 0.95) 0%,
      rgba(21, 18, 14, 0.90) 40%,
      rgba(21, 18, 14, 0.62) 68%,
      rgba(21, 18, 14, 0.40) 100%
    ),
    url('../images/team/97e913ee-ea85-4b82-87b6-7076e83399a0-800.webp');
  background-repeat: no-repeat;
  background-size: auto, cover;
  background-position: center, 62% 34%;
}

/* Uska kartica: tekst ide preko cijele širine, pa zatamnjenje ide
   odozgo prema dolje i fotografija se čita ispod teksta. */
@media (max-width: 900px) {
  .sec-sonnenschein-services .bento--hero {
    background-image:
      linear-gradient(
        180deg,
        rgba(21, 18, 14, 0.72) 0%,
        rgba(21, 18, 14, 0.90) 34%,
        rgba(21, 18, 14, 0.95) 100%
      ),
      url('../images/team/97e913ee-ea85-4b82-87b6-7076e83399a0-800.webp');
    background-position: center, 50% 26%;
  }
}

/* --- Traka sa brojevima (parallax): tamna podloga, niža sekcija.
       Veo je neprozirna crna, pa sekcija čita kao jedna ploha. --- */
.sec-calm-parallax .plx {
  background: var(--dr-ink);
  color: var(--dr-on-dark);
  padding-block: clamp(44px, 5vw, 72px);
}
.sec-calm-parallax .plx__veil { background: var(--dr-ink); }
.sec-calm-parallax .plx__eyebrow { color: var(--dr-gold); }
.sec-calm-parallax .plx__title { color: var(--dr-on-dark); }
.sec-calm-parallax .plx__lead { color: var(--dr-on-dark-mu); }
.sec-calm-parallax .plx__stats {
  background: rgba(243, 239, 232, 0.06);
  border: 1px solid var(--dr-line-dark);
  box-shadow: none;
  margin-top: clamp(26px, 3vw, 40px);
  padding: clamp(20px, 2.4vw, 28px) var(--sp-4);
}
.sec-calm-parallax .plx__stats li { border-right-color: var(--dr-line-dark); }
.sec-calm-parallax .plx__num { color: var(--dr-gold); }
.sec-calm-parallax .plx__label { color: var(--dr-on-dark-mu); }
.sec-calm-parallax .plx__cta { margin-top: clamp(22px, 2.6vw, 32px); }
.sec-calm-parallax .u-btn--white {
  --btn-bg: var(--dr-gold);
  --btn-fg: var(--dr-ink);
  --btn-bd: transparent;
}
.sec-calm-parallax .u-btn--white:hover { --btn-bg: var(--dr-gold-lt); --btn-fg: var(--dr-ink); }

/* --- O nama: podloga je --c-bg-alt. --- */
.sec-aperta-about,
.sec-aperta-about .abt { background: var(--c-bg-alt); }

/* --- „Šta kod nas nećete čuti": kartica je dobila podlogu, ali je
       zadržala samo gornji padding iz templata, pa je tekst dodirivao
       ivicu. Sada ima pun okvir, tiši naslov i hairline umjesto
       debelih zlatnih crta. --- */
.sec-aperta-about .promise {
  background: var(--dr-ink);
  color: var(--dr-on-dark);
  border-radius: var(--r-xl);
  border-top: 0;
  margin-top: clamp(32px, 4vw, 56px);
  padding: clamp(28px, 3.2vw, 44px);
}
.sec-aperta-about .promise h3 {
  color: var(--dr-gold);
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: 0;
}
.sec-aperta-about .promise__grid {
  margin-top: clamp(20px, 2.4vw, 28px);
  gap: clamp(18px, 2.4vw, 34px);
}
.sec-aperta-about .promise__grid p {
  padding-left: var(--sp-3);
  border-left: 1px solid rgba(201, 162, 39, 0.42);
  color: var(--dr-on-dark-mu);
  line-height: 1.62;
}

/* --- Ikona na WhatsApp redu bila je zelena na zelenoj podlozi,
       pa se nije vidjela. --- */
.sec-fundament-cta .crow--wa .crow__ic {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.55);
}
.sec-fundament-cta .crow--wa:hover .crow__ic {
  background: rgba(255, 255, 255, 0.16);
  border-color: #ffffff;
  color: #ffffff;
}

/* ============================================================
   16 · PODNOŽJE — tamnozelena ploha, četiri stupca
   Raspored je onaj koji sekcija već ima (4 stupca u .ftr__grid);
   ovdje se mijenjaju boje, razmaci i veličine.
   ============================================================ */

:root {
  --dr-green-dk: #0a2a25;
  --dr-green-md: #0e3b35;
  --dr-green-lt: #16564c;
  --dr-mint: #7fd8c3;
  --dr-on-green: rgba(255, 255, 255, 0.78);
  --dr-line-green: rgba(255, 255, 255, 0.13);
}

.sec-terra-footer .ftr {
  background:
    radial-gradient(95% 130% at 22% 0%, var(--dr-green-lt) 0%, var(--dr-green-md) 48%, var(--dr-green-dk) 100%);
  padding-block: clamp(44px, 5vw, 72px) var(--sp-5);
}

/* --- Stupci --- */
.sec-terra-footer .ftr__grid {
  padding-block: 0 clamp(28px, 3vw, 44px);
  gap: clamp(28px, 3.4vw, 56px);
}
.sec-terra-footer .ftr__col h3 {
  font-family: var(--ff-display);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dr-mint);
  opacity: 1;
  margin-bottom: var(--sp-4);
}

/* --- Stupac 1: logotip, ime, kratak opis --- */
.dr-ftr-word.dr-ftr-word {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 0;
  padding-bottom: 0;
}
.sec-terra-footer .dr-ftr-mark.dr-ftr-mark {
  flex: none;
  width: 46px; height: 46px;
  font-size: 0;
}
.sec-terra-footer .dr-ftr-mark.dr-ftr-mark svg { width: 46px; height: 46px; }
.sec-terra-footer .dr-ftr-text.dr-ftr-text { font-size: inherit; }
.sec-terra-footer .dr-ftr-text > span {
  font-size: clamp(1.375rem, 2vw, 1.625rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #ffffff;
}
.sec-terra-footer .dr-ftr-text small {
  margin-top: 2px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dr-on-green);
}
.dr-ftr-desc {
  margin: var(--sp-4) 0 0;
  max-width: 30ch;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--dr-on-green);
}

/* --- Stupac 2: veze --- */
.sec-terra-footer .ftr__links { gap: 4px; }
.sec-terra-footer .ftr__links a { color: var(--dr-on-green); }
.sec-terra-footer .ftr__links a:hover { color: var(--dr-mint); }

/* --- Stupac 3: radno vrijeme --- */
.sec-terra-footer .ftr__hours { color: var(--dr-on-green); }
.sec-terra-footer .ftr__hours th {
  padding-block: 12px;
  border-bottom-color: var(--dr-line-green);
}
.sec-terra-footer .ftr__hours td {
  padding-block: 12px;
  color: #ffffff;
  font-weight: 600;
  border-bottom-color: var(--dr-line-green);
}
.dr-ftr-closed { font-weight: 700; }

/* --- Stupac 4: adresa i karta --- */
.sec-terra-footer .ftr__contact address {
  margin-top: 0;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--dr-on-green);
}
.sec-terra-footer .ftr__dir {
  margin-top: var(--sp-3);
  color: var(--dr-mint);
  font-weight: 600;
}
.dr-ftr-pin { display: inline-flex; flex: none; }
.dr-ftr-pin svg { width: 18px; height: 18px; }

/* --- Traka na dnu --- */
.sec-terra-footer .ftr__bar {
  padding-top: var(--sp-4);
  border-top-color: var(--dr-line-green);
  color: var(--dr-on-green);
}
.sec-terra-footer .ftr__bar p { color: var(--dr-on-green); }
.sec-terra-footer .ftr__top-btn {
  padding-inline: 16px;
  color: #ffffff;
  border-bottom-color: var(--dr-line-green);
}
.sec-terra-footer .ftr__top-btn:hover { border-bottom-color: var(--dr-mint); color: var(--dr-mint); }


/* ============================================================
   17 · PREGLED FOTOGRAFIJA (galerija)
   Vlastiti element izvan sekcija — ovdje nema ograničenja
   rasporeda, sve klase su moje.
   ============================================================ */

.dr-lb {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 40px);
  /* Vidljiv čim se ukloni [hidden] — bez prelaza koji ovisi o sličicama:
     ako se animacija ne pokrene, modal ne smije ostati proziran. */
}
.dr-lb[hidden] { display: none; }

.dr-lb__scrim {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(12, 10, 8, 0.93);
  cursor: zoom-out;
}

.dr-lb__panel {
  position: relative;
  width: auto;
  max-width: min(1040px, 100%);
  max-height: 100%;
}

.dr-lb__fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-height: 0;
}

/* Okvir prati fotografiju u piksel — zato strelice stoje uz sliku,
   a ne odbačene na rub praznog panela kad je fotografija uska. */
.dr-lb__frame {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}
.dr-lb__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(74vh, 700px);
  /* Male fotografije (340px) inače stoje kao poštanska marka na crnom. */
  min-width: min(420px, calc(100vw - 56px));
  border-radius: var(--r-lg, 18px);
  background: var(--dr-ink);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.7);
}

.dr-lb__cap {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-display-rounded);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--dr-on-dark);
}
.dr-lb__count {
  font-weight: 500;
  color: rgba(243, 239, 232, 0.62);
  font-variant-numeric: tabular-nums;
}

.dr-lb__nav,
.dr-lb__close {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(243, 239, 232, 0.3);
  background: rgba(21, 18, 14, 0.72);
  color: var(--dr-on-dark);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.dr-lb__nav:hover,
.dr-lb__close:hover {
  background: var(--dr-gold);
  border-color: var(--dr-gold);
  color: var(--dr-ink);
}
.dr-lb__nav svg, .dr-lb__close svg { width: 22px; height: 22px; }
.dr-lb__nav--prev { left: 10px; top: 50%; transform: translateY(-50%); }
.dr-lb__nav--next { right: 10px; top: 50%; transform: translateY(-50%); }
.dr-lb__close { top: 10px; right: 10px; }

@media (max-width: 760px) {
  .dr-lb__nav, .dr-lb__close { width: 42px; height: 42px; }
  .dr-lb__img { max-height: 62vh; min-width: 0; }
  .dr-lb__nav--prev { left: 8px; }
  .dr-lb__nav--next { right: 8px; }
  .dr-lb__close { top: 8px; right: 8px; }
}

/* Pločica galerije je sada dugme — pokaži da je klikabilna. */
.sec-sonnenschein-instagram .reel__link { cursor: zoom-in; }

/* ============================================================
   18 · TELEFON — razmak sekcija 40px
   ============================================================ */

@media (max-width: 640px) {
  .sec-nordlicht-header,
  .sec-atelier-hero,
  .sec-sonnenschein-services,
  .sec-bloom-referenzen,
  .sec-calm-parallax,
  .sec-aperta-about,
  .sec-rowan-results,
  .sec-sonnenschein-instagram,
  .sec-sonnenschein-faq,
  .sec-fundament-cta,
  .sec-terra-footer {
    --section-y: 40px;
  }
  .sec-calm-parallax .plx { padding-block: 40px; }
  .sec-fundament-cta .cta { padding-block: 40px; }
  .sec-terra-footer .ftr { padding-block: 40px calc(40px + 78px); }
  .sec-aperta-about .promise { padding: 24px; }
}

/* ============================================================
   19 · TRAKE NA TELEFONU — jedna kartica po ekranu
   Vrijedi za galeriju i za recenzije. Obje su trake koje se
   prevlače ustranu; raspored se ne dira, mijenja se KORAK.

   Zašto je do sada virila sljedeća kartica: traka ima bočni
   `padding` (gutter), a `scroll-snap-align: start` taj padding
   odskrola — pa je korak trake (kartica + mali razmak) ispadao
   uži od ekrana i desno je ostajao komad sljedeće kartice.

   Rješenje: kartica je široka koliko i sadržaj trake, razmak je
   dva gutter-a, pa je korak tačno jedan ekran; snap je `center`,
   da kartica stoji sa jednakom marginom lijevo i desno.
   ============================================================ */

@media (max-width: 640px) {

  /* --- Galerija --- */
  .sec-sonnenschein-instagram .ig__track {
    /* bilo max-content: pločica tada nema mjerljivu širinu za % */
    width: auto;
    gap: calc(var(--gutter) * 2);
  }
  .sec-sonnenschein-instagram .reel {
    flex: 0 0 100%;
    scroll-snap-align: center;
  }
  .sec-sonnenschein-instagram .reel__link {
    width: 100%;
    /* isti omjer za sve — traka ne poskakuje između uspravnih i
       položenih fotografija dok se prevlači */
    aspect-ratio: 3 / 2;
  }
  /* uspravna: tabla — natpis je u gornjoj polovini */
  .sec-sonnenschein-instagram .reel__link img[src*="3563e9f0"] { object-position: 50% 40%; }
  /* uspravna: recepcija — osoba je iza pulta, u sredini kadra */
  .sec-sonnenschein-instagram .reel__link img[src*="a2f004d4"] { object-position: 50% 45%; }

  /* --- Recenzije --- */
  .sec-bloom-referenzen .revs__rail { gap: calc(var(--gutter) * 2); }
  .sec-bloom-referenzen .rev {
    flex: 0 0 100%;
    scroll-snap-align: center;
  }
}