/* ==========================================================================
   MOBILE.CSS (Clean Specificity - No !important tags)
   Centralized responsive media queries and mobile layout overrides
   (Breakpoints: 1024px, 992px, 768px, 600px)
   ========================================================================== */

/* ==========================================================================
   1. Tablet Devices & Small Desktops (max-width: 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    /* Single Post Layout Adjustments */
    .in-main-grid { 
        grid-template-columns: 1fr 300px; 
        gap: 30px; 
    }
    
    .in-floating-share { 
        display: none; 
    }
    
    .in-hero-bg { 
        width: 100%; 
        -webkit-mask-image: none; 
        mask-image: none; 
        opacity: 0.4; 
    }
    
    .in-hero-content .in-article-title { 
        font-size: 2.5rem; 
    }

    /* Category Layout Adjustments */
    .cat-hero-flex-layout { 
        flex-direction: column; 
    }
    
    .cat-hero-col-center, 
    .cat-hero-col-side.col-left, 
    .cat-hero-col-side.col-right { 
        width: 100%; 
        order: unset; 
    }
    
    .cat-main-grid { 
        grid-template-columns: 1fr; 
    }

    /* Homepage Grids */
    .music-news-grid, 
    .sports-grid { 
        grid-template-columns: repeat(2, 1fr); 
    }
}

/* ==========================================================================
   2. Mobile Header, Navigation & Search Overrides (max-width: 992px)
   ========================================================================== */
