/* ==============================================
   MR 360 Dev Theme - Responsive CSS
   Mobile-first responsive design breakpoints
   ============================================== */

/* ============================================================
   1440px - Large Desktop
   ============================================================ */
@media (max-width: 1440px) {
    .container { max-width: 1200px; }
    .hero-title { font-size: clamp(2.2rem, 4vw, 3.8rem); }
}

/* ============================================================
   1280px - Desktop
   ============================================================ */
@media (max-width: 1280px) {
    .container { max-width: 1100px; }

    .hero-grid {
        gap: 40px;
    }

    .about-grid {
        gap: 50px;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 40px;
    }

    .footer-newsletter {
        grid-column: 1 / -1;
    }
}

/* ============================================================
   1024px - Tablet Landscape
   ============================================================ */
@media (max-width: 1024px) {
    :root {
        --section-padding: 70px;
    }

    .container { max-width: 960px; padding: 0 24px; }

    /* Header */
    .main-nav { display: none !important; }
    .mobile-menu-toggle { display: flex !important; }

    /* Hero */
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-image-area {
        display: none;
    }

    .hero-stats {
        justify-content: center;
    }

    .hero-cta {
        justify-content: center;
    }

    .hero-badge {
        margin: 0 auto;
        width: fit-content;
    }

    .scroll-indicator { display: none; }

    /* About */
    .about-grid {
        grid-template-columns: 1fr;
    }

    .about-image-area {
        max-width: 500px;
        margin: 0 auto;
    }

    /* Services */
    .services-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    /* Skills */
    .skills-grid-wrapper {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    /* Timeline */
    .timeline-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    /* Process */
    .process-grid {
        grid-template-columns: 1fr;
    }

    .process-image {
        max-width: 500px;
        margin: 0 auto;
    }

    /* Contact */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    /* Magic cursor - hide on tablet */
    .mr360-cursor { display: none !important; }
}

/* ============================================================
   768px - Tablet Portrait
   ============================================================ */
@media (max-width: 768px) {
    :root {
        --section-padding: 60px;
    }

    .container { padding: 0 20px; }

    /* Typography */
    h1 { font-size: clamp(1.8rem, 6vw, 2.5rem) !important; }
    h2 { font-size: clamp(1.5rem, 5vw, 2rem) !important; }

    /* Section Tags */
    .section-tag { font-size: 11px; }

    /* Section Descriptions */
    .section-desc { font-size: 15px; }

    /* Buttons */
    .btn-lg { padding: 14px 28px; font-size: 15px; }

    /* Hero Stats */
    .hero-stats { gap: 20px; }
    .hero-stat-divider { display: none; }
    .hero-stat { text-align: center; }

    /* Services */
    .services-grid { grid-template-columns: 1fr; }

    /* Portfolio */
    .portfolio-grid { grid-template-columns: 1fr; }
    .portfolio-header { flex-direction: column; align-items: flex-start; gap: 16px; }

    /* Blog */
    .blog-grid { grid-template-columns: 1fr; }
    .blog-header { flex-direction: column; align-items: flex-start; gap: 16px; }

    /* Timeline */
    .timeline-col-title { font-size: 1rem; }

    /* Contact Form */
    .form-grid { grid-template-columns: 1fr; }
    .form-field.full-width { grid-column: 1; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr; }
    .footer-brand { grid-column: 1; }
    .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
    .footer-bottom-links { flex-wrap: wrap; justify-content: center; }

    /* Back to Top */
    .back-to-top { right: 20px; bottom: 20px; width: 44px; height: 44px; }

    /* Section padding adjustment */
    .section-padding { padding: var(--section-padding) 0; }
}

/* ============================================================
   480px - Mobile
   ============================================================ */
@media (max-width: 480px) {
    :root {
        --section-padding: 50px;
    }

    .container { padding: 0 16px; }

    /* Header */
    .site-header { padding: 14px 0; }
    .header-cta { display: none; }

    /* Hero */
    .hero-section { padding: 110px 0 60px; }
    .hero-title { font-size: clamp(1.6rem, 8vw, 2.2rem) !important; }
    .hero-desc { font-size: 14px; }
    .hero-cta { flex-direction: column; gap: 12px; align-items: center; }
    .btn-lg { width: 100%; max-width: 300px; }
    .btn-video-play { justify-content: center; }
    .hero-stats { flex-direction: row; gap: 10px; justify-content: center; }
    .stat-number { font-size: 1.5rem; }
    .stat-label { font-size: 10px; }

    /* Marquee */
    .marquee-section { padding: 14px 0; }
    .marquee-item { font-size: 12px; gap: 12px; padding: 0 10px; }

    /* About */
    .about-cta { flex-direction: column; }
    .about-cta .btn { width: 100%; justify-content: center; }
    .about-stats-row { flex-direction: row; flex-wrap: wrap; gap: 20px; }

    /* Skills */
    .tools-grid { grid-template-columns: 1fr; }

    /* Portfolio Filters */
    .portfolio-filters { gap: 8px; justify-content: flex-start; overflow-x: auto; padding-bottom: 8px; }
    .filter-btn { white-space: nowrap; flex-shrink: 0; font-size: 12px; padding: 8px 16px; }

    /* Portfolio CTA Banner */
    .portfolio-cta-banner {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .portfolio-cta-banner .btn { width: 100%; justify-content: center; }

    /* Service Cards */
    .service-card { padding: 28px 22px; }

    /* Testimonials */
    .testimonials-track { grid-template-columns: 1fr; }

    /* Timeline */
    .timeline-item { padding: 20px; }

    /* Contact */
    .contact-items { gap: 16px; }
    .contact-item { gap: 12px; }

    /* Blog */
    .blog-card { flex-direction: column; }
    .blog-meta { flex-wrap: wrap; gap: 10px; }

    /* Process Accordion */
    .faq-question { font-size: 14px; padding: 16px; }
    .faq-answer-inner { font-size: 14px; padding: 0 16px 16px; }

    /* Section Header */
    .section-title { font-size: clamp(1.4rem, 6vw, 1.8rem) !important; }
    .section-tag { font-size: 10px; letter-spacing: 2px; }

    /* Preloader */
    .preloader-logo { font-size: 1.2rem; }

    /* Mobile Menu */
    .mobile-menu nav ul li a { font-size: 1.8rem; }
}

/* ============================================================
   360px - Small Mobile
   ============================================================ */
@media (max-width: 360px) {
    .container { padding: 0 14px; }
    .hero-title { font-size: 1.6rem !important; }
    .btn { font-size: 13px; padding: 10px 20px; }
    .section-title { font-size: 1.4rem !important; }
    .service-card { padding: 24px 18px; }
    .testimonial-card { padding: 22px; }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
    .site-header,
    .site-footer,
    .back-to-top,
    .mr360-cursor,
    .mr360-preloader,
    .hero-float-card,
    .scroll-indicator,
    .mobile-menu {
        display: none !important;
    }

    body {
        background: white !important;
        color: #333 !important;
    }

    a {
        text-decoration: underline;
        color: #333 !important;
    }

    .container {
        max-width: 100% !important;
    }
}

/* ============================================================
   HIGH CONTRAST MODE
   ============================================================ */
@media (forced-colors: active) {
    .btn { border: 2px solid ButtonText; }
    .skill-bar-fill { forced-color-adjust: none; background: Highlight; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .hero-img-wrapper {
        animation: none !important;
    }

    .hero-float-card {
        animation: none !important;
    }

    .marquee-track {
        animation-play-state: paused !important;
    }
}

/* ============================================================
   DARK MODE MEDIA QUERY (forced light mode override)
   ============================================================ */
@media (prefers-color-scheme: light) {
    /* Theme is dark by design — no override needed */
}

/* ============================================================
   TOUCH / HOVER FALLBACK
   ============================================================ */
@media (hover: none) {
    .portfolio-item:hover,
    .service-card:hover,
    .testimonial-card:hover {
        transform: none !important;
    }

    .portfolio-img-overlay {
        opacity: 1 !important;
        background: rgba(0, 0, 0, 0.4) !important;
    }

    .portfolio-link-icon {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================================
   ELEMENTOR RESPONSIVE OVERRIDES
   ============================================================ */
@media (max-width: 1024px) {
    .elementor-section-boxed > .elementor-container {
        max-width: 95% !important;
    }
}

@media (max-width: 768px) {
    .elementor-col-50 { width: 100% !important; }
    .elementor-col-33 { width: 100% !important; }
    .elementor-col-25 { width: 100% !important; }
    .elementor-col-66 { width: 100% !important; }
    .elementor-col-75 { width: 100% !important; }
}