/* DESKTOP LAYOUT IMPROVEMENTS - SCHOLR
   Add these styles to your style.css to make desktop view more expansive and engaging
*/

/* ===== DESKTOP CONTAINER IMPROVEMENTS ===== */

/* Make containers wider on desktop for better use of space */
@media (min-width: 1440px) {
    .container {
        max-width: 1400px; /* Increased from 1200px */
        padding: 0 3rem;
    }

    /* Hero section - more dramatic on large screens */
    .hero {
        min-height: 90vh;
        padding: 8rem 0 6rem;
    }

    .hero-content {
        max-width: 900px;
    }

    .hero-title {
        font-size: 5rem;
        line-height: 1.1;
    }

    .hero-text {
        font-size: 1.35rem;
        max-width: 700px;
    }

    .hero-stats {
        gap: 4rem;
    }

    /* Trust section - horizontal layout on wide screens */
    .trust-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 2rem;
    }

    /* Features - 3 column layout */
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }

    /* Subjects - 4 column layout */
    .subjects-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }

    /* Testimonials - show 3 at once */
    .testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    /* Protocol steps - horizontal layout */
    .protocol-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
}

/* Ultra-wide screens (1920px+) */
@media (min-width: 1920px) {
    .container {
        max-width: 1600px;
        padding: 0 4rem;
    }

    .hero-title {
        font-size: 5.5rem;
    }

    .hero-text {
        font-size: 1.5rem;
    }

    /* Even more expansive grids */
    .subjects-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .features-grid {
        gap: 3rem;
    }
}

/* ===== VISUAL ENHANCEMENTS FOR DESKTOP ===== */

/* Add subtle parallax effect on hero shapes */
@media (min-width: 1024px) {
    .hero-shape {
        transition: transform 0.3s ease;
    }

    body:hover .hero-shape.shape-1 {
        transform: translate(-50%, -50%) scale(1.05);
    }

    body:hover .hero-shape.shape-2 {
        transform: translate(-50%, -50%) scale(0.95);
    }
}

/* Desktop hover effects - more pronounced */
@media (min-width: 1024px) {
    .feature:hover {
        transform: translateY(-8px);
    }

    .subject-card:hover {
        transform: translateY(-6px);
    }

    .testimonial-card:hover {
        transform: translateY(-6px);
    }
}

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

@media (min-width: 1440px) {
    /* More breathing room between sections */
    section {
        padding: 6rem 0;
    }

    .section-header {
        margin-bottom: 4rem;
    }

    /* Pricing section - side-by-side layout */
    .pricing-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }
}

/* ===== TWO-COLUMN LAYOUTS FOR CONTENT SECTIONS ===== */

@media (min-width: 1280px) {
    /* Guarantee section - side by side */
    .guarantee-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
    }

    .guarantee-text {
        max-width: 100%;
    }

    .guarantee-visual {
        background: linear-gradient(135deg, var(--scholr-blue), var(--scholr-blue-light));
        padding: 3rem;
        border-radius: var(--radius-xl);
        color: white;
        min-height: 400px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* Contact section - better desktop layout */
    .contact-layout {
        grid-template-columns: 400px 1fr;
        gap: 4rem;
    }
}

/* ===== BACKGROUND PATTERNS & DEPTH ===== */

@media (min-width: 1024px) {
    /* Add subtle texture to sections */
    .section-trust {
        background:
                linear-gradient(180deg, transparent 0%, var(--gray-100) 100%),
                url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23004E89' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    .section-subjects {
        background:
                linear-gradient(to bottom, white 0%, var(--gray-100) 50%, white 100%),
                url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23004E89' fill-opacity='0.02' fill-rule='evenodd'/%3E%3C/svg%3E");
    }
}

/* ===== STICKY HEADER ENHANCEMENT ===== */

@media (min-width: 1024px) {
    .header.scrolled {
        backdrop-filter: blur(10px);
        background: rgba(255, 255, 255, 0.95);
    }
}

/* ===== GRID ALIGNMENT IMPROVEMENTS ===== */

/* Ensure items in grids align properly on desktop */
@media (min-width: 1024px) {
    .features-grid,
    .subjects-grid,
    .testimonials-grid,
    .protocol-grid {
        align-items: start; /* Prevents stretching */
    }

    /* Make cards consistent height */
    .feature,
    .subject-card,
    .testimonial-card {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .feature > *:last-child,
    .subject-card > *:last-child,
    .testimonial-card > *:last-child {
        margin-top: auto; /* Push last element to bottom */
    }
}