/* COMPREHENSIVE RESPONSIVE FIXES - Mobile-First Design */

/* Prevent horizontal scroll on all devices */
html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

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

/* TABLET BREAKPOINT (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .container { padding: 0 30px; }
    .glitch { font-size: 3rem; }
    .subtitle { font-size: 1.3rem; }
    
    .stats-grid, .timeline-cards, .facts-grid, .video-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .nav-menu { gap: 1.5rem; font-size: 0.9rem; }
    .badge-item img, .photo-item img { width: 70px; height: 70px; }
}

/* MOBILE BREAKPOINT (max-width: 768px) */
@media (max-width: 768px) {
    .container { padding: 0 15px; }
    .nav-container { padding: 0 15px; }
    
    .logo { font-size: 1.2rem; gap: 8px; }
    .logo-headshot { width: 35px; height: 35px; }
    .lang-btn { padding: 6px 15px; font-size: 0.85rem; margin-left: 10px; }
    
    .hero { min-height: 100vh; padding: 80px 15px 40px; }
    .glitch { font-size: 2rem; line-height: 1.2; }
    .subtitle { font-size: 1rem; }
    .birthday-badge { font-size: 0.9rem; padding: 8px 20px; }
    
    .btn { padding: 12px 30px; font-size: 0.95rem; min-height: 48px; }
    
    .stats-section, .timeline-preview, .fun-facts { padding: 50px 15px; }
    .section-title { font-size: 1.8rem; margin-bottom: 30px; }
    .stat-card { padding: 30px 15px; }
    .stat-number { font-size: 2rem; }
    
    .page-hero { padding: 100px 15px 40px; }
    .page-title { font-size: 2rem; line-height: 1.2; }
    .page-subtitle { font-size: 1rem; }
    
    .content-section { padding: 40px 15px; }
    .intro-box { padding: 25px; }
    .intro-box h2 { font-size: 1.5rem; }
    .intro-box p { font-size: 1rem; }
    
    .photo-grid { grid-template-columns: 1fr; gap: 20px; }
    .photo-card img { height: 250px; }
    
    .memory-cards { grid-template-columns: 1fr; gap: 20px; }
    .memory-card { padding: 20px; }
    
    .video-section { padding: 40px 15px; margin: 30px 0; }
    .video-grid { grid-template-columns: 1fr !important; gap: 20px; }
    
    .quote-box { padding: 25px; margin: 40px 0; }
    .quote-box blockquote { font-size: 1.1rem; }
    
    .page-navigation { flex-direction: column; gap: 15px; }
    .nav-btn { width: 100%; text-align: center !important; padding: 15px 20px; }
    
    .timeline-content { margin: 0 0 0 40px; }
    
    .footer { padding: 30px 15px; font-size: 0.95rem; }
}

/* SMALL MOBILE (max-width: 480px) */
@media (max-width: 480px) {
    .glitch { font-size: 1.5rem; }
    .section-title { font-size: 1.5rem; }
    .page-title { font-size: 1.5rem; }
    
    .football-badges, .family-photos { top: 70px; left: 5px; right: 5px; gap: 8px; }
    .badge-item, .photo-item { padding: 5px; }
    .badge-item img { width: 40px; height: 40px; }
    .photo-item img { width: 50px; height: 50px; }
    .badge-item p, .photo-item p { font-size: 0.5rem; }
    
    .nav-menu { gap: 1rem; }
    .lang-btn { padding: 5px 12px; font-size: 0.8rem; }
    
    .btn { padding: 10px 20px; font-size: 0.9rem; }
    .stat-card { padding: 20px 10px; }
    .fact-card { padding: 15px; }
    
    .intro-box { padding: 20px; }
    .quote-box { padding: 20px; }
}

/* ITINERARY PAGE SPECIFIC FIXES */
.itinerary-hero { padding: clamp(60px, 15vw, 100px) 20px !important; }
.itinerary-hero h1 { font-size: clamp(1.8rem, 5vw, 3.5rem); margin-bottom: 15px; }
.itinerary-hero .dates { font-size: clamp(1rem, 3vw, 1.5rem); margin-bottom: 10px; }
.itinerary-hero .subtitle { font-size: clamp(0.9rem, 2.5vw, 1.2rem); }
.itinerary-hero::before { font-size: clamp(100px, 30vw, 200px) !important; }

/* Squad Section Mobile */
.squad-section { padding: clamp(30px, 8vw, 60px) 15px !important; margin: 20px 0 !important; }
.squad-section h2 { font-size: clamp(1.5rem, 4vw, 2.5rem); margin-bottom: 30px; }

