/******************************************************************
 * Template 3 - rucna pravila za live preview (nisu iz musteru).
 * sections.css i bootstrap-scoped.css su generisani - ovdje ide samo
 * ono sto treba konfiguratoru / izabranoj boji.
 ******************************************************************/

/* Svaki mountani fragment je container: @container tpl3-stage pravila iz
   generisanog CSS-a gledaju sirinu stage-a (1440 / 390 u previewu, sirinu
   stranice u finished modu), ne pravog prozora. */
.tpl3-stage {
  container-type: inline-size;
  container-name: tpl3-stage;
}

/* Tekst na boji brenda. --tpl3-on-primary postavlja live-sections.js samo za
   boje razlicite od muster zlatne - bez njega vazi boja iz musteru (fallback). */
.tpl3-scope .navbar-nav .nav-item:last-child .nav-link,
.tpl3-scope .btn-muster:hover,
.tpl3-scope .hero-disturber .dist-text {
  color: var(--tpl3-on-primary, #fff);
}
.tpl3-scope .footer-menu .nav-item .nav-link {
  color: var(--tpl3-on-primary, #000);
}
/* zaglavlje angebot tabele: pozadina u boji brenda, .text-white je !important */
.tpl3-scope .table thead tr th.text-white {
  color: var(--tpl3-on-primary, #fff) !important;
}

/* Disturber (dist.svg je fiksno zlatan): slika ostaje zbog velicine i
   rotacije, a oblik se boji maskom u boji brenda. */
.tpl3-scope .hero-disturber img {
  object-position: -9999px 0;
  background-color: var(--dark-color);
  -webkit-mask: url("/ftemplate3/tpl-assets/images/dist.svg") center / 100% 100% no-repeat;
  mask: url("/ftemplate3/tpl-assets/images/dist.svg") center / 100% 100% no-repeat;
}

/* Angebot 1: umjesto Objektfinder iframea iz musteru staticna slika -
   popunjava isti okvir (.iframe-wrapper 500 / 800px) i ne izlazi iz njega. */
.tpl3-scope .iframe-wrapper {
  overflow: hidden;
}
.tpl3-scope .angebot-preview-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Rundgang: umjesto tour iframea iz musteru staticna slika - iste mjere kao
   iframe (.tour-frame iframe: 4/3, od 992 16/9), ne izlazi iz okvira. */
.tpl3-scope .tour-preview-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
@container tpl3-stage (min-width: 992px) {
  .tpl3-scope .tour-preview-img {
    aspect-ratio: 16 / 9;
  }
}

/* Kontakt na boji brenda (kontakt-gold): bijeli tekst / logo / dugme iz musteru
   prate kontrast izabrane boje (crno na svijetlim bojama). */
.tpl3-scope .kontakt-gold,
.tpl3-scope .kontakt-gold .text-wrapper p,
.tpl3-scope .kontakt-gold .site-subtitle,
.tpl3-scope .kontakt-gold .kontakt-info-title,
.tpl3-scope .kontakt-gold .kontakt-info-text,
.tpl3-scope .kontakt-gold .kontakt-info-text a,
.tpl3-scope .kontakt-gold .kontakt-form .form-title,
.tpl3-scope .kontakt-gold .kontakt-form .form-check-label,
.tpl3-scope .kontakt-gold .kontakt-form .form-check-datenschutz a,
.tpl3-scope .kontakt-gold .btn-muster-white {
  color: var(--tpl3-on-primary, #fff);
}
.tpl3-scope .kontakt-gold .btn-muster-white,
.tpl3-scope .kontakt-gold .btn-muster-white:hover {
  border-color: var(--tpl3-on-primary, #fff);
}
.tpl3-scope .kontakt-gold .btn-muster-white:hover {
  background-color: var(--tpl3-on-primary, #fff);
}
.tpl3-scope .kontakt-gold .kontakt-info-logo {
  filter: brightness(0) invert(var(--tpl3-on-primary-invert, 1));
}

/* Highlights na boji brenda (highlights-gold): bijeli tekst, ikone i linije
   iz musteru prate kontrast izabrane boje. (v2 ima foto + overlay - ostaje bijel.) */
.tpl3-scope .highlights-gold,
.tpl3-scope .highlights-gold .highlight-item p,
.tpl3-scope .highlights-gold .highlights-note {
  color: var(--tpl3-on-primary, #fff);
}
.tpl3-scope .highlights-gold .site-title.text-white {
  color: var(--tpl3-on-primary, #fff) !important;
}
.tpl3-scope .highlights-gold .highlight-icon {
  filter: brightness(0) invert(var(--tpl3-on-primary-invert, 1));
}
.tpl3-scope .highlights-gold .highlight-item,
.tpl3-scope .highlights-gold .highlight-item p {
  border-color: color-mix(in srgb, var(--tpl3-on-primary, #fff) 45%, transparent);
}
.tpl3-scope .highlights-gold .highlight-item:not(:nth-child(3n + 1))::before {
  background-color: color-mix(in srgb, var(--tpl3-on-primary, #fff) 45%, transparent);
}