/* 
 * Upward.jobs Responsive Overrides
 * Mobile-first logic & Breakpoint corrections 
 */

/* ─── GLOBAL RESPONSIVE FIXES ─── */
html {
    /* Fluid typography scaling */
    font-size: clamp(14px, 2.5vw, 16px);
}

img, svg, video {
    max-width: 100%;
    height: auto;
}

.btn, .header-btn {
    min-height: 44px; /* Minimum touch target */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 480px) {
    .btn, .header-btn {
        width: 100%; /* Full width CTAs on small mobile */
        text-align: center;
    }
}

/* ─── INDEX.BLADE.PHP & HOMEPAGE FIXES ─── */

/* 1. Hero Section Stacking */
@media (max-width: 920px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: center;
    }
    
    .hero-copy {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .hero-btns {
        justify-content: center;
        width: 100%;
        flex-direction: column;
        gap: 12px;
    }
    
    .hero-btns .btn {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .hero-stats {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .hero-stats {
        grid-template-columns: 1fr; /* Stack hero stats vertically on smallest screens */
    }
    
    .hero-h1 {
        font-size: clamp(28px, 8vw, 34px);
    }
}

/* 2. Process / How It Works Grids */
.process-grid, .steps-grid, .feat-grid {
    display: grid;
    gap: 24px;
}

@media (max-width: 1024px) {
    .process-grid, .steps-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .process-grid, .steps-grid, .feat-grid {
        grid-template-columns: 1fr !important; /* Single column on mobile */
    }
}

/* 3. ATS Score Checker Layout */
@media (max-width: 768px) {
    .ats-form {
        flex-direction: column;
        width: 100%;
    }
    
    .ats-input, .ats-form input[type="file"] {
        width: 100% !important;
        max-width: 100%;
    }
    
    .ats-form button {
        width: 100%;
    }
}

/* 4. Trust/Testimonial Cards */
@media (max-width: 860px) {
    .trust-layout, .trust-grid, .testimonial-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 5. Pills / Tags wrapping */
.pill-container, .tags-container, .badges-container {
    display: flex;
    flex-wrap: wrap; /* Prevent horizontal scroll */
    gap: 8px;
    justify-content: center;
}

/* 6. Footer and CTA Banners */
@media (max-width: 768px) {
    .footer-grid, .cta-grid, .resources-grid {
        grid-template-columns: 1fr !important;
        text-align: center;
    }
    
    .footer-links {
        align-items: center;
    }
}

/* ─── RESUME BUILDER FIXES ─── */
@media (max-width: 1024px) {
    .resume-builder-layout {
        display: flex;
        flex-direction: column; /* Stack Form on top, Preview on bottom */
    }
    
    .resume-form-sidebar, .resume-preview-panel {
        width: 100% !important;
        max-width: 100%;
        height: auto;
    }
    
    .resume-form-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--bdr);
    }
}

/* ─── ADMIN PANEL FIXES ─── */
@media (max-width: 768px) {
    .admin-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling for tables */
        width: 100%;
    }
    
    .admin-table {
        min-width: 600px; /* Prevent columns from squishing too much */
    }
    
    .admin-dashboard-stats {
        grid-template-columns: 1fr; /* Stack KPI widgets */
    }
}