:root {
    --prudent-red: #DD221B;
    --border-gray: #F6F6F6;
    --text-muted: #666666;
    --radius: 5px;
}

.headlines-page { background: #fff; margin: 0; font-family: 'Neue Haas Grotesk Display Pro', sans-serif; }
.main-container { width: 1400px; margin: 0 auto; }
.main-content-spacing { padding: 40px 0; }

/* HERO SECTION */
.headlines-hero { background: #1e1e1e; color: #fff; padding: 40px 0; }
.hero-flex { display: flex; justify-content: space-between; align-items: center; }
.hero-text h1 { font-size: 28px; margin-bottom: 5px; font-weight: 700; }
.hero-text p { color: #888; font-size: 14px; }

/* FILTERS */
.filter-pills-container { display: flex; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; }
.pill { border: 1px solid #111; background: #fff; border-radius: 50px; padding: 8px 14px; font-size: 14px; font-weight: 700; cursor: pointer; }
.pill.active { border-color: var(--prudent-red); color: var(--prudent-red); }
.pill span { color: #888; margin-left: 5px; font-weight: 400; }

/* HEADLINE CARDS (LEFT COL) */
.headlines-list { display: flex; flex-direction: column; gap: 20px; }
.headline-card { 
    display: flex; gap: 25px; padding: 20px; 
    border: 2px solid var(--border-gray); border-radius: var(--radius); width: 927px;
}

.card-img-box { width: 237px; height: 130px; position: relative; flex-shrink: 0; cursor: pointer; }
.card-img-box img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.card-img-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius); z-index: 2; }
.headline-card.is-playing .play-overlay-sm { display: none; }
.headlines-empty { color: #666; font-size: 14px; padding: 20px 0; }
.load-more-center {
    text-align: center;
    margin: 30px 0;
    width: 100%;
}

.load-more {
    background: transparent;
    border: 1px solid #ccc;
    padding: 10px 40px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: bold;
    color: #666;
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    font-size: 14px;
}

.load-more:disabled {
    cursor: default;
}
.badge-breaking { position: absolute; top: 10px; left: 10px; background: #fff; color: var(--prudent-red); font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 3px; }
.play-overlay-sm { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 35px; height: 35px; background: rgba(63, 62, 62, 0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; }

.card-content { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.cat-label { color: var(--prudent-red); font-weight: 800; font-size: 12px; margin-bottom: 8px; }
.card-content h2 { font-size: 18px; font-weight: 700; line-height: 1.3; margin-bottom: 10px; color: #020202; }
.card-content p { font-size: 14px; color: #555; line-height: 1.5; margin-bottom: 15px; }

.card-footer { display: flex; justify-content: space-between; align-items: center; }
.card-footer .meta { font-size: 12px; color: #888; }
.share-pill { border: 1px solid #111; background: #fff; border-radius: 50px; padding: 5px 15px; font-size: 13px; font-weight: 700; cursor: pointer; }

/* SIDEBAR (RIGHT COL) */
.breaking-widget { border: 2px solid var(--border-gray); border-radius: var(--radius); overflow: hidden; }
.widget-head-red { background: var(--prudent-red); color: #fff; font-weight: 800; padding: 12px 20px; font-size: 14px; }
.widget-body-white { padding: 20px; }

.side-item { display: flex; gap: 15px; margin-bottom: 20px; }
.side-thumb { width: 204px; height: 105px; position: relative; flex-shrink: 0; }
.side-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.side-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 25px; height: 25px; background: rgba(63, 62, 62, 0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; font-family: Neue Haas Grotesk Display Pro; }
.side-cat { color: var(--prudent-red); font-size: 10px; font-weight: 800; }
.side-info h4 { font-size: 16px; font-weight: 700; margin: 4px 0; line-height: 22px; color: #020202; }
.side-time { font-size: 11px; color: #999; }

.top-10-widget { margin-top: 30px; background: #f9f9f9; padding: 20px; border-radius: var(--radius); }
.top-10-widget h3 { font-size: 16px; font-weight: 700; border-bottom: 1px solid #242424; padding-bottom: 15px; margin-bottom: 0; color:#242424 ;}
.top-list { list-style: none; padding: 0; }
.top-list li { border-bottom: 1px solid #eee; padding: 15px 0; display: flex; gap: 15px; }
.rank { font-weight: 700; color: #242424; font-size: 16px; }

.rank-active { font-weight: 800; color:#DD221B !important; font-size: 16px; }

.top-list li .active { text-decoration: none; color: #373737; font-weight: 700; font-size: 14px; }
.top-list li a { text-decoration: none; color: #373737; font-weight: 500; font-size: 14px; }

/* MOBILE RESPONSIVE */
@media (max-width: 991px) {
    .main-container { width: 100% !important; padding: 0 15px; }
    .hero-flex { flex-direction: column; text-align: center; gap: 20px; }
    .main-content-flex { flex-direction: column; }
    .left-col, .right-col { width: 100% !important; }

    /* Connect fixed header + ticker directly to dark hero (no white spacer strip) */
    .headlines-page .prudent-top-bar-spacer {
        display: none !important;
        height: 0 !important;
    }

    .headlines-page .headlines-hero {
        margin-top: 0 !important;
        padding-top: calc(40px + 60px);
    }

    .headlines-page .prudent-top-bar.has-ticker + .prudent-top-bar-spacer + .headlines-hero {
        padding-top: calc(40px + 100px);
    }
    
    .filter-pills-container { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 10px; }
    .pill { white-space: nowrap; }

    .headline-card { flex-direction: column; width: 100% !important; padding: 15px; }
    .card-img-box { width: 100%; height: 220px; }
    
    .card-footer { margin-top: 15px; }
    .share-pill { font-size: 0; width: 35px; height: 35px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
    .share-pill i { font-size: 14px; }
}

/* --- STRICT SIDEBAR FIX --- */

/* 1. Ensure the container forces a horizontal row on desktop */
.main-content-flex {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* Prevents wrapping */
    gap: 20px !important; /* Space between left and right column */
    align-items: flex-start !important;
    width: 100% !important;
}

/* 2. Lock the exact widths from your Figma design */
.left-col {
    width: 927px !important;
    flex-shrink: 0 !important; /* Prevents column from shrinking */
}

.right-col {
    width: 453px !important;
    flex-shrink: 0 !important; /* Prevents column from shrinking */
}

/* 3. Global fix to ensure borders don't add extra width */
* {
    box-sizing: border-box !important;
}

/* 4. Ensure the main container is centered and exactly 1400px */
.main-container {
    width: 1400px !important;
    margin: 0 auto !important;
    max-width: 1400px !important;
}

/* --- MOBILE RESET: Switch back to vertical only on small screens --- */
@media (max-width: 991px) {
    .main-content-flex {
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }
    
    .main-container, .left-col, .right-col {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* --- MOBILE BACKGROUND FIX --- */

@media (max-width: 991px) {
    /* 1. Ensure the page body below the hero is white */
    .headlines-page {
        background-color: #ffffff !important;
    }

    /* 2. Force the main content area to have a white background */
    .main-content-spacing {
        background-color: #ffffff !important;
        margin-top: 0 !important;
        padding-top: 30px !important;
    }

    /* 3. Ensure the filter section and cards sit on the white background */
    .filter-pills-container, 
    .headlines-list, 
    .left-col, 
    .right-col {
        background-color: #ffffff !important;
    }

    /* 4. Fix headline card visibility (in case it was dark) */
    .headline-card {
        background-color: #ffffff !important;
        border: 1px solid #eeeeee !important;
    }

    .card-content h2, 
    .card-content p {
        color: #111111 !important; /* Ensure text is dark and readable */
    }
}