/**
 * Mobile-Responsive Improvements
 * Enhanced mobile experience for wedding website
 * Version: 2.0.0-mobile
 */

/* =============================================================================
   BASE MOBILE IMPROVEMENTS
   ============================================================================= */

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

/* Better tap targets - minimum 44x44px */
button, a, input[type="submit"], .clickable {
    min-height: 44px;
    min-width: 44px;
}

/* =============================================================================
   MOBILE BREAKPOINTS
   ============================================================================= */

/* Extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) {
    /* Typography */
    body {
        font-size: 14px;
    }

    h1 {
        font-size: 1.75rem !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    h3 {
        font-size: 1.25rem !important;
    }

    a {
        font-size: 1rem !important;
    }

    /* Containers */
    .container {
        padding: 1rem !important;
    }

    /* Hero sections */
    .hero {
        height: auto !important;
        min-height: 100vh;
        padding: 2rem 1rem !important;
    }

    
    .hero.hero-small {
        min-height: 40vh;
    }

    .hero-content h1 {
        font-size: 2rem !important;
    }

    .hero-content p {
        font-size: 1rem !important;
    }

    /* Cards */
    .welcome-card,
    .upload-card,
    .event-card {
        padding: 1.5rem !important;
        margin: 1rem 0 !important;
    }

    /* Forms */
    input, textarea, select {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 0.75rem !important;
    }

    .form-group {
        margin-bottom: 1rem;
    }

    /* Buttons */
    button, .btn, input[type="submit"] {
        padding: 0.875rem 1rem !important;
        font-size: 1rem !important;
        min-height: 48px;
    }

    /* Gallery */
    .gallery {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    .media-card {
        margin-bottom: 0.5rem;
    }

    .media-card img,
    .media-card video {
        height: 140px !important;
        max-height: 140px;
        object-fit: cover;
    }

    .modal img,
    .modal video {
        height: auto !important;
        max-height: 90vh !important;
        max-width: 95vw !important;
        object-fit: contain !important;
    }

    /* Actions - compact row on small screens */
    .actions {
        flex-direction: row !important;
        gap: 0 !important;
        align-items: center !important;
        justify-content: space-around !important;
        padding: 0.25rem 0 !important;
    }

    .actions > div {
        display: flex;
        justify-content: space-around;
        width: 100%;
        gap: 0;
    }

    /* Comment forms */
    .comment-form {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .comment-input,
    .tag-input {
        padding: 0.75rem !important;
        font-size: 16px !important;
    }

    /* Navigation buttons */
    .nav-btn {
        display: block !important;
        margin: 0.5rem auto !important;
        padding: 1rem 2rem !important;
        width: 90% !important;
        max-width: 300px;
    }

    /* Timeline/Events */
    .timeline {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .event-card {
        padding: 1.5rem !important;
    }

    /* Admin panels */
    .stat-grid,
    .details-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .btn-group {
        flex-direction: column !important;
        gap: 0.5rem !important;
        align-items: center !important;
    }

    .btn-group .btn {
        width: 90% !important;
    }

    /* Tables - make scrollable */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 600px;
    }

    /* Modal full screen on mobile */
    .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        max-height: 90% !important;
    }

    /* Header buttons */
    .logout {
        top: 1rem !important;
        right: 1rem !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem !important;
    }

    .back-link {
        top: 1rem !important;
        left: 1rem !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem !important;
    }

    /* RSVP guest items */
    .guest-item {
        padding: 1rem !important;
    }

    .remove-btn {
        top: 0.5rem !important;
        right: 0.5rem !important;
    }

    /* Radio groups */
    .radio-group {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }

    .radio-label {
        padding: 0.875rem !important;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .nav-btn {
        display: inline-block !important;
        margin: 0.5rem !important;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .timeline {
        grid-template-columns: 1fr !important;
    }

    .container {
        padding: 2rem 1.5rem !important;
    }
}

/* =============================================================================
   TOUCH-FRIENDLY IMPROVEMENTS
   ============================================================================= */

/* Larger touch targets for all interactive elements */
@media (hover: none) and (pointer: coarse) {
    .like-btn,
    .fav-btn,
    .tag-btn,
    .comment-btn,
    .download-btn {
        padding: 0.25rem !important;
        font-size: 1rem !important;
        min-height: unset !important;
        min-width: unset !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .comment-send-btn {
        min-height: 44px;
        padding: 0.75rem 1.5rem !important;
    }

    /* Prevent accidental taps */
    button:active,
    a:active {
        background-color: rgba(0, 0, 0, 0.05);
    }

    /* Better tap feedback */
    .media-card:active {
        transform: scale(0.98);
    }
}

/* =============================================================================
   iOS SAFARI SPECIFIC FIXES
   ============================================================================= */

/* Fix 100vh on iOS Safari */
@supports (-webkit-touch-callout: none) {
    .hero {
        min-height: -webkit-fill-available;
    }
}

/* Prevent zoom on input focus (iOS) */
@media screen and (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* =============================================================================
   LANDSCAPE ORIENTATION
   ============================================================================= */

@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        height: auto !important;
        min-height: 100vh;
    }

    .hero.hero-small {
        height: auto !important;
        min-height: 40vh;
    }

    .welcome-card,
    .login-card {
        padding: 1.5rem !important;
        max-width: 90% !important;
    }

    .hero-content h1 {
        font-size: 1.5rem !important;
    }
}

/* =============================================================================
   ACCESSIBILITY - 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;
        scroll-behavior: auto !important;
    }
}

/* =============================================================================
   UTILITY CLASSES FOR MOBILE
   ============================================================================= */

/* Hide on mobile */
.hide-mobile {
    display: none !important;
}

@media (min-width: 768px) {
    .hide-mobile {
        display: block !important;
    }
}

/* Show only on mobile */
.show-mobile {
    display: block !important;
}

@media (min-width: 768px) {
    .show-mobile {
        display: none !important;
    }
}

/* Mobile-specific spacing */
@media (max-width: 767px) {
    .mobile-mb-1 { margin-bottom: 0.5rem !important; }
    .mobile-mb-2 { margin-bottom: 1rem !important; }
    .mobile-mb-3 { margin-bottom: 1.5rem !important; }
    .mobile-mt-1 { margin-top: 0.5rem !important; }
    .mobile-mt-2 { margin-top: 1rem !important; }
    .mobile-mt-3 { margin-top: 1.5rem !important; }
    .mobile-p-1 { padding: 0.5rem !important; }
    .mobile-p-2 { padding: 1rem !important; }
    .mobile-p-3 { padding: 1.5rem !important; }
}