/* ===========================================
   CATEGORY FLEXED LAYOUT STYLES - RESPONSIVE
   =========================================== */

/* Root variables */
:root {
    --max-content-width: 90rem; /* 1440px */
    --spacing-xs: 0.625rem; /* 10px */
    --spacing-sm: 1.25rem; /* 20px */
    --spacing-md: 2.5rem; /* 40px */
    --spacing-lg: 3.5rem; /* 56px */
}

/* .logo-section — merged into shared-styles.css */

/* .content-section — merged into shared-styles.css */
/* .main-content — merged into shared-styles.css */
/* .articles-column — merged into shared-styles.css */

.premium-badge {
    height: 32px;
    width: 32px;
}

/* Article List */
/*.article-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}*/

/* .article-list, .article-image, .article-list ins, .article-list ins img, .article-list hr — merged into shared-styles.css */

/* .pagination base — merged into shared-styles.css (search-results values win as later file) */
/* Category-specific pagination overrides */
.pagination {
    max-width: 29.5rem; /* 472px - category specific constraint */
    height: 1.5rem;
    gap: 1.5rem; /* tighter gap for category page */
    margin: var(--spacing-md) auto 0;
}

/* .sidebar — merged into shared-styles.css */

/* .magazine-subscribe, .magazine-image — merged into shared-styles.css */
/* .subscribe-btn — merged into shared-styles.css */

/* .forum-widget base — merged into shared-styles.css */
/* .forum-title — merged into shared-styles.css */

/* .live-video-section, .video-main — merged into shared-styles.css */
/* .live-logo, .live-logo img — merged into shared-styles.css */
/* .play-button — merged into shared-styles.css */
/* .play-icon — merged into shared-styles.css */

/* .live-panel — merged into shared-styles.css (category-flexed values are canonical) */
/* .live-title, .live-title span, .live-highlight — merged into shared-styles.css */
/* .live-events, .live-event — merged into shared-styles.css */
/* .event-badge, .event-badge img, .event-date — merged into shared-styles.css */
/* .live-scrollbar — merged into shared-styles.css */
/* .live-ad-bottom, .live-ad-bottom img — merged into shared-styles.css */

/* Top Headlines Section */
.headlines-header .section-title {
    max-width: 15.5625rem; /* 249px */
    height: 4.375rem; /* 70px */
    background: #4A4085;
    border-top-right-radius: 4.6875rem;
    border-bottom-right-radius: 4.6875rem;
    display: flex;
    align-items: center;
    padding-left: 1.5625rem;
    margin: 0;
}

/* .top-bold — merged into shared-styles.css */
/* .headline-item — merged into shared-styles.css */
/* .headline-meta — merged into shared-styles.css */

/* .live-results, .tab-button, .result-item, .more-link — merged into shared-styles.css */

/* .live-red — already in shared-styles.css */

.results-tabs {
    width: 100%;
    height: 2.625rem;
    display: flex;
    margin-bottom: 0;
}

/* .result-content h4, .result-date — merged into shared-styles.css */

/* ===========================================
   RESPONSIVE MOBILE STYLES
   =========================================== */
@media (max-width: 1188px) {
    /* Mobile Main Content */
    .main-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .content-section {
        width: 100% !important;
    }

    /* Mobile Articles Column */
    .articles-column {
        width: 100% !important;
        max-width: 100% !important;
        padding: 30px 0 0 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Mobile Article List */
    .article-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        padding: 0 15px 0 15px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

        /* Only the last article-list gets padding-bottom */
        .article-list:last-child {
            padding-bottom: 30px !important;
        }

    .article-item-news {
        width: 100% !important;
        max-width: 100% !important;
        height: fit-content !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        padding: 0 !important;
    }

    .article-title-news {
        height: auto !important;
    }

        .article-author-news {
            display: none;
        }

    /* Sidebar ads mobile styling. min-height, not height: the box (flex column, 20px padding)
       must grow to fit the label + the 330x275 GPT slot (282.5px tall at 339px wide). A fixed
       289px squeezed the slot - WebKit (Safari / Chrome iOS) shrinks it to 233px and crops the
       creative's bottom, Blink lets it overflow instead, hence not reproducible in desktop
       DevTools. */
    .sidebar-ad {
        width: 339px !important;
        min-height: 289px !important;
        margin: 0 auto !important;
    }

        .sidebar-ad .ad-content {
            width: 339px !important;
            height: 289px !important;
            object-fit: cover !important;
        }

    /* Hide pagination on mobile */
    .pagination {
        display: none !important;
    }
}

/* Hide mobile sidebar on desktop */
@media (min-width: 1188px) {
    .sidebar-mobile-only {
        display: none !important;
    }
}

/* ===========================================
   RESPONSIVE DYNAMIC SIZING (Desktop 1440px+)
   =========================================== */

@media (min-width: 1188px) {
    :root {
        --max-content-width: min(90rem, 90vw);
        --sidebar-width: min(22.5rem, 18.75vw); /* 360px base = 18.75% of 1920px */
    }

    .content-section {
        max-width: min(90rem, 90vw);
        margin: 0 auto;
    }

    /* Main content responsive */
    .main-content {
        max-width: min(65rem, 64vw); /* 1040px base */
    }

    /* Sidebar responsive sizing */
    .sidebar {
        width: var(--sidebar-width) !important;
    }

    /* Articles column responsive */
    .articles-column {
        max-width: min(65rem, 64vw);
    }

    /* Live video section responsive */
    .live-video-section {
        padding: 0 min(15rem, 7.8vw);
    }

    .live-logo {
        left: min(15rem, 7.8vw);
    }

    .video-main {
        width: min(46.875rem, 48.7vw); /* 750px base */
        height: min(26.375rem, 27.4vw); /* 422px base */
    }

    .live-panel {
        width: min(40.625rem, 42.2vw); /* 650px base */
        height: min(26.375rem, 27.4vw); /* 422px base */
    }

    /* Top headlines responsive */
    .top-headlines {
        width: var(--sidebar-width) !important;
    }

    /* Magazine subscribe responsive */
    .magazine-subscribe {
        width: var(--sidebar-width) !important;
    }

    .magazine-image {
        width: var(--sidebar-width) !important;
        height: auto !important;
    }

    .subscribe-btn {
        width: var(--sidebar-width) !important;
    }

    /* Forum widget responsive */
    .forum-widget {
        width: var(--sidebar-width) !important;
    }

    /* Live results responsive */
    .live-results {
        width: var(--sidebar-width) !important;
    }

    /* Ad banner responsive */
    .ad-banner {
        max-width: min(65rem, 64vw);
    }

    /* Pagination responsive */
    .pagination {
        max-width: min(29.5rem, 30.7vw);
    }
}