/* ========================================
   RESPONSIVE SPACING SYSTEM
   Mobile-First Approach
   ======================================== */

/* Base Spacing Variables - Mobile (default) */
:root {
    /* Spacing Scale */
    --spacing-xs: 0.5rem;   /* 8px */
    --spacing-sm: 1rem;     /* 16px */
    --spacing-md: 1.5rem;   /* 24px */
    --spacing-lg: 2rem;     /* 32px */
    --spacing-xl: 3rem;     /* 48px */
    --spacing-2xl: 4rem;    /* 64px */
    --spacing-3xl: 5rem;    /* 80px */

    /* Section Spacing */
    --section-padding-y: 3rem;
    --section-padding-x: 1rem;
    
    /* Container Padding */
    --container-padding: 1rem;
    
    /* Grid Gaps */
    --grid-gap: 1.5rem;
    --card-gap: 1rem;
    
    /* Card Padding */
    --card-padding: 1.5rem;
    
    /* Element Margins */
    --element-margin-sm: 1rem;
    --element-margin-md: 1.5rem;
    --element-margin-lg: 2rem;
}

/* Tablet Breakpoint (769px+) */
@media (min-width: 769px) {
    :root {
        --section-padding-y: 4rem;
        --section-padding-x: 2rem;
        --container-padding: 2rem;
        --grid-gap: 2rem;
        --card-gap: 1.5rem;
        --card-padding: 2rem;
        --element-margin-sm: 1.5rem;
        --element-margin-md: 2rem;
        --element-margin-lg: 3rem;
    }
}

/* Desktop Breakpoint (1025px+) */
@media (min-width: 1025px) {
    :root {
        --section-padding-y: 5rem;
        --section-padding-x: 20px;
        --container-padding: 20px;
        --grid-gap: 2rem;
        --card-gap: 2rem;
        --card-padding: 2.5rem;
        --element-margin-sm: 2rem;
        --element-margin-md: 3rem;
        --element-margin-lg: 4rem;
    }
}

/* ========================================
   APPLY RESPONSIVE SPACING
   ======================================== */

/* Container Updates */
.container {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

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

/* Grid Updates */
.grid {
    gap: var(--grid-gap);
}

.features-grid,
.features-grid-enhanced,
.compatibility-grid,
.why-features {
    gap: var(--card-gap);
}

/* Card Updates */
.card,
.feature-card-enhanced,
.compatibility-card,
.why-card,
.glass-card,
.policy-section {
    padding: var(--card-padding);
}

/* Section Headers */
.section-header {
    margin-bottom: var(--element-margin-lg);
}

/* Hero Section Responsive */
.hero {
    padding-top: calc(var(--nav-height) + var(--section-padding-y));
    padding-bottom: var(--section-padding-y);
}

.hero-content {
    gap: var(--grid-gap);
}

.hero-btns {
    gap: var(--spacing-sm);
    margin-bottom: var(--element-margin-md);
}

.hero-badges {
    gap: var(--spacing-sm);
}

/* Timeline Responsive */
.timeline-container {
    gap: var(--element-margin-md);
}

/* CTA Section */
.cta-box {
    padding: var(--spacing-2xl) var(--spacing-lg);
}

.cta-buttons {
    gap: var(--spacing-sm);
    margin-top: var(--element-margin-md);
}

/* Contact Form */
.contact-form-container {
    padding: var(--spacing-lg);
}

.form-row {
    margin-bottom: var(--element-margin-sm);
}

/* Footer */
.footer-content {
    padding: var(--spacing-xl) var(--container-padding);
}

/* ========================================
   MOBILE-SPECIFIC OPTIMIZATIONS
   ======================================== */

@media (max-width: 768px) {
    /* Reduce hero spacing on mobile */
    .hero {
        min-height: auto;
        padding-top: calc(var(--nav-height) + 2rem);
        padding-bottom: 2rem;
    }
    
    /* Stack hero content */
    .hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    /* Reduce section padding */
    .section {
        padding: 3rem 0;
    }
    
    /* Single column grids */
    .grid.two-col,
    .grid.three-col,
    .grid.four-col {
        grid-template-columns: 1fr;
    }
    
    /* Reduce card padding */
    .card,
    .feature-card-enhanced,
    .compatibility-card {
        padding: 1.5rem;
    }
    
    /* Smaller gaps */
    .features-grid-enhanced,
    .compatibility-grid {
        gap: 1rem;
    }
    
    /* Timeline adjustments */
    .timeline-item {
        padding-left: 0;
    }
    
    /* CTA box mobile */
    .cta-box {
        padding: 2rem 1.5rem;
    }
    
    /* Form spacing */
    .contact-form {
        padding: 1.5rem;
    }
    
    /* Footer mobile */
    .footer-content {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
        padding: 2rem 1rem;
    }
}

/* ========================================
   TABLET-SPECIFIC OPTIMIZATIONS
   ======================================== */

@media (min-width: 769px) and (max-width: 1024px) {
    /* Two column grids on tablet */
    .grid.three-col,
    .grid.four-col {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Optimize hero for tablet */
    .hero-content {
        gap: 3rem;
    }
    
    /* Features grid - 2 columns */
    .features-grid-enhanced {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================
   DESKTOP-SPECIFIC OPTIMIZATIONS
   ======================================== */

@media (min-width: 1025px) {
    /* Ensure proper grid layouts */
    .grid.two-col {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid.three-col {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .grid.four-col {
        grid-template-columns: repeat(4, 1fr);
    }
    
    /* Features grid - 3 columns */
    .features-grid-enhanced {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Compatibility grid - 4 columns */
    .compatibility-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}