/**
 * LanguageMastery - Responsive Design System
 * 
 * Breakpoints:
 * - sm: 480px  (Mobile landscape)
 * - md: 768px  (Tablet)
 * - lg: 1024px (Desktop)
 */

/* ============================================
   HEADER RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .header {
        padding: 0 16px !important;
    }
    
    .header-left,
    .header-right {
        gap: 12px;
    }
    
    .logo {
        font-size: 18px;
    }
    
    .nav-link {
        padding: 6px 8px;
        font-size: 13px;
    }
    
    .user-greeting {
        display: none;
    }
}

/* ============================================
   CARD GRID RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    /* 3 columns → 1 column */
    .cards-grid,
    .quick-links,
    .features {
        grid-template-columns: 1fr !important;
    }
    
    /* 4 columns → 2 columns */
    .pricing-grid,
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ============================================
   STATS BAR RESPONSIVE (5 columns)
   ============================================ */
@media (max-width: 768px) {
    .stats-bar {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .stats-bar .stat-item:nth-child(4),
    .stats-bar .stat-item:nth-child(5) {
        display: none;
    }
}

/* ============================================
   EXAM CARDS / TWO COLUMNS
   ============================================ */
@media (max-width: 768px) {
    .exams {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   AUTH CARD RESPONSIVE (Login/Register)
   ============================================ */
@media (max-width: 480px) {
    .auth-card,
    .login-card {
        padding: 24px 16px !important;
        margin: 12px !important;
    }
    
    .auth-header h1,
    .login-header h1 {
        font-size: 24px !important;
    }
    
    .form-input {
        padding: 10px 12px !important;
    }
}

/* ============================================
   HERO SECTION RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .hero {
        padding: 48px 16px 40px !important;
    }
    
    .hero h1 {
        font-size: 32px !important;
    }
    
    .hero p {
        font-size: 16px !important;
    }
    
    .hero-stats {
        flex-wrap: wrap !important;
        gap: 16px !important;
        justify-content: center;
    }
}

/* ============================================
   WORD CARD RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .main {
        padding: 16px !important;
    }
    
    .word-card {
        padding: 24px !important;
    }
    
    .word-text {
        font-size: 32px !important;
    }
    
    .word-meaning {
        font-size: 18px !important;
    }
}

/* ============================================
   MAINTENANCE / 404 RESPONSIVE
   ============================================ */
@media (max-width: 480px) {
    .gear {
        font-size: 80px !important;
    }
    
    .tool {
        font-size: 40px !important;
    }
    
    .icon {
        font-size: 80px !important;
    }
    
    .code {
        font-size: 64px !important;
    }
    
    .title {
        font-size: 24px !important;
    }
    
    .message {
        font-size: 14px !important;
    }
    
    .card {
        padding: 24px 16px !important;
    }
    
    .buttons {
        max-width: 100% !important;
    }
}

/* ============================================
   FILTERS & TABS RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .filters {
        flex-wrap: wrap !important;
    }
    
    .tabs {
        margin-left: 0 !important;
        width: 100% !important;
        margin-top: 12px;
    }
    
    .tab-btn {
        flex: 1;
        text-align: center;
        padding: 10px 8px !important;
        font-size: 12px !important;
    }
}

/* ============================================
   STEP INDICATOR RESPONSIVE
   ============================================ */
@media (max-width: 480px) {
    .step-indicator {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }
    
    .step-circle {
        width: 28px !important;
        height: 28px !important;
        font-size: 12px !important;
    }
}

/* ============================================
   MODE SELECTOR RESPONSIVE
   ============================================ */
@media (max-width: 480px) {
    .mode-selector {
        flex-wrap: wrap;
    }
    
    .mode-btn {
        flex: 1 1 45%;
        padding: 10px !important;
        font-size: 13px !important;
    }
}

/* ============================================
   UTILITY RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .main {
        max-width: 100% !important;
    }
    
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}