.squad-grid { 
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 20px;
    padding: 0 10px !important;
}

@media (max-width: 768px) {
    .squad-grid { 
        grid-template-columns: repeat(3, 1fr); 
        gap: 12px;
        max-width: 100%;
    }
    .squad-member { 
        padding: 15px 10px; 
        border-radius: 12px;
    }
    .squad-member .profile-img { 
        width: 70px; 
        height: 70px; 
        margin-bottom: 10px;
        border-width: 3px;
    }
    .squad-member .name { 
        font-size: 0.85rem; 
        line-height: 1.2;
    }
    .squad-member .emoji { 
        font-size: 1.3rem; 
        padding: 3px;
        top: 5px;
        right: 5px;
    }
}

@media (max-width: 480px) {
    .squad-grid { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 10px;
    }
    .squad-member { 
        padding: 12px 8px; 
    }
    .squad-member .profile-img { 
        width: 60px; 
        height: 60px; 
    }
    .squad-member .name { 
        font-size: 0.75rem; 
    }
    .squad-member .emoji { 
        font-size: 1.1rem; 
    }
}

/* Timeline Mobile Improvements */
.timeline { padding: 0 15px !important; margin: 40px auto !important; }
.timeline-item { margin-bottom: 30px; }
.timeline-time { 
    font-size: clamp(0.75rem, 2vw, 1rem); 
    padding: 5px 10px;
    margin-bottom: 8px;
    display: inline-block;
}
.timeline-title { 
    font-size: clamp(1rem, 3.5vw, 1.8rem); 
    margin-bottom: 8px;
    line-height: 1.2;
    word-wrap: break-word;
}
.timeline-description { 
    font-size: clamp(0.85rem, 2.5vw, 1.1rem); 
    line-height: 1.5;
    margin-bottom: 12px;
    word-wrap: break-word;
    hyphens: auto;
}
.timeline-image { 
    width: 100%; 
    height: auto; 
    max-height: clamp(200px, 40vw, 400px); 
    object-fit: cover;
    border-radius: 10px;
    margin: 12px 0;
}
.location-badge { 
    font-size: clamp(0.7rem, 2vw, 1rem); 
    padding: 6px 10px;
    display: inline-block;
    margin-top: 8px;
}

/* Timeline Mobile Layout */
@media (max-width: 768px) {
    .timeline::before { display: none !important; }
    .timeline-item { 
        padding-left: 0 !important;
        margin-bottom: 25px;
        display: block !important;
    }
    .timeline-content { 
        margin: 0 !important;
        padding: 15px;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .timeline-icon { 
        position: relative !important;
        left: auto !important;
        width: 35px !important;
        height: 35px !important;
        font-size: 1rem !important;
        margin-bottom: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .timeline-title {
        font-size: clamp(1.1rem, 4vw, 1.5rem);
        margin-bottom: 10px;
    }
    .timeline-description {
        font-size: 0.95rem;
        line-height: 1.6;
    }
}

/* Highlight Box Mobile */
.highlight-box { 
    padding: clamp(20px, 5vw, 40px); 
    margin: 30px 0;
    border-radius: 15px;
}
.highlight-box h3 { 
    font-size: clamp(1.3rem, 4vw, 2rem); 
    margin-bottom: 15px;
    line-height: 1.3;
}
.highlight-box p { 
    font-size: clamp(0.9rem, 2.5vw, 1.2rem); 
    line-height: 1.6;
}

/* Page Navigation Mobile */
@media (max-width: 768px) {
    .page-navigation { 
        flex-direction: column; 
        gap: 12px;
        padding: 0 15px;
    }
    .page-navigation .nav-btn {
        width: 100%;
        padding: 15px 20px;
        font-size: 1rem;
    }
}

/* VIDEO SECTION MOBILE FIXES */
@media (max-width: 768px) {
    .video-card { margin-bottom: 20px; }
    .featured-badge { top: 10px; right: 10px; padding: 8px 15px; font-size: 0.75rem; }
    .video-caption h3 { font-size: 1rem; }
    .video-caption p { font-size: 0.85rem; line-height: 1.5; }
}

/* TOUCH-FRIENDLY IMPROVEMENTS */
@media (hover: none) and (pointer: coarse) {
    .btn, .nav-btn, .lang-btn { min-height: 44px; min-width: 44px; }
    .hamburger { padding: 10px; }
    .nav-menu a { padding: 12px 0; }
}

/* LANDSCAPE MOBILE FIX */
@media (max-width: 768px) and (orientation: landscape) {
    .hero { min-height: auto; padding: 60px 15px 30px; }
    .football-badges, .family-photos { display: none; }
}