/* =============================================
   POPE PROFESSIONAL ACOUSTICS — RESPONSIVE STYLES
============================================= */

/* ===== Tablets (<= 1100px) ===== */
@media (max-width: 1100px) {
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-badge { padding: 10px 14px; }
    .badge-mid { right: 0; }
}

/* ===== Tablets (<= 1024px) ===== */
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .contact-inner { grid-template-columns: 1fr; gap: 50px; }
}

/* ===== Small Tablets / Landscape Phones (<= 900px) ===== */
@media (max-width: 900px) {
    .navbar { padding: 8px 8px 8px 22px; }
    .logo img { height: 42px; }

    .main-nav {
        position: fixed;
        top: 0; right: -100%;
        width: min(82vw, 340px);
        height: 100vh;
        background: var(--card);
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 100px 30px 40px;
        transition: right 0.4s ease;
        z-index: 1000;
        box-shadow: -20px 0 60px rgba(0,0,0,0.5);
        overflow-y: auto;
    }
    .main-nav.active { right: 0; }
    .main-nav > li { width: 100%; }
    .main-nav > li > a {
        justify-content: space-between;
        padding: 15px 0;
        font-size: 1.02rem;
        border-bottom: 1px solid var(--border);
        width: 100%;
    }
    .has-dropdown .dropdown {
        position: static;
        transform: none;
        opacity: 0;
        visibility: hidden;
        max-height: 0;
        overflow: hidden;
        padding: 0;
        margin: 0;
        border: none;
        background: transparent;
        box-shadow: none;
        transition: var(--transition);
    }
    .has-dropdown.open .dropdown,
    .has-dropdown:hover .dropdown {
        opacity: 1; visibility: visible; max-height: 300px; padding: 6px 0 10px;
    }
    .has-dropdown.open > a i { transform: rotate(180deg); }

    .nav-toggle { display: flex; }
    .nav-cta { display: none; }

    .nav-overlay {
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.6);
        opacity: 0; visibility: hidden;
        transition: var(--transition);
        z-index: 999;
    }
    .nav-overlay.active { opacity: 1; visibility: visible; }

    .hero-inner { grid-template-columns: 1fr; text-align: center; gap: 50px; }
    .hero-text p { margin-left: auto; margin-right: auto; }
    .hero-btns { justify-content: center; }
    .hero-visual { flex-direction: column; gap: 20px; }
    .hero-img-swiper .swiper-slide { height: 300px; }
    .badge-top { top: -6%; right: 4%; }
    .badge-mid { top: 46%; right: -2%; }
    .badge-bottom { bottom: -4%; left: 6%; }

    .product-swiper-wrap { gap: 10px; }

    .feature-row { grid-template-columns: 1fr; gap: 34px; text-align: center; }
    .feature-row.reverse .feature-image { order: 0; }
    .feature-content p { margin-left: auto; margin-right: auto; }

    .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
    .item-tall { grid-row: span 1; }

    .why-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Mobile (<= 600px) ===== */
@media (max-width: 600px) {
    .container { padding: 0 18px; }

    .logo img { height: 36px; }

    .hero { padding: 40px 0 80px; }
    .hero-text h1 { font-size: 2rem; }
    .hero-text p { font-size: 0.95rem; }
    .hero-btns { flex-direction: column; width: 100%; }
    .hero-btns .btn { width: 100%; justify-content: center; }
    .hero-img-swiper .swiper-slide { height: 230px; }
    .hero-badge { position: static; margin: 12px auto 0; width: fit-content; }
    .badge-mid { display: none; }

    .categories, .products, .feature-section, .gallery, .testimonials, .why-us, .contact { padding: 60px 0; }

    .test-nav { width: 36px; height: 36px; }
    .category-icon { width: 62px; height: 62px; font-size: 1.2rem; }

    .product-card { padding: 20px 14px; }
    .product-img { height: 100px; }

    .feature-image img { max-height: 220px; }

    .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; }
    .item-wide, .item-tall { grid-column: span 1; grid-row: span 1; }

    .testimonial-card { padding: 28px 20px; }
    .why-grid { grid-template-columns: 1fr; }

    .form-row { grid-template-columns: 1fr; }
    .contact-form-wrap { padding: 24px; }

    .footer-grid { grid-template-columns: 1fr; gap: 36px; padding-bottom: 40px; }
    .footer-bottom-inner { flex-direction: column; gap: 6px; text-align: center; }

    .back-to-top { width: 42px; height: 42px; bottom: 18px; right: 18px; }
}

/* ===== Small Mobile (<= 380px) ===== */
@media (max-width: 380px) {
    .hero-text h1 { font-size: 1.7rem; }
    .section-head h2 { font-size: 1.4rem; }
}