/* ===== RESPONSIVE DESIGN ===== */

/* All sections need bottom padding to clear the fixed nav */
.section { padding-bottom: 100px; }

/* Tablet */
@media (max-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    .gi-wide { grid-column: span 2; }
    .videos-grid { grid-template-columns: 1fr; max-width: 600px; }
    .reasons-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* Mobile Large */
@media (max-width: 768px) {
    :root { --section-padding: 80px 5%; }

    .section { padding-bottom: 90px; }

    /* Hero */
    .hero-section { padding-top: 80px; }
    .hero-image-frame { width: 220px; height: 220px; }
    .hero-line1 { font-size: 1.3rem; }
    .hero-subtitle { font-size: 1rem; margin-bottom: 28px; }
    .scroll-indicator { bottom: 90px; }

    /* Timeline - push away from left edge */
    .timeline { padding-left: 10px; }
    .timeline::before { left: 20px; }
    .timeline-item { padding-left: 56px; margin-bottom: 40px; }
    .timeline-marker { left: 6px; width: 30px; height: 30px; font-size: 14px; }
    .timeline-content { padding: 16px; }
    .timeline-content h3 { font-size: 1.2rem; }
    .timeline-content p { font-size: 0.9rem; }
    .timeline-image-frame { height: 180px; }

    /* Gallery - single column to avoid overlaps */
    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .gi-wide { grid-column: span 2; }
    .gi-tall { grid-row: span 1; height: 200px; }
    .gallery-item { height: 180px; }

    /* Reasons - slightly bigger cards */
    .reasons-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .reason-card { height: 160px; }
    .reason-back { font-size: 0.85rem; padding: 14px; line-height: 1.5; }
    .reason-number { font-size: 2rem; }

    /* Letter */
    .letter-paper { padding: 32px 20px; }
    .letter-greeting { font-size: 1.5rem; }
    .letter-body { font-size: 0.95rem; line-height: 1.7; }

    /* Videos - smaller play button */
    .videos-grid { grid-template-columns: 1fr; max-width: 100%; gap: 20px; }
    .play-btn-circle { width: 56px; height: 56px; font-size: 20px; }
    .video-info { padding: 14px; }
    .video-info h3 { font-size: 1.05rem; }
    .video-info p { font-size: 0.85rem; }

    /* Finale */
    .finale-image-frame { height: 220px; }
    .fireworks-button { padding: 14px 32px; font-size: 1rem; }

    /* Section headers */
    .section-header { margin-bottom: 36px; }
    .section-subtitle { font-size: 0.95rem; }

    /* Navigation - scrollable if needed */
    #main-nav {
        bottom: 12px;
        padding: 6px 8px;
        max-width: calc(100vw - 24px);
        overflow-x: auto;
        scrollbar-width: none;
    }
    #main-nav::-webkit-scrollbar { display: none; }
    .nav-link { padding: 6px 12px; font-size: 0.7rem; }

    /* Music button - don't overlap with content */
    .music-btn { width: 42px; height: 42px; top: 12px; right: 12px; }
    .music-icon { font-size: 16px; }

    /* Glass card hover - no transform on mobile (prevents jank) */
    .glass-card:hover { transform: none; }
}

