/* ===========================
   RESPONSIVE STYLES
   =========================== */

/* Tablet - 1024px and below */
@media (max-width: 1024px) {
    /* Homepage */
    .pillars-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-m);
    }
    
    .mission-details {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .activity-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-logo {
        margin: 0 auto var(--spacing-s);
    }
    
    .social-links {
        justify-content: center;
    }
    
    /* Training */
    .channel-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .channel-icon {
        margin: 0 auto;
    }
    
    .videos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .categories-grid {
        grid-template-columns: 1fr;
    }
    
    /* Missions */
    .missions-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
    
    .filter-row {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .mission-header {
        grid-template-columns: 1fr;
    }
    
    .mission-content-grid {
        grid-template-columns: 1fr;
    }
    
    .mission-sidebar {
        order: -1;
    }
    
    /* Profile */
    .profile-content {
        grid-template-columns: 1fr;
    }
    
    .profile-header {
        flex-direction: column;
        text-align: center;
    }
    
    /* Dashboard */
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .quick-links {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile - 768px and below */
@media (max-width: 768px) {
    /* Navigation */
    .nav-right {
        gap: var(--spacing-s);
    }
    
    .nav-link {
        font-size: 12px;
    }
    
    .nav-brand {
        font-size: 18px;
    }
    
    .nav-logo {
        height: 40px;
    }
    
    /* Hero */
    .hero-title {
        font-size: 48px;
        letter-spacing: 2px;
    }
    
    .hero-motto {
        font-size: 18px;
    }
    
    .hero-patch {
        width: 150px;
        height: 150px;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: var(--spacing-s);
    }
    
    .btn {
        width: 100%;
        max-width: 300px;
    }
    
    /* Sections */
    section {
        padding: var(--spacing-xl) 0;
    }
    
    .section-title {
        font-size: 28px;
    }
    
    .mission-title {
        font-size: 24px;
    }
    
    .mission-details {
        grid-template-columns: 1fr;
    }
    
    .stat-number {
        font-size: 48px;
    }
    
    /* Training */
    .channel-title {
        font-size: 20px;
    }
    
    .videos-grid {
        grid-template-columns: 1fr;
    }
    
    .cta-title {
        font-size: 24px;
    }
    
    /* Missions */
    .missions-grid {
        grid-template-columns: 1fr;
    }
    
    .filter-row {
        grid-template-columns: 1fr;
    }
    
    .mission-tabs {
        flex-direction: column;
        gap: 0;
    }
    
    .mission-tab {
        border-bottom: 1px solid var(--gray);
    }
    
    .mission-stats-bar {
        flex-direction: column;
        gap: var(--spacing-s);
    }
    
    .download-section {
        flex-direction: column;
    }
    
    .btn-large {
        width: 100%;
        justify-content: center;
    }
    
    /* Roster */
    .roster-filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .roster-grid {
        grid-template-columns: 1fr;
    }
    
    /* Profile */
    .profile-callsign {
        font-size: 32px;
    }
    
    .badges-grid {
        grid-template-columns: 1fr;
    }
    
    /* Join Form */
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .form-section {
        padding: var(--spacing-l);
    }
    
    /* Dashboard */
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .quick-links {
        grid-template-columns: 1fr;
    }
    
    /* Admin */
    .admin-table {
        font-size: 12px;
    }
    
    .admin-table th,
    .admin-table td {
        padding: 8px;
    }
    
    /* Liveries */
    .liveries-grid {
        grid-template-columns: 1fr;
    }
    
    .instructions-list li {
        padding-left: var(--spacing-l);
    }
}

/* Small Mobile - 480px and below */
@media (max-width: 480px) {
    .hero-title {
        font-size: 36px;
    }
}