/* ==========================================================================
   RESPONSIVE DESIGN - Mobile and Tablet Adaptations
   
   This file uses a mobile-first approach:
   - Base styles (in other files) are for mobile
   - We progressively enhance for larger screens
   - Breakpoints: 640px (tablets), 768px (large tablets), 1024px (laptops)
   
   Why mobile-first?
   - Most users are on mobile devices
   - Easier to scale up than down
   - Better performance on mobile
   ========================================================================== */

/* ==========================================================================
   SMALL TABLETS - 640px and up
   ========================================================================== */

@media (min-width: 640px) {

    /* Container improvements */
    .container,
    .container-wide {
        padding: 0 var(--space-6);
    }

    /* Typography scale adjustments */
    .hero h1 {
        font-size: 3.5rem;
    }

    .section-title {
        font-size: 2.5rem;
    }

    /* Button groups */
    .cta-buttons {
        justify-content: flex-start;
    }

    /* Feature cards start to show in grid */
    .features-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: var(--space-8);
    }
}

/* ==========================================================================
   LARGE TABLETS - 768px and up
   ========================================================================== */

@media (min-width: 768px) {

    /* ==========================================================================
       HERO SECTION ADJUSTMENTS
       ========================================================================== */

    .hero {
        padding: var(--space-32) var(--space-6);
    }

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

    /* Hero typography */
    .hero h1 {
        font-size: 4rem;
        margin-bottom: var(--space-6);
    }

    .hero .tagline {
        font-size: var(--font-size-2xl);
        margin-bottom: var(--space-8);
    }

    .hero-description {
        font-size: var(--font-size-xl);
        margin-bottom: var(--space-10);
    }

    /* ==========================================================================
       SECTION IMPROVEMENTS
       ========================================================================== */

    /* Better section spacing */
    section {
        padding: var(--space-32) var(--space-6);
    }

    .section-title {
        font-size: 3rem;
        margin-bottom: var(--space-6);
    }

    .section-subtitle {
        font-size: var(--font-size-xl);
        margin-bottom: var(--space-16);
    }

    /* ==========================================================================
       FEATURES SECTION
       ========================================================================== */

    .features-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: var(--space-10);
    }

    .feature-card {
        padding: var(--space-10);
    }

    .feature-icon {
        width: 100px;
        height: 100px;
        font-size: 2.5rem;
        margin-bottom: var(--space-8);
    }

    /* ==========================================================================
       PRODUCTS SECTION
       ========================================================================== */

    .product-showcase {
        padding: var(--space-20);
        margin-top: var(--space-12);
    }

    .product-title {
        font-size: 3rem;
    }

    .product-description {
        font-size: var(--font-size-xl);
    }

    /* ==========================================================================
       CONTACT SECTION
       ========================================================================== */

    .contact {
        padding: var(--space-32) var(--space-6);
    }

    .contact h2 {
        font-size: 3rem;
        margin-bottom: var(--space-6);
    }

    .contact p {
        font-size: var(--font-size-xl);
        margin-bottom: var(--space-16);
    }

    /* Form improvements */
    .contact-form .form-group {
        grid-template-columns: 1fr 1fr;
    }

    .form-input,
    .form-textarea {
        padding: var(--space-5);
        font-size: var(--font-size-lg);
    }

    /* ==========================================================================
       BUTTON IMPROVEMENTS
       ========================================================================== */

    .btn {
        padding: var(--space-5) var(--space-8);
        font-size: var(--font-size-lg);
        min-height: 52px;
    }

    .btn-large {
        padding: var(--space-6) var(--space-10);
        font-size: var(--font-size-xl);
        min-height: 60px;
    }
}

/* ==========================================================================
   LAPTOPS - 1024px and up
   ========================================================================== */

@media (min-width: 1024px) {

    /* ==========================================================================
       HERO SECTION - DESKTOP LAYOUT
       ========================================================================== */

    .hero {
        padding: var(--space-32) var(--space-8);
    }

    .hero-content {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-16);
        align-items: center;
    }

    /* Hero text alignment */
    .hero-text {
        text-align: left;
    }

    .hero h1 {
        font-size: 4.5rem;
        line-height: 1;
    }

    .hero .tagline {
        font-size: 1.75rem;
    }

    .hero-description {
        font-size: var(--font-size-xl);
        max-width: 600px;
    }

    /* ==========================================================================
       FEATURES SECTION - DESKTOP GRID
       ========================================================================== */

    .features {
        padding: var(--space-32) var(--space-8);
    }

    .features-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-12);
    }

    .feature-card {
        padding: var(--space-12);
    }

    /* ==========================================================================
       PRODUCTS SECTION
       ========================================================================== */

    .products {
        padding: var(--space-32) var(--space-8);
    }

    .product-showcase {
        padding: var(--space-24);
    }

    /* ==========================================================================
       CONTACT SECTION
       ========================================================================== */

    .contact {
        padding: var(--space-32) var(--space-8);
    }

    /* ==========================================================================
       FOOTER IMPROVEMENTS
       ========================================================================== */

    footer {
        padding: var(--space-16) var(--space-8) var(--space-6);
    }
}

