/* static/css/responsive.css */
/* ============================================================
   AgriDoctor.AI — Responsive Stylesheet
   Mobile-first overrides for tablet and desktop breakpoints.
   ============================================================ */

/* --- Large Desktop (1200px+) --- */
@media (min-width: 1200px) {
    /* Headline size is capped in style.css (clamp) so the two-line
       hero headline never wraps. No override here. */
}

/* --- Desktop (992px - 1199px) --- */
@media (max-width: 1199px) {
    h1 { font-size: 2.8rem; }
    h2 { font-size: 2rem; }
    
    .hero-container {
        gap: 40px;
    }
    
    .footer-grid {
        gap: 30px;
    }
}

/* --- Tablet (768px - 991px) --- */
@media (max-width: 991px) {
    h1 { font-size: 2.4rem; }
    h2 { font-size: 1.8rem; }
    
    .section-header {
        margin-bottom: 40px;
    }
    
    /* Navbar */
    .navbar-links,
    .navbar-cta {
        display: none;
    }
    
    .hamburger {
        display: flex;
    }
    
    /* Hero */
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .hero-subheadline {
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-cta-group {
        justify-content: center;
    }
    
    .hero-stats {
        justify-content: center;
    }
    
    .hero-visual {
        order: -1;
    }
    
    .phone-frame {
        width: 220px;
        height: 450px;
    }
    
    /* About page */
    .about-section-list {
        grid-template-columns: 1fr;
    }
    
    /* Feature detail pages */
    .feature-detail-hero {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    
    .feature-caps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .feature-others-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Feature grid — 2 across on tablet */
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    /* AI Section */
    .ai-layout {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .ai-stats {
        justify-content: center;
    }
    
    .ai-visual {
        min-height: 300px;
    }
    
    /* Download */
    .download-layout {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .download-buttons {
        align-items: center;
    }
    
    .qr-code {
        justify-content: center;
    }
    
    .download-visual {
        order: -1;
    }
    
    /* Contact */
    .contact-layout {
        grid-template-columns: 1fr;
    }
    
    /* Waitlist */
    .waitlist-fields {
        grid-template-columns: 1fr;
    }
    
    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px 30px;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}

/* --- Mobile (576px - 767px) --- */
@media (max-width: 767px) {
    :root {
        /* --section-padding is derived from --section-pad-y in style.css,
           so overriding these two tokens retunes every section AND keeps
           .waitlist / .contact in proportion. Do not set --section-padding
           directly here -- that would leave .waitlist and .contact stuck
           at their desktop values. */
        --section-pad-y: 60px;
        --section-pad-y-tight: 30px;
    }
    
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    
    .hero-headline {
        font-size: 2.2rem;
    }
    
    .hero-subheadline {
        font-size: 1rem;
    }
    
    .hero-cta-group {
        flex-direction: column;
        align-items: center;
    }
    
    .hero-stats {
        flex-wrap: wrap;
        gap: 20px;
    }
    
    .features-grid,
    .feature-grid {
        grid-template-columns: 1fr;
    }
    
    .feature-caps-grid {
        grid-template-columns: 1fr;
    }
    
    .feature-others-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .marketplace-grid {
        grid-template-columns: 1fr;
    }
    
    .africa-grid {
        grid-template-columns: 1fr;
    }
    
    .partners-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-social {
        justify-content: center;
    }
    
    .error-actions {
        flex-direction: column;
    }
    
    .legal-content {
        padding: 24px;
    }
}

/* --- Small Mobile (< 576px) --- */
@media (max-width: 575px) {
    .container {
        padding: 0 16px;
    }
    
    .hero-headline {
        font-size: 1.8rem;
    }
    
    .phone-frame {
        width: 180px;
        height: 370px;
    }
    
    .phone-left,
    .phone-right {
        width: 140px;
        height: 290px;
    }
    
    .carousel-slide {
        min-width: 240px;
    }
    
    .partners-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    
    .partner-card {
        padding: 16px;
    }
    
    .contact-form {
        padding: 20px;
    }
    
    .glass-card {
        padding: 20px;
    }
}