/**
 * ============================================================
 * MaskeZaMob.rs — Hero Slider
 * ============================================================
 *
 * Fajl: css/_hero-slider.css
 * Renderuje ga shortcode [mzm_hero_slider] (inc/mzm-hero-baner.php)
 *
 * VAŽNO — Flatsome pravilo:
 * Prelaz između slajdova ide ISKLJUČIVO preko opacity.
 * Nikakav transform/@keyframes sa transform na .mzm-hero ili
 * bilo kom ancestor-u — to bi slomilo position:fixed u celom
 * podstablu (naučeno na Print Designer-u).
 *
 * Zavisi od: _design-tokens.css
 * ============================================================
 */

/* ==========================================================
 * 1. KONTEJNER
 * ========================================================== */

/* Horizontalno poravnanje NAMERNO prepuštamo Flatsome-u.
   Shortcode se stavlja unutar [row]/[col], pa hero automatski prati
   širinu kontejnera sajta — isto kao ostale sekcije. Zato ovde nema
   ni max-width ni bočnog padding-a; samo vertikalni ritam.
   Navy pozadinu preko cele širine daje [section bg_color="#0e1629"]. */
.mzm-hero {
  position: relative;
  background-color: var(--mzm-navy, #0e1629);
  /* Dole malo manje nego gore — kontrole već nose svoj razmak. */
  padding: clamp(1.75rem, 3.5vw, 3rem) 0 clamp(1.25rem, 2.5vw, 2rem);
  overflow: hidden;

  /* Odnos stranica slike u baneru. Sve slike se seku na ovaj odnos,
     pa visina banera ostaje ista bez obzira šta klijent uploaduje.
     Menjaj samo ovde — primenjuje se na sve slajdove. */
  --mzm-hero-ratio: 16 / 9;

  /* Odnos za raspored „Samo slika“ — slika ide preko cele širine
     kontejnera, pa je ovaj odnos jedino što određuje njenu visinu.
     Podešen tako da visina bude približno --mzm-hero-max-h:
     širina kontejnera (~1260px) / 3.33 ≈ 378px. */
  --mzm-hero-ratio-puna: 10 / 3;

  /* GORNJA GRANICA VISINE SLIKE — najvažnija ručica za visinu banera.
     Svi slajdovi dele visinu najvišeg među njima, pa bez ovoga jedan
     visok baner razvuče ceo slider i ostali dobiju prazan prostor.
     Smanji ako je baner previsok, povećaj ako je previše zbijen. */
  --mzm-hero-max-h: 380px;
}

/* Sve slajdove slažemo u istu grid ćeliju — visina kontejnera
   je visina najvišeg slajda, bez absolute pozicioniranja. */
.mzm-hero__viewport {
  display: grid;
}

/* Baner ograničen na drugi ekran. Klasu postavlja `hero-slider.js` prema
   polju „Prikazuje se na" u baneru.

   `display: none` je ovde bitan, ne `visibility` ni `opacity`: slajd ne sme
   da učestvuje u visini grida. Svi slajdovi dele visinu najvišeg, pa bi
   sakriven baner i dalje razvlačio slider — tačno ono što smo merenjem
   otklonili (vidi F-027). */
.mzm-hero__slide.is-van-ekrana,
.mzm-hero__dot.is-van-ekrana {
  display: none;
}

/* Flatsome koloni i redu podrazumevano dodaje donji padding/marginu,
   što ispod kontrola pravi višak praznog prostora. Gasimo to SAMO za
   kolonu u kojoj se nalazi hero, da ne diramo ostatak stranice.
   (`:has()` radi u svim aktuelnim browserima; u starijim ostaje
   zatečeno ponašanje — višak prostora, ali ništa nije pokvareno.) */
.col:has(> .col-inner > .mzm-hero),
.col:has(> .col-inner > .mzm-hero) > .col-inner,
.row:has(> .col > .col-inner > .mzm-hero) {
  padding-bottom: 0;
  margin-bottom: 0;
}

/* ==========================================================
 * 2. SLAJD
 * ========================================================== */

.mzm-hero__slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* Odlazeći slajd nestaje brže (0.3s) nego što dolazeći ulazi
     (0.45s sa 0.12s zadrške) — inače se dva teksta nakratko
     preklapaju i oba se vide u isto vreme. */
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.mzm-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.45s ease 0.12s, visibility 0s linear 0s;
}

