/* =========================================
   RESPONSIVE STYLES
   ========================================= */

/* ---------- Tablet (max 1024px) ---------- */
@media (max-width: 1024px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 1.85rem; }
    
    .container { padding: 0 1.25rem; }
    
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .pool-types-grid { grid-template-columns: repeat(2, 1fr); }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .about-stats { grid-template-columns: repeat(2, 1fr); }
    .about-values { grid-template-columns: repeat(2, 1fr); }
    .location-districts { grid-template-columns: repeat(3, 1fr); }
    .listing-grid { grid-template-columns: repeat(2, 1fr); }
    
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
    
    .content-grid { grid-template-columns: 1fr; }
    .content-sidebar { order: -1; }
    
    .hero h1 { font-size: 2.75rem; }
    .hero-shapes { display: none; }
    .hero { min-height: 70vh; }
    
    .cta-content { flex-direction: column; text-align: center; }
    .cta-text p { margin: 0 auto; }
    
    .mega-dropdown { min-width: 500px; }
}

/* ---------- Mobile Large (max 768px) ---------- */
@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.6rem; }
    
    .section { padding: 3.5rem 0; }
    
    .top-bar-right { display: none; }
    .top-bar { padding: 0.35rem 0; }
    .top-bar-left {
        justify-content: center;
        width: 100%;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
    }
    
    /* Mobile Navigation */
    .hamburger { 
        display: flex;
        position: relative;
        z-index: calc(var(--z-overlay) + 10);
    }
    .nav-actions {
        position: relative;
        z-index: calc(var(--z-overlay) + 5);
    }
    
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 360px;
        height: 100vh;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        padding: 5rem 1.5rem 2rem;
        gap: 0;
        z-index: var(--z-overlay);
        box-shadow: -5px 0 30px rgba(0,0,0,0.2);
        transition: right var(--transition-base);
        overflow-y: auto;
    }
    .nav-menu.active { right: 0; }
    
    .nav-link {
        padding: 0.85rem 0;
        margin: 0;
        border-bottom: 1px solid var(--gray-100);
        border-radius: 0;
        font-size: 1.05rem;
        width: 100%;
    }
    .nav-link::after {
        display: none;
    }
    
    .has-dropdown .dropdown-menu,
    .has-dropdown:hover .dropdown-menu,
    .has-dropdown.active .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none !important;
        box-shadow: none;
        border: none;
        padding: 0;
        min-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .has-dropdown .dropdown-menu {
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--transition-slow) ease-in-out;
    }
    .has-dropdown.active .dropdown-menu { max-height: 2000px; }
    
    .has-dropdown.active .nav-link i,
    .has-dropdown:hover .nav-link i { transform: rotate(180deg); color: var(--primary-600); }
    
    .dropdown-grid { grid-template-columns: 1fr; gap: 0; margin-top: 0.5rem; border-top: 1px solid var(--gray-100); }
    .dropdown-item { 
        padding: 0.75rem 0.5rem; 
        gap: 0.75rem; 
        border-bottom: 1px solid var(--gray-50); 
        border-radius: 0;
    }
    .dropdown-item:hover { transform: none; background: var(--primary-50); }
    .dropdown-item i { width: 32px; height: 32px; font-size: 0.9rem; flex-shrink: 0; }
    .dropdown-item small { display: none; }
    
    .nav-cta span { display: none; }
    
    /* Mobile overlay */
    .nav-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: calc(var(--z-header) - 1);
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-base);
    }
    .nav-overlay.active { opacity: 1; visibility: visible; }
    
    /* Hero */
    .hero { min-height: auto; padding: 4rem 0; }
    .hero h1 { font-size: 2.25rem; }
    .hero-desc { font-size: 1rem; }
    .hero-stats { gap: 1.5rem; }
    .hero-stat-num { font-size: 1.5rem; }
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; justify-content: center; }
    
    /* Grids */
    .services-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .pool-types-grid { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; }
    .location-features { grid-template-columns: 1fr; }
    .location-districts { grid-template-columns: repeat(2, 1fr); }
    .listing-grid { grid-template-columns: 1fr; }
    
    .contact-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    
    .cta-actions { flex-direction: column; width: 100%; }
    .cta-actions .btn { width: 100%; justify-content: center; }
    
    /* Footer */
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .footer-bottom-content { flex-direction: column; gap: 0.75rem; text-align: center; }
    
    .page-hero h1 { font-size: 2rem; }
    
    .whatsapp-float { width: 52px; height: 52px; font-size: 1.5rem; bottom: 1.25rem; left: 1.25rem; }
    .back-to-top { right: 1.25rem; bottom: 1.25rem; width: 38px; height: 38px; }
}

/* ---------- Mobile Small (max 480px) ---------- */
@media (max-width: 480px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.4rem; }
    
    .section { padding: 2.5rem 0; }
    .section-header { margin-bottom: 2.5rem; }
    
    .services-grid { grid-template-columns: 1fr; }
    .about-stats { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .about-values { grid-template-columns: 1fr; }
    .location-districts { grid-template-columns: 1fr 1fr; }
    
    .hero h1 { font-size: 1.85rem; }
    .hero-stats { flex-wrap: wrap; gap: 1rem; }
    .hero-stat { flex: 1; min-width: 80px; }
    
    .page-hero { padding: 3rem 0 2rem; }
    .page-hero h1 { font-size: 1.65rem; }
    
    .process-step { flex-direction: column; gap: 1rem; }
    
    .map-container iframe { height: 280px; }
    
    .error-page h1 { font-size: 5rem; }
}