/**
 * MEDIA 247 — RESPONSIVE DESIGN & RTL ENGINE
 * Handles all breakpoints, mobile-specific layout fixes, and Arabic (RTL) stability.
 */

/* ============================================================
   BREAKPOINT HIERARCHY
   ============================================================ */

@media (max-width: 1200px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .features-split { gap: 3rem; }
}

@media (max-width: 1024px) {
    /* Navbar & Mobile Sidebar Structure */
    nav { padding: 1rem 0; padding-top: calc(1rem + env(safe-area-inset-top)); }
    
    .nav-links {
        position: fixed; inset: 0; width: 100%; height: 100dvh;
        /* Improved background for better isolation */
        background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.15) 0%, rgba(3,3,3,0.95) 40%, #030303 100%);
        flex-direction: column !important; justify-content: center !important;
        align-items: center !important; text-align: center !important;
        padding: 0 !important; gap: 1.5rem;
        transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1);
        z-index: 1001; 
        /* Boosted blur and ensures no conflict */
        backdrop-filter: blur(50px) saturate(200%) !important;
        -webkit-backdrop-filter: blur(50px) saturate(200%) !important;
        clip-path: circle(0px at calc(100% - 40px) 40px);
        pointer-events: none; right: -100%; left: auto !important;
    }

    .nav-links.active {
        clip-path: circle(200% at calc(100% - 40px) 40px);
        pointer-events: auto; right: 0;
    }

    .nav-links a {
        font-family: var(--font-heading); font-size: clamp(1.8rem, 7vw, 3rem);
        font-weight: 400; text-transform: uppercase; letter-spacing: 0.05em;
        color: var(--clr-gray-400); opacity: 0; transform: translateY(20px);
        transition: opacity 0.4s ease, transform 0.4s ease, color 0.3s ease;
        width: 100% !important;
    }

    .nav-links.active a { opacity: 1; transform: translateY(0); }
    .nav-links.active a:nth-child(1) { transition-delay: 0.2s; }
    .nav-links.active a:nth-child(2) { transition-delay: 0.3s; }
    .nav-links.active a:nth-child(3) { transition-delay: 0.4s; }
    .nav-links.active a:nth-child(4) { transition-delay: 0.5s; }
    .nav-links.active a:nth-child(5) { transition-delay: 0.6s; }

    .mobile-lang-btn {
        display: inline-flex !important; margin-top: 2.5rem !important; opacity: 0; transform: translateY(20px);
        transition: opacity 0.4s ease, transform 0.4s ease; transition-delay: 0.7s;
    }
    .nav-links.active .mobile-lang-btn { opacity: 1; transform: translateY(0); }

    .menu-btn { display: flex; z-index: 1002; order: 3; }
    .menu-btn.open span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
    .menu-btn.open span:nth-child(2) { opacity: 0; }
    .menu-btn.open span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }
    
    .nav-actions { display: none; }
}

/* ============================================================
   DESKTOP REFINEMENT (min-width: 1025px)
   ============================================================ */

@media (min-width: 1025px) {
    .nav-actions { display: flex; align-items: center; gap: 2.5rem; }
    /* Hide mobile-specific elements */
    .mobile-lang-btn { display: none !important; }

    /* Hero Typography & Spacing */
    .hero-content { max-width: 1000px; }
    .hero .tagline { margin-bottom: 2rem; letter-spacing: 0.4em; }
    .display-1 { line-height: 1.15; margin-bottom: 1.5rem; }
    .hero-content p { line-height: 1.8; margin-bottom: 3.5rem; max-width: 750px; }
    .hero-cta { gap: 2rem; }

    /* Arabic Desktop Refinement */
    body.lang-ar .display-1 { line-height: 1.4; letter-spacing: 0 !important; }
    body.lang-ar .display-2 { line-height: 1.4; }
    body.lang-ar .page-header { height: auto !important; min-height: 55vh !important; }
    body.lang-ar .page-header .container { position: relative; z-index: 10; }
    body.lang-ar .page-header .text-muted { line-height: 1.8; font-size: 1.25rem; margin-top: 2.5rem !important; max-width: 850px !important; margin-left: auto; margin-right: auto; opacity: 1 !important; display: block !important; }
    body.lang-ar .hero-content { max-width: 750px; }
    body.lang-ar .hero-content p { line-height: 1.8; font-size: 1.25rem; }
    body.lang-ar .tagline { letter-spacing: 0.05em; font-weight: 900; }
    
    /* Section Rhythm */
    .section-header { margin-bottom: 6rem; }
    .section-header .tagline { margin-bottom: 2rem; }
    
    /* Global Arabic Spacing Refinement */
    [dir="rtl"] p { line-height: 1.6; }
    [dir="rtl"] .service-card h3 { line-height: 1.4; margin-bottom: 1.5rem; font-weight: 800; }
    [dir="rtl"] .project-info h3 { line-height: 1.4; }
    [dir="rtl"] .footer-col h4 { letter-spacing: 0.05em; font-weight: 800; margin-bottom: 2rem; }
    [dir="rtl"] .contact-card h3 { line-height: 1.5; margin-bottom: 4rem; }
    [dir="rtl"] .info-item h4 { line-height: 1.4; margin-bottom: 0.5rem; }
    [dir="rtl"] .nav-links a { font-weight: 700; font-size: 0.85rem; }
    
    /* Strong Desktop Card Hover */
    .glass-effect:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 40px 80px rgba(0,0,0,0.8), 0 0 30px rgba(16, 185, 129, 0.1);
    }
    
    .project-card:hover img { transform: scale(1.05); }

    /* Button & CTA Arabic Polish */
    body.lang-ar .btn { letter-spacing: 0; font-weight: 800; }
    body.lang-ar .tagline { letter-spacing: 0.05em; margin-bottom: 2.5rem; }
    /* Premium Section Refinement */
    .hero { padding-top: 140px; padding-bottom: 80px; overflow: visible; }
    .page-header { min-height: 60vh; height: auto; padding-top: 180px; padding-bottom: 100px; overflow: visible; }
}

