/* /css/responsive.css */

/* --- Tablet View --- */
@media (max-width: 992px) {
    /* Adjust header for tablet - similar to desktop but more compact */
    .site-header {
        /* Keep flex-direction: column; for logo/nav stack */
        padding-top: 0.75rem; /* Top padding for header */
        padding-bottom: 0.75rem; /* Bottom padding for header */
        /* If site-header had justify-content: space-between, keep that for tablet unless specific left-center-right is desired */
    }

    /* Adjust main padding top for tablet header height */
    body {
        --site-header-tablet-height: 110px; /* Adjusted height for tablet header */
        padding-top: calc(var(--top-announcement-bar-height) + var(--site-header-tablet-height));
    }
    html {
        scroll-padding-top: calc(var(--top-announcement-bar-height) + var(--site-header-tablet-height));
    }

    .desktop-menu-search-trigger {
        top: 0.75rem; /* Adjust position for tablet padding */
        left: 4%;
    }

    /* Logo (CENTER) - This rule is CORRECT for the tablet view's desired centering */
    .logo {
        order: 1;
        margin-left: auto;
        margin-right: auto;
        flex-shrink: 0;
        align-self: center;
    }

    .logo-link .logo-icon {
        width: 22px;
        height: 22px;
    }
    .logo-text-wrapper span:first-child {
        font-size: 1.5rem; /* Slightly smaller logo text for tablet */
    }
    .logo-tagline {
        font-size: 0.7rem;
    }

    /* Hide desktop overlay, show mobile one (handled by JS toggling .active class) */
    .fullscreen-menu-search-overlay {
        display: none !important;
    }
    .mobile-menu-overlay { /* Ensure mobile menu is the one shown */
        display: flex; /* Override hidden default from main.css */
    }

    /* The old .mobile-header-actions is now the single button for mobile */
    .mobile-header-actions {
        display: flex; /* Show the single mobile trigger button */
    }

    .main-nav {
        display: flex; /* Re-enable desktop nav for tablet view */
        margin-top: 0.5rem; /* Reduce top margin for tablet */
        gap: 1rem; /* Adjust gap for tablet */
    }
    .nav-link {
        font-size: 0.95rem; /* Slightly smaller text for tablet nav */
    }
    .mega-menu {
        min-width: 400px; /* Adjust mega-menu width for tablet */
        padding: 1rem;
        gap: 1rem;
    }
    .mega-menu-tags-grid {
        gap: 0.5rem;
    }
    .mega-menu-articles-grid {
        gap: 0.75rem;
    }
    .mega-menu-separator {
        margin: 0 0.5rem;
    }
}

/* --- Mobile View --- */
@media (max-width: 768px) {
    /* Mobile Header Layout */
    .site-header {
    /* Keep flex-direction: row; align-items: center; */
    justify-content: flex-start; /* Correct as header-top-row is the actual flex container */
    padding: 0.75rem 4%;
    height: var(--site-header-mobile-height);
}

    body {
        padding-top: 142px; /* Adjusted for actual fixed header positions and heights */
    }
    html {
        scroll-padding-top: 142px; /* Keep scroll-padding-top consistent with body padding */
    }

    .desktop-menu-search-trigger {
        display: none; /* Hide desktop trigger on mobile */
    }

    .header-top-row {
        width: 100%;
        display: flex;
        align-items: center; /* Keep vertically centered */
        justify-content: center; /* CHANGE: This will center the main content */
        position: static;
        padding: 0;
    }
    /* Removed the ::after pseudo-element from here */

    /* Mobile Menu/Search Trigger (LEFT) */
    .mobile-header-actions {
        order: 0; /* Make it the first item in the flex order */
        margin-left: 0; /* Ensure no auto margin from previous rules */
        margin-right: auto; /* THIS IS KEY: Pushes this item to the left and consumes space */
        flex-shrink: 0;
        align-self: center;
        position: static;
        right: auto; /* Explicitly override right: 0; */
    }

    /* Logo (CENTER) */
    .logo {
        order: 1; /* Place it after the mobile actions */
        margin-left: 0; /* REMOVE auto margin */
        flex-shrink: 0;
        align-self: center;
    }
    
    .logo-link .logo-icon {
        width: 20px;
        height: 20px;
    }
    .logo-text-wrapper span:first-child {
        font-size: 1.5rem; /* Smaller logo text on mobile */
    }
    
    /* Make tagline visible on mobile */
    .logo-tagline {
        display: block !important; /* Force display on mobile */
        font-size: 0.65rem;
        margin-top: 0;
        margin-left: 0;
        line-height: 1.1;
    }

    .mobile-action-btn {
        padding: 0;
        width: 32px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .mobile-action-btn svg {
        width: 24px;
        height: 24px;
    }
    
    .main-nav {
        display: none;
    }
    .mega-menu {
        display: none !important;
    }

    /* Mobile Content Layout */
.app-container {
    padding: 1.5rem 0; /* Keep existing padding */
    gap: 0;
    margin-top: 0.5rem; /* NEW: Reduced from 1.5rem to 0.5rem */
    flex-direction: column;
}
    
    .main-content { padding: 0 4%; }
    .content-grid { grid-template-columns: 1fr; }
    
    /* NEW RULE for mobile: Reduce space for Trending Insights */
.trending-section {
    margin-top: 0rem; /* Reduce this margin for mobile view */
    margin-bottom: 2rem; /* Keep existing or adjust as needed for space below */
}
    
    .feed-layout .card, .content-grid .card {
        margin-bottom: 2.5rem;
    }

    /* Horizontal Discover More Section */
    .sidebar-content {
        display: block;
        position: static;
        width: 100%;
        margin-top: 2rem;
        padding: 1rem;
        order: 2;
    }

    .sidebar-title {
        padding: 0;
        margin-bottom: 1rem;
        font-size: 1.2rem;
        text-align: left;
        padding-left: 0;
    }

    .mobile-discover-container {
        display: flex;
        overflow-x: auto;
        padding: 0.25rem 0 1rem;
        gap: 1rem;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-discover-container::-webkit-scrollbar {
        display: none;
    }

    .mobile-discover-container .card {
        scroll-snap-align: start;
        flex: 0 0 180px;
        margin-bottom: 0;
    }

    .mobile-discover-container .card-title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.4;
        height: 2.8em;
    }
    
    .card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 14 / 9;
    object-fit: cover;
    background-color: #eee;
    }

    /* Reduce footer padding on mobile */
    .site-footer-bottom {
        padding-top: 2rem;
        margin-top: 1rem;
    }
}