/* ==========================================================================
   MOBILE MINIMAL CSS - Non-intrusive Mobile Improvements
   Only applies on mobile devices, preserves desktop layout completely
   ========================================================================== */

/* Only apply on mobile devices */
@media (max-width: 767px) {
    
    /* Ensure proper touch target sizes */
    button,
    .nav-link,
    .velocity-button,
    a[role="button"] {
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        touch-action: manipulation;
    }
    
    /* Prevent zoom on input focus */
    input,
    select,
    textarea {
        font-size: 16px;
    }
    
    /* Improve text readability */
    body {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    
    /* Optimize scrolling */
    * {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Prevent horizontal scroll */
    html, body {
        overflow-x: hidden;
    }
    
    /* Ensure images don't break layout */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Video mobile optimization */
    video {
        -webkit-playsinline: true;
        playsinline: true;
    }
    
    /* Improve tap targets */
    .ticket-card .velocity-button {
        padding: 1rem;
        font-size: 1rem;
    }
    
    /* Make sure navigation is accessible */
    .header__nav {
        display: flex !important;
        flex-wrap: wrap;
    }
    
    .nav-group-left,
    .nav-group-right {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .nav-link {
        padding: 0.5rem 1rem;
        white-space: nowrap;
        text-align: center;
    }
    
    /* Ensure tickets are visible */
    .tickets__grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Improve highlights on mobile */
    .highlights__container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .highlights__slider {
        display: flex;
        flex-wrap: nowrap;
        gap: 1rem;
    }
    
    .highlight-card {
        flex: 0 0 90%;
        max-width: 90%;
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
    
    .tickets__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .highlight-card {
        flex: 0 0 45%;
        max-width: 45%;
    }
}