/**
 * Mobile Responsive Styles for AVKAS Construction
 * 
 * This file contains all mobile-specific CSS fixes and responsive adjustments
 * for the AVKAS Construction website.
 * 
 * @package AVKAS_Construction
 * @since 1.0.0
 */

/* ============================================
   GLOBAL MOBILE FIXES
   ============================================ */

@media (max-width: 768px) {

    /* Prevent horizontal scroll */
    body,
    html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Container adjustments */
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        max-width: 100% !important;
    }

    /* Global heading adjustments */
    h1 {
        font-size: 2.5rem !important;
        letter-spacing: -1px !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
    }

    h2 {
        font-size: 2rem !important;
        letter-spacing: -1px !important;
        line-height: 1.3 !important;
    }

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

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

@media (max-width: 768px) {
    .main-nav {
        padding: 10px 0 !important;
    }

    .nav-wrapper {
        padding: 10px 0 !important;
    }

    .logo img,
    .logo .custom-logo,
    .custom-logo-link img {
        max-height: 40px !important;
    }

    /* Ensure hamburger menu is visible and clickable */
    .mobile-menu-toggle {
        width: 32px !important;
        height: 32px !important;
        z-index: 1000 !important;
    }
}

/* ============================================
   HOMEPAGE MOBILE STYLES
   ============================================ */

