/**
 * IVINITIV Pro Theme - Responsive CSS
 * 
 * @package IVINITIV_Pro
 * @version 1.0.0
 */

/* ========================================
   LARGE DESKTOPS (1440px+)
   ======================================== */

@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
    }
    
    .hero-title {
        font-size: var(--text-7xl);
    }
}

/* ========================================
   DESKTOPS (1024px - 1439px)
   ======================================== */

@media (max-width: 1439px) {
    .container {
        max-width: 1200px;
    }
}

/* ========================================
   TABLETS (768px - 1023px)
   ======================================== */

@media (max-width: 1023px) {
    :root {
        --space-24: 5rem;
        --space-20: 4rem;
        --space-16: 3rem;
    }
    
    .container {
        padding: 0 var(--space-4);
    }
    
    /* Header */
    .header-inner {
        height: 70px;
    }
    
    .main-navigation {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--white);
        flex-direction: column;
        padding: var(--space-6);
        transform: translateX(100%);
        transition: transform 0.3s ease-out;
        z-index: 999;
        overflow-y: auto;
    }
    
    .main-navigation.active {
        transform: translateX(0);
    }
    
    .main-navigation ul {
        flex-direction: column;
        width: 100%;
        gap: var(--space-2);
    }
    
    .main-navigation a {
        display: block;
        padding: var(--space-3) 0;
        font-size: var(--text-lg);
        border-bottom: 1px solid var(--gray-200);
    }
    
    .header-cta {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    /* Hero */
    .hero-section {
        padding: 100px 0 60px;
        min-height: auto;
    }
    
    .hero-title {
        font-size: var(--text-4xl);
    }
    
    .hero-stats {
        flex-wrap: wrap;
        gap: var(--space-6);
    }
    
    /* Grids */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .industries-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .tech-grid {
        gap: var(--space-3);
    }
    
    /* Contact */
    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    /* Blog Layout */
    .blog-layout,
    .single-post-layout {
        grid-template-columns: 1fr;
    }
    
    .blog-sidebar,
    .post-sidebar {
        order: -1;
    }
    
    /* Footer */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-8);
    }
}

/* ========================================
   MOBILE (up to 767px)
   ======================================== */

@media (max-width: 767px) {
    :root {
        --text-5xl: 2.5rem;
        --text-4xl: 2rem;
        --text-3xl: 1.75rem;
        --space-24: 4rem;
        --space-20: 3rem;
        --space-16: 2.5rem;
    }
    
    /* Typography */
    h1 { font-size: var(--text-4xl); }
    h2 { font-size: var(--text-3xl); }
    h3 { font-size: var(--text-2xl); }
    
    /* Hero */
    .hero-section {
        padding: 100px 0 40px;
    }
    
    .hero-title {
        font-size: var(--text-3xl);
    }
    
    .hero-subtitle {
        font-size: var(--text-lg);
    }
    
    .hero-cta {
        flex-direction: column;
    }
    
    .hero-cta .btn {
        width: 100%;
        justify-content: center;
    }
    
    .hero-stats {
        flex-direction: column;
        text-align: center;
        gap: var(--space-4);
    }
    
    .hero-stat-number {
        font-size: var(--text-3xl);
    }
    
    /* Grids */
    .services-grid,
    .industries-grid,
    .blog-grid,
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .service-card[style*="grid-column: span 2"] {
        grid-column: span 1 !important;
    }
    
    .service-card[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Section Header */
    .section-title {
        font-size: var(--text-3xl);
    }
    
    .section-description {
        font-size: var(--text-base);
    }
    
    /* Page Header */
    .page-header {
        padding: 120px 0 60px;
    }
    
    .page-title {
        font-size: var(--text-3xl);
    }
    
    /* Contact */
    .contact-info {
        padding: var(--space-6);
    }
    
    .contact-form-wrapper {
        padding: var(--space-6);
    }
    
    .contact-grid .contact-form-wrapper form[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: var(--space-4);
    }
    
    .footer-legal {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    /* CTA */
    .cta-buttons {
        flex-direction: column;
    }
    
    .cta-buttons .btn {
        width: 100%;
    }
    
    /* Pagination */
    .pagination {
        flex-wrap: wrap;
    }
    
    /* Forms */
    .form-group {
        margin-bottom: var(--space-4);
    }
    
    /* About Intro */
    .about-intro {
        grid-template-columns: 1fr !important;
        gap: var(--space-6) !important;
    }
    
    .about-intro > div:last-child {
        order: -1;
    }
    
    /* Features Grid Override */
    .features-grid[style*="grid-template-columns: repeat(3, 1fr)"],
    .features-grid[style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   SMALL MOBILE (up to 480px)
   ======================================== */

@media (max-width: 480px) {
    :root {
        --text-4xl: 1.875rem;
        --text-3xl: 1.5rem;
        --space-6: 1rem;
    }
    
    .container {
        padding: 0 var(--space-4);
    }
    
    .hero-title {
        font-size: var(--text-2xl);
    }
    
    .hero-badge {
        font-size: var(--text-xs);
        padding: var(--space-1) var(--space-3);
    }
    
    .section {
        padding: var(--space-16) 0;
    }
    
    .service-card,
    .blog-card {
        padding: var(--space-5);
    }
    
    .service-icon {
        width: 48px;
        height: 48px;
    }
    
    .service-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .btn-lg {
        padding: var(--space-3) var(--space-5);
        font-size: var(--text-sm);
    }
    
    .page-title {
        font-size: var(--text-2xl);
    }
    
    .breadcrumbs {
        flex-wrap: wrap;
    }
}

/* ========================================
   LANDSCAPE MOBILE
   ======================================== */

@media (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        min-height: auto;
        padding: 100px 0 40px;
    }
    
    .hero-stats {
        display: none;
    }
}

/* ========================================
   HIGH DPI / RETINA DISPLAYS
   ======================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .site-header,
    .site-footer,
    .cta-section,
    .hero-particles,
    .mobile-menu-toggle,
    .btn {
        display: none !important;
    }
    
    .hero-section {
        min-height: auto;
        padding: 2rem 0;
        background: white !important;
        color: black !important;
    }
    
    .hero-title,
    .hero-subtitle {
        color: black !important;
    }
    
    .section {
        padding: 2rem 0;
    }
    
    a {
        text-decoration: underline;
    }
    
    .page-break {
        page-break-before: always;
    }
}

/* ========================================
   DARK MODE SUPPORT
   ======================================== */

@media (prefers-color-scheme: dark) {
    /* Note: Theme is already dark-themed, 
       but we can add OS-level dark mode adjustments here */
}

/* ========================================
   TOUCH DEVICE OPTIMIZATIONS
   ======================================== */

@media (pointer: coarse) {
    .hover-lift:hover,
    .hover-scale:hover {
        transform: none;
    }
    
    .particle {
        display: none;
    }
    
    /* Larger touch targets */
    .btn {
        min-height: 44px;
    }
    
    .main-navigation a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ========================================
   SAFE AREA INSETS (NOTCH DEVICES)
   ======================================== */

@supports (padding-top: env(safe-area-inset-top)) {
    .site-header {
        padding-top: env(safe-area-inset-top);
    }
    
    .main-navigation {
        padding-bottom: env(safe-area-inset-bottom);
    }
}