/* ===================================================================== */
/*  File: hero.css                                                      */
/*  Purpose: HERO sekcija sa slajderima i animacijom                    */
/*  Author: Udruženje e-Razvoj | https://erazvoj.com                   */
/*  Last Updated: 2025-05-XX                                            */
/* ===================================================================== */

/* === Glavna HERO sekcija === */
.hero {
  position: relative;                /* Omogućava pozicioniranje slajdova unutar hero sekcije */
  width: 100%;                       /* Zauzima punu širinu ekrana */
  height: 800px;                     /* Fiksna visina hero sekcije */
  margin-top: 160px;                 /* Odmiče sadržaj od vrha (ispod headera) */
  overflow: hidden;                  /* Sakriva sadržaj koji izlazi van sekcije */
}

/* === Kontejner za slajder === */
.slider-container {
  position: relative;               /* Pozicioniranje za apsolutne slajdove unutar */
  width: 100%;
  height: 100%;
}

/* === Pojedinačni slajdovi === */
.slide {
  position: absolute;               /* Apsolutno pozicionirani slajdovi – jedan preko drugog */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;          /* Slika se razvuče da pokrije celu površinu */
  background-position: center;     /* Centrirana pozicija slike */
  opacity: 0;                       /* Nevidljiv po defaultu */
  transition: opacity 1s ease-in-out; /* Animacija prelaza vidljivosti */
  z-index: 0;                       /* Početni sloj */
}

/* === Aktivan slajd === */
.slide.active {
  opacity: 1;                       /* Vidljiv slajd */
  z-index: 1;                       /* Iznad ostalih */
}

/* === Tekst za pristupačnost (screen readers) === */
.visually-hidden {
  position: absolute;              /* Izmešten iz prikaza */
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);          /* Sakrivanje elementa */
  white-space: nowrap;
  border: 0;
}

/* === Tekstualni blok unutar slajda === */
.slide-caption {
  background-color: rgba(0, 0, 0, 0.5); /* Poluprovidna crna pozadina */
  color: #fff;                        /* Bela boja teksta */
  padding: 1.5rem;                    /* Unutrašnji razmak */
  position: absolute;                 /* Pozicionirano unutar slajda */
  bottom: 5%;                         /* Odmaknuto od donje ivice */
  left: 5%;                           /* Odmaknuto od leve ivice */
  max-width: 90%;                     /* Ograničena širina */
  border-radius: 10px;                /* Zaobljeni uglovi */
}

.slide-caption h3 {
  margin: 0 0 0.5rem 0;               /* Donji razmak naslova */
  font-size: 1.5rem;                  /* Veličina naslova */
  font-weight: 700;                   /* Boldirani tekst */
}

.slide-caption p {
  margin: 0;                          /* Bez margine */
  font-size: 1rem;                    /* Standardna veličina teksta */
  font-weight: 400;                   /* Regularna težina fonta */
}

/* === Navigacione strelice (tekstualni fallback) === */
.nav.prev,
.nav.next {
  position: absolute;                /* Apsolutno pozicionirane strelice */
  top: 50%;                          /* Vertikalno centrirano */
  transform: translateY(-50%);       /* Fino centriranje po Y osi */
  font-size: 40px;                   /* Veličina strelica kao tekst */
  background: rgba(0, 0, 0, 0.4);     /* Tamna pozadina sa providnošću */
  color: white;
  border: none;
  cursor: pointer;
  padding: 10px 15px;
  z-index: 2;                        /* Iznad slajdova */
}

.nav.prev {
  left: 20px;                        /* Položaj leve strelice */
}

.nav.next {
  right: 20px;                       /* Položaj desne strelice */
}

/* === Stilizovano dugme sa SVG ikonicom za navigaciju === */
button.nav {
  background-color: rgba(116, 45, 138, 0.15);  /* Blago ljubičasta providna pozadina */
  border: none;
  border-radius: 50%;                /* Krug dugme */
  width: 60px;
  height: 60px;
  cursor: pointer;
  display: flex;                     /* Centriranje SVG ikonice */
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.3s ease; /* Animacija pozadine na hover */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Blaga senka */
}

button.nav:hover {
  background-color: rgba(116, 45, 138, 0.25); /* Tamnija ljubičasta na hover */
}

button.nav svg {
  width: 36px;                      /* Veličina SVG ikonice */
  height: 36px;
  stroke: #742d8a;                  /* Ljubičasta boja linije ikonice */
  stroke-width: 2.5;               /* Debljina linije */
}