/* =========================================
   HOMEPAGE MOBILE RESPONSIVENESS
   Complete mobile-first responsive design
   ========================================= */

/* ==========================================
   GENERAL MOBILE FIXES
   ========================================== */
@media (max-width: 768px) {

    /* Container padding */
    .container {
        padding: 0 15px !important;
    }

    /* Section padding - compact for mobile */
    section,
    .wka-front-page-content section {
        padding: 40px 0 !important;
    }

    /* Typography scaling */
    h1 {
        font-size: 1.75rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    h3 {
        font-size: 1.25rem !important;
    }

    h4 {
        font-size: 1.1rem !important;
    }

    p {
        font-size: 0.95rem !important;
    }

    /* Grid layouts - single column */
    [style*="grid-template-columns: repeat(2"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns: 2fr 1fr"],
    .grid-2,
    .grid-3,
    .grid-4 {
        display: block !important;
        grid-template-columns: 1fr !important;
    }

    /* Flex wrapping */
    [style*="display: flex"][style*="gap"],
    .flex-container {
        flex-wrap: wrap !important;
        gap: 1rem !important;
    }

    /* Section tags */
    [style*="border-radius: 50px"][style*="padding"] {
        font-size: 0.75rem !important;
        padding: 6px 16px !important;
    }
}

/* ==========================================
   HERO SECTION MOBILE
   ========================================== */
@media (max-width: 768px) {
    .hero-futuristic {
        min-height: 70vh !important;
        padding: 100px 0 40px !important;
    }

    .hero-futuristic h1 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }

    .hero-futuristic p {
        font-size: 1rem !important;
        padding: 0 10px !important;
    }

    .hero-futuristic [style*="display: flex"][style*="gap"] {
        flex-direction: column !important;
        gap: 0.75rem !important;
        padding: 0 15px !important;
    }

    .hero-futuristic a[style*="padding"] {
        padding: 12px 20px !important;
        font-size: 0.9rem !important;
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ==========================================
   STATS SECTION MOBILE
   ========================================== */
@media (max-width: 768px) {
    .wka-front-page-content [style*="grid-template-columns: repeat(5"] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    [style*="font-size: 2.25rem"],
    [style*="font-size: 2.5rem"],
    [style*="font-size: 3rem"] {
        font-size: 1.75rem !important;
    }
}

/* ==========================================
   EVENTS & BLOG CARDS MOBILE
   ========================================== */
@media (max-width: 768px) {

    .event-card,
    .blog-card,
    .post-card {
        margin-bottom: 1.5rem !important;
    }

    .event-card img,
    .blog-card img {
        height: 180px !important;
    }
}

/* ==========================================
   PRACTICE AREAS MOBILE
   ========================================== */
@media (max-width: 768px) {

    .practice-areas-grid,
    .services-grid {
        display: block !important;
    }

    .practice-area-card,
    .service-card {
        margin-bottom: 1rem !important;
        padding: 1.25rem !important;
    }
}

/* ==========================================
   ABOUT SECTION MOBILE
   ========================================== */
@media (max-width: 768px) {
    .about-us-section [style*="grid-template-columns"] {
        display: block !important;
    }

    .about-us-section [style*="padding: 2rem"] {
        padding: 1.25rem !important;
    }
}

/* ==========================================
   CORE VALUES MOBILE
   ========================================== */
@media (max-width: 768px) {
    .core-values-section [style*="grid-template-columns: repeat(4"] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    .core-values-section [style*="padding: 2rem"] {
        padding: 1rem !important;
    }

    .core-values-section [style*="width: 70px"] {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.25rem !important;
    }
}

/* ==========================================
   GLOBAL REACH MOBILE
   ========================================== */
@media (max-width: 768px) {
    .global-reach-section {
        padding: 40px 0 !important;
    }

    .global-reach-section h2 {
        font-size: 1.5rem !important;
    }

    .global-reach-section [style*="gap: 2rem"] {
        gap: 0.75rem !important;
    }

    .global-reach-section [style*="padding: 1rem 1.5rem"] {
        padding: 0.75rem 1rem !important;
    }

    .global-reach-section [style*="font-size: 2rem"] {
        font-size: 1.5rem !important;
    }

    #globalMap {
        height: 280px !important;
        border-radius: 12px !important;
    }
}

/* ==========================================
   WHY CHOOSE US MOBILE
   ========================================== */
@media (max-width: 768px) {
    .wka-front-page-content section [style*="display: grid"][style*="gap: 3rem"] {
        display: block !important;
    }

    [style*="padding: 1.75rem; background: #fff"] {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
}

/* ==========================================
   TEAM SECTION MOBILE
   ========================================== */
@media (max-width: 768px) {
    .team-members-section {
        padding: 40px 0 !important;
    }

    .wka-team-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .team-card {
        margin-bottom: 1rem !important;
    }

    .wka-team-grid .team-card>div:first-child {
        height: 280px !important;
    }
}

/* ==========================================
   TESTIMONIALS MOBILE
   ========================================== */
@media (max-width: 768px) {
    [style*="grid-template-columns: repeat(3"][style*="gap: 2rem"] {
        display: block !important;
    }

    .testimonial-card {
        margin-bottom: 1.5rem !important;
        padding: 1.25rem !important;
    }
}

/* ==========================================
   FAQs SECTION MOBILE
   ========================================== */
@media (max-width: 768px) {
    .faqs-section [style*="grid-template-columns: repeat(2"] {
        display: block !important;
    }

    details[style*="padding: 1.5rem"] {
        padding: 1rem !important;
        margin-bottom: 0.75rem !important;
    }

    details summary {
        font-size: 0.95rem !important;
    }
}

/* ==========================================
   CTA/FREE CONSULTATION MOBILE
   ========================================== */
@media (max-width: 768px) {

    .cta-section,
    [style*="Free Consultation"] {
        padding: 40px 0 !important;
    }

    .cta-section h2 {
        font-size: 1.5rem !important;
    }

    .cta-section [style*="display: flex"][style*="gap"] {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .cta-section a[style*="padding"] {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }
}

/* ==========================================
   CONTACT SECTION MOBILE
   ========================================== */
@media (max-width: 768px) {

    .contact-section [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"][style*="gap: 3rem"] {
        display: block !important;
    }

    .contact-section [style*="padding: 2rem"] {
        padding: 1.25rem !important;
        margin-bottom: 1.5rem !important;
    }

    .contact-section form input,
    .contact-section form textarea,
    .contact-section form select {
        font-size: 16px !important;
        padding: 12px !important;
    }
}

/* ==========================================
   EXTRA SMALL DEVICES (480px and below)
   ========================================== */
@media (max-width: 480px) {

    section,
    .wka-front-page-content section {
        padding: 30px 0 !important;
    }

    h2 {
        font-size: 1.35rem !important;
    }

    .container {
        padding: 0 12px !important;
    }

    .core-values-section [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    .wka-front-page-content [style*="grid-template-columns: repeat(5"] {
        grid-template-columns: 1fr !important;
    }

    #globalMap {
        height: 250px !important;
    }

    .wka-team-grid .team-card>div:first-child {
        height: 250px !important;
    }
}