/* Bez animacije za korisnike koji je ne žele */
@media (prefers-reduced-motion: reduce) {
  .mzm-hero__slide {
    transition: none;
  }
}

/* ── Raspored: slika levo, tekst desno ──────────────────────────────────── */

.mzm-hero__slide--tekst-desno {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}

/* Menjamo redosled preko `order`, ne preko `direction` —
   `direction: rtl` bi pokvario interpunkciju u tekstu. */
.mzm-hero__slide--tekst-desno .mzm-hero__media   { order: 0; }
.mzm-hero__slide--tekst-desno .mzm-hero__content { order: 1; }

/* Tekst se drži DESNE ivice — ogledalo osnovnog rasporeda.
   Bez ovoga kratak naslov ostavi veliku prazninu uz desnu ivicu
   i baner deluje neuravnoteženo. */
.mzm-hero__slide--tekst-desno .mzm-hero__content {
  align-items: flex-end;
  text-align: right;
}

.mzm-hero__slide--tekst-desno .mzm-hero__subtitle {
  margin-left: auto;
}

/* Kartica sa cenom prelazi na suprotnu stranu slike */
.mzm-hero__slide--tekst-desno .mzm-hero__price {
  left: auto;
  right: clamp(-1rem, -1.5vw, 0rem);
}

/* ── Raspored: samo slika ───────────────────────────────────────────────── */

.mzm-hero__slide--samo-slika {
  grid-template-columns: minmax(0, 1fr);
}

/* Ovde NEMA max-height namerno: kad `max-height` ograniči visinu,
   `aspect-ratio` povuče i širinu za njom, pa kutija ostane uža od
   kontejnera i poravna se levo. Visinu ovog rasporeda kontroliše
   isključivo odnos stranica ispod. */
.mzm-hero__slide--samo-slika .mzm-hero__media {
  aspect-ratio: var(--mzm-hero-ratio-puna, 10 / 3);
  max-height: none;
  width: 100%;
}

/* Slika kao link — bez podvlačenja i bez plavog okvira na fokus */
.mzm-hero__img-link {
  display: block;
  height: 100%;
  border-radius: clamp(0.75rem, 2vw, 1.25rem);
  overflow: hidden;
  text-decoration: none;
}

.mzm-hero__img-link:focus-visible {
  outline: 3px solid var(--mzm-accent, #3c83f5);
  outline-offset: 3px;
}

/* ==========================================================
 * 3. LEVA KOLONA — tekst
 * ========================================================== */

.mzm-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

/* --- Badge --- */
.mzm-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 1rem;
  border-radius: var(--mzm-radius-full, 999px);
  background-color: rgba(60, 131, 245, 0.16);
  color: #7dabff;
  font-family: var(--mzm-font-family, inherit);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}

.mzm-hero__badge-icon {
  font-size: 0.7rem;
  line-height: 1;
}

/* --- Naslov --- */
.mzm-hero__title {
  margin: 0;
  font-family: var(--mzm-font-family, inherit);
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.mzm-hero__title-main,
.mzm-hero__title-accent {
  display: block;
}

.mzm-hero__title-accent {
  color: var(--mzm-accent, #3c83f5);
}

/* --- Podnaslov --- */
.mzm-hero__subtitle {
  margin: 0;
  max-width: 34rem;
  font-family: var(--mzm-font-family, inherit);
  font-size: clamp(0.95rem, 1.6vw, 1.0625rem);
  line-height: 1.65;
  color: #94a3b8;
}

/* --- Dugmad --- */
.mzm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(0.25rem, 1.5vw, 0.75rem);
}

.mzm-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.75rem;
  border-radius: var(--mzm-radius-md, 8px);
  font-family: var(--mzm-font-family, inherit);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease,
              color 0.2s ease, box-shadow 0.2s ease;
}

