/**
 * Responsive adjustments for mobile, tablet, and desktop
 * Mobile-First Design
 */

/* Mobile viewports (below 768px) */
@media (max-width: 767.98px) {
    .site-header {
        padding: 12px 0;
    }
    
    .site-logo {
        justify-content: center;
        text-align: center;
    }

    .header-ad-banner {
        display: none; /* Hide wide header leaderboard on phones */
    }

    /* Hero section sizing for mobile */
    .hero-featured-box {
        height: 320px;
        margin-bottom: 15px;
    }

    .hero-overlay-content {
        padding: 18px 16px;
    }

    .hero-overlay-content .hero-title {
        font-size: 1.25rem;
        line-height: 1.5;
        margin-top: 6px;
        margin-bottom: 8px;
    }

    .hero-side-card {
        height: 185px;
        margin-bottom: 12px;
    }

    .hero-side-content {
        padding: 12px 14px;
    }

    .hero-side-content .side-title {
        font-size: 0.925rem;
        line-height: 1.5;
        margin-top: 3px;
        margin-bottom: 4px;
    }

    /* Breaking news ticker on mobile */
    .ticker-badge {
        padding: 4px 8px;
        font-size: 0.72rem;
        margin-right: 10px;
    }

    .ticker-content a {
        font-size: 0.82rem;
    }

    /* WhatsApp channel button on mobile */
    .whatsapp-channel-bar .btn-wa-join {
        width: 100%;
        text-align: center;
        justify-content: center;
        margin-top: 4px;
    }

    /* Article typography & layout on mobile */
    .article-title {
        font-size: 1.45rem;
        line-height: 1.45;
    }

    .article-meta-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    /* 3-Column balanced grid for social share buttons */
    .social-share-bar {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-bottom: 20px;
    }

    .share-btn {
        width: 100%;
        justify-content: center;
        padding: 8px 4px;
        font-size: 0.76rem;
        white-space: nowrap;
    }

    .news-card-horizontal {
        flex-direction: column;
    }

    .h-thumb-wrap {
        width: 100%;
        height: 190px;
    }

    /* Add bottom padding to body when sticky mobile ad is visible */
    body.has-mobile-ad {
        padding-bottom: 65px;
    }
}

/* Tablet viewports (768px to 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hero-featured-box {
        height: 380px;
    }

    .hero-overlay-content .hero-title {
        font-size: 1.35rem;
        line-height: 1.5;
    }

    .hero-side-card {
        height: 185px;
    }

    .hero-side-content .side-title {
        line-height: 1.5;
    }

    .header-ad-banner {
        justify-content: center;
        margin-top: 15px;
    }
}

/* Desktop viewports (992px and up) */
@media (min-width: 992px) {
    .mobile-sticky-ad {
        display: none !important; /* Hide mobile anchor ad on desktop */
    }
}