/* ----------------------------------------------------
   1. GLAVNI KONTEJNER STRANICE
   - središnji okvir digitalne posjetnice
   - sadrži lijevi i desni panel
   - pozadinski blur i zaobljeni rubovi
   ---------------------------------------------------- */
.container {
    display: flex;
    width: 100%;
    max-width: 1200px;
    margin: 80px auto;
    background: var(--panel);
    backdrop-filter: blur(20px);
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 0 40px var(--accent);
}



/* ----------------------------------------------------
   2. LIJEVI PANEL
   - prikazuje logo škole i obrazovne programe
   - vizualno odvojen od desnog panela
   - prikazuje smjerove škole
   - sastoji se od više kartica (media-box)
   ---------------------------------------------------- */
.left-panel {
    width: 40%;
    padding: 50px;
    text-align: center;
    background: var(--panel2);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-large {
    width: 200px;
    margin-bottom: 20px;
}

.media-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 230px;
}

/* Pojedinačna kartica smjera (slika + naslov) */
.media-box {
    position: relative;
    background: var(--panel);
    backdrop-filter: blur(12px);
    border-radius: 14px;
    padding: 12px;
    height: 150px;
    box-shadow: 0 0 12px #b9d87e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--text);
    transition: 0.3s;
    overflow: hidden;
}

/* Naslov smjera preko slike */
.media-title {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 6px 10px;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    z-index: 2;
}

/* Hover efekt na kartici smjera */
.media-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 18px var(--accent);
}

/* Na mobilnim uređajima skrivamo panel smjerova
   kako bi desni panel imao više prostora */
@media (max-width: 900px) {
    .media-panel {
        display: none;
    }
}



/* ----------------------------------------------------
   3. DESNI PANEL
   - glavni sadržaj: galerija, tekst, video, kontakt
   ---------------------------------------------------- */
.right-panel {
    width: 60%;
    padding: 50px;
}

h2 {
    margin-bottom: 20px;
    font-size: 26px;
}




/* ----------------------------------------------------
   4. GRID ZA KONTAKT INFORMACIJE
   - dva stupca na desktopu
   - prvi element (adresa) zauzima cijeli red
   ---------------------------------------------------- */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 20px;
}

.info-grid .info-item:first-child {
    grid-column: span 2;
}



/* ----------------------------------------------------
   5. ELEMENTI KONTAKT INFORMACIJA
   - ikona + tekst
   - lagani blur i sjena
   ---------------------------------------------------- */
.info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--panel);
    border-radius: 10px;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 8px rgba(0,0,0,0.12);
    transition: 0.25s;
}

.info-item div {
    text-align: center;
    width: 100%;
}



/* ----------------------------------------------------
   6. IKONE KONTAKT SEKCIJE
   - različite veličine ovisno o tipu informacije
   ---------------------------------------------------- */
.icon {
    width: 50px;
}

.icont {
    width: 54px;
    height: 60px;
}

.iconl {
    margin-left: -10px;
    width: 74px;
    height: 70px;
}



/* ----------------------------------------------------
   7. DRUŠTVENE MREŽE — GRID
   - fleksibilni raspored ikona društvenih mreža
   ---------------------------------------------------- */
.social-grid {
    margin-top: 20px;
    display: flex;
    gap: 15px;
}



/* ----------------------------------------------------
   8. PRILAGODLJIVA PRILAGODBA
   - prilagodba rasporeda za mobilne uređaje
   ---------------------------------------------------- */
@media (max-width: 900px) {

    /* Paneli se slažu jedan ispod drugog */
    .container {
        flex-direction: column;
    }

    .left-panel,
    .right-panel {
        width: 100%;
        text-align: center;
    }

    /* Kontakt informacije u jednom stupcu */
    .info-grid {
        grid-template-columns: 1fr;
    }

    /* Društvene mreže u stupcu */
    .social-grid {
        flex-direction: column;
    }

    /* Galerija u jednom stupcu */
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    /* Video u jednom stupcu */
    .video-grid {
        grid-template-columns: 1fr;
    }
}



/* ----------------------------------------------------
   9. DODATNE PRILAGODBE ZA MANJE EKRANE
   - optimizacija ikona i paddinga
   ---------------------------------------------------- */
@media (max-width: 600px) {

    .info-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .info-grid .info-item:first-child {
        grid-column: span 1;
    }

    .info-item {
        padding: 2px 12px;
        border-radius: 8px;
    }

    .info-item .icon {
        font-size: 14px;
    }

    .info-item .icont {
        width: 44px;
        height: 40px;
        font-size: 14px;
    }

    .info-item .iconl {
        margin-left: 0;
        margin-right: -10px;
        width: 54px;
        height: 50px;
        font-size: 1px;
    }

    .info-item span {
        font-size: 13px;
    }
}