/* Mobile Small (iPhone SE, etc.) */
@media (max-width: 480px) {
    :root { --section-padding: 60px 4%; }

    .section { padding-bottom: 80px; }

    /* Lock Screen */
    .lock-container { padding: 28px 18px; }
    .lock-svg { width: 56px; height: 56px; }
    .lock-question { font-size: 1.4rem !important; }
    .lock-subtitle { font-size: 0.8rem; margin-bottom: 24px; }
    .date-picker { flex-direction: column; gap: 10px; }
    .date-select-group { min-width: auto; }
    .date-select-group select { padding: 10px 14px; font-size: 0.9rem; }
    .unlock-button { padding: 12px 28px; font-size: 0.95rem; }

    /* Hero */
    .hero-section { padding-top: 60px; }
    .hero-image-frame { width: 180px; height: 180px; }
    .hero-badge { padding: 6px 16px; font-size: 0.8rem; }
    .hero-subtitle { font-size: 0.9rem; }

    /* Timeline */
    .timeline { padding-left: 5px; }
    .timeline::before { left: 16px; }
    .timeline-item { padding-left: 48px; margin-bottom: 32px; }
    .timeline-marker { left: 2px; width: 28px; height: 28px; font-size: 12px; }
    .timeline-content { padding: 14px; }
    .timeline-content h3 { font-size: 1.1rem; }
    .timeline-content p { font-size: 0.85rem; }
    .timeline-image-frame { height: 140px; }

    /* Gallery - single column */
    .gallery-grid { grid-template-columns: 1fr; gap: 12px; }
    .gi-wide { grid-column: span 1; }
    .gi-tall { grid-row: span 1; }
    .gallery-item { height: 200px; }

    /* Reasons - single column on very small */
    .reasons-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .reason-card { height: 150px; }
    .reason-number { font-size: 1.8rem; }
    .reason-front .hint { font-size: 0.7rem; }
    .reason-back { font-size: 0.8rem; padding: 12px; line-height: 1.4; }

    /* Letter */
    .letter-paper { padding: 24px 16px; }
    .letter-paper::before { font-size: 2.2rem; top: -15px; }
    .letter-greeting { font-size: 1.3rem; margin-bottom: 16px; }
    .letter-body { font-size: 0.88rem; line-height: 1.7; min-height: 150px; }
    .letter-signature { margin-top: 20px; }
    .signature-name { font-size: 1.3rem; }

    /* Videos */
    .play-btn-circle { width: 48px; height: 48px; font-size: 18px; }

    /* Finale */
    .finale-image-frame { height: 180px; }
    .finale-age { font-size: clamp(5rem, 18vw, 8rem); }
    .finale-title { font-size: clamp(1.3rem, 4vw, 2rem); }
    .finale-subtitle { font-size: 0.95rem; margin-bottom: 20px; }
    .fireworks-button { padding: 12px 28px; font-size: 0.95rem; }
    .finale-footer { font-size: 0.8rem; margin-top: 24px; }

    /* Nav */
    #main-nav { bottom: 8px; padding: 5px 6px; }
    #main-nav ul { gap: 2px; }
    .nav-link { padding: 5px 8px; font-size: 0.65rem; }

    /* Lightbox */
    .lightbox-close { top: 12px; right: 12px; font-size: 2rem; }
    .lightbox-prev { left: 4px; font-size: 1.8rem; padding: 8px; }
    .lightbox-next { right: 4px; font-size: 1.8rem; padding: 8px; }
}

/* Very small screens (iPhone SE 1st gen, etc.) */
@media (max-width: 360px) {
    .reasons-grid { grid-template-columns: 1fr; }
    .reason-card { height: 130px; }

    .gallery-item { height: 180px; }

    /* Simplify nav on very small */
    #main-nav { display: none; }

    .hero-image-frame { width: 160px; height: 160px; }
    .lock-container { padding: 24px 14px; }
    .lock-question { font-size: 1.2rem !important; }
}

/* Landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .section { min-height: auto; padding-top: 40px; padding-bottom: 60px; }
    .hero-section { padding-top: 40px; }
    .hero-image-frame { width: 150px; height: 150px; }
    .scroll-indicator { display: none; }
    .lock-container { padding: 20px; }
    .lock-svg { width: 40px; height: 40px; }
    .lock-question { font-size: 1.2rem !important; }
    .date-picker { flex-direction: row; }
}

/* Touch-friendly: disable hover effects on touch devices */
@media (hover: none) and (pointer: coarse) {
    .glass-card:hover { transform: none; box-shadow: var(--glass-shadow); }
    .gallery-item:hover { transform: none; }
    .gallery-item:hover .gallery-overlay { opacity: 0; }
    .gallery-item:active .gallery-overlay { opacity: 1; }
    .unlock-button:hover { transform: none; }
    .fireworks-button:hover { transform: none; }
    .music-btn:hover { transform: none; }
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .animate-on-scroll { opacity: 1; transform: none; }
    html { scroll-behavior: auto; }
}

/* Safe area insets for notched phones */
@supports (padding: env(safe-area-inset-bottom)) {
    #main-nav {
        padding-bottom: calc(6px + env(safe-area-inset-bottom));
    }
    .section {
        padding-left: calc(4% + env(safe-area-inset-left));
        padding-right: calc(4% + env(safe-area-inset-right));
    }
    #lock-screen {
        padding-bottom: env(safe-area-inset-bottom);
    }
}