/* ===========================
   OPĆI STILOVI
   =========================== */
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #f4f4f4;
}

/* ===========================
   HEADER – sticky navigacija
   position: sticky zadržava header vidljivim pri scrollanju.
   top: 0 znači da ostaje prilijepljen na vrh ekrana.
   z-index: 1000 osigurava da header bude ispred ostalog sadržaja.
   =========================== */
header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #111;
    color: white;
    padding: 15px;
    display: flex;
    justify-content: space-around; 
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    width: 60px;
    margin-right: 10px;
}

nav a {
    color: white;
    text-decoration: none;
    margin-left: 15px;
}

/* ===========================
   DROPDOWN IZBORNIK
   position: relative na .dropdown služi kao referentna točka
   za apsolutno pozicionirani .dropdown-content.
   display: none sakriva sadržaj, a :hover ga prikazuje.
   =========================== */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background: white;
    min-width: 180px;
}

.dropdown-content a {
    color: black;
    display: block;
    padding: 10px;
}

/* Pseudoklasa :hover – prikazuje dropdown kada korisnik
   prijeđe mišem preko .dropdown elementa */
.dropdown:hover .dropdown-content {
    display: block;
}

/* ===========================
   SLIDER
   =========================== */
.slider img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

/* ===========================
   OPIS SEKCIJA – gradijent pozadina
   linear-gradient(45deg, ...) stvara dijagonalni prijelaz boja
   pod kutom od 45 stupnjeva, od žute prema bijeloj.
   =========================== */
.opis {
    padding: 30px;
    text-align: center;
    background: linear-gradient(
        45deg,
        #ffcc00,
        white
    );
}

/* ===========================
   FLEXBOX LAYOUT – proizvodi
   Glavni flex kontejner koji raspoređuje stavke u redove.
   flex-wrap: wrap – stavke prelaze u novi red kada nema mjesta.
   justify-content: center – horizontalno centriranje stavki.
   align-items: center – vertikalno centriranje stavki.
   =========================== */
.proizvodi {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

/* flex-basis: 250px – osnovna širina svake stavke prije raspodjele prostora.
   flex-grow: 1 – stavka se može širiti i popuniti slobodan prostor.
   flex-shrink: 1 – stavka se može sužavati ako nema dovoljno mjesta. */
.proizvod {
    flex-basis: 250px;
    flex-grow: 1;
    flex-shrink: 1;
    background: white;
    padding: 20px;
    text-align: center;
}

/* ===========================
   MINI SEKCIJA I KARTICE
   =========================== */
.mini {
    padding: 20px;
}

.kartice {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

/* box-shadow: sjena oko kartice (x-pomak, y-pomak, zamućenje, boja).
   border-radius: zaobljeni uglovi kartice.
   transition: animira promjene svojstava (ovdje transform) kroz 0.4s. */
.kartica {
    background-color: white;
    width: 300px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    transition: 0.4s;
}

/* transform: scale(1.05) – pseudoklasa :hover povećava karticu
   za 5% pri prelasku mišem, u kombinaciji s transition daje
   glatki efekt zumiranja. */
.kartica:hover {
    transform: scale(1.05);
}

/* Pseudoklasa :nth-child(2) cilja drugu karticu unutar roditelja
   i smanjuje joj prozirnost na 95%. */
.kartica:nth-child(2) {
    opacity: 0.95;
}

.kartica img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.kartica h3,
.kartica p {
    padding: 10px;
}

/* ===========================
   ATRAKCIJE
   =========================== */
.atrakcije {
    padding: 20px;
}

.atrakcija {
    display: flex;
    background-color: white;
    margin-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
}

.atrakcija img {
    width: 250px;
    height: 180px;
    object-fit: cover;
}

.atrakcija div {
    padding: 15px;
}

/* ===========================
   GALERIJA
   =========================== */
.galerija-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.galerija-grid img {
    width: 300px;
    border-radius: 15px;
}

/* ===========================
   FOOTER
   =========================== */
footer {
    background-color: #111;
    color: white;
    text-align: center;
    padding: 15px;
    margin-top: 30px;
}

/* ===========================
   RESPONZIVNOST – media query
   Na ekranima užim od 768px (mobitel/tablet) mijenja se
   raspored: flex-direction: column slaže elemente vertikalno,
   navigacija se puni u stupac, a slike atrakcija postaju pune širine.
   =========================== */
@media (max-width: 768px) {
    header {
        flex-direction: column;
    }

    nav {
        display: flex;
        flex-direction: column;
    }

    .kartice {
        flex-direction: column;
        align-items: center;
    }

    .atrakcija {
        flex-direction: column;
    }

    .atrakcija img {
        width: 100%;
    }
}