/* ===================================
   RESPONSIVE FORM CSS
   Mobile-First Overrides Only
   Desktop styles remain unchanged
   =================================== */

/* ===================================
   Tablet & Below (max-width: 1023px)
   =================================== */
@media (max-width: 1023px) {
    /* Reduce wrapper padding for tablets */
    .contact-wrapper {
        padding: 60px 40px;
    }
    
    /* Adjust title padding */
    .contact-section .section-title {
        padding: 0 20px;
    }
    
    /* Allow form to breathe on smaller screens */
    .contact-form {
        max-width: 100%;
    }
}

/* ===================================
   Mobile Devices (max-width: 768px)
   =================================== */
@media (max-width: 768px) {
    /* CRITICAL: Convert 2-column grid to single column */
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: 0;
    }
    
    /* Reduce wrapper padding significantly */
    .contact-wrapper {
        padding: 40px 24px;
    }
    
    /* Remove horizontal padding from title */
    .contact-section .section-title {
        padding: 0 10px;
        font-size: 22px;
    }
    
    /* Increase form control height for touch targets */
    .form-control {
        min-height: 48px;
        padding: 14px 16px;
        font-size: 16px; /* Prevent iOS auto-zoom */
    }
    
    /* Maintain 16px on focus (iOS fix) */
    .form-control:focus {
        font-size: 16px;
    }
    
    /* Adjust placeholder size */
    .form-control::placeholder {
        font-size: 15px;
    }
    
    /* Reduce textarea height for mobile */
    textarea.form-control {
        min-height: 130px;
    }
    
    /* Increase form group spacing */
    .form-group {
        margin-bottom: 18px;
    }
    
    /* Reduce submit button top margin */
    .form-submit {
        margin-top: 25px;
    }
    
    /* Make button more mobile-friendly */
    .contact-section .btn-primary {
        width: 100%;
        padding: 16px 30px;
        font-size: 13px;
        min-height: 50px;
    }
    
    /* Reduce message padding */
    .form-message {
        font-size: 15px;
        padding: 12px;
    }
}

/* ===================================
   Small Mobile (max-width: 480px)
   =================================== */
@media (max-width: 480px) {
    /* Further reduce wrapper padding */
    .contact-wrapper {
        padding: 30px 20px;
        border-radius: 8px;
    }
    
    /* Reduce title font size */
    .contact-section .section-title {
        font-size: 20px;
        padding: 0 5px;
        line-height: 1.5;
    }
    
    /* Adjust subtitle */
    .contact-section .section-subtitle {
        font-size: 12px;
        letter-spacing: 1px;
    }
    
    /* Optimize input sizing */
    .form-control {
        padding: 12px 14px;
        font-size: 16px;
        border-radius: 8px;
    }
    
    /* Further reduce textarea */
    textarea.form-control {
        min-height: 110px;
    }
    
    /* Tighten form group spacing */
    .form-group {
        margin-bottom: 16px;
    }
    
    /* Reduce submit margin */
    .form-submit {
        margin-top: 20px;
    }
    
    /* Optimize button for small screens */
    .contact-section .btn-primary {
        padding: 14px 24px;
        font-size: 12px;
        letter-spacing: 0.5px;
        min-height: 48px;
    }
    
    /* Compact message styling */
    .form-message {
        font-size: 14px;
        padding: 10px;
        margin-top: 15px;
    }
}

/* ===================================
   Extra Small Mobile (max-width: 360px)
   =================================== */
@media (max-width: 360px) {
    /* Minimal wrapper padding */
    .contact-wrapper {
        padding: 24px 16px;
    }
    
    /* Further reduce title */
    .contact-section .section-title {
        font-size: 18px;
        line-height: 1.6;
        padding: 0;
    }
    
    /* Compact inputs */
    .form-control {
        padding: 12px;
        font-size: 16px;
    }
    
    /* Minimum viable textarea */
    textarea.form-control {
        min-height: 100px;
    }
    
    /* Compact button */
    .contact-section .btn-primary {
        padding: 13px 20px;
        font-size: 11px;
        min-height: 46px;
    }
}

/* ===================================
   EXPLANATIONS
   =================================== */

/*
WHY EACH OVERRIDE IS NEEDED:

1. .form-row grid-template-columns: 1fr
   - Desktop: 2 columns side-by-side
   - Mobile: Single column prevents field crushing

2. .contact-wrapper padding reduction
   - Desktop: 80px padding looks spacious
   - Mobile: 80px causes horizontal overflow on 320px screens

3. .contact-section .section-title padding
   - Desktop: 40px padding centers nicely
   - Mobile: 40px leaves no room for text on small screens

4. .form-control font-size: 16px
   - Desktop: 14px is fine
   - Mobile: iOS auto-zooms on inputs < 16px (UX nightmare)

5. .form-control min-height: 48px
   - Desktop: Auto height works
   - Mobile: WCAG requires 44px minimum touch targets

6. textarea.form-control min-height reduction
   - Desktop: 200px shows 8+ lines
   - Mobile: 200px takes entire viewport, reduced to 100-130px

7. .contact-section .btn-primary width: 100%
   - Desktop: Centered with auto width
   - Mobile: Full width prevents awkward centering/wrapping

8. .form-group margin-bottom adjustments
   - Desktop: 15px spacing fine
   - Mobile: 18px creates better visual separation when stacked

9. .form-submit margin-top reduction
   - Desktop: 40px provides nice spacing
   - Mobile: 40px wastes precious viewport space

10. All padding reductions (wrapper, title, controls)
    - Prevents horizontal scroll on 320px-375px devices
    - Maintains visual hierarchy while maximizing content area

DESKTOP GUARANTEE:
- No styles override desktop (≥1024px)
- All media queries use max-width
- No !important flags (respects cascade)
- Original CSS untouched
*/