.mzm-hero__btn--primary {
  background-color: var(--mzm-accent, #3c83f5);
  color: #ffffff;
  border: 2px solid var(--mzm-accent, #3c83f5);
}

.mzm-hero__btn--primary:hover,
.mzm-hero__btn--primary:focus-visible {
  background-color: #2d6fd4;
  border-color: #2d6fd4;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(60, 131, 245, 0.35);
}

.mzm-hero__btn--ghost {
  background-color: transparent;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.22);
}

.mzm-hero__btn--ghost:hover,
.mzm-hero__btn--ghost:focus-visible {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
}

/* ==========================================================
 * 4. DESNA KOLONA — slika + cena
 * ========================================================== */

.mzm-hero__media {
  position: relative;
  aspect-ratio: var(--mzm-hero-ratio, 16 / 9);

  /* Kad bi odnos stranica dao veću visinu od ove, kutija se skraćuje
     a slika se dodatno seče (object-fit: cover). Tako visina banera
     ostaje predvidiva bez obzira na raspored i dimenzije slike. */
  max-height: var(--mzm-hero-max-h, 380px);

  border-radius: clamp(0.75rem, 2vw, 1.25rem);
  overflow: visible;
}

/* Slika popunjava zadati odnos stranica i seče se po potrebi —
   zato visina banera ne zavisi od dimenzija uploadovane slike. */
.mzm-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: clamp(0.75rem, 2vw, 1.25rem);
  object-fit: cover;
  object-position: center;
}

/* --- Kartica sa cenom --- */
.mzm-hero__price {
  position: absolute;
  left: clamp(-1rem, -1.5vw, 0rem);
  bottom: clamp(-1rem, -1.5vw, 0rem);

  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--mzm-radius-md, 10px);
  background-color: #ffffff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  font-family: var(--mzm-font-family, inherit);
}

.mzm-hero__price-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
  line-height: 1.2;
}

.mzm-hero__price-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--mzm-navy, #0e1629);
  line-height: 1.15;
}

.mzm-hero__price-value small {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #64748b;
}

/* ==========================================================
 * 5. NAVIGACIJA — traka ispod banera
 * ==========================================================
 *
 * Strelice i tačkice su u normalnom toku ISPOD slajdova, ne
 * apsolutno preko njih. Ranije su strelice pokrivale naslov.
 *
 * VAŽNO: Flatsome nakačinje svoje stilove na svaki <button>
 * (padding, min-height, senka, uppercase). Bez reseta ispod,
 * tačkice narastu na veličinu dugmeta.
 * ========================================================== */

.mzm-hero__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  margin-top: clamp(0.875rem, 1.8vw, 1.25rem);
}

/* ── Reset Flatsome button stilova ── */
.mzm-hero__nav,
.mzm-hero__dot {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  min-width: 0;
  line-height: 1;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
  box-shadow: none;
  text-shadow: none;
  flex-shrink: 0;
}

.mzm-hero__nav:hover,
.mzm-hero__nav:active,
.mzm-hero__dot:hover,
.mzm-hero__dot:active {
  box-shadow: none;
  transform: none;
}

/* ── Strelice ── */
.mzm-hero__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;

  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--mzm-radius-full, 999px);
  background-color: transparent;
  color: #ffffff;
  cursor: pointer;

  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.mzm-hero__nav:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.45);
}

