/* ===================================
   ROADREADY SUPPLY - DESKTOP OPTIMIZATION
   Reduces scrolling on PC while keeping the theme
   =================================== */

/* Desktop-specific optimizations (applied automatically on screens > 1024px) */
@media (min-width: 1024px) {
    /* Reduce hero height on desktop */
    .hero {
        height: 75vh;  /* Was 90vh */
        min-height: 550px;  /* Was 700px */
    }
    
    .hero-content {
        max-width: 1000px;  /* Was 1100px */
    }
    
    /* Compact sections */
    .products-section,
    .why-section,
    .testimonials-section,
    .cta-section {
        padding: 4rem 2rem;  /* Was 6rem */
    }
    
    .categories-section {
        padding: 4rem 2rem;  /* Was 5rem */
    }
    
    .footer {
        padding: 4rem 2rem 2rem;  /* Was 5rem */
    }
    
    /* Smaller section titles */
    .section-title {
        font-size: clamp(2.2rem, 4vw, 3.2rem);  /* Was 2.5-4rem */
        margin-bottom: 1.5rem;  /* Was 2rem */
    }
    
    .section-subtitle {
        font-size: clamp(1rem, 1.5vw, 1.2rem);  /* Was 1.1-1.5rem */
    }
    
    /* Compact product showcase */
    .product-showcase {
        gap: 3rem;  /* Was 4rem */
        align-items: center;
    }
    
    .product-image {
        flex: 1;
        max-width: 500px;  /* Added limit */
    }
    
    .product-info {
        flex: 1;
        padding-left: 3rem;  /* Was 4rem */
    }
    
    /* Smaller product card text on desktop */
    .product-card-title {
        font-size: 1.4rem;  /* Was 1.5rem */
        margin-bottom: 0.5rem;
    }
    
    .product-card-desc {
        font-size: 0.9rem;  /* Was 1rem */
        line-height: 1.5;
    }
    
    /* Compact features grid */
    .features-grid {
        gap: 2rem;  /* Was 2.5rem */
    }
    
    .feature-card {
        padding: 2rem;  /* Was 2.5rem */
    }
    
    /* Smaller feature card text */
    .feature-card h3 {
        font-size: 1.2rem;  /* Was 1.3rem */
        margin-bottom: 0.75rem;
    }
    
    .feature-card p {
        font-size: 0.9rem;  /* Was 1rem */
    }
    
    /* Compact categories */
    .category-card {
        margin-bottom: 0;
    }
    
    .category-info {
        padding: 1.5rem;  /* Was 2rem */
    }
    
    .category-info h3 {
        font-size: 1.3rem;  /* Was 1.5rem */
    }
    
    /* Trust badges - show all in one row on desktop */
    .trust-badges {
        flex-wrap: nowrap;
        justify-content: center;
        gap: 3rem;
        margin-top: 2.5rem;  /* Was 3rem */
    }
    
    .trust-badge {
        flex-direction: row;
        gap: 1rem;
    }
    
    /* Compact hero buttons */
    .hero-buttons {
        gap: 1.25rem;  /* Was 1.5rem */
    }
    
    .btn-large {
        padding: 1.1rem 2rem;  /* Was 1.25rem 2.5rem */
        font-size: 0.95rem;  /* Was 1rem */
    }
    
    /* Reduce paragraph margins */
    p {
        margin-bottom: 1rem;  /* Was 1.25rem */
    }
    
    /* Tighter section header spacing */
    .section-header {
        margin-bottom: 3rem;  /* Was 4rem */
    }
}

/* Extra large screens (1440px+) */
@media (min-width: 1440px) {
    /* Further optimizations for large monitors */
    .hero {
        height: 70vh;
    }
    
    .products-section {
        padding: 3.5rem 2rem;
    }
    
    /* Use wider container */
    .container {
        max-width: 1340px;  /* Was 1200px */
    }
    
    /* Larger product showcase on big screens */
    .product-showcase {
        gap: 4rem;
    }
    
    .product-image {
        max-width: 550px;
    }
}

/* Ultra-wide screens (1920px+) */
@media (min-width: 1920px) {
    .hero {
        height: 65vh;
    }
    
    .container {
        max-width: 1600px;
    }
    
    /* Add more columns on ultra-wide */
    .features-grid,
    .categories-grid {
        gap: 2.5rem;
    }
}

/* Reduce vertical rhythm globally */
@media (min-width: 1024px) {
    body {
        line-height: 1.5;  /* Slightly tighter than default */
    }
    
    h1, h2, h3, h4, h5 {
        line-height: 1.2;  /* Tighter headings */
        margin-bottom: 0.75em;
    }
    
    section + section {
        margin-top: 0;  /* Sections already have padding */
    }
}