@media (max-width: 768px) {

    /* Hero Section */
    .hero {
        padding: 100px 20px 60px !important;
        min-height: auto !important;
    }

    .hero h1 {
        font-size: 2.8rem !important;
        margin-bottom: 20px !important;
    }

    .hero-label {
        font-size: 0.7rem !important;
        letter-spacing: 3px !important;
    }

    .hero p {
        font-size: 1rem !important;
        max-width: 100% !important;
        margin: 20px 0 30px !important;
    }

    /* Hero buttons - stack vertically */
    .hero-buttons {
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
        padding: 16px 30px !important;
        font-size: 0.9rem !important;
    }

    /* About Section */
    #about {
        padding: 40px 20px !important;
    }

    .about {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .about-image {
        width: 100% !important;
        height: 250px !important;
    }

    /* Stats */
    .about-stats {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Services Section - COMPACT mobile layout */
    .services {
        padding: 20px 15px !important;
        margin-top: -10px !important;
    }

    .services-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        background: transparent !important;
    }

    .service-card {
        padding: 12px 10px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        min-height: auto !important;
        border-bottom: 1px solid rgba(212, 175, 55, 0.15) !important;
        background: transparent !important;
        text-decoration: none !important;
    }

    .service-card:last-child {
        border-bottom: none !important;
    }

    .service-icon {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 6px !important;
        font-size: 1rem !important;
        margin-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .service-card-content {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .service-card h3 {
        font-size: 0.9rem !important;
        margin-bottom: 2px !important;
        line-height: 1.2 !important;
        color: #fff !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .service-card p {
        font-size: 0.65rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 1 !important;
        line-clamp: 1 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        color: rgba(255, 255, 255, 0.5) !important;
    }

    .service-card .arrow {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1rem !important;
        color: var(--gold-primary) !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 20px !important;
        height: 20px !important;
        margin-left: 5px !important;
        flex-shrink: 0 !important;
        z-index: 10 !important;
    }

    /* Project Types Grid - Perfect 4-column thumbnails */
    .project-types {
        padding: 30px 10px !important;
        margin-top: 0 !important;
    }

    .project-types .section-title {
        font-size: 1.5rem !important;
        margin-bottom: 25px !important;
        text-align: center !important;
        letter-spacing: -0.5px !important;
    }

    .project-types-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
        padding: 5px !important;
    }

    .project-type-card {
        padding: 0 !important;
        min-height: 100px !important;
        /* Taller thumbnails like the reference */
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .project-type-card h3 {
        font-size: 0.65rem !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        font-weight: 700 !important;
        text-transform: capitalize !important;
        /* Not all caps for better look */
        text-shadow: 0 1px 4px rgba(0, 0, 0, 1) !important;
        position: relative !important;
        z-index: 5 !important;
        padding: 5px !important;
        width: 100% !important;
    }

    .project-type-bg {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-size: cover !important;
        background-position: center !important;
        z-index: 1 !important;
        transition: transform 0.5s ease !important;
    }

    .project-type-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.7) 100%) !important;
        z-index: 2 !important;
    }

    /* Why Us Section Fix */
    .features {
        padding: 30px 20px !important;
        overflow: hidden !important;
    }

    .features-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .feature-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 12px !important;
        text-align: left !important;
        padding: 8px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .feature-icon {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        font-size: 1rem !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Target the h4 and p collectively for flex sizing */
    .feature-item h4,
    .feature-item p {
        flex: 1 !important;
        min-width: 0 !important;
        white-space: normal !important;
    }

    .feature-item h4 {
        margin-bottom: 2px !important;
        font-size: 0.9rem !important;
    }

    .feature-item p {
        font-size: 0.75rem !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }

    /* Testimonials */
    .testimonials-section {
        padding: 60px 20px !important;
    }

    .testimonial-card {
        padding: 30px 20px !important;
    }

    /* FAQ */
    .faq-section {
        padding: 60px 20px !important;
    }

    /* CTA Section */
    .cta-section {
        padding: 60px 20px !important;
    }

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

/* ============================================
   ABOUT PAGE MOBILE STYLES
   ============================================ */

@media (max-width: 768px) {

    /* CRITICAL FIX: About Page Hero Overflow */
    .page-hero h1,
    .about-page .page-hero h1 {
        font-size: 2.2rem !important;
        letter-spacing: -1px !important;
        line-height: 1.15 !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .page-hero {
        padding: 100px 20px 60px !important;
    }

    .page-hero p {
        font-size: 1rem !important;
    }

    /* Intro Section */
    .intro-section {
        padding: 60px 20px !important;
    }

    .intro-text-animated p {
        font-size: 1.6rem !important;
        gap: 0.05em 0.2em !important;
    }

    /* Story Section */
    .story-section {
        padding: 60px 20px !important;
    }

    .story-layout {
        flex-direction: column !important;
        gap: 30px !important;
    }

    .story-image {
        width: 100% !important;
        height: 250px !important;
    }

    /* Values Section */
    .values-layout {
        flex-direction: column !important;
        gap: 30px !important;
    }

    .value-card h3 {
        font-size: 1.3rem !important;
    }

    /* Commitment Section */
    .commitment-section {
        padding: 60px 20px !important;
    }

    .commitment-section h2 {
        font-size: 2rem !important;
    }

    /* Strengths Grid */
    .strengths-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* ============================================
   SERVICES PAGE MOBILE STYLES
   ============================================ */

@media (max-width: 768px) {

    /* Services Hero */
    .services-hero {
        padding: 100px 20px 60px !important;
    }

    .services-hero h1 {
        font-size: 2.5rem !important;
    }

    .services-hero p {
        font-size: 1rem !important;
        max-width: 100% !important;
    }

    /* Service Cards */
    .services-v3-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .card-image {
        height: 220px !important;
    }

    .card-content {
        padding: 30px 20px !important;
    }

    .card-content h3 {
        font-size: 1.4rem !important;
    }

    .card-content p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }

    /* CRITICAL FIX: Ideal Clients Section */
    .ideal-clients {
        padding: 60px 20px !important;
    }

    .clients-layout {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        text-align: center !important;
    }

    .clients-header h2 {
        font-size: 2rem !important;
        letter-spacing: -1px !important;
        word-wrap: break-word !important;
    }

    .clients-header p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    .clients-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        max-width: 400px !important;
        margin: 0 auto !important;
    }

    .client-block {
        aspect-ratio: 1.5 !important;
    }

    .client-block h4 {
        font-size: 1.2rem !important;
        letter-spacing: 2px !important;
    }

    /* Greener Tomorrow Section */
    .greener-tomorrow {
        padding: 60px 20px !important;
    }

    .greener-tomorrow h2 {
        font-size: 2.5rem !important;
    }

    .greener-description {
        font-size: 1.1rem !important;
    }

    /* Services CTA */
    .services-cta {
        padding: 60px 20px !important;
    }

    .cta-box {
        padding: 40px 25px !important;
    }

    .cta-box h2 {
        font-size: 2rem !important;
    }
}

/* ============================================
   CONTACT PAGE MOBILE STYLES
   ============================================ */

@media (max-width: 768px) {
    .contact-page-content {
        padding: 40px 20px !important;
    }

    .contact-form-container {
        padding: 30px 20px !important;
    }

    .contact-info-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

/* ============================================
   FOOTER MOBILE STYLES
   ============================================ */

@media (max-width: 768px) {
    .main-footer {
        padding: 40px 20px 20px !important;
    }

    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        text-align: center !important;
    }

    .footer-logo {
        margin: 0 auto !important;
    }

    .footer-bottom {
        padding: 15px 0 !important;
        flex-direction: column !important;
        gap: 5px !important;
        text-align: center !important;
    }

    .footer-bottom p {
        margin: 0 !important;
        font-size: 0.8rem !important;
    }
}

/* ============================================
   VERY SMALL DEVICES (375px and below)
   ============================================ */

@media (max-width: 375px) {
    h1 {
        font-size: 2rem !important;
    }

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

    .hero h1 {
        font-size: 2.3rem !important;
    }

    .about-page .page-hero h1 {
        font-size: 1.9rem !important;
    }

    .services-hero h1 {
        font-size: 2rem !important;
    }
}

/* ============================================
   ABOUT PAGE V2 (ADDED)
   ============================================ */
@media (max-width: 768px) {
    .about-hero-v2 {
        height: auto !important;
        min-height: 400px !important;
        padding: 120px 20px 60px !important;
        background-attachment: scroll !important;
    }

    .about-hero-v2 h1 {
        font-size: 2.2rem !important;
        letter-spacing: -1px !important;
        line-height: 1.1 !important;
    }

    .about-story-v2 {
        padding: 60px 0 !important;
    }

    .story-grid-v2 {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .story-content-v2 h2 {
        font-size: 2.2rem !important;
        margin-bottom: 25px !important;
    }

    .about-core-v2 {
        padding: 60px 0 !important;
    }

    .core-grid-v2 {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .core-card-v2 {
        padding: 35px 20px !important;
    }

    .strengths-grid-v2 {
        grid-template-columns: 1fr !important;
        gap: 50px !important;
    }

    .points-grid-v2 {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .about-stats-mini-v2 {
        gap: 25px !important;
        margin-top: 40px !important;
        justify-content: flex-start !important;
    }

    .stat-mini-v2 h3 {
        font-size: 2.2rem !important;
    }

    .about-strengths-v2 {
        padding: 60px 0 !important;
    }

    /* Fix image scaling in story */
    .story-image-v2 img {
        margin-top: 20px !important;
    }
}

/* ============================================
   SERVICES PAGE MOBILE
   ============================================ */
@media (max-width: 768px) {
    .services-hero {
        padding: 100px 20px 60px !important;
    }

    .services-hero h1 {
        font-size: 2.2rem !important;
        letter-spacing: -1px !important;
        line-height: 1.1 !important;
    }

    .services-hero p {
        font-size: 1rem !important;
        margin-top: 20px !important;
    }

    /* Service V3 Cards */
    .services-v3-grid {
        gap: 30px !important;
        padding: 0 15px !important;
    }

    .service-v3-card {
        border-radius: 16px !important;
    }

    .card-image {
        height: 200px !important;
    }

    .card-content {
        padding: 30px 20px !important;
    }

    .card-content h3 {
        font-size: 1.4rem !important;
        margin-bottom: 12px !important;
    }

    .card-content p {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        margin-bottom: 20px !important;
    }

    /* Ideal Clients Section Spacing */
    .ideal-clients {
        padding: 60px 20px !important;
    }

    .clients-header h2 {
        font-size: 2rem !important;
        letter-spacing: -1px !important;
    }

    .clients-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: none !important;
        gap: 12px !important;
    }

    .client-block h4 {
        font-size: 0.85rem !important;
        letter-spacing: 1px !important;
    }

    /* Greener Tomorrow Section */
    .greener-tomorrow {
        padding: 60px 20px !important;
    }

    .greener-tomorrow h2 {
        font-size: 2.5rem !important;
        letter-spacing: -1px !important;
    }

    .greener-description {
        font-size: 1.1rem !important;
        line-height: 1.6 !important;
    }

    /* Global Mobile Header Logo Size */
    .main-nav .logo img,
    .main-nav .logo .custom-logo {
        max-height: 48px !important;
    }

    .nav-wrapper {
        padding: 12px 0 !important;
    }
}