/* SLOJ B - samo ono što Elementor ne zna izraziti kontrolama.
   Layout, tipografiju, boje i razmake NE pisati ovdje - to ide u panel.

   Pravila koja se moraju poštovati (detalji u METODA-IZRADE-TEME.md):
   1. Boje čitaj iz Elementorovih globalnih varijabli, s fallbackom:
        background: var(--e-global-color-primary, #2F6FED);
   2. Kad pišeš pravilo za Elementor container, dodaj i .e-con selektor,
      inače Elementorovo pravilo pobjeđuje na istoj specifičnosti:
        .e-con.edug-nesto, .edug-nesto { ... }
   3. Responsive vrijednosti postavljaj kao CSS VARIJABLE na omotač,
      nikad kao svojstva na sam element - inače bazno pravilo pobijedi
      media query.
   4. Svaka vrijednost ide kroz var() s fallbackom, da je widget kontrola
      može pregaziti. */

/* --- Primjer widget --------------------------------------------- */
.edug-example {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--edug-example-gap, 24px);
}

.edug-example__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--edug-example-pad, 24px);
  border-radius: var(--edug-radius, 20px);
  background: var(--e-global-color-edug_white, #fff);
}

.edug-example__media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: calc(var(--edug-radius, 20px) * .6);
}

.edug-example__title { margin: 0; }
.edug-example__text  { margin: 0; color: var(--edug-muted, #5C6672); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ============================================================
   MARQUEE TRAKA  (widget: edug-marquee)
   ============================================================
   Zamke ugradjene ovdje (METODA, pogl. 4):
   - Elementorova pravila cesto imaju dvije klase, pa bazno pravilo teme
     mora ih pratiti (.e-con.edug-marquee), inace gubi po specificnosti.
   - Elementor ispod 767px forsira --flex-wrap-mobile: wrap i raskine traku.
   - Trajanje racuna JS, ali upisuje ga u ZASEBNU varijablu
     (--edug-marquee-auto). CSS je koristi samo kao fallback, pa obicno
     korisnikovo pravilo (--edug-marquee-speed) uvijek pobjedjuje.
   ============================================================ */

.e-con .edug-marquee,
.edug-marquee {
  overflow: hidden;
  width: 100%;
  /* Rubovi se blago stope s pozadinom umjesto da tekst naglo odsijece. */
  -webkit-mask-image: var(--edug-marquee-mask, none);
          mask-image: var(--edug-marquee-mask, none);
}

.e-con .edug-marquee__track,
.edug-marquee__track {
  display: flex;
  flex-wrap: nowrap !important;
  --flex-wrap-mobile: nowrap;
  width: max-content;
  will-change: transform;
  animation: edug-marquee-run
             var(--edug-marquee-speed, var(--edug-marquee-auto, 30s))
             linear infinite;
}

.edug-marquee.is-reverse .edug-marquee__track {
  animation-direction: reverse;
}

.edug-marquee.is-pausable:hover .edug-marquee__track,
.edug-marquee.is-pausable:focus-within .edug-marquee__track {
  animation-play-state: paused;
}

.e-con .edug-marquee__group,
.edug-marquee__group {
  display: flex;
  flex-wrap: nowrap !important;
  --flex-wrap-mobile: nowrap;
  align-items: center;
  flex: 0 0 auto;
}

.edug-marquee__text,
.edug-marquee__sep {
  white-space: nowrap;
  flex: 0 0 auto;
}

.edug-marquee__media {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.edug-marquee__img {
  display: block;
  max-width: none;
  height: var(--edug-marquee-logo-h, 38px);
  width: auto;
}

/* Pomak od tacno jedne grupe + jedan razmak = zatvoren krug.
   Mjeri ga JS kao stvarnu udaljenost prve grupe i njene kopije. */
@keyframes edug-marquee-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--edug-marquee-distance, 50%)), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .edug-marquee__track {
    animation: none;
  }
  /* Bez animacije kopija je samo duplirani sadrzaj - sakrij je. */
  .edug-marquee__group[aria-hidden="true"] {
    display: none;
  }
}

/* ============================================================
   ZAGLAVLJE
   ============================================================
   Zaglavlje lezi PREKO heroja (na referenci hero pocinje na y=0 ispod
   njega), pa je apsolutno pozicionirano. Dvoclani selektor je nuzan jer
   Elementorovo .e-con pravilo inace pobjedjuje po specificnosti. */

.e-con.edug-header,
.edug-header {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 20;
  pointer-events: none;
}

.edug-header > * {
  pointer-events: auto;
}

.e-con.edug-header__inner,
.edug-header__inner {
  /* Na referenci je zaglavlje uvuceno 150px sa svake strane iznad 1440px,
     a ispod toga ide punom sirinom. */
  margin-inline: auto;
}

.edug-fancybox__icon {
  width: var(--edug-fancybox-size, 42px);
  height: var(--edug-fancybox-size, 42px);
  flex: 0 0 auto;
}

/* ============================================================
   DUGME S KVADRATOM ZA IKONU  (.edug-cta)
   ============================================================
   Obrazac koji se na referenci ponavlja 20+ puta. Na hover tekst
   iskoci gore, a strelica udesno - izmjereno: tekst +18px, ikona -17px. */

.e-con.edug-cta,
.edug-cta {
  position: relative;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
}

.edug-cta__icon {
  width: var(--edug-cta-icon, 46px);
  height: var(--edug-cta-icon, 46px);
  flex: 0 0 auto;
  margin: 15px;
}

.edug-cta__arrow img,
.edug-cta__arrow {
  transition: transform .38s cubic-bezier(.2, .7, .3, 1);
}

@media (hover: hover) {
  .edug-cta:hover .edug-cta__arrow {
    transform: translateX(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .edug-cta__arrow,
  .edug-cta__arrow img {
    transition: none;
  }
}

/* ============================================================
   HERO
   ============================================================ */

.e-con.edug-hero,
.edug-hero {
  position: relative;
}

.edug-hero__media {
  position: relative;
  overflow: hidden;
}

/* Marquee natpis preko donjeg ruba slike: providan tekst s obrubom.
   Velicine su izmjerene: 140px na desktopu, 120 na 767, 80 na 479. */
.edug-hero__outline .edug-marquee__text {
  font-family: var(--edug-font-heading, "DM Sans", sans-serif);
  font-size: var(--edug-hero-outline, 140px);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .65);
}

/* Responsive ide kroz varijablu na omotacu, ne kao svojstvo na elementu:
   varijable se nasljedjuju i nemaju sukob specificnosti s media queryjem. */
.edug-hero__marquee { --edug-hero-outline: 140px; }
@media (max-width: 767px) { .edug-hero__marquee { --edug-hero-outline: 120px; } }
@media (max-width: 479px) { .edug-hero__marquee { --edug-hero-outline: 80px; } }