/* ================================================
   MOBILE RESPONSIVENESS - COMPREHENSIVE STYLES
   ================================================ */

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

    /* Hide desktop navigation */
    .desktop-nav,
    .desktop-cta {
        display: none !important;
    }

    /* Show hamburger menu */
    .hamburger-menu {
        display: block !important;
    }

    /* Adjust header for mobile */
    .nav-island {
        width: 95% !important;
        padding: 12px 20px !important;
        top: 10px !important;
    }

    .logo {
        font-size: 1rem !important;
    }
}

/* Show desktop nav on larger screens */
@media (min-width: 769px) {
    .hamburger-menu {
        display: none !important;
    }

    .mobile-menu,
    .mobile-menu-overlay {
        display: none !important;
    }
}

/* ===== RESPONSIVE TYPOGRAPHY ===== */

/* Mobile Small (320px - 374px) */
@media (max-width: 374px) {
    h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }

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

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

    .hero-card {
        padding: 2rem 1.5rem !important;
    }

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

    .hero-card .subtitle {
        font-size: 0.95rem !important;
    }
}

/* Mobile Standard (375px - 767px) */
@media (min-width: 375px) and (max-width: 767px) {
    h1 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }

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

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

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

    .hero-card .subtitle {
        font-size: 1rem !important;
    }
}

/* Tablet (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    h1 {
        font-size: 2.2rem !important;
    }

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

    .hero-card {
        max-width: 550px !important;
    }
}

/* ===== HERO SECTION RESPONSIVE ===== */
@media (max-width: 768px) {
    .hero-immersive {
        padding: 100px 15px 60px !important;
        background-attachment: scroll !important;
    }

    .hero-card {
        padding: 2.5rem 2rem !important;
        max-width: 100% !important;
    }

    .hero-card .btn {
        width: 100%;
        font-size: 0.95rem !important;
        padding: 14px 20px !important;
    }
}

/* ===== SECTION SPACING ===== */
@media (max-width: 768px) {
    .section {
        padding: 60px 0 !important;
    }

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

    .section-problem {
        padding: 60px 15px !important;
    }
}

/* ===== GRID LAYOUTS ===== */
@media (max-width: 768px) {

    /* All grids stack to single column */
    .grid-cols-2,
    .grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    /* Service Grid in Solution Section */
    div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ===== FAIR-PLAY EQUATION ===== */
@media (max-width: 768px) {
    .equation-wrapper {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .equation-box {
        min-width: 100% !important;
        max-width: 280px !important;
        padding: 20px !important;
    }

    .equation-operator {
        font-size: 1.5rem !important;
        transform: rotate(90deg);
    }

    .price-highlight {
        font-size: 1.5rem !important;
    }
}

/* ===== PORTFOLIO FILTERS ===== */
@media (max-width: 768px) {
    .btn-filter {
        font-size: 0.85rem !important;
        padding: 8px 16px !important;
        margin: 4px !important;
    }

    /* Portfolio section title */
    #visionen h2 {
        font-size: 2rem !important;
    }
}

/* Mobile Navigation Menu Refined */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 320px;
    height: 100vh;
    background: var(--color-warm-white);
    z-index: 2000;
    padding: 100px 40px 40px;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
}

.mobile-menu.is-active {
    transform: translateX(-100%);
}

.mobile-nav-link {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    margin-bottom: 25px;
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s ease;
}

.mobile-menu.is-active .mobile-nav-link {
    opacity: 1;
    transform: translateX(0);
}

/* Staggered link animations */
.mobile-nav-link:nth-child(1) {
    transition-delay: 0.1s;
}

.mobile-nav-link:nth-child(2) {
    transition-delay: 0.15s;
}

.mobile-nav-link:nth-child(3) {
    transition-delay: 0.2s;
}

.mobile-nav-link:nth-child(4) {
    transition-delay: 0.25s;
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(44, 62, 80, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1500;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.mobile-menu-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

@media (max-width: 600px) {
    .hero-card h1 {
        font-size: 2.2rem !important;
    }
}

/* ===== PROJECT CARDS ===== */
@media (max-width: 768px) {
    .project-card {
        margin-bottom: 20px;
    }

    .project-image {
        height: 250px !important;
    }

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

/* ===== TESTIMONIALS ===== */
@media (max-width: 768px) {
    .testimonial-card {
        padding: 20px !important;
        margin-bottom: 20px;
    }
}

/* ===== PROCESS SECTION ===== */
@media (max-width: 768px) {
    .process-wrapper {
        padding: 40px 0 !important;
    }

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

    .step-badge {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.25rem !important;
    }
}

/* ===== ABOUT/BIO SECTION ===== */
@media (max-width: 768px) {
    #about img {
        max-width: 100% !important;
    }

    #about .container {
        padding: 30px 20px !important;
    }

    #about h2 {
        font-size: 2rem !important;
    }

    #about p {
        font-size: 0.95rem !important;
        line-height: 1.7 !important;
    }
}

/* ===== FAQ SECTION ===== */
@media (max-width: 768px) {
    details {
        margin-bottom: 15px;
    }

    summary {
        font-size: 1rem !important;
        padding: 15px !important;
    }
}

/* ===== FOOTER ===== */
@media (max-width: 768px) {
    footer {
        padding: 40px 0 !important;
    }

    footer h2 {
        font-size: 1.75rem !important;
    }

    footer form {
        max-width: 100% !important;
    }

    footer input,
    footer button {
        font-size: 0.95rem !important;
    }
}

/* ===== BUTTON TOUCH TARGETS ===== */
@media (max-width: 768px) {
    .btn {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 24px !important;
    }

    .btn-primary {
        font-size: 0.95rem !important;
    }

    /* Increase tap target for links */
    a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* ===== UTILITY: Remove transforms on mobile for better performance ===== */
@media (max-width: 768px) {
    .parallax-layer {
        display: none;
    }

    .hero-immersive {
        background-attachment: scroll !important;
    }
}