/* ============================================
   Media Page – Mobile Styles
   mobile-media.css
   v=20260729f
   ============================================ */

/* Hidden on desktop – shown only inside mobile media query */
.mobile-view-more-btn {
    display: none;
    color: #FFF;
    border-radius: 10px;

}

/* Mobile grid hidden by default (desktop shows desktop-articles-only) */
.mobile-articles-only {
    display: none;
}

/* ── Tablet (max 768px) ── */
@media (max-width: 768px) {

    .media-hero-content {
        position: relative;
        z-index: 2;
        max-width: 100%;
        margin: 0;
        margin-top: auto;
        padding: 0 28px 44px;
        font-size: 16px;
        text-align: center;
        width: 100%;
    }

    .media-hero-content h1 {
        font-size: 36px;
        margin-bottom: 10px;
        text-align: center;
        color: #ffffff;
        font-weight: 400;
        line-height: normal;

    }

    .media-hero-content h1 .highlight {
        font-size: 36px;
        font-weight: 600;
    }

    .media-hero-content p {
        font-size: 15px;
        line-height: normal;
        max-width: 320px;
        margin: 0 auto;
        text-align: center;
        color: #ffffff;
        font-weight: 400;

    }

    /* Container horizontal padding */
    .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Latest Article Section */
    .media-articles-section {
        padding: 24px 0;
        background: #F5F6F6;
    }

    .media-articles-section .section-heading {
        font-size: 32px;
    }

    .media-articles-section .section-subtitle {
        font-size: 15px;
        margin-top: 8px;
        font-weight: 400;
    }

    .media-card-date {
        font-size: 12px;
        color: #F49E0D;
        font-weight: 400;
    }

    .media-card-title {
        font-size: 16px;
        font-weight: 400;
        color: #1E1E1E;
        line-height: 20.8px;
        font-family: 'Inter', 'Baloo Chettan 2', 'Anek Tamil', 'Anek Kannada', sans-serif;
    }

    .media-card-title:lang(ml) {
        font-family: 'Inter', 'Baloo Chettan 2', 'Anek Tamil', 'Anek Kannada', sans-serif;
        font-size: 16px;
        font-weight: 400;
    }

    .media-card-title:lang(kn) {
        font-family: 'Inter', 'Baloo Chettan 2', 'Anek Tamil', 'Anek Kannada', sans-serif;
        font-size: 16px;
        font-weight: 400;
    }

    .media-card-title:lang(ta) {
        font-family: 'Inter', 'Baloo Chettan 2', 'Anek Tamil', 'Anek Kannada', sans-serif;
        font-size: 16px;
        font-weight: 400;
    }

    .media-card-read-more {
        gap: 20px;
    }

    /* Article layout: stack grid + sidebar */
    .media-articles-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .media-articles-left {
        min-height: unset;
    }

    /* Mobile articles container */
    .mobile-articles-only {
        position: relative;
        overflow: hidden;
    }

    /* Fade the bottom of the visible article list —
       hides Read More/arrow, fades title and date */
    .mobile-articles-only::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 130px;
        z-index: 5;
        pointer-events: none;

        background: linear-gradient(to bottom,
                rgba(245, 246, 246, 0) 0%,
                rgba(245, 246, 246, 0.5) 20%,
                rgba(245, 246, 246, 0.9) 50%,
                rgba(245, 246, 246, 1) 70%);
    }

    /* Remove fade when all cards are expanded */
    .mobile-articles-only.expanded::after {
        display: none;
    }

    /* Articles View More button — close to the faded card section */
    #articles-view-more {
        position: relative;
        z-index: 10;
        margin-top: -50px;
    }

    /* View Less: grid is expanded, no fade — restore normal gap above button */
    .mobile-articles-only.expanded~#articles-view-more {
        margin-top: 16px;
    }


    /* Show mobile-only grid, hide desktop paginated grid */
    .mobile-articles-only {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .desktop-articles-only {
        display: none;
    }

    /* Sidebar: hidden on mobile */
    .media-sidebar {
        display: none;
    }

    /* Promo Banner */
    .media-promo-banner .container {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .media-promo-banner p {
        font-size: 15px;
    }

    /* In Medias Section */
    .media-coverage-section {
        padding: 24px 0 48px;
        background: #F5F6F6;
    }

    .media-coverage-section .section-heading {
        font-size: 36px;
        font-weight: 500;
        font-family: 'Inter', sans-serif;
        font-style: normal;
    }

    .media-coverage-section .section-heading .highlight {
        font-size: 36px;
    }

    .media-coverage-section .section-subtitle {
        font-size: 15px;
        font-weight: 400;
        font-style: normal;
        margin: 0 0 22px;
    }

    .media-coverage-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .media-coverage-card {
        aspect-ratio: 16 / 9;
        height: auto;
    }

    .media-coverage-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Hide pagination on mobile */
    .blog-pagination {
        display: none;
    }

    /*View More: JS hides cards beyond first 3 with this class*/
    .mobile-card-hidden {
        display: none;
    }

    /* 6th video card: partial peek — bottom 20% fades */
    .mobile-video-peek {
        display: block;
        max-height: 80px;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
        mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
        pointer-events: none;
    }

    /* Videos View More button sits below the faded card */
    #videos-view-more {
        margin-top: 16px;
    }

    .mobile-view-more-btn {
        display: block;
        width: 100%;
        background: #ffffff;
        border: none;
        border-radius: 10px;
        padding: 14px 20px;
        font-size: 14px;
        font-weight: 500;
        color: #1c1d1f;
        text-align: center;
        cursor: pointer;
        font-family: 'Inter', sans-serif;
        letter-spacing: 0;
    }
}


