/* ==========================================
   DIMAGI KURA — Responsive Design Rules
   ========================================== */

/* Large Tablets and Laptops (<= 1024px) */
@media (max-width: 1024px) {
    .container {
        padding: 0 1.5rem;
    }

    /* Footer adjustments */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }

    /* BOD Leadership Grid */
    .bods-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

/* Medium Tablets & Mobile Devices (<= 868px) */
@media (max-width: 868px) {
    /* Section paddings for mobile viewports */
    section {
        padding: 3rem 0;
    }

    /* Hero & Grid Sections in index.html, contact.html, team.html */
    section .container[style*="grid-template-columns: 1fr 1fr"],
    section .container > div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
    }

    /* Hero Slideshow height fix */
    div[style*="height: 420px"] {
        height: 280px !important;
    }

    /* Card Images auto-height */
    .card-shadow img {
        height: 260px !important;
    }

    /* Contact Us Grid */
    .container[style*="max-width: 900px"] > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        margin-bottom: 2rem !important;
    }
}

/* Mobile Devices & Mobile Navigation (<= 768px) */
@media (max-width: 768px) {
    /* Navigation Bar Header */
    .nav-container {
        height: 75px;
    }

    .hamburger {
        display: flex;
        z-index: 1001;
    }

    /* Mobile Navigation Drawer */
    .nav-menu {
        position: fixed;
        top: 75px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 75px);
        background-color: var(--color-white);
        flex-direction: column;
        align-items: flex-start;
        padding: 2rem 1.5rem;
        transition: left 0.3s ease-in-out;
        border-top: 1px solid var(--color-border);
        overflow-y: auto;
        gap: 1.25rem;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-item {
        width: 100%;
    }

    .nav-link {
        display: block;
        font-size: 1.1rem;
        padding: 0.5rem 0;
        width: 100%;
    }

    /* Mobile Dropdown Menu */
    .nav-item.dropdown .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        padding-left: 1rem;
        margin-top: 0.25rem;
        display: none;
        background-color: var(--color-off-white);
    }

    .nav-item.dropdown.open .dropdown-menu {
        display: block;
    }

    /* Film Roll Gallery mobile reset */
    .film-gallery-container {
        grid-template-columns: 1fr !important;
        height: auto !important;
        overflow-y: visible !important;
        padding: 1rem 0;
    }

    .film-column {
        animation: none !important;
        transform: none !important;
        gap: 1.5rem !important;
    }

    .film-column img {
        height: 250px !important;
    }

    /* BOD single column layout */
    .bods-row {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    /* Footer Mobile view */
    .site-footer {
        padding: 3rem 0 1.5rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    /* #MentalHealthMatters Banner */
    .mental-health-banner h2 {
        font-size: clamp(2rem, 8vw, 4rem);
    }
}

/* Small Mobile Screens (<= 480px) */
@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }

    .card-shadow {
        padding: 1.5rem;
    }

    .btn {
        width: 100%;
        padding: 0.75rem 1rem;
    }

    h1 {
        font-size: 2.25rem;
    }

    h2 {
        font-size: 1.75rem;
    }
}

@media (max-width: 480px) {
    .mental-health-banner {
        padding: 1rem 0.5rem;
    }
    .mental-health-banner h2 {
        font-size: 6.6vw; /* Slightly smaller scaling on very narrow phones to prevent any clipping */
    }
}

/* Fix for iPad Mini and 768px viewports */
@media (max-width: 768px) {
    .mental-health-banner h2 {
        font-size: 6.1vw !important;
    }
}

/* ==========================================
   About Section Image Fix for Mobile
   ========================================== */
@media (max-width: 1100px) {
    #about img {
        height: auto !important;
        max-height: 320px;
        object-fit: contain !important;
        background-color: var(--color-white);
        padding: 1rem;
    }
}

/* ==========================================
   Hero Slideshow Responsive Fixes
   ========================================== */

/* Tablet & iPad Viewports (<= 1024px) */
@media (max-width: 1024px) {
    .card-shadow[style*="height: 420px"],
    div.card-shadow[style*="height: 420px"] {
        height: 350px !important;
    }
    .hero-slides {
        height: 100% !important;
    }
    .hero-slides img {
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }
}

/* Mobile Viewports (<= 768px) */
@media (max-width: 768px) {
    .card-shadow[style*="height: 420px"],
    div.card-shadow[style*="height: 420px"] {
        height: 240px !important;
    }
    .hero-slides {
        height: 100% !important;
    }
    .hero-slides img {
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }
}