.mzm-hero__nav:focus-visible {
  outline: 2px solid var(--mzm-accent, #3c83f5);
  outline-offset: 2px;
}

.mzm-hero__nav svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* ==========================================================
 * 6. NAVIGACIJA — tačkice
 * ========================================================== */

.mzm-hero__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.mzm-hero__dot {
  width: 8px;
  height: 8px;
  border: none;
  border-radius: var(--mzm-radius-full, 999px);
  background-color: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition: background-color 0.2s ease, width 0.25s ease;
}

.mzm-hero__dot:hover {
  background-color: rgba(255, 255, 255, 0.55);
}

.mzm-hero__dot.is-active {
  width: 24px;
  background-color: var(--mzm-accent, #3c83f5);
}

.mzm-hero__dot:focus-visible {
  outline: 2px solid var(--mzm-accent, #3c83f5);
  outline-offset: 3px;
}

/* ==========================================================
 * 7. TABLET (do 1024px)
 * ========================================================== */

@media screen and (max-width: 1024px) {

  .mzm-hero__slide,
  .mzm-hero__slide--tekst-desno {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 2.5rem);
  }

  /* Slika ide iznad teksta — u oba rasporeda */
  .mzm-hero__media,
  .mzm-hero__slide--tekst-desno .mzm-hero__media { order: -1; }

  .mzm-hero__content,
  .mzm-hero__slide--tekst-desno .mzm-hero__content { order: 0; }

  /* Kartica sa cenom je na tabletu uvek desno */
  .mzm-hero__slide--tekst-desno .mzm-hero__price {
    right: 1rem;
  }

  /* Kad se kolone slože jedna ispod druge, desno poravnanje
     nema smisla — vraćamo tekst na levo. */
  .mzm-hero__slide--tekst-desno .mzm-hero__content {
    align-items: flex-start;
    text-align: left;
  }

  .mzm-hero__slide--tekst-desno .mzm-hero__subtitle {
    margin-left: 0;
  }

  .mzm-hero__title   { font-size: clamp(1.75rem, 6vw, 2.75rem); }
  .mzm-hero__subtitle { max-width: none; }

  .mzm-hero__price {
    left: auto;
    right: 1rem;
    bottom: 1rem;
    padding: 0.7rem 1.15rem;
  }

  .mzm-hero__price-value { font-size: 1.25rem; }
}

/* ==========================================================
 * 8. MOBILNI (do 549px)
 * ========================================================== */

@media screen and (max-width: 549px) {

  .mzm-hero {
    padding: 1.75rem 0 3rem;

    /* Na telefonu je 16:9 preplitko — slika ispadne kao traka.
       3/2 umesto ranijeg 4/3: na 360px širine to je 240px umesto 270px.
       Izmereno 04.08. — visina slidera je bila 657px, a slajd „samo-slika"
       je zbog toga dobijao 350px praznog prostora. Vidi F-027. */
    --mzm-hero-ratio: 3 / 2;
    --mzm-hero-max-h: 300px;
  }

  /* Baner „samo slika" se na mobilnom seče na kvadrat.

     Ranije je prikazivan u prirodnom odnosu, da tekst na slici ne bi bio
     odsečen. Cena je bila velika: baner 16:9 na 360px daje 203px visine, a
     najviši slajd je 466px — ostajalo je 263px praznog navy prostora, jer
     svi slajdovi dele visinu najvišeg. Izmereno 04.08. (vidi F-027).

     Kvadrat daje 360px i rupa pada na ~106px. Zauzvrat klijent mora da drži
     sve bitno u centralnih 1080 × 576 px slike — to je presek onoga što
     preživi i desktop rez (10/3) i ovaj mobilni.

     BEZ `max-height` ovde, namerno. `aspect-ratio` i `max-height` na istom
     elementu su poznata zamka: kad granica visine proradi, širina se povuče
     za njom i kutija ostane uža od kontejnera, poravnata levo. Na 549px to
     bi se baš desilo. Granica ionako više nije potrebna — sa fiksnim odnosom
     visina zavisi od širine ekrana, a ne od toga šta je klijent uploadovao,
     što je i bio razlog za nju. */
  .mzm-hero__slide--samo-slika .mzm-hero__media {
    aspect-ratio: 1 / 1;
  }

  .mzm-hero__content {
    gap: 0.75rem;
  }

  .mzm-hero__badge {
    font-size: 0.6875rem;
    padding: 0.35rem 0.8rem;
  }

  .mzm-hero__title {
    font-size: clamp(1.6rem, 8vw, 2.1rem);
  }

  .mzm-hero__subtitle {
    font-size: 0.9375rem;
    line-height: 1.55;
  }

  /* Dugmad jedno pored drugog, ne jedno ispod drugog.

     Ranije su bila puna širina i složena vertikalno: 48 + 48 + 9,6 razmaka
     = 105px samo na dugmad. To je bio najveći pojedinačni deo od 259px teksta
     na najvišem slajdu, a taj slajd određuje visinu svih ostalih. U redu
     zauzimaju 48px umesto 105px.

     `flex-wrap` i `min-width` su tu jer klijent sam upisuje tekst dugmeta:
     dva normalna natpisa staju u red (2×140 + 8 = 288 < 360), a ako neko
     upiše dugačak tekst, dugmad se sama vrate jedno ispod drugog umesto da
     se prelome usred reči. */
  .mzm-hero__actions {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .mzm-hero__btn {
    flex: 1 1 auto;
    min-width: 140px;
    width: auto;
    padding: 0.85rem 0.9rem;
    min-height: 48px; /* touch target — ne smanjivati */
    white-space: nowrap;
  }

  /* Strelice su na mobilnom suvišne — ostaju tačkice i swipe */
  .mzm-hero__nav {
    display: none;
  }

  .mzm-hero__controls {
    margin-top: 1.25rem;
  }

  .mzm-hero__price {
    right: 0.75rem;
    bottom: 0.75rem;
    padding: 0.6rem 1rem;
  }

  .mzm-hero__price-label { font-size: 0.6875rem; }
  .mzm-hero__price-value { font-size: 1.125rem; }
}