@media (max-width: 992px) {
    .display-1 { font-size: clamp(3rem, 8vw, 5rem); }
    .display-2 { font-size: clamp(2rem, 5vw, 3rem); }
    .contact-grid { grid-template-columns: 1fr; gap: 3rem; }
    .features-split { grid-template-columns: 1fr; gap: 4rem; text-align: center; }
    .feature-img-wrap { order: -1; }
    .hero { 
        text-align: center; 
        justify-content: center; 
        align-items: center; 
        padding-top: calc(130px + env(safe-area-inset-top)); 
        min-height: 500px; /* Stable min-height */
        height: auto;
        padding-bottom: 5rem;
        overflow: visible;
    }
    .hero-content { 
        margin: 0 auto; 
        width: 100%;
    }
    .premium-footer .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    :root { --section-padding: 3.5rem; }
    .display-1 { font-size: clamp(2rem, 10vw, 2.75rem); line-height: 1.1; }
    .display-2 { font-size: clamp(1.75rem, 8vw, 2.25rem); }
    .portfolio-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .services-grid { grid-template-columns: 1fr; gap: 1rem; }
    .hero { 
        padding-top: calc(110px + env(safe-area-inset-top)); 
        padding-bottom: 4rem; 
        min-height: auto;
        height: auto;
    }
    .hero-cta { flex-direction: column; width: 100%; gap: 1.5rem; }
    .btn { width: 100%; justify-content: center; padding: 1.1rem 1.5rem; font-size: 0.85rem; border-radius: 12px; transition: background 0.3s ease, transform 0.3s ease; }
    .page-header { height: auto; min-height: auto; align-items: center; padding-top: calc(120px + env(safe-area-inset-top)); padding-bottom: 5rem; overflow: visible; }
    .service-card { padding: 2rem; }
    .project-info { padding: 1.5rem; }
    .premium-footer .footer-grid { grid-template-columns: 1fr; gap: 3rem; }
    .premium-footer .footer-col { display: block; text-align: left; }
    .footer-bottom-bar { flex-direction: column; text-align: center; justify-content: center; } 
    .footer-legal-links { justify-content: center; } 
    .registry-badge { width: 100%; justify-content: center; } 
    .contact-card { padding: 1.5rem; }
    .info-item { gap: 15px; margin-bottom: 2rem; }
}

@media (max-width: 480px) {
    .container { padding: 0 1.5rem; }
    .feature-img-wrap .floating-card { position: relative; right: 0; bottom: 0; margin-top: 20px; width: 100%; }
}

/* Fix for horizontal scroll issues */
img { max-width: 100%; height: auto; }

/* ============================================================
   RTL — ARABIC LANGUAGE OVERRIDES
   ============================================================ */

[dir="rtl"] .nav-content { flex-direction: row-reverse; }
[dir="rtl"] .nav-actions { flex-direction: row-reverse; }

/* Desktop Navbar RTL */
@media (min-width: 1025px) {
    [dir="rtl"] .nav-links { flex-direction: row-reverse; gap: 3rem; }
}

/* Content RTL */
[dir="rtl"] .hero-content { text-align: right; }
[dir="rtl"] .hero-cta { flex-direction: row-reverse; justify-content: flex-start; }
[dir="rtl"] .hero-glow { left: 5%; right: auto; }
[dir="rtl"] .tagline { text-align: right; display: block; }
[dir="rtl"] .section-header { text-align: right; }
[dir="rtl"] .features-split { direction: rtl; }
[dir="rtl"] .service-card { text-align: right; }
[dir="rtl"] .service-card .link { flex-direction: row-reverse; justify-content: flex-end; }
[dir="rtl"] .service-card .link i { transform: scaleX(-1); }
[dir="rtl"] .info-item { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .contact-card { text-align: right; }
[dir="rtl"] .stat { text-align: right; }

/* Footer RTL */
[dir="rtl"] .footer-grid { direction: rtl; }
[dir="rtl"] .footer-col { text-align: right; }
[dir="rtl"] .footer-col a:hover { transform: translateX(-5px); }
[dir="rtl"] .footer-bottom-bar { flex-direction: row-reverse; }

/* Form RTL */
[dir="rtl"] .form-group label { text-align: right; display: block; }
[dir="rtl"] .contact-form input,
[dir="rtl"] .contact-form textarea { text-align: right; direction: rtl; }

/* Responsive RTL adjustments */
@media (max-width: 768px) {
    [dir="rtl"] .hero-content, 
    [dir="rtl"] .section-header, 
    [dir="rtl"] .tagline { text-align: center; }
    [dir="rtl"] .footer-bottom-bar { flex-direction: column; }
}

/* Mobile Sidebar Lock (Always behaves same way regardless of AR/EN) */
@media (max-width: 1024px) {
    [dir="rtl"] .nav-links {
        left: auto !important; right: -100% !important;
        clip-path: circle(0px at calc(100% - 40px) 40px) !important;
    }
    [dir="rtl"] .nav-links.active {
        right: 0 !important;
        clip-path: circle(200% at calc(100% - 40px) 40px) !important;
    }
}