/* Tablet range 736px–768px: use desktop pagination layout (ViewMore → pagination) */
@media (min-width: 736px) and (max-width: 768px) {
    .media-articles-section .mobile-view-more-btn {
        display: none;
    }

    .media-articles-section .blog-pagination {
        display: flex;
    }

    .media-articles-section .desktop-articles-only {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .media-articles-section .mobile-articles-only {
        display: none;
    }
}


/*Mobile (max 480px)*/
@media (max-width: 480px) {

    /* Hero */

    .media-hero-content {
        padding: 0 18px 32px;
    }

    .media-hero-content h1 {
        font-size: 36px;
    }

    .media-hero-content h1 .highlight {
        font-size: 36px;
    }

    .media-hero-content p {
        font-size: 15px;
    }

    /* Container horizontal padding */
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Latest Article Section */
    .media-articles-section {
        padding: 20px 0;
    }

    .media-articles-section .section-heading {
        font-size: 36px;
    }

    .media-articles-section .section-subtitle {
        font-size: 15px;
        margin-bottom: 18px;
        color: #3A3C3F;
        font-family: 'Inter', sans-serif;
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
    }

    /* Article grid: single column on mobile */
    .media-articles-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    /* Card image height */
    .media-card-image {
        aspect-ratio: 469.66 / 344.16;
    }

    .media-card-image img {

        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .media-card-body {
        padding: 12px 12px 14px;
    }

    .media-card-title {
        font-size: 16px;
        font-weight: 400;
        line-height: 20.8px;
        
    }

    .media-card-title:lang(ml) {
        font-family: 'Inter', 'Baloo Chettan 2', 'Anek Tamil', 'Anek Kannada', sans-serif;
        font-size: 16px;
        font-weight: 400;
    }

    .media-card-title:lang(kn) {
        font-family: 'Inter', 'Baloo Chettan 2', 'Anek Tamil', 'Anek Kannada', sans-serif;
        font-size: 16px;
        font-weight: 400;
    }

    .media-card-title:lang(ta) {
        font-family: 'Inter', 'Baloo Chettan 2', 'Anek Tamil', 'Anek Kannada', sans-serif;
        font-size: 16px;
        font-weight: 400;
    }

    .media-card-read-more {
        font-size: 13px;
        gap: 20px;
    }

    /* Sidebar */
    .media-sidebar {
        padding: 16px 12px;
    }

    .media-sidebar .sidebar-heading {
        font-size: 20px;
        margin-bottom: 14px;
    }

    .popular-article-title {
        font-size: 14px;
    }

    .art-tag,
    .art-date {
        font-size: 11px;
    }

    /* Promo Banner */
    .media-promo-banner {
        padding: 16px 0;
    }

    .media-promo-banner p {
        font-size: 14px;
    }

    .btn-promo {
        padding: 9px 20px;
        font-size: 13px;
    }

    /* In Medias Section */
    .media-coverage-section {
        padding: 20px 0 36px;
    }

    .media-coverage-section .section-heading {
        font-size: 36px;
    }

    .media-coverage-section .section-subtitle {
        font-size: 15px;
        font-weight: 400;
        font-style: normal;
        margin: 0 0 32px;
        line-height: 18px;
        color: #3A3C3F;
    }

    .media-coverage-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .media-coverage-card {
        aspect-ratio: 16 / 9;
        height: auto;
    }

    .media-coverage-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Peek card at 480px: 80% of 212px card height = ~170px */
    .mobile-video-peek {
        max-height: 200px;
    }

}