/* ==========================================================================
   DentaMed — dotjerivanje po sekcijama
   Boje, pismo, razmaci, ivice i kadar slike. Raspored (display, grid-*,
   position, inset, align-*, justify-*, text-align) ostaje u `section.css`.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Aperta — zaglavlje
   -------------------------------------------------------------------------- */

.sec-aperta-header .site-head {
  background: rgba(250, 248, 244, 0.94);
  border-bottom: 1px solid transparent;
}
.sec-aperta-header .site-head.is-stuck {
  border-bottom-color: var(--c-line);
  box-shadow: 0 10px 30px -26px rgba(23, 19, 32, 0.6);
}

.sec-aperta-header .brand { gap: 12px; }
.sec-aperta-header .brand__mark {
  width: 29px;
  height: 40px;
  color: var(--c-accent);
}
.sec-aperta-header .brand__mark img { width: 29px; height: 40px; object-fit: contain; }
.sec-aperta-header .brand__tx strong {
  font-size: 1.34rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.sec-aperta-header .brand__tx small {
  font-family: var(--ff-body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  color: var(--c-accent-dk);
}

.sec-aperta-header .site-nav ul { gap: 4px; }
.sec-aperta-header .site-nav a {
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 10px 15px;
}
.sec-aperta-header .head-cta {
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.sec-aperta-header .head-cta--wa { --btn-bg: var(--c-whatsapp); --btn-fg: #FFFFFF; }
.sec-aperta-header .head-cta--wa:hover { --btn-bg: var(--c-whatsapp-dk); }

.sec-aperta-header .burger { border-radius: var(--r-sm); border-color: var(--c-line-strong); }

.sec-aperta-header .menu { background: var(--c-bg); }
.sec-aperta-header .menu a {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1.0625rem;
}
.sec-aperta-header .menu li:last-child a { color: var(--c-accent-dk); font-weight: 600; }

.sec-aperta-header .mobile-bar__i {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fs-base);
  box-shadow: 0 18px 36px -18px rgba(23, 19, 32, 0.55);
}

/* Kad meni ode pod dugme, WhatsApp u zaglavlju ostaje samo znak — traka
   inače na telefonu nosi tri natpisa jedan do drugog. */
@media (max-width: 760px) {
  .sec-aperta-header .head-cta--wa .head-cta__tx { display: none; }
  .sec-aperta-header .head-cta--wa { padding: 11px 14px; }
}

@media (max-width: 560px) {
  .sec-aperta-header .brand__mark { width: 25px; height: 34px; }
  .sec-aperta-header .brand__mark img { width: 25px; height: 34px; }
  .sec-aperta-header .brand__tx strong { font-size: 1.18rem; }
}

/* --------------------------------------------------------------------------
   2. Atelier — hero
   -------------------------------------------------------------------------- */

/* Zaglavlje je U TOKU stranice (ljepljivo, ne fiksno), pa hero ne treba
   ostavljati prostor za njegovu visinu — to bi bio prazan pojas na vrhu. */
.sec-atelier-hero .hero {
  padding-block: clamp(32px, 4.5vw, 64px) clamp(24px, 2.6vw, 36px);
  background: var(--c-ink);
}

.sec-atelier-hero .hero__media img { object-position: 50% 0%; }

.sec-atelier-hero .hero__scrim {
  background:
    linear-gradient(180deg, rgba(15, 12, 21, 0.52) 0%, rgba(15, 12, 21, 0.14) 26%, rgba(15, 12, 21, 0.60) 72%, rgba(15, 12, 21, 0.90) 100%),
    linear-gradient(100deg, rgba(15, 12, 21, 0.80) 0%, rgba(15, 12, 21, 0.40) 44%, rgba(15, 12, 21, 0.04) 70%);
}

.sec-atelier-hero .hero__label {
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  color: var(--c-gold);
}
.sec-atelier-hero .hero h1 {
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.06;
  color: var(--c-text-invert);
}
.sec-atelier-hero .hero__lead {
  color: rgba(246, 242, 234, 0.86);
  max-width: 40ch;
}
.sec-atelier-hero .hero__cta { gap: 12px; padding-top: var(--sp-2); }
/* Dugmad u ovom templatu nikad nisu nosila znak, pa im veličina nije zadata
   — bez ovoga WhatsApp znak naraste na cijelu visinu dugmeta. */
.sec-atelier-hero .u-btn svg { width: 20px; height: 20px; }
.sec-atelier-hero .u-btn--ivory {
  --btn-bg: var(--c-bg);
  --btn-fg: var(--c-ink);
  --btn-bd: transparent;
}
.sec-atelier-hero .u-btn--ivory:hover { --btn-bg: var(--c-accent-lt); }
.sec-atelier-hero .hero__ghost { --btn-bd: rgba(246, 242, 234, 0.46); }
.sec-atelier-hero .hero__ghost:hover { --btn-bg: rgba(246, 242, 234, 0.14); --btn-bd: var(--c-gold); }

.sec-atelier-hero .hero__meta { border-top-color: rgba(246, 242, 234, 0.24); }
.sec-atelier-hero .hero__meta li { border-right-color: rgba(246, 242, 234, 0.2); }
.sec-atelier-hero .hero__meta span {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--c-gold);
}
.sec-atelier-hero .hero__meta strong {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 1.125rem;
  color: var(--c-text-invert);
}

/* ---- Telefon: slika je vlastiti blok, tekst ide ISPOD nje ----
   `.hero__media` je apsolutna sa `inset: -8% 0` (zaključano). Kad joj se
   zada visina, donja ivica se ignoriše, a `margin-top` poništava onih -8%
   — pa slika dobije stvaran okvir 3:2 na vrhu heroja, bez zatamnjenja.
   Visina heroja je fiksirana `min-height`-om da taj račun bude tačan. */
@media (max-width: 640px) {
  .sec-atelier-hero .hero {
    min-height: 860px;
    padding-block: 250px 28px;
    background: var(--c-ink);
  }
  .sec-atelier-hero .hero__media {
    height: 290px;
    margin-top: 60px;
    transform: none !important;
  }
  .sec-atelier-hero .hero__media img { object-position: 50% 0%; }
  .sec-atelier-hero .hero__scrim { background: none; }
  .sec-atelier-hero .hero__inner {
    background: var(--c-ink);
    padding-top: 26px;
  }
  .sec-atelier-hero .hero__copy { max-width: none; }
  .sec-atelier-hero .hero__meta strong { font-size: var(--fs-md); }
}

/* --------------------------------------------------------------------------
   3. Bloom — usluge
   -------------------------------------------------------------------------- */

.sec-bloom-services .svc { background: var(--c-bg-alt); }
.sec-bloom-services .u-section--alt { background: var(--c-bg-alt); }

.sec-bloom-services .scard {
  border-radius: var(--r-xl);
  border-color: var(--c-line);
  background: var(--c-white);
}
.sec-bloom-services .scard--wide {
  background: linear-gradient(172deg, var(--c-white), var(--c-accent-soft) 160%);
  border-color: var(--c-accent);
}
.sec-bloom-services .scard__ic {
  background: var(--c-accent-soft);
  color: var(--c-accent-dk);
  width: 58px;
  height: 58px;
}
.sec-bloom-services .scard--wide .scard__ic { background: var(--c-ink); color: var(--c-accent-lt); }
.sec-bloom-services .scard h3 { font-size: var(--fs-h3); margin-bottom: 10px; }
.sec-bloom-services .scard__tx { color: var(--c-text-muted); font-size: var(--fs-base); }

.sec-bloom-services .scard__list li::before {
  background: var(--c-accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C5E17' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.4 4.4L19 7.3'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.sec-bloom-services .scard__list { font-size: var(--fs-sm); color: var(--c-text); }

.sec-bloom-services .scard__ask {
  font-family: var(--ff-body);
  font-weight: 600;
  color: var(--c-whatsapp-dk);
}
.sec-bloom-services .scard__ask:hover { color: var(--c-ink); }

/* --------------------------------------------------------------------------
   4. Aperta — recenzije
   -------------------------------------------------------------------------- */

.sec-aperta-referenzen .rev { background: var(--c-bg); }
.sec-aperta-referenzen .u-arc { --arc-c: var(--c-accent); }
.sec-aperta-referenzen .u-arc--teal { --arc-c: var(--c-accent-dk); }

.sec-aperta-referenzen .gsum {
  border-radius: var(--r-lg);
  border-color: var(--c-line);
  background: var(--c-white);
  box-shadow: var(--sh-sm);
  padding: var(--sp-4) var(--sp-5);
}
.sec-aperta-referenzen .gsum__score strong { font-weight: 500; font-size: 2.5rem; }
.sec-aperta-referenzen .u-stars svg { width: 18px; height: 18px; color: var(--c-star); }
.sec-aperta-referenzen .u-stars .is-off { color: rgba(23, 19, 32, 0.18); }
.sec-aperta-referenzen .gsum__link { color: var(--c-accent-dk); }
.sec-aperta-referenzen .gsum__link:hover { color: var(--c-ink); }

.sec-aperta-referenzen .rgroup__h {
  font-size: var(--fs-h4);
  font-weight: 500;
  border-bottom-color: var(--c-line-strong);
}
.sec-aperta-referenzen .rcard {
  border-radius: var(--r-lg);
  border-color: var(--c-line);
  background: var(--c-white);
  box-shadow: var(--sh-xs);
}
.sec-aperta-referenzen .rcard blockquote p {
  font-size: var(--fs-base);
  color: var(--c-text);
}
.sec-aperta-referenzen .rcard__who { font-family: var(--ff-display); font-weight: 500; font-size: var(--fs-base); }
.sec-aperta-referenzen .rcard__tag {
  background: var(--c-accent-soft);
  color: var(--c-accent-dk);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   5. Haven — kako radimo (parallax)
   -------------------------------------------------------------------------- */

.sec-haven-parallax .scrub { background: var(--c-bg); }
.sec-haven-parallax .scrub__frame {
  border-radius: var(--r-2xl);
  background: var(--c-ink);
}
.sec-haven-parallax .scrub__veil {
  background:
    linear-gradient(to right, rgba(15, 12, 21, 0.94) 0%, rgba(15, 12, 21, 0.82) 46%, rgba(15, 12, 21, 0.55) 100%),
    linear-gradient(to top, rgba(15, 12, 21, 0.62), rgba(15, 12, 21, 0) 46%);
}
.sec-haven-parallax .scrub__media img { object-position: 50% 42%; }

.sec-haven-parallax .step::before { background: rgba(246, 242, 234, 0.22); }
.sec-haven-parallax .step__n {
  background: var(--c-accent);
  color: var(--c-ink);
  font-family: var(--ff-display);
  font-weight: 500;
}
.sec-haven-parallax .step h3 { color: var(--c-on-dark); font-weight: 500; }
.sec-haven-parallax .step p { color: var(--c-on-dark-mu); }
.sec-haven-parallax .u-dark h2 { color: var(--c-on-dark); }

@media (max-width: 860px) {
  .sec-haven-parallax .scrub__veil {
    background: linear-gradient(to top, rgba(15, 12, 21, 0.95) 0%, rgba(15, 12, 21, 0.88) 52%, rgba(15, 12, 21, 0.66) 100%);
  }
}

/* --------------------------------------------------------------------------
   6. Aperta — o ordinaciji
   -------------------------------------------------------------------------- */

.sec-aperta-about .abt { background: var(--c-bg); }
.sec-aperta-about .u-arc { --arc-c: var(--c-accent); }

.sec-aperta-about .abt__media :is(img, video) {
  border-radius: var(--r-xl);
  background: var(--c-surface);
  object-position: 50% 22%;
}
.sec-aperta-about .abt__media figcaption {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}
.sec-aperta-about .abt__copy > p { color: var(--c-text); }
.sec-aperta-about .abt__facts { border-color: var(--c-line); }
.sec-aperta-about .abt__facts dt {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  color: var(--c-text-muted);
}
.sec-aperta-about .abt__facts dd {
  font-family: var(--ff-display);
  font-weight: 500;
  color: var(--c-ink);
}

.sec-aperta-about .promise { border-top-color: var(--c-line-strong); }
.sec-aperta-about .promise h3 { color: var(--c-accent-dk); font-weight: 500; }
.sec-aperta-about .promise__grid p {
  border-left-color: var(--c-accent);
  color: var(--c-text-muted);
}
.sec-aperta-about .promise__grid strong { color: var(--c-ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   7. Bloom — prije i poslije
   -------------------------------------------------------------------------- */

.sec-bloom-results .ba { background: var(--c-bg-alt); }
.sec-bloom-results .batab {
  background: var(--c-white);
  border-color: var(--c-line-strong);
  font-family: var(--ff-body);
  font-weight: 600;
  color: var(--c-text);
}
.sec-bloom-results .batab:hover { background: var(--c-bg); border-color: var(--c-accent); }
.sec-bloom-results .batab.is-on {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-bg);
}
.sec-bloom-results .ba__panels { max-width: 760px; margin-inline: auto; }
.sec-bloom-results .cmp {
  border-radius: var(--r-xl);
  background: var(--c-surface);
  box-shadow: var(--sh-lg);
}
.sec-bloom-results .cmp__tag {
  background: rgba(250, 248, 244, 0.94);
  color: var(--c-ink);
  font-family: var(--ff-body);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.sec-bloom-results .cmp__line i::before,
.sec-bloom-results .cmp__line i::after { border-color: var(--c-ink); }

/* --------------------------------------------------------------------------
   8. Fundament — galerija
   -------------------------------------------------------------------------- */

.sec-fundament-instagram .ig { background: var(--c-bg); }

.sec-fundament-instagram .ig__profile {
  background: var(--c-white);
  border-color: var(--c-line);
  border-radius: var(--r-pill);
}
.sec-fundament-instagram .ig__profile:hover { border-color: var(--c-accent); }
.sec-fundament-instagram .ig__profile-ic {
  background: var(--c-ink);
  color: var(--c-accent-lt);
}
.sec-fundament-instagram .ig__profile-tx strong {
  font-family: var(--ff-display);
  font-weight: 500;
  color: var(--c-ink);
}
.sec-fundament-instagram .ig__profile-tx small { color: var(--c-text-muted); }

/* Uspravan okvir 3:4 umjesto 9:16 — fotografije nisu snimci ekrana
   telefona, pa im uski okvir siječe ljude. */
.sec-fundament-instagram .reel__link {
  aspect-ratio: 3 / 4;
  border-radius: var(--r-xl);
  background: var(--c-surface);
  box-shadow: var(--sh-md);
  cursor: zoom-in;
}
.sec-fundament-instagram .reel__link::after {
  height: 42%;
  background: linear-gradient(180deg, rgba(15, 12, 21, 0), rgba(15, 12, 21, 0.86));
}
.sec-fundament-instagram .reel:nth-child(1) .reel__link img { object-position: 50% 42%; }
.sec-fundament-instagram .reel:nth-child(2) .reel__link img { object-position: 50% 50%; }
.sec-fundament-instagram .reel:nth-child(3) .reel__link img { object-position: 50% 32%; }

.sec-fundament-instagram .reel__meta { padding: 18px 20px 20px; }
.sec-fundament-instagram .reel__meta strong {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-md);
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   9. Fundament — pitanja
   -------------------------------------------------------------------------- */

.sec-fundament-faq .faq { background: var(--c-bg-alt); }
.sec-fundament-faq .faq__note { color: var(--c-text-muted); }
.sec-fundament-faq .u-btn--line {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink);
  --btn-bd: var(--c-line-strong);
}
.sec-fundament-faq .u-btn--line:hover { --btn-bd: var(--c-accent); --btn-bg: var(--c-white); }

.sec-fundament-faq .faq__list { border-top-color: var(--c-line); }
.sec-fundament-faq .qa { border-bottom-color: var(--c-line); }
.sec-fundament-faq .qa__seal {
  font-family: var(--ff-body);
  font-weight: 600;
  border-color: var(--c-line-strong);
  color: var(--c-text-muted);
}
.sec-fundament-faq .qa__q button[aria-expanded="true"] .qa__seal {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-ink);
}
.sec-fundament-faq .qa__t {
  font-family: var(--ff-display);
  font-weight: 500;
  color: var(--c-ink);
}
.sec-fundament-faq .qa__q button:hover .qa__t { color: var(--c-accent-dk); }
.sec-fundament-faq .qa__sign::before { border-color: var(--c-accent-dk); }
.sec-fundament-faq .qa__in p { color: var(--c-text-muted); }

/* --------------------------------------------------------------------------
   10. Calm Clinical — podnožje
   -------------------------------------------------------------------------- */

.sec-calm-footer .ftr {
  background:
    radial-gradient(120% 100% at 10% 0%, #2C2439 0%, #1B1626 48%, #100D18 100%);
  color: rgba(246, 242, 234, 0.78);
}
.sec-calm-footer .ftr__logo-mark {
  width: 34px;
  height: 46px;
  border-radius: 0;
  background: none;
}
.sec-calm-footer .ftr__logo-mark img { width: 34px; height: 46px; object-fit: contain; }
.sec-calm-footer .ftr__logo-text strong { font-weight: 500; font-size: 1.32rem; letter-spacing: 0.01em; }
.sec-calm-footer .ftr__logo-text small { color: var(--c-accent-lt); letter-spacing: 0.09em; }
.sec-calm-footer .ftr__blurb { color: rgba(246, 242, 234, 0.72); }

.sec-calm-footer .ftr__social a {
  background: rgba(246, 242, 234, 0.08);
  border-color: rgba(246, 242, 234, 0.16);
  color: var(--c-on-dark);
}
.sec-calm-footer .ftr__social a:hover { background: rgba(198, 162, 80, 0.24); border-color: var(--c-accent); }

.sec-calm-footer .ftr__h {
  font-family: var(--ff-body);
  font-weight: 600;
  color: var(--c-accent);
  letter-spacing: var(--ls-label);
}
.sec-calm-footer .ftr__col ul a { color: rgba(246, 242, 234, 0.76); }
.sec-calm-footer .ftr__col ul a:hover { color: var(--c-accent-lt); }

.sec-calm-footer .ftr__contact address { color: rgba(246, 242, 234, 0.76); }
.sec-calm-footer .ftr__link { color: rgba(246, 242, 234, 0.82); }
.sec-calm-footer .ftr__link:hover { color: var(--c-accent-lt); }
.sec-calm-footer .ftr__link--strong {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 1.375rem;
  color: #FFFFFF;
}
.sec-calm-footer .ftr__map svg { color: var(--c-accent); }

.sec-calm-footer .ftr__hours th { color: rgba(246, 242, 234, 0.66); }
.sec-calm-footer .ftr__hours td { color: #FFFFFF; }
.sec-calm-footer .ftr__hours th,
.sec-calm-footer .ftr__hours td { border-bottom-color: rgba(246, 242, 234, 0.14); }

.sec-calm-footer .ftr__bar { border-top-color: rgba(246, 242, 234, 0.12); }
.sec-calm-footer .ftr__bar-inner p { color: rgba(246, 242, 234, 0.6); }

.sec-calm-footer .ftr__top {
  background: var(--c-accent);
  color: var(--c-ink);
  box-shadow: var(--sh-lg);
}
.sec-calm-footer .ftr__top:hover { background: var(--c-accent-lt); }