/* =========================================================================
   Services hub + the three service pages (WP4). Generators: app/build/pages/services.py,
   service-*.py (+ _svc.py). In core: hero (tf-svc-hero = alias of tf-hero--page), tf-faq,
   fit lists (tf-fit__list / tf-fit--no = tf-list--diamond), card padding.
   SR: Dodaci samo za strane usluga.
   ========================================================================= */

/* Small meta row: "A ......... 4 to 10 weeks" */
.tf-svc-meta p {
  display: flex; justify-content: space-between; gap: 12px; margin: 0;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--tf-accent);
}
.tf-svc-meta p span + span { color: var(--tf-n400); }

/* Cards on the surface band stay dark */
.elementor-element.tf-card.tf-svc-card,
.elementor-element.tf-card.tf-svc-step { background-color: #000; }
.tf-card--outline.tf-svc-step { background-color: transparent; }
.tf-svc-row, .tf-svc-related { color: inherit; text-decoration: none; }
.tf-svc-row .tf-tags { justify-self: end; }
.tf-svc-row .tf-tag { white-space: normal; }

/* Related cards: dimmed image + dark gradient */
.elementor-element.tf-svc-related { background-color: #000; box-shadow: 0 0 0 1px var(--tf-divider); }
.tf-svc-related .tf-media--fill img { opacity: .55; }
.tf-svc-related .tf-media--fill::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .95), rgba(0, 0, 0, .2));
}
.tf-svc-related > :not(.tf-media--fill) { position: relative; z-index: 1; }
.tf-svc-related .tf-body p { color: var(--tf-n300); }
.tf-svc-explore p { margin: 6px 0 0; }

/* Fit cards / platforms: muted kickers */
.tf-fit--no .tf-kicker p { color: var(--tf-n500); }
.tf-svc-platforms .tf-kicker p { color: var(--tf-n500); letter-spacing: .12em; }

/* CTA title size (design clamp 40-80) */
.tf-svc-cta .tf-svc-cta__title .elementor-heading-title { font-size: clamp(40px, 5.6vw, 80px); line-height: .98; letter-spacing: -.04em; }
.tf-svc-cta .tf-svc-cta__title { margin-top: 0; margin-bottom: 20px; }
.tf-svc-cta .tf-svc-cta__text p { max-width: 40ch; margin: 0 auto 30px; font-size: 18px; }

@media (max-width: 767px) {
  .tf-svc-row .tf-num .elementor-heading-title { font-size: 44px; }
  .tf-svc-row .tf-tags { justify-self: start; }
}