/* ============================================
   Responzivni stilovi
   ============================================ */

/* Tableti */
@media (max-width: 968px) {
    .content-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .content-sidebar {
        order: -1;
        position: static;
        display: none; /* Sakrij sidebar na tabletima */
    }
    
    .info-box {
        position: static;
    }
    
    .podcast-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    h1 {
        font-size: 2.5rem;
    }
    
    h2 {
        font-size: 2rem;
    }
    
    .hero {
        padding: 5rem 2rem;
    }
    
    .hero h1 {
        font-size: 3rem;
    }
    
    .hero p {
        font-size: 1.25rem;
    }
    
    .cards {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
    }
    
    .container {
        padding: 0 2rem;
    }
    
    nav {
        padding: 0 2rem;
    }
}

/* Mobilni uređaji */
@media (max-width: 768px) {
    /* Navigacija */
    .logo {
        font-size: 0.9rem;
    }
    
    .hamburger {
        display: flex;
    }
    
    .nav-menu {
        position: fixed;
        top: 80px;
        left: -100%;
        flex-direction: column;
        background-color: var(--bg-white);
        width: 100%;
        height: calc(100vh - 80px);
        text-align: left;
        transition: var(--transition);
        box-shadow: var(--shadow-lg);
        padding: 2rem 0;
        gap: 0;
        border-bottom: 1px solid var(--border-color);
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    .nav-menu li {
        width: 100%;
        padding: 0;
    }
    
    .nav-menu a {
        padding: 1.25rem 2rem;
        display: block;
        border-bottom: 1px solid var(--border-color);
        color: var(--text-dark);
    }
    
    .dropdown-menu {
        position: static;
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
        transform: none;
        box-shadow: none;
        background-color: var(--bg-light);
        margin: 0;
        border-radius: 0;
        border: none;
        transition: opacity 0.3s ease, visibility 0.3s ease, max-height 0.3s ease;
    }
    
    .dropdown.active .dropdown-menu {
        opacity: 1;
        visibility: visible;
        max-height: 500px;
        border-top: 1px solid var(--border-color);
    }
    
    .dropdown-menu a {
        padding-left: 3rem;
    }
    
    /* Hero sekcija */
    .hero {
        padding: 4rem 1.5rem;
    }
    
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .hero p {
        font-size: 1.125rem;
    }
    
    /* Tipografija */
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.75rem;
    }
    
    h3 {
        font-size: 1.5rem;
    }
    
    p {
        font-size: 1rem;
    }
    
    /* Container */
    .container {
        padding: 0 1.5rem;
    }
    
    /* Sekcije */
    .section {
        padding: 1.5rem 0 4rem 0;
    }
    
    .hero + .section {
        padding-top: 4rem;
    }
    
    /* Kartice */
    .cards {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .card {
        padding: 2rem;
    }
    
    /* Galerija */
    .gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    /* Lightbox responzivnost */
    .lightbox-prev,
    .lightbox-next {
        width: 3rem;
        height: 3rem;
        font-size: 2rem;
    }
    
    .lightbox-prev {
        left: 1rem;
    }
    
    .lightbox-next {
        right: 1rem;
    }
    
    .lightbox-close {
        top: 1rem;
        right: 1rem;
        font-size: 2.5rem;
        width: 2.5rem;
        height: 2.5rem;
    }
    
    .lightbox-image {
        max-height: 85vh;
    }
    
    .podcast-cards {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .podcast-info {
        padding: 1.5rem;
    }
    
    
    /* Kontakt forma */
    .contact-form {
        padding: 2rem;
        margin: 1rem;
    }
    
    /* Info box */
    .info-box {
        padding: 2rem;
    }
    
    /* Content layout */
    .content-main {
        padding: 2rem;
    }
    
    .content-layout {
        gap: 2rem;
    }
    
    .content-sidebar {
        position: static;
        display: none; /* Sakrij sidebar na mobilnim uređajima */
    }
    
    .info-box {
        position: static;
    }
    
    /* Page navigation */
    .page-navigation {
        flex-direction: column;
        gap: 1rem;
    }
    
    .page-nav-link {
        width: 100%;
        justify-content: center;
    }
    
    /* Nav */
    nav {
        padding: 0 1.5rem;
    }
    
    /* Section title */
    .section-title p {
        font-size: 1.125rem;
    }
    
    .section {
        padding: 1.5rem 0 4rem 0;
    }
    
    .hero + .section {
        padding-top: 4rem;
    }
    
    .content-layout {
        padding-top: 1rem;
    }
    
    .gallery-section,
    .download-section {
        margin: 3rem 0;
        padding-top: 3rem;
    }
}

/* Mali mobilni uređaji */
@media (max-width: 480px) {
    .hero {
        padding: 3rem 1rem;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero p {
        font-size: 1rem;
    }
    
    .gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    /* Load more button */
    .load-more-btn {
        padding: 0.875rem 2rem;
        font-size: 1rem;
        width: 100%;
    }
    
    /* Lightbox za male ekrane */
    .lightbox-content {
        max-width: 95%;
        padding: 1rem;
    }
    
    .lightbox-prev,
    .lightbox-next {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.75rem;
    }
    
    .lightbox-prev {
        left: 0.5rem;
    }
    
    .lightbox-next {
        right: 0.5rem;
    }
    
    .lightbox-close {
        top: 0.5rem;
        right: 0.5rem;
        font-size: 2rem;
        width: 2rem;
        height: 2rem;
    }
    
    .btn {
        width: 100%;
        text-align: center;
    }
    
    .container {
        padding: 0 1rem;
    }
    
    nav {
        padding: 0 1rem;
    }
    
    .card {
        padding: 1.5rem;
    }
    
    .content-main {
        padding: 1.5rem;
    }
    
    .info-box {
        padding: 1.5rem;
    }
}

/* Kontakt layout responzivnost */
@media (max-width: 768px) {
    .contact-layout {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
}