/* --- GALLERY PAGE SPECIFIC CSS --- */

        /* 1. HERO SECTION (Parallax) */
        .page-hero {
            height: 65vh; /* Optimalna visina za galeriju */
            position: relative;
            background-image: url('../images/paralax.png'); /* Stavi sliku ovde */
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .page-hero::before {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(10, 25, 47, 0.6);
        }

        .page-hero-content { position: relative; z-index: 2; color: var(--white); }
        
        .page-title-main { font-family: 'Cinzel', serif; font-size: 3.5rem; font-weight: 700; letter-spacing: 5px; margin-bottom: 10px; }
        .page-subtitle { font-family: 'Pinyon Script', cursive; font-size: 2rem; color: var(--sand-gold); }

        /* 2. FILTER BUTTONS */
        .gallery-nav {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 15px;
            padding: 60px 0 40px 0;
            background-color: var(--white);
        }

        .filter-btn {
            background: transparent;
            border: 1px solid var(--deep-blue);
            color: var(--deep-blue);
            padding: 10px 25px;
            font-family: 'Montserrat', sans-serif;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            border-radius: 30px;
        }

        .filter-btn:hover, .filter-btn.active {
            background-color: var(--deep-blue);
            color: var(--white);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(10, 25, 47, 0.2);
        }

        /* 3. GALLERY GRID (FULL PAGE) */
        .gallery-full-section {
            background-color: var(--white);
            padding-bottom: 100px;
            min-height: 600px;
        }

        .gallery-grid-container {
            width: 92%;
            max-width: 1600px;
            margin: 0 auto;
            display: grid;
            /* 3 Kolone na velikim ekranima, automatski se prilagodjava */
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); 
            gap: 30px;
        }

        .gallery-item {
            position: relative;
            border-radius: 4px;
            overflow: hidden;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            /* OVO GARANTUJE ISTU VELICINU */
            aspect-ratio: 4 / 3; 
            transition: transform 0.4s ease, opacity 0.4s ease;
        }

        /* Animacija za filter */
        .gallery-item.hide {
            display: none; 
        }
        
        .gallery-item.show {
            animation: fadeIn 0.5s ease forwards;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .gallery-img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* KLJUČNO ZA ISTU VELIČINU */
            transition: transform 0.8s ease;
        }

        .gallery-item:hover .gallery-img {
            transform: scale(1.1);
        }

        /* Hover Overlay */
        .gallery-item-overlay {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: linear-gradient(to top, rgba(10,25,47,0.85), transparent);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 30px;
            opacity: 0;
            transition: 0.4s ease;
        }

        .gallery-item:hover .gallery-item-overlay { opacity: 1; }

        .overlay-cat { color: var(--sand-gold); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 5px; transform: translateY(20px); transition: 0.4s 0.1s; }
        .overlay-title { color: var(--white); font-family: 'Cinzel', serif; font-size: 1.5rem; transform: translateY(20px); transition: 0.4s 0.2s; }
        
        .gallery-item:hover .overlay-cat,
        .gallery-item:hover .overlay-title {
            transform: translateY(0);
        }

        /* ICON for Zoom */
        .zoom-icon {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0);
            font-size: 2rem; color: var(--white); transition: 0.3s;
        }
        .gallery-item:hover .zoom-icon { transform: translate(-50%, -50%) scale(1); }

        /* LIGHTBOX (MODAL) */
        .lightbox {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.95); z-index: 9999;
            display: none; justify-content: center; align-items: center;
            opacity: 0; transition: opacity 0.3s;
        }
        .lightbox.active { display: flex; opacity: 1; }
        
        .lightbox-img {
            max-width: 90%; max-height: 90vh;
            border: 2px solid var(--sand-gold);
            box-shadow: 0 0 50px rgba(0,0,0,0.8);
        }
        
        .lightbox-close {
            position: absolute; top: 30px; right: 30px;
            color: var(--white); font-size: 2rem; cursor: pointer; transition: 0.3s;
        }
        .lightbox-close:hover { color: var(--sand-gold); transform: rotate(90deg); }

        /* RESPONSIVE */
        @media (max-width: 768px) {
            .page-title-main { font-size: 2.5rem; }
            .gallery-grid-container { grid-template-columns: 1fr; gap: 20px; }
            .gallery-nav { padding: 40px 0 30px 0; gap: 10px; }
            .filter-btn { padding: 8px 18px; font-size: 0.75rem; }
        }