/* 
  TickerAdda Mobile Responsive Fixes
  Only for mobile screens (max-width: 768px)
  v2.3 — Targeted card, image, button fixes
*/

@media (max-width: 768px) {

    /* ── 1. Global overflow fix ── */
    body {
        overflow-x: hidden !important;
    }
    .container {
        width: 100% !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
    }

    /* ── 2. 2-Column Grids ── */
    .grid-4, .grid-3, .grid-2, .grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* ── 3. Event Card Premium — Fix dark gap ──
       Root causes:
       - .movie-card has min-height:480px (massive gap)
       - .event-card-details flex:1 makes it stretch
       - .event-card-meta has margin-top:auto (pushes to bottom = gap)
    */
    .event-card-premium {
        min-height: 0 !important;
        height: auto !important;
        border-radius: 14px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .movie-card {
        min-height: 0 !important;
        height: auto !important;
    }

    /* Image: portrait aspect ratio for movie posters */
    .event-card-image {
        height: auto !important;
        aspect-ratio: 2/3 !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
    }

    .event-card-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* ── KEY FIX: Card details should NOT stretch — kills the gap ── */
    .event-card-details {
        padding: 8px 10px 4px 10px !important;
        flex: 0 0 auto !important;   /* <-- CRITICAL: don't let it grow/stretch */
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    /* ── KEY FIX: Remove margin-top:auto which caused the gap ── */
    .event-card-meta {
        margin-top: 0 !important;  /* <-- CRITICAL: was 'auto', now 0 */
        gap: 3px !important;
    }

    .event-card-meta span {
        font-size: 10px !important;
        gap: 4px !important;
    }

    /* Movie title — remove fixed height */
    .movie-title {
        font-size: 11px !important;
        font-weight: 700 !important;
        height: auto !important;
        -webkit-text-fill-color: #fff !important;
        margin-bottom: 4px !important;
        -webkit-line-clamp: 2 !important;
    }

    .event-card-title {
        font-size: 11px !important;
        margin-bottom: 4px !important;
        line-height: 1.3 !important;
    }

    /* ── 5. Action Buttons — Compact, SIDE-BY-SIDE ── */
    /* Use .event-card-premium to increase specificity over main.css */
    .event-card-premium .event-card-actions,
    .movie-card .event-card-actions,
    .event-card-actions {
        padding: 6px 8px 10px !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;
        grid-template-columns: unset !important;
    }

    .event-card-premium .card-btn-primary,
    .movie-card .card-btn-primary,
    .card-btn-primary {
        padding: 8px 4px !important;
        font-size: 9px !important;
        border-radius: 8px !important;
        flex: 1 !important;
        width: auto !important;
        min-width: 0 !important;
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 3px !important;
    }

    .event-card-premium .card-btn-secondary,
    .movie-card .card-btn-secondary,
    .card-btn-secondary {
        padding: 7px 4px !important;
        font-size: 9px !important;
        border-radius: 8px !important;
        flex: 1 !important;
        width: auto !important;
        min-width: 0 !important;
        justify-content: center !important;
        gap: 3px !important;
    }

    /* ── 6. Hero Section ── */
    .hero {
        padding: 80px 0 30px !important;
        text-align: center !important;
    }

    .hero-title, .hero h1 {
        font-size: clamp(22px, 7vw, 32px) !important;
        line-height: 1.2 !important;
    }

    .hero p, .hero-subtitle {
        font-size: 13px !important;
        margin-bottom: 16px !important;
    }

    /* ── 7. Search Bar ── */
    .search-container {
        position: relative !important;
        width: 100% !important;
        margin: 15px 0 !important;
    }

    #homeSearchInput {
        width: 100% !important;
        padding: 12px 15px !important;
        font-size: 14px !important;
        border-radius: 40px !important;
        box-sizing: border-box !important;
    }

    #homeSearchBtn {
        position: absolute !important;
        right: 5px !important;
        top: 5px !important;
        padding: 8px 14px !important;
        font-size: 12px !important;
        border-radius: 30px !important;
        height: calc(100% - 10px) !important;
    }

    /* ── 8. Category Pills — Horizontal Scroll ── */
    .hero-categories, .category-tabs, .filter-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 8px !important;
        padding-bottom: 8px !important;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .hero-categories::-webkit-scrollbar {
        display: none !important;
    }

    .category-pill, .category-pill-small {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        padding: 7px 14px !important;
        font-size: 12px !important;
    }

    /* ── 9. Section Spacing ── */
    .section {
        padding: 24px 0 !important;
    }

    .section-header {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .section-title h2 {
        font-size: 18px !important;
        margin-bottom: 2px !important;
    }

    .section-title p {
        font-size: 12px !important;
        margin: 0 !important;
    }

    /* ── 10. Header & Navigation ── */
    .navbar {
        padding: 10px 0 !important;
    }

    .hamburger {
        display: block !important;
    }

    .nav-links {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        background: rgba(5, 5, 15, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        flex-direction: column !important;
        padding: 16px !important;
        display: none !important;
        z-index: 9999 !important;
        gap: 8px !important;
    }

    .nav-links.active {
        display: flex !important;
    }

    /* ── 11. Footer ── */
    .footer-grid, .site-footer .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        margin-bottom: 20px !important;
    }

    .footer-about {
        grid-column: 1 / -1 !important;
        text-align: center !important;
    }

    footer {
        padding: 30px 0 20px !important;
    }

    /* ── 12. Sidebar pages ── */
    .movies-page-container, .sports-page-container, .theatre-page-container {
        flex-direction: column !important;
    }

    .movies-sidebar, .sports-sidebar, .theatre-sidebar {
        width: 100% !important;
        position: static !important;
        margin-bottom: 16px !important;
    }

    /* ── 13. Tables ── */
    .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ── 14. Trust/Feature Section ── */
    .trust-section .feature-box {
        padding: 20px 15px !important;
    }

    .trust-section .feature-title {
        font-size: 1rem !important;
    }

    .trust-section .feature-desc {
        font-size: 0.85rem !important;
    }
}