/* ==========================================================================
   Responsive Styles
   ========================================================================== */

/* Tablets (1024px and down) */
@media (max-width: 1024px) {
    .section-title {
        font-size: 2rem;
    }
    
    .hero-title {
        font-size: 3.5rem;
    }
    
    .split-layout {
        gap: 2rem;
    }
    
    .community-grid {
        gap: 2rem;
    }
    
    .masonry-grid {
        column-count: 2;
    }
    
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
}

/* Tablets and Mobile (768px and down) */
@media (max-width: 768px) {
    .section {
        padding: 4rem 0;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    /* Navigation */
    .nav-links, .nav-actions .btn {
        display: none;
    }
    
    .mobile-menu-btn {
        display: block;
    }
    
    /* Layouts */
    .split-layout {
        grid-template-columns: 1fr;
    }
    
    .split-layout.reverse .split-content {
        order: 1;
    }
    
    .split-layout.reverse .split-image {
        order: 2;
    }
    
    .stats {
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
        text-align: center;
    }
    
    /* Features */
    .feature-list {
        grid-template-columns: 1fr;
    }
    
    /* Community */
    .community-grid {
        grid-template-columns: 1fr;
    }
    
    .comm-img-col.offset {
        transform: translateY(1.5rem);
    }
    
    /* Highlight Card */
    .highlight-card {
        padding: 2rem;
    }
    
    /* Footer */
    .footer-top {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .footer-brand .logo, 
    .footer-links ul, 
    .social-icons {
        justify-content: center;
    }
    
    /* Contact */
    .contact-links {
        grid-template-columns: 1fr;
    }
}

/* Small Mobile (480px and down) */
@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .btn {
        width: 100%;
    }
    
    .masonry-grid {
        column-count: 1;
    }
    
    .community-images {
        flex-direction: column;
    }
    
    .comm-img-col.offset {
        transform: translateY(0);
    }
    
    .comm-img-col img {
        height: auto;
        aspect-ratio: 4/3;
    }
    
    .accordion-header {
        padding: 1.25rem;
        font-size: 1rem;
    }
    
    .floating-whatsapp {
        width: 50px;
        height: 50px;
        bottom: 1.5rem;
        right: 1.5rem;
    }
    
    .floating-whatsapp i {
        width: 24px;
        height: 24px;
    }
}