/* ============================================================
   Global Media Network Mysore — Responsive CSS
   ============================================================ */

/* ── Large Desktop (1280px+) ── */
@media (min-width: 1280px) {
    .container {
        padding: 0 3rem;
    }
}

/* ── Tablet (max 1100px) ── */
@media (max-width: 1100px) {
    .mega-menu {
        width: 720px;
        grid-template-columns: repeat(3, 1fr);
    }

    .cover-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .show-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .services-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonials-slider {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
}

/* ── Tablet Portrait (max 900px) ── */
@media (max-width: 900px) {
    html {
        font-size: 15px;
    }

    .hero-content h1 {
        font-size: 2.8rem;
    }

    .hero-stats {
        flex-wrap: wrap;
        gap: 0;
    }

    .stat-box {
        flex: 1 1 50%;
        padding: 1.5rem;
    }

    .stat-box:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .stat-box:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* About two-column layout → single column */
    .about-intro-grid,
    section .container > div[style*="grid-template-columns: 1fr 1fr"],
    section .container > div[style*="grid-template-columns: 1fr 1.2fr"],
    section .container > div[style*="grid-template-columns: 1fr 1.1fr"],
    section .container > div[style*="grid-template-columns: 1.2fr 1fr"],
    section .container > div[style*="grid-template-columns: 1.2fr 1.5fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Channels show row → single col on tablet */
    .channels-show-row {
        grid-template-columns: 1fr !important;
    }

    .promo-container {
        flex-direction: column;
        text-align: center;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .services-summary-grid[style*="grid-template-columns: repeat(5, 1fr)"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ── Mobile (max 768px) ── */
@media (max-width: 768px) {
    /* CRITICAL: Prevent horizontal overflow */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    html {
        font-size: 14px;
    }

    .section-padding {
        padding: 4rem 0;
    }

    .container {
        padding: 0 1rem;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Hero */
    .hero-section {
        background-attachment: scroll;
        padding-top: 120px;
        min-height: auto;
        padding-bottom: 3rem;
    }

    .hero-content h1 {
        font-size: 2.2rem;
    }

    .hero-desc {
        font-size: 1rem;
    }

    .hero-btns {
        flex-direction: column;
        gap: 0.8rem;
    }

    .hero-btns .btn {
        width: 100%;
        text-align: center;
    }

    /* Section Headers */
    .section-title {
        font-size: 2rem;
    }

    /* Cover Grid → 2 cols on mobile */
    .cover-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .cover-card {
        padding: 1.8rem 1.2rem;
    }

    /* Shows Grid → 1 col */
    .show-grid {
        grid-template-columns: 1fr;
    }

    /* Prime 9 Box - fix overflow */
    .prime-box {
        padding: 2rem 1rem;
        overflow: hidden;
    }

    .prime-brand-intro {
        padding: 0 0.5rem;
    }

    .prime-brand-intro h2,
    .prime-brand-intro .prime-tagline {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Services Grid → 1 col */
    .services-summary-grid,
    .service-details-grid {
        grid-template-columns: 1fr !important;
    }

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

    .gallery-horizontal {
        grid-auto-rows: 160px;
    }

    .gallery-vertical {
        grid-auto-rows: 400px;
    }

    .gallery-card {
        height: auto;
    }

    /* Testimonials → Native CSS Swipe Slider (acts like Swiper JS) */
    .testimonials-slider {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        gap: 1.5rem !important;
        padding: 1rem 0.5rem 2rem 0.5rem !important;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scrollbar-width: none; /* Hide default scrollbar on Firefox */
    }

    .testimonials-slider::-webkit-scrollbar {
        display: none; /* Hide default scrollbar on Safari/Chrome */
    }

    .testimonials-slider .testimonial-card {
        flex: 0 0 100% !important;
        scroll-snap-align: start !important;
        box-shadow: var(--shadow-md) !important;
        margin: 0 !important;
    }

    /* Footer → 1 col, fix overflow */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    footer {
        overflow-x: hidden;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .footer-legal-links {
        justify-content: center;
    }

    /* All inline grid layouts → single column */
    section .container > div[style*="grid-template-columns: 1.2fr 1fr"],
    section .container > div[style*="grid-template-columns: 1fr 1.2fr"],
    section .container > div[style*="grid-template-columns: 1fr 1fr"],
    section .container > div[style*="grid-template-columns: 1fr 1.1fr"],
    section .container > div[style*="grid-template-columns: 1.2fr 1.5fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Clients / Channels page two-col rows */
    section .container .reveal > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Client logos grid - 2 cols on mobile */
    .client-logos-grid,
    div[style*="grid-template-columns: repeat(auto-fill"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    /* Show card image on mobile always rtl fix */
    .show-card-row > div {
        direction: ltr !important;
    }

    /* Promo container */
    .promo-container {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }

    /* Services search dock */
    .services-search-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .category-tabs-container {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 0.5rem;
        flex-wrap: nowrap;
    }

    /* Page Hero headers */
    section.section-padding h1.display-font {
        font-size: 2rem;
    }

    /* Contact form → single column */
    form > div[style*="grid-template-columns: 1fr 1fr"],
    form[style*="grid-template-columns: 1fr 1fr"],
    form > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* All forms inside containers - stack */
    form[style*="display:grid"],
    form[style*="display: grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Contact page inquiry form in cards */
    div[style*="padding:4rem"],
    div[style*="padding: 4rem"] {
        padding: 2rem 1rem !important;
    }

    div[style*="grid-template-columns:1.2fr 1fr"],
    div[style*="grid-template-columns: 1.2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Inline forms that use grid columns */
    form[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* Fix all inline style grids inside sections */
    section div[style*="grid-template-columns: repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Pillars grid */
    .services-summary-grid[style*="repeat(5, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Ticker */
    .ticker-title {
        padding: 0 0.8rem;
        font-size: 0.7rem;
    }

    /* Filter bar - scrollable */
    .gallery-filter-bar {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.5rem;
        gap: 0.5rem;
    }

    .filter-btn {
        white-space: nowrap;
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
    }

    /* Fix buttons not overflowing */
    .btn {
        max-width: 100%;
        white-space: normal;
        word-wrap: break-word;
    }

    /* About page vision/mission side by side → stack */
    section .container > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Contact page pathway cards */
    section .container .services-summary-grid[style*="repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
    }

    /* Universal: any div with inline grid-template-columns → single col on mobile */
    div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Fix gap on cramped mobile cards */
    div[style*="gap:4rem"],
    div[style*="gap: 4rem"] {
        gap: 1.5rem !important;
    }

    /* Fix images not exceeding viewport */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Channels Page Mobile Adjustments */
    .channel-branding-card {
        grid-template-columns: 1fr !important;
        padding: 2.5rem 1.5rem !important;
        gap: 2.5rem !important;
    }

    .channel-branding-btns {
        flex-direction: column;
        gap: 0.8rem;
    }

    .channel-branding-btns .btn {
        width: 100%;
        text-align: center;
    }

    .show-detail-card {
        grid-template-columns: 1fr !important;
        padding: 2rem 1.2rem !important;
        gap: 2rem !important;
    }

    .show-detail-card.show-reverse {
        direction: ltr !important;
    }

    .show-detail-img-box {
        height: 250px !important;
    }

    .show-detail-topics {
        grid-template-columns: 1fr !important;
    }

    .show-detail-btns {
        flex-direction: column;
        gap: 0.8rem;
    }

    .show-detail-btns .btn {
        width: 100%;
        text-align: center;
    }
}

/* ── Small Mobile (max 480px) ── */
@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 1.8rem;
    }

    .container {
        padding: 0 0.8rem;
    }

    .cover-grid {
        grid-template-columns: 1fr;
    }

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

    .gallery-horizontal {
        grid-auto-rows: 120px;
    }

    .gallery-vertical {
        grid-auto-rows: 300px;
    }

    .hero-stats {
        flex-direction: column;
    }

    .stat-box {
        flex: 1 1 100%;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .stat-box:last-child {
        border-bottom: none;
    }

    .services-summary-grid[style*="repeat(5, 1fr)"] {
        grid-template-columns: 1fr !important;
    }

    .section-title {
        font-size: 1.7rem;
    }

    /* Client logos - 2 cols even on small */
    .client-logos-grid,
    div[style*="grid-template-columns: repeat(auto-fill"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}