/* ==========================================================================
   LARGE SCREENS - 1280px and up
   ========================================================================== */

@media (min-width: 1280px) {

    /* Enhanced typography for large screens */
    .hero h1 {
        font-size: 5rem;
    }

    .section-title {
        font-size: 3.5rem;
    }

    /* Better spacing for large screens */
    .hero {
        padding: var(--space-32) var(--space-10);
    }

    section {
        padding: var(--space-32) var(--space-10);
    }

    /* Wider feature cards */
    .features-grid {
        gap: var(--space-16);
    }

    .feature-card {
        padding: var(--space-16);
    }
}

/* ==========================================================================
   MOBILE-SPECIFIC STYLES - 767px and below
   ========================================================================== */

@media (max-width: 767px) {

    /* ==========================================================================
       HERO SECTION - MOBILE LAYOUT
       ========================================================================== */

    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--space-8);
    }

    .hero-text {
        order: 2;
        /* Text comes after logo on mobile */
    }

    .hero-visual {
        order: 1;
        /* Logo comes first on mobile */
    }

    .hero h1 {
        font-size: 2.5rem;
        margin-bottom: var(--space-4);
    }

    .hero .tagline {
        font-size: var(--font-size-lg);
        margin-bottom: var(--space-6);
    }

    .hero-description {
        font-size: var(--font-size-base);
        margin-bottom: var(--space-8);
    }

    /* Logo size adjustment */
    .logo-hero {
        width: 120px;
        height: 120px;
    }

    .root-circle {
        width: 120px;
        height: 120px;
    }

    .neural-network {
        width: 60px;
        height: 60px;
    }

    .node {
        width: 6px;
        height: 6px;
    }

    /* ==========================================================================
       MOBILE SECTIONS
       ========================================================================== */

    section {
        padding: var(--space-20) var(--space-4);
    }

    .section-title {
        font-size: 2rem;
        margin-bottom: var(--space-4);
    }

    .section-subtitle {
        font-size: var(--font-size-base);
        margin-bottom: var(--space-12);
    }

    /* ==========================================================================
       MOBILE FEATURES
       ========================================================================== */

    .features-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .feature-card {
        padding: var(--space-8);
    }

    .feature-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
        margin-bottom: var(--space-6);
    }

    .feature-title {
        font-size: var(--font-size-lg);
    }

    /* ==========================================================================
       MOBILE PRODUCTS
       ========================================================================== */

    .product-showcase {
        padding: var(--space-12);
        margin-top: var(--space-8);
    }

    .product-title {
        font-size: 2rem;
    }

    .product-description {
        font-size: var(--font-size-base);
    }

    /* ==========================================================================
       MOBILE CONTACT FORM
       ========================================================================== */

    .contact-form .form-group {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .form-input,
    .form-textarea {
        padding: var(--space-4);
        font-size: var(--font-size-base);
    }

    /* ==========================================================================
       MOBILE BUTTONS
       ========================================================================== */

    .cta-buttons {
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }

    /* ==========================================================================
       MOBILE TYPOGRAPHY
       ========================================================================== */

    h2 {
        font-size: 2rem;
    }

    h3 {
        font-size: var(--font-size-xl);
    }

    p {
        font-size: var(--font-size-base);
    }
}

/* ==========================================================================
   ULTRA-WIDE SCREENS - 1536px and up
   ========================================================================== */

@media (min-width: 1536px) {

    /* Prevent content from getting too wide */
    .hero-content,
    .features-container,
    .products-container,
    .contact-container,
    .footer-content {
        max-width: 1400px;
    }

    /* Enhanced spacing for ultra-wide */
    .hero {
        padding: var(--space-32) var(--space-12);
    }

    section {
        padding: var(--space-32) var(--space-12);
    }
}

/* ==========================================================================
   HIGH-DPI DISPLAYS - Retina optimization
   ========================================================================== */

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    /* Sharper text rendering on high-DPI displays */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Adjust border widths for crisp rendering */
    .btn-secondary {
        border-width: 1.5px;
    }
}

/* ==========================================================================
   PRINT STYLES - Make it printable
   ========================================================================== */

@media print {

    /* Hide non-essential elements */
    .hero-visual,
    .btn,
    .cta-buttons,
    .contact-form,
    footer {
        display: none !important;
    }

    /* Adjust colors for print */
    .hero,
    .features,
    .products,
    .contact {
        background: white !important;
        color: black !important;
    }

    .section-title,
    h1,
    h2,
    h3 {
        color: black !important;
    }

    /* Remove shadows and animations */
    * {
        box-shadow: none !important;
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   LANDSCAPE MOBILE - Special handling for landscape phones
   ========================================================================== */

@media (max-height: 500px) and (orientation: landscape) {

    .hero {
        min-height: auto;
        padding: var(--space-16) var(--space-4);
    }

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

    .logo-hero {
        width: 80px;
        height: 80px;
    }

    .root-circle {
        width: 80px;
        height: 80px;
    }
}