@media (max-width: 992px) {
    /* Prevent Horizontal Page Shift */
    body { 
        overflow-x: hidden; 
    }
    
    /* Hide Desktop Exclusive Header Elements (Fixed Selector for Top Bar) */
    .frontier-top-bar,
    .site-header .frontier-whatsapp-btn,
    .site-header .frontier-subscribe-btn,
    .site-header .frontier-top-socials { 
        display: none; 
    }

    /* Anchor Controls to Main Header */
    .site-header.frontier-header {
        position: relative; 
    }
    
    .site-header .frontier-logo-row { 
        padding: 18px 0; 
        border-bottom: none; 
    }
    
    .site-header .frontier-logo-text { 
        font-size: 24px; 
    }
    
    .site-header .frontier-logo-icon { 
        width: 30px; 
        height: 30px; 
    }
    
    /* Align Theme Switch Directly Beside Search Icon */
    .site-header .frontier-theme-switch {
        position: absolute;
        top: 25px; 
        right: 60px; 
        margin: 0;
        z-index: 100;
        display: flex; 
    }
    
    .site-header .frontier-theme-switch svg {
        display: none; /* Hide sun icon to maintain compact mobile space */
    }

    /* Full-Bleed Dark Navigation Strip */
    .site-header .frontier-nav-row { 
        background-color: #111; 
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        padding: 0;
        display: block; 
    }
    
    .site-header .frontier-main-nav { 
        width: 100%; 
        padding: 14px 15px;
        overflow-x: auto; 
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; 
    }
    
    .site-header .frontier-main-nav::-webkit-scrollbar { 
        display: none; 
    }

    /* Force Menu into a Sleek Swipeable Row */
    .site-header .main-nav.frontier-menu {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    
    .site-header .main-nav.frontier-menu > li {
        white-space: nowrap; /* Prevents menu items from stacking */
    }
    
    .frontier-nav-row .main-nav.frontier-menu a {
        color: #fff;
    }
    
    .frontier-nav-row .main-nav.frontier-menu .frontier-sep,
    .frontier-nav-row .main-nav.frontier-menu > li:not(:last-child)::after {
        color: rgba(255, 255, 255, 0.2);
    }

    /* Mobile Search Float & Overlay Fixes */
    .site-header .header-search-bar {
        position: absolute;
        top: 75px; 
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        z-index: 99999;
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    }

    /* Disable Live AJAX Search Results Dropdown on Mobile */
    .site-header .af-live-search-results {
        display: none;
    }
}

/* ==========================================================================
   3. Handheld & Mobile Phones (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* Single Article Structure & Padding Fix */
    .in-container.in-main-grid,
    .in-main-grid { 
        grid-template-columns: 1fr; 
        padding: 0 20px; /* Restores breathing room to the edges */
        box-sizing: border-box;
        width: 100%;
        overflow-x: hidden;
    }
    
    .in-hero-header { 
        padding: 40px 20px; 
        border-radius: 0; 
    }
    
    .in-hero-content .in-article-title { 
        font-size: 2rem; 
    }
    
    .in-hero-content .in-article-excerpt { 
        font-size: 1.1rem; 
    }
    
    .in-hero-content .in-meta-bar { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 20px; 
    }
    
    .premium-author-box .pa-header { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 15px; 
    }

    /* Content Share Bar Anti-Squish */
    .in-article .premium-share-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .in-article .premium-share-bar .share-title {
        width: 100%;
    }
    
    .in-article .premium-share-bar .share-actions {
        flex-wrap: wrap;
        width: 100%;
        gap: 10px;
    }

    /* Post Navigation Mobile Layout */
    .af-post-navigation {
        flex-direction: column;
        gap: 20px;
        padding: 1.5rem 0;
    }
    
    .af-post-navigation .af-nav-link {
        width: 100%;
        align-items: flex-start;
        text-align: left;
    }
    
    .af-post-navigation .nav-next {
        border-top: 1px solid var(--color-border);
        padding-top: 20px;
    }
    
    /* Flips the Next Article layout so the image stays on the left on mobile */
    .af-post-navigation .nav-next .af-nav-content {
        flex-direction: row-reverse;
        justify-content: flex-end;
    }

    /* Comments Mobile Layout & Overflow Fix */
    .in-article .in-comments-section {
        padding: 0; 
        margin-top: 2rem;
    }
    
    .in-comments-section #respond {
        padding: 20px 15px; 
        width: 100%; /* Keeps comment box from breaking layout */
        box-sizing: border-box;
    }

    /* [explore_more] Shortcode Grid */
    .af-em-grid { 
        grid-template-columns: 1fr; 
        gap: 20px;
    }

    /* Category & Archive Modern Feeds */
    .modern-feed-item { 
        flex-direction: column; 
        gap: 20px; 
    }
    
    .modern-feed-item .feed-content, 
    .modern-feed-item .img-wrapper { 
        width: 100%; 
        order: unset; 
    }
    
    .cat-header-flex { 
        flex-direction: column; 
        text-align: center; 
    }
    
    .cat-header-visual { 
        width: 100%; 
    }

    /* Author Archive Header */
    .author-profile-header {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        padding: 30px 0;
    }
    
    .author-profile-name { 
        justify-content: center; 
    }
    
    .author-profile-socials { 
        justify-content: center; 
    }

    .author-latest-grid {
        grid-template-columns: 1fr;
    }

    /* Standard Page Template (page.php) */
    .page-minimal-header {
        padding: 40px 0;
        margin-bottom: 2rem;
    }

    .page-title {
        font-size: 2.25rem;
    }

    .page-content-wrapper {
        margin-bottom: 3rem;
    }
}

/* Frontpage: Must Read Header & Title Scale */
    .must-read-section .must-read-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .must-read-section .must-read-grid .mr-featured h3, 
    .must-read-section .must-read-grid .mr-featured h3 a {
        font-size: 26px; 
        line-height: 1.25;
        margin-top: 15px;
    }
    
    /* Scale down the massive background number on mobile */
    .must-read-section .must-read-grid .numbered-post::after {
        font-size: 4rem; 
        right: 0;
        bottom: -5px;
    }

/* ==========================================================================
   4. Ultra-Compact Mobile Screens (max-width: 600px)
   ========================================================================== */
@media (max-width: 600px) {
    .music-news-grid, 
    .sports-grid { 
        grid-template-columns: 1fr; 
    }
    
    .birthdays-grid {
        grid-template-columns: 1fr;
    }
}