/* ============================================
   RESPONSIVE — Mobile First Breakpoints
   ============================================ */

/* --- Mobile (< 768px) --- */
@media (max-width: 767px) {
    /* Navbar pill mobile */
    .navbar { top: 10px; width: calc(100% - 20px); }
    .navbar-pill { padding: 6px 6px 6px 16px; }
    .navbar-links { display: none; }
    .navbar-buttons { display: none; }
    .hamburger { display: flex; }

    /* Hero */
    .hero-cta { flex-direction: column; }
    .hero-cta .btn { width: 100%; }
    .story-progress { width: 85%; top: 16px; }

    /* Factions */
    .factions-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .faction-card {
        min-height: 480px;
    }

    .faction-ped img {
        height: 400px;
    }

    /* Steps timeline */
    .steps-line { left: 20px; }

    .step-number-badge {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .step-item { gap: var(--space-md); }

    .step-content {
        padding: var(--space-md);
    }

    .step-item:hover .step-content {
        transform: none;
    }

    /* Stats */
    .stats-row {
        flex-direction: column;
        gap: var(--space-xl);
    }

    /* Discord */
    .discord-card {
        flex-direction: column;
        text-align: center;
        padding: var(--space-xl);
    }

    /* Footer */
    .footer-inner {
        flex-direction: column;
        gap: var(--space-lg);
        text-align: center;
    }

    .footer-links {
        flex-direction: column;
        gap: var(--space-md);
    }

    /* Rules */
    .rule-content-inner {
        padding-left: var(--space-xl);
    }

    .rule-number {
        font-size: 1.5rem;
        min-width: 30px;
    }

    /* Whitelist */
    .wl-method-choice {
        grid-template-columns: 1fr;
    }

    .wizard-progress {
        gap: 4px;
    }

    .progress-line {
        width: 30px;
    }

    .progress-dot {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    /* Admin */
    .admin-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-controls {
        flex-wrap: wrap;
    }

    .filter-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .applications-grid {
        grid-template-columns: 1fr;
    }

    /* Toast */
    .toast-container {
        left: var(--space-md);
        right: var(--space-md);
    }

    .toast {
        min-width: auto;
    }

    /* Modal */
    .modal {
        max-height: 90vh;
        margin: var(--space-sm);
    }
}

/* --- Tablet (768px - 1023px) --- */
@media (min-width: 768px) and (max-width: 1023px) {
    .factions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .faction-card {
        min-height: 560px;
    }

    .admin-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- Desktop (1024px+) --- */
@media (min-width: 1024px) {
    .hamburger { display: none; }
    .navbar-links { display: flex; }
    .navbar-buttons { display: flex; }
}

/* --- Large Desktop (1440px+) --- */
@media (min-width: 1440px) {
    .container {
        max-width: 1300px;
    }

    .container-wide {
        max-width: 1600px;
    }

    h1 { font-size: 7rem; }
    .hero-title { font-size: 8rem; }

    .factions-grid {
        gap: var(--space-xl);
    }

    .faction-card {
        min-height: 720px;
    }

    .faction-ped img {
        height: 660px;
    }
}