/**
 * Mobile Responsiveness & Performance Optimization
 * Enhanced mobile experience with optimized layouts and typography
 */

/* ============================================
   MOBILE FIRST IMPROVEMENTS
   ============================================ */

/* Base mobile improvements */
@media (max-width: 768px) {
    :root {
        font-size: 15px;
    }
    
    /* Optimize headings for mobile */
    h1 { font-size: 1.75rem !important; margin-bottom: 0.75rem !important; }
    h2 { font-size: 1.5rem !important; margin-bottom: 0.6rem !important; }
    h3 { font-size: 1.25rem !important; margin-bottom: 0.5rem !important; }
    h4 { font-size: 1.1rem !important; margin-bottom: 0.4rem !important; }
    
    /* Optimize navigation */
    .navbar {
        padding: 0.75rem 1rem !important;
    }
    
    .navbar .logo-text {
        font-size: 1.2rem !important;
    }
    
    /* Optimize containers */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        max-width: 100% !important;
    }
    
    /* Job cards - stack better */
    .job-card {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .job-card-title {
        font-size: 1.05rem !important;
    }
    
    .job-card-company {
        font-size: 0.95rem !important;
    }
    
    /* Buttons */
    .btn {
        padding: 0.6rem 1.2rem !important;
        font-size: 0.95rem !important;
    }
    
    /* Forms and inputs */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 0.75rem !important;
    }
    
    /* Filter panel */
    .filter-panel {
        padding: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .filter-group {
        margin-bottom: 1rem !important;
    }
    
    .filter-group label {
        font-size: 0.95rem !important;
        margin-bottom: 0.4rem !important;
    }
    
    /* Blog grid - 1 column on mobile */
    .blog-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Feature cards stack */
    .feature-card {
        padding: 1.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    .feature-icon {
        font-size: 2rem !important;
        width: 50px !important;
        height: 50px !important;
    }
    
    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .footer-links {
        margin-bottom: 1rem !important;
    }
    
    /* Reduce padding on sections */
    section {
        padding: 2rem 0 !important;
    }
    
    /* Search box */
    .search-box {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    .search-box input,
    .search-box button {
        width: 100% !important;
    }
    
    /* Modals and dropdowns */
    .modal, .dropdown-menu {
        font-size: 0.95rem !important;
    }
}

/* ============================================
   TABLET OPTIMIZATIONS (768px - 1024px)
   ============================================ */

@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        max-width: 90% !important;
    }
    
    .blog-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .job-listing {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   SMALL MOBILE (320px - 480px)
   ============================================ */

@media (max-width: 480px) {
    :root {
        font-size: 14px;
    }
    
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.3rem !important; }
    h3 { font-size: 1.1rem !important; }
    
    /* Extra tight spacing */
    .navbar {
        padding: 0.5rem 0.75rem !important;
    }
    
    .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    .btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.9rem !important;
    }
    
    section {
        padding: 1.5rem 0 !important;
    }
    
    /* Collapse some elements */
    .breadcrumb { display: none; }
    
    /* Save button accessibility */
    .save-job-btn {
        width: 40px !important;
        height: 40px !important;
    }
}

/* ============================================
   LARGE SCREENS (1280px+)
   ============================================ */

@media (min-width: 1280px) {
    .container {
        max-width: 1200px !important;
    }
    
    .job-listing {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
}

/* ============================================
   ACCESSIBILITY & TOUCH TARGETS
   ============================================ */

/* Touch-friendly button sizes */
@media (hover: none) and (pointer: coarse) {
    .btn, button, a[role="button"], 
    .save-job-btn, .filter-btn {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 0.75rem 1.25rem !important;
    }
    
    /* Increase spacing between interactive elements */
    .job-card {
        margin-bottom: 1.25rem !important;
    }
    
    /* Remove hover effects on touch devices */
    .btn:hover { transform: none; }
    .job-card:hover { transform: none; }
}

/* ============================================
   LANDSCAPE MODE OPTIMIZATIONS
   ============================================ */

@media (max-height: 500px) and (orientation: landscape) {
    .navbar { padding: 0.5rem 1rem !important; }
    h1 { font-size: 1.4rem !important; }
    h2 { font-size: 1.2rem !important; }
    section { padding: 1.5rem 0 !important; }
}

/* ============================================
   FOLDABLE DEVICE SUPPORT
   ============================================ */

@media (screen-spanning: single-fold-vertical) {
    .container {
        max-width: calc(100vw - env(viewport-segment-right, 0px) + env(viewport-segment-left, 0px)) !important;
    }
}

/* ============================================
   PRINT OPTIMIZATION
   ============================================ */

@media print {
    body { background: white; }
    .navbar, .footer, .sidebar, .ads { display: none !important; }
    .job-card { page-break-inside: avoid; }
    a { text-decoration: underline; }
}

/* ============================================
   LAZY LOADING SUPPORT
   ============================================ */

img[loading="lazy"] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Optimize animations for reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Optimize for dark mode preference */
@media (prefers-color-scheme: dark) {
    body {
        background: #1a1612;
        color: #f5f0e8;
    }
    
    .job-card {
        background: #2d261d;
        color: #f5f0e8;
    }
}

/* ============================================
   RESPONSIVE GRID SYSTEM
   ============================================ */

.grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .grid-auto-fit {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* ============================================
   RESPONSIVE TYPOGRAPHY SCALE
   ============================================ */

/* Fluid typography for better scaling */
@media (max-width: 600px) {
    h1 { font-size: clamp(1.5rem, 4vw, 2rem); }
    h2 { font-size: clamp(1.25rem, 3.5vw, 1.75rem); }
    h3 { font-size: clamp(1.1rem, 3vw, 1.5rem); }
    p { font-size: clamp(0.95rem, 2vw, 1.1rem); }
}

/* ============================================
   MOBILE NAVIGATION OPTIMIZATION
   ============================================ */

@media (max-width: 768px) {
    /* Sticky header with better mobile UX */
    header, nav {
        position: sticky;
        top: 0;
        z-index: 100;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    /* Mobile menu optimization */
    .mobile-menu {
        position: fixed;
        left: 0;
        right: 0;
        top: 60px;
        bottom: 0;
        background: white;
        overflow-y: auto;
        z-index: 99;
    }
    
    .mobile-menu a {
        display: block;
        padding: 1rem;
        border-bottom: 1px solid #eee;
        text-decoration: none;
        color: #333;
    }
}

/* ============================================
   RESPONSIVE TABLES
   ============================================ */

@media (max-width: 768px) {
    table {
        font-size: 0.9rem;
        border-collapse: collapse;
    }
    
    th, td {
        padding: 0.75rem 0.5rem;
    }
    
    /* Stack table columns on mobile */
    table, thead, tbody, th, td, tr {
        display: block;
    }
    
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    tr { margin-bottom: 1.5rem; }
    
    td {
        position: relative;
        padding-left: 50%;
    }
    
    td:before {
        content: attr(data-label);
        position: absolute;
        left: 6px;
        font-weight: bold;
    }
}