/* Tribune Homepage - Round 2 Strict Figma Specs */

:root {
    --color-dark-blue: #092040;
    --color-red: #F50002;
    --color-blue: #036BDD;
    --color-text-main: #051327;
    --color-bg-light: #F6F7FE;
    --font-primary: 'Manrope', sans-serif;
    --container-width: 1280px;
    --color-separator-blue: #6289B5;

    /* Footer Colors */
    --color-white: #FFFFFF;
    --color-footer-border: #7F8B9C;
    --color-footer-bg-hover: #0a2a50;
    --color-footer-input-bg: rgba(255, 255, 255, 0.21);
    --color-footer-input-border: rgba(217, 217, 217, 0.56);
}

body {
    font-family: var(--font-primary);
    color: var(--color-text-main);
    background-color: var(--color-bg-light);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

.page-container {
    width: auto;
    max-width: none !important;
    margin: 0 80px;
    padding: 16px 0;
    position: relative;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: inherit;
}

/* --- Layout Utilities --- */
.section-spacer {
    margin-bottom: 100px;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.align-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}


/* --- Section Headers --- */
.section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 32px;
    height: 80px;
    position: relative;
}

.section-header h2 {
    font-weight: 700;
    font-size: 32px;
    line-height: 44px;
    letter-spacing: -0.07em;
    color: var(--color-text-main);
    position: relative;
    z-index: 2;
}

.header-line {
    position: absolute;
    bottom: 12px;
    left: 0;
    height: 3px;
    background: var(--color-dark-blue);
    z-index: 1;
}

/* Specific Header Lines */
.col-politics .header-line {
    width: 558px;
    left: 114px;
}

.col-us .header-line {
    width: 514px;
    left: 60px;
}

.col-business .header-line {
    width: 276px;
    right: 0;
    left: auto;
}

.col-world .header-line {
    width: 264px;
    left: 90px;
}

.col-opinion .header-line {
    width: 285px;
    right: 6px;
    left: auto;
}

/* Arrows & See All */
.header-icon.arrow-nw {
    width: 24px;
    height: 24px;
    border-top: 4px solid var(--color-dark-blue);
    border-left: 4px solid var(--color-dark-blue);
    margin-bottom: 8px;
}

.see-all {
    font-weight: 700;
    font-size: 20px;
    line-height: 27px;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: var(--color-dark-blue);
    margin-bottom: 24px;
}

.see-all.pos-left {
    position: absolute;
    left: 10px;
    bottom: 12px;
}

/* For some headers */



/* --- Frame 41 Layout --- */
.frame-41-grid {
    display: flex;
    flex-direction: row;
    align-items: stretch; /* Equal height columns for bottom alignment */
    width: 100%;
    gap: 50px;
    /* 50px gap between columns */
}

.col-hero-main {
    flex: 320 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Middle Column (Text Only) */
.col-middle {
    flex: 370 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content: space-between;
    height: auto;
}

/* Right Column (Small Images) */
.col-right {
    flex: 231 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0px;
    /* Using separator margins for visual symmetry + space-between for flex */
    justify-content: space-between;
    /* Distribute extra space flexibly */
    height: auto;
}

/* Hero Mainframe Card */
.news-block.hero-mainframe {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    gap: 12px;
    flex-grow: 1; /* Fill the entire column height */
}

.news-block.hero-mainframe .block-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
}

.news-block.hero-mainframe .block-title {
    font-size: 36px;
    line-height: 1.2;
    text-wrap: balance;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: -0.05em;
    margin-bottom: 0px;
    color: var(--color-text-main);
    width: 100%;
    max-width: none;
    padding: 0;
    min-height: 86px;
}

/* Deck - appears above the image */
.news-block.hero-mainframe .hero-deck {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-text-main);
    margin: 0;
    padding: 0;
    min-height: 44px;
}

/* Intro - appears below the image */
.news-block.hero-mainframe .hero-intro {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-text-main);
    margin: 0;
    padding: 0;
    min-height: 88px;
}

/* Meta Row: Author (left) + Category (right) - pushed to bottom */
.news-block.hero-mainframe .hero-meta-row {
    width: 100%;
    margin-top: auto; /* Push to bottom of flex container */
    overflow: hidden; /* clearfix */
}

.news-block.hero-mainframe .hero-meta-row .author-name {
    float: left;
    font-weight: 700;
    font-size: 18px;
    line-height: 25px;
    color: var(--color-red);
}

.news-block.hero-mainframe .hero-meta-row .author-link {
    color: var(--color-red);
    text-decoration: none;
}

.news-block.hero-mainframe .hero-meta-row .author-link:hover {
    text-decoration: underline;
}

.news-block.hero-mainframe .hero-meta-row .category-tag {
    float: right;
    font-size: 18px;
    font-weight: 700;
}

.news-block.hero-mainframe .hero-meta-row .tag-link {
    color: var(--color-blue);
    text-decoration: none;
}

.news-block.hero-mainframe .hero-meta-row .tag-link:hover {
    text-decoration: underline;
}

/* Legacy styles for backwards compatibility - can be removed if not used */
.news-block.hero-mainframe .block-summary {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    margin-top: 0px;
    padding: 0;
}

/* Side Stack Cards - Text Only (Middle Column) */
.col-middle .news-block.text-only {
    display: flex;
    /* Enforce Layout */
    flex-direction: column;
    width: 100%;
    padding-bottom: 0;
    border-bottom: none;
    gap: 0px;
}

.news-block.text-only .block-title {
    font-size: 20px;
    font-weight: 800;
    line-height: 120%;
    letter-spacing: -0.05em;
    text-align: center;
    color: var(--color-text-main);
    margin: 0;
}

.news-block.text-only .block-summary {
    font-size: 15px;
    font-weight: 500;
    line-height: 120%;
    text-align: center;
    color: var(--color-text-main);
    margin: 0;
}

/* Ensure the last article aligns with the bottom of the column */
.col-middle .news-block.text-only:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.news-block.text-only .block-meta {
    width: 100%;
    margin-top: 8px;
    /* Add some spacing if needed */
}

/* Meta Primary: Read Time + Tag */
.news-block.text-only .meta-primary {
    display: flex;
    width: 100%;
    font-size: 14px;
    justify-content: center;
    align-items: center;
    gap: 14px;
    /* <<< EDIT THIS GAP (Read Time <-> Tag) */
    margin: 0 auto;
}

/* Meta Secondary: Author + Date */
.news-block.text-only .meta-secondary {
    display: flex;
    width: 100%;
    font-size: 14px;
    justify-content: center;
    align-items: center;
    gap: 14px;
    /* <<< EDIT THIS GAP (Author <-> Date) */
    margin: 0 auto;
}

.news-block.text-only .meta-author {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-red);
}

.news-block.text-only .meta-date {
    font-size: 14px;
    font-weight: 300;
    color: var(--color-red);
}

.news-block.text-only .meta-sep {
    color: var(--color-red);
    font-weight: 400;
}

.news-block.text-only .meta-read {
    display: flex;
    /* Flexbox for Icon + Text */
    align-items: center;
    justify-content: flex-end;
    /* Align right to push towards center */
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-main);
    flex: 1;
    /* Take up left half */
}

.news-block.text-only .meta-tag {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-blue);
    flex: 1;
    /* Take up half space */
    text-align: left;
    /* Align left towards center */
}

/* Small Image Cards (Right Column) */
.col-right .news-block.small-image {
    display: flex;
    /* Enforce Layout */
    flex-direction: column;
    width: 100%;
    padding-bottom: 0;
    border-bottom: none;
    gap: 0px;
}

.news-block.small-image .block-image {
    aspect-ratio: 16/9;
}

.news-block.small-image .block-title {
    font-size: 18px;
    font-weight: 800;
    line-height: 120%;
    letter-spacing: -0.05em;
    text-align: center;
    color: var(--color-text-main);
    margin: 0;
}

.news-block.small-image .block-summary {
    font-size: 15px;
    font-weight: 500;
    line-height: 120%;
    text-align: center;
    color: var(--color-text-main);
    margin: 0;
}

.news-block.small-image .block-meta {
    width: 100%;
    margin-top: 8px;
}

.news-block.small-image .meta-primary {
    display: flex;
    width: 100%;
    /* Ensure row takes full width */
    font-size: 14px;
    justify-content: center;
    align-items: center;
    gap: 14px;
    /* Sync with Middle Column */
    margin: 0 auto;
    /* Fail-safe centering */
}

.news-block.small-image .meta-secondary {
    display: flex;
    width: 100%;
    /* Ensure row takes full width */
    font-size: 14px;
    justify-content: center;
    align-items: center;
    gap: 14px;
    /* Sync with Middle Column */
    margin: 0 auto;
    /* Fail-safe centering */
}

.news-block.small-image .meta-author {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-red);
}

.news-block.small-image .meta-date {
    font-size: 14px;
    font-weight: 300;
    color: var(--color-red);
}

.news-block.small-image .meta-sep {
    color: var(--color-red);
    font-weight: 400;
}

.news-block.small-image .meta-read {
    display: flex;
    /* Flexbox for Icon + Text */
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-main);
}

.news-block.small-image .meta-tag {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-blue);
}

/* Separators between stack cards */
/* Vertical Separator Line */
.column-separator {
    width: 100%;
    height: 0.5px;
    background-color: var(--color-separator-blue);
    margin: 0;
    flex-shrink: 0;
}

/* Right Column Specific Separator Spacing compensation */
.col-right .column-separator {
    margin-top: 14px;
    /* Visual compensation for text line-height above */
    margin-bottom: 18px;
    /* Full gap for image below */
}


/* --- Frame 31 (3-Column Mixed Layout) --- */
.frame-31-grid {
    display: grid;
    grid-template-columns: 321px 1fr 418px;
    gap: 40px;
    margin-bottom: 80px;
}

.f31-col-left {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.f31-col-middle {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.f31-col-right {
    display: flex;
    flex-direction: row;
    gap: 24px;
}

/* Frame 31 Title Only Card */
.news-block.f31-title-only {
    padding: 0;
    border-bottom: 0.5px solid var(--color-separator-blue);
    padding-bottom: 16px;
}

.news-block.f31-title-only .block-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-main);
    margin: 0 0 8px 0;
}

.news-block.f31-title-only .block-meta {
    font-size: 12px;
}

/* Frame 31 Image Side Card */
.news-block.f31-image-side {
    display: flex;
    flex-direction: row;
    gap: 16px;
    padding: 0;
}

.news-block.f31-image-side .block-image {
    flex-shrink: 0;
    width: 186px;
}

.news-block.f31-image-side .block-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 4px;
}

.news-block.f31-image-side .block-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.news-block.f31-image-side .block-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.news-block.f31-image-side .block-summary {
    font-size: 14px;
    line-height: 1.4;
    color: #666;
    margin: 0;
}

/* Frame 31 Compact Card */
.news-block.f31-compact {
    padding: 0;
}

.news-block.f31-compact .block-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 8px 0;
}

/* Frame 31 Large Text Card (Right Column - Pope Leo style) */
.news-block.f31-large-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
    cursor: pointer;
}

.news-block.f31-large-text .block-image {
    width: 100%;
    margin-bottom: 8px;
    display: block !important;
}

.news-block.f31-large-text .block-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 4px;
    display: block !important;
    max-width: 100%;
}

.news-block.f31-large-text .block-title {
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-text-main);
    margin: 0;
}

.news-block.f31-large-text .block-summary {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-main);
    margin: 0;
}

.news-block.f31-large-text .block-meta {
    margin-top: auto;
}

/* Frame 31 Tall Image Card */
.f31-tall-image {
    width: 186px;
    flex-shrink: 0;
    cursor: pointer;
}

.f31-tall-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.f31-middle-subs {
    display: flex;
    flex-direction: row;
    gap: 24px;
}

.f31-middle-sub-col {
    flex: 1;
}


/* --- Split Row (Politics / US) --- */
.split-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 43px;
    /* Exact gap from dump */
}

.col-politics {
    flex: 67 1 0%;
    /* Ratio 673px */
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.col-us {
    flex: 57 1 0%;
    /* Ratio 574px */
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Inner Grids for Columns */
/* Politics has 2 sub-columns of ~300px? The dump frame 32 inside politics gap is 50px */
.col-politics .card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 31px;
    /* 673 - 321*2 = 31px gap roughly */
}

.col-us .card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    /* 574 - 272*2 = 30px */
}

/* Card Sizes based on Column Context */
.col-politics .news-block {
    width: 100%;
}

/* target ~315/321px */
.col-us .news-block {
    width: 100%;
}

/* target ~272px */


/* --- Tri Row (Business / World / Opinion) --- */
.tri-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 50px;
    /* Derived from 412+354+412 layout */
}

.col-business {
    flex: 41 1 0%;
    /* Ratio 412 */
    min-width: 0;
}

.col-world {
    flex: 35 1 0%;
    /* Ratio 354 */
    min-width: 0;
}

.col-opinion {
    flex: 41 1 0%;
    /* Ratio 412 */
    min-width: 0;
}

.tri-row .card-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}


/* --- Separators --- */
.separator-vertical {
    width: 0px;
    border-left: 0.5px solid var(--color-separator-blue);
    height: auto;
    margin: 0 20px;
}

/* We might need to inject these via HTML or pseudo-elements. 
   For now, we rely on the grid gap, but the dump specifically mentions these vectors. 
   I will add bottom borders to list items instead for 'stack' lists.
*/
.tri-row .news-block:not(:last-child) {
    border-bottom: 0.5px solid var(--color-separator-blue);
    padding-bottom: 24px;
    margin-bottom: 24px;
}


/* --- Sports --- */
.section-header.large h2 {
    font-size: 64px;
    letter-spacing: -0.07em;
}

.section-header.large .header-line {
    width: 1064px;
    height: 4px;
    left: 216px;
    top: 50%;
}


/* --- News Block (Card) --- */
.news-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
    cursor: pointer;
    background: transparent;
    box-sizing: border-box;
}

/* Image */
.block-image {
    position: relative;
    width: 100%;
    aspect-ratio: 323/200;
    /* Default landscapeish */
    overflow: hidden;
}

/* The dump implies specific image heights per column but let's stick to aspect ratio to fill width */
.col-politics .block-image {
    aspect-ratio: 315/173;
}

.col-us .block-image {
    aspect-ratio: 272/173;
}

.block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(5, 19, 39, 0.38);
    opacity: 0;
    transition: opacity 0.2s;
}

.block-image:hover .img-overlay {
    opacity: 1;
}


/* Typography */
.block-title {
    font-weight: 800;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -0.05em;
    color: var(--color-text-main);
    margin: 0;
}

.col-us .block-title {
    font-size: 18px;
}

/* Slightly smaller for narrower col */

/* Responsive */
@media (max-width: 1300px) {
    :root {
        --container-width: 100%;
    }

    /* Removed .page-container padding override to maintain 80px margins */

    .split-row,
    .tri-row {
        flex-direction: column;
        display: flex;
    }

    .col-politics,
    .col-us,
    .col-business,
    .col-world,
    .col-opinion {
        width: 100%;
    }

    .col-politics .card-grid,
    .col-us .card-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* Maintain 2-col on tablet, stack on mobile if needed */
    .header-line {
        width: 100% !important;
        left: 0 !important;
    }
}

@media (max-width: 768px) {

    .col-politics .card-grid,
    .col-us .card-grid {
        grid-template-columns: 1fr;
    }

}

/* --- Group 29 (More News Band) --- */
.group-29-wrapper {
    position: relative;
    width: 100%;
    height: 131px;
    margin-bottom: 150px;
}

.group-29-container {
    position: absolute;
    width: 100%;
    height: 170px;
    left: 0;
    right: 0;
}

.group-29-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 0px;
    height: 131px;
    border-top: 1px solid #003F84;
    border-bottom: 1px solid #003F84;
    box-sizing: border-box;
}

/* Placeholder for Icon (Red Arrow) */
.more-icon-placeholder {
    position: absolute;
    top: -39px;
    /* Move icon more to the left as requested to make space */
    left: 13px;
    width: 203px;
    height: 147px;
    /* User provided icon: more-arrow.png */
    background: url('more-arrow.svg') no-repeat center/contain;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Text styling removed as we are using an image */
    box-shadow: none;
    /* Removed shadow/styling that clashes with image transparency if any */

}

.more-news-list {
    position: absolute;
    top: 0;
    /* Adjusted left to accommodate icon at 0px + gap. 203 (icon) + ~27 gap = 230px */
    left: 230px;
    right: 0;
    /* Align to right edge of container */
    /* width: auto; Let it fill the space to 1280px */
    height: 131px;
    display: flex;
    align-items: center;
    gap: 0;
    /* Gap handled by padding inside items if needed, or stick to equal sizes */
    /* Check actual space: 1280 - 230 = 1050px. 1050 / 4 = 262.5px per item */
}

.more-news-item {
    display: flex;
    height: 100%;
    align-items: center;
    flex: 1;
    /* Force equal width */
    min-width: 0;
    /* Allow truncation */
    padding-right: 20px;
    /* Spacing between content */
}

.more-news-separator {
    width: 1px;
    /* Ensure 1px width */
    height: 131px;
    border-left: 0.5px solid var(--color-separator-blue);
    flex-shrink: 0;
    margin-right: 20px;
    /* Spacing after separator */
}

.more-news-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    /* Center content vertically */
    width: 100%;
    /* Fill available space in item */
    overflow: hidden;
    /* For truncation */
    height: 100px;
    /* Figma spec: 100px fixed height */
    padding: 0;
    gap: 3px;
}

.more-news-title {
    width: 100%;
    /* Match content block width for more visible titles */
    height: 72px;
    /* Figma spec: 72px height for title */
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 24px;
    line-height: 100%;
    /* Figma: line-height 100% */
    letter-spacing: -0.05em;
    color: var(--color-text-main);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-shrink: 0;
    /* Prevent shrinking */
}

.more-news-meta {
    display: flex;
    align-items: center;
    width: 100%;
    height: 25px;
    gap: 2px;
    /* Figma spec: 2px gap */
}

.meta-name {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-red);
    line-height: 16px;
}

.meta-dash {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    /* Larger Dash */
    font-weight: 400;
    color: var(--color-red);
    line-height: 25px;
}

.meta-date {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

/* --- Ad Banner --- */
.ad-banner-container {
    width: 100%;
    max-width: none;
    margin: 0 0 150px 0;
    /* 150px bottom margin */
    display: flex;
    justify-content: center;
}

.ad-banner {
    background: #EAEAEA;
    width: 100%;
    /* Fill container */
    height: 243px;
    /* Arbitrary height from Figma dump was ~243px for Banner */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--color-text-main);
}

/* --- Frame 31 Layout (Below Group 29) --- */
/* Figma: 1280x288, gap 41px, columns: 313px | 409px | 487px */
/* Margins: 80px top (from Group 29), 150px bottom (to Ad Banner) */
.frame-31-grid {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0;
    gap: 41px;
    width: 100%;
    height: 288px;
    margin-top: 80px;
    margin-bottom: 150px;
}

/* Left Column (313px proportional) */
.f31-col-left {
    flex: 313 1 0;
    min-width: 0;
    height: 288px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0;
    overflow: hidden;
}

/* Middle Column (409px proportional) */
.f31-col-middle {
    flex: 409 1 0;
    min-width: 0;
    height: 288px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 20px;
    overflow: hidden;
}

/* Right Column (487px proportional) */
.f31-col-right {
    flex: 487 1 0;
    min-width: 0;
    height: 288px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0;
    gap: 19px;
    overflow: hidden;
}

/* Frame 31 - Title Only Card (Left Column) */
/* Each card distributes within parent 288px height, separator line between cards */
.news-block.f31-title-only {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
    padding-bottom: 16px;
    border-bottom: 0.5px solid var(--color-separator-blue);
    gap: 8px;
    width: 100%;
    cursor: pointer;
    overflow: hidden;
}

/* Remove border on last card */
.f31-col-left .news-block.f31-title-only:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.news-block.f31-title-only .block-title {
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-weight: 800;
    line-height: 120%;
    letter-spacing: -0.05em;
    color: var(--color-text-main);
    margin: 0;
    text-align: left;
    max-width: 207px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-block.f31-title-only .block-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.news-block.f31-title-only .meta-author {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    color: var(--color-red);
}

.news-block.f31-title-only .meta-sep {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 25px;
    color: var(--color-red);
}

.news-block.f31-title-only .meta-date {
    font-family: 'Manrope', sans-serif;
    font-size: 12px;
    font-weight: 300;
    line-height: 16px;
    color: var(--color-red);
}

/* Frame 31 - Image Side Card (Middle Main) */
.news-block.f31-image-side {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 19px;
    cursor: pointer;
}

.news-block.f31-image-side .block-image {
    width: 139px;
    height: 188px;
    flex-shrink: 0;
    overflow: hidden;
}

.news-block.f31-image-side .block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-block.f31-image-side .block-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

.news-block.f31-image-side .block-title {
    font-family: 'Manrope', sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 100%;
    letter-spacing: -0.05em;
    color: var(--color-text-main);
    margin: 0;
}

.news-block.f31-image-side .block-summary {
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 120%;
    color: var(--color-text-main);
    margin: 0;
}

.news-block.f31-image-side .block-meta {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.news-block.f31-image-side .meta-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.news-block.f31-image-side .meta-read {
    font-size: 10px;
    font-weight: 500;
    line-height: 120%;
    color: var(--color-text-main);
}

.news-block.f31-image-side .meta-tag {
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    color: var(--color-blue);
}

.news-block.f31-image-side .meta-author {
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    color: var(--color-red);
}

.news-block.f31-image-side .meta-sep {
    font-size: 18px;
    font-weight: 400;
    line-height: 25px;
    color: var(--color-red);
}

.news-block.f31-image-side .meta-date {
    font-size: 12px;
    font-weight: 300;
    line-height: 16px;
    color: var(--color-red);
}

/* Frame 31 - Middle Sub Articles Container */
.f31-middle-subs {
    display: flex;
    flex-direction: row;
    gap: 25px;
}

.f31-middle-sub-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 9px;
    border-top: 0.5px solid var(--color-separator-blue);
    padding-top: 9px;
}

/* Frame 31 - Compact Card (Middle Sub) */
.news-block.f31-compact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.news-block.f31-compact .block-title {
    font-family: 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 800;
    line-height: 100%;
    letter-spacing: -0.05em;
    color: var(--color-text-main);
    margin: 0;
}

.news-block.f31-compact .block-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
}

.news-block.f31-compact .meta-author {
    font-size: 11px;
    font-weight: 700;
    line-height: 15px;
    color: var(--color-red);
}

.news-block.f31-compact .meta-sep {
    font-size: 18px;
    font-weight: 400;
    line-height: 25px;
    color: var(--color-red);
}

.news-block.f31-compact .meta-date {
    font-size: 11px;
    font-weight: 300;
    line-height: 15px;
    color: var(--color-red);
}

/* Frame 31 - Large Text Card (Right Column) */
/* Figma: width 245px, height 283px - use flex ratio */
.news-block.f31-large-text {
    flex: 245 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    height: 283px;
    cursor: pointer;
}

/* Inner content wrapper */
.news-block.f31-large-text .f31-text-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 245px;
    height: 229px;
}

.news-block.f31-large-text .block-title {
    font-family: 'Manrope', sans-serif;
    font-size: 32px;
    font-weight: 800;
    line-height: 120%;
    letter-spacing: -0.05em;
    color: var(--color-text-main);
    margin: 0;
    width: 228px;
}

.news-block.f31-large-text .block-summary {
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 120%;
    color: var(--color-text-main);
    margin: 0;
}

.news-block.f31-large-text .block-meta {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.news-block.f31-large-text .meta-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.news-block.f31-large-text .meta-read {
    font-size: 14px;
    font-weight: 500;
    line-height: 120%;
    color: var(--color-text-main);
}

.news-block.f31-large-text .meta-tag {
    font-size: 14px;
    font-weight: 700;
    line-height: 19px;
    color: var(--color-blue);
}

.news-block.f31-large-text .meta-author {
    font-size: 14px;
    font-weight: 700;
    line-height: 19px;
    color: var(--color-red);
}

.news-block.f31-large-text .meta-sep {
    font-size: 18px;
    font-weight: 400;
    line-height: 25px;
    color: var(--color-red);
}

.news-block.f31-large-text .meta-date {
    font-size: 14px;
    font-weight: 300;
    line-height: 19px;
    color: var(--color-red);
}

/* Frame 31 - Tall Image (Right Column) */
/* Figma: width 220px, height 288px - use flex ratio */
.f31-tall-image {
    flex: 220 1 0;
    min-width: 0;
    height: 288px;
    overflow: hidden;
    cursor: pointer;
    background: #FFFFFF;
}

.f31-tall-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   FRAME 32 - Category Sections
   ========================================================================== */

/* Frame 32 Container - 150px below Frame 31 */
.frame-32 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    width: 100%;
    margin-top: 0;
}

/* Frame 33 - World/Business/Opinion (currently unused) */
.frame-33 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    width: 100%;
    margin-top: 0;
}

/* Row container for horizontal category groupings */
.f32-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 equal columns */
    gap: 24px;
    width: 100%;
    margin-bottom: 150px;
}

/* Individual category section */
.f32-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 0px;
}

/* Section sizing variants - Row 1: Politics + US */
/* Default: Politics expanded (3 columns), US collapsed (1 column) */
.f32-section.politics {
    grid-column: span 3;
    min-width: 0;
    transition: grid-column 0.3s ease;
}

.f32-section.us {
    grid-column: span 1;
    min-width: 0;
    transition: grid-column 0.3s ease;
}

/* Expanded/Collapsed states for toggle */
.f32-section.expanded {
    grid-column: span 3;
}

.f32-section.collapsed {
    grid-column: span 1;
}

/* Row 2: World + Business + Opinion (currently commented out) */
/*
.f32-section.world {
    flex: 354 1 0;
    min-width: 0;
}

.f32-section.business {
    flex: 412 1 0;
    min-width: 0;
}

.f32-section.opinion {
    flex: 412 1 0;
    min-width: 0;
}
*/

/* Category Section Header */
.f32-section-header {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 24px;
    cursor: pointer;
    position: relative;
}

/* Category Title */
.f32-section-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 44px;
    letter-spacing: -0.07em;
    color: var(--color-text-main);
    margin: 0 0 0 0;
    white-space: nowrap;
    padding-right: 16px;
    transition: color 0.3s ease;
    z-index: 2;
    background-color: var(--color-bg-light);
    /* Match page bg to hide line */
}

/* Selected section title (red) */
.f32-section-header.selected .f32-section-title {
    color: var(--color-red);
}

/* Make header clickable */
.f32-section-header {
    cursor: pointer;
}

/* Horizontal line after title - now full width absolute */
.f32-section-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-dark-blue);
    transition: background-color 0.3s ease;
    z-index: 1;
    border: none;
}

/* Selected section line (red) */
.f32-section-header.selected .f32-section-line {
    background-color: var(--color-red);
}

/* See All Button */
.f32-see-all {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    margin-bottom: 10px;
    z-index: 2;
    background-color: var(--color-bg-light);
    /* Match page bg */
    padding-left: 10px;
}

.f32-see-all-text {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 27px;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: var(--color-dark-blue);
}

.f32-see-all-circle {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.f32-see-all-arrow {
    width: 24px;
    height: 24px;
    transform: rotate(-45deg);
}

/* Article Grid - default structure */
.f32-article-grid {
    display: grid;
    gap: 24px;
    width: 100%;
    /* align-items: start; removed to allow stretch */
}

/* Politics section: 3 columns, 2 rows when expanded */
.f32-section.politics .f32-article-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
}

/* Hide articles beyond row 2 in Politics (3 cols x 2 rows = 6 items max) */
.f32-section.politics .f32-article-grid .f32-card:nth-child(n+7) {
    display: none;
}

/* US section: 1 column, 2 rows when collapsed */
.f32-section.us .f32-article-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, auto);
}

/* Hide articles beyond row 2 in US when collapsed (1 col x 2 rows = 2 items max) */
.f32-section.us .f32-article-grid .f32-card:nth-child(n+3) {
    display: none;
}

/* When Politics is collapsed: 1 column, 2 rows */
.f32-section.politics.collapsed .f32-article-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, auto);
}

/* Hide articles beyond row 2 in Politics when collapsed (1 col x 2 rows = 2 items max) */
.f32-section.politics.collapsed .f32-article-grid .f32-card:nth-child(n+3) {
    display: none;
}

/* When US is expanded: 3 columns, 2 rows */
.f32-section.us.expanded .f32-article-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
}

/* Show all 6 articles when US is expanded (3 cols x 2 rows = 6 items max) */
.f32-section.us.expanded .f32-article-grid .f32-card:nth-child(n+3) {
    display: flex;
}

.f32-section.us.expanded .f32-article-grid .f32-card:nth-child(n+7) {
    display: none;
}

/* ========== Article Card with Image ========== */
.f32-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 12px;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.f32-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center items */
    padding: 0;
    gap: 12px;
    width: 100%;
    flex: 1;
}

.f32-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Center items */
    padding: 0;
    width: 100%;
}

/* Card Image - 16:9 aspect ratio */
.f32-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-bg-light);
    margin-bottom: 1px;
}

.f32-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

/* Hide separator for last row items */
/* Politics (3 columns): Items 4, 5, 6 are last row */
.f32-section.politics .f32-article-grid .f32-card:nth-child(n+4) .f32-card-separator {
    display: none;
}

/* Politics Collapsed (1 column): Item 2 is last row */
.f32-section.politics.collapsed .f32-article-grid .f32-card:nth-child(n+2) .f32-card-separator {
    display: none;
}

/* US Expanded (3 columns): Items 4, 5, 6 are last row */
.f32-section.us.expanded .f32-article-grid .f32-card:nth-child(n+4) .f32-card-separator {
    display: none;
}

/* US Collapsed (1 column): Item 2 is last row */
.f32-section.us:not(.expanded) .f32-article-grid .f32-card:nth-child(n+2) .f32-card-separator {
    display: none;
}

/* Card Title */
.f32-card-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 20px;
    line-height: 120%;
    text-align: center;
    letter-spacing: -0.05em;
    color: var(--color-text-main);
    margin: 0;
    width: 100%;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Card Summary */
.f32-card-summary {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 120%;
    text-align: center;
    color: var(--color-text-main);
    margin: 0;
    width: 100%;
    min-height: 54px;
}

/* Card Meta Row */
.f32-card-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: 10px;
    width: 100%;
    min-height: 60px;
}

.f32-meta-top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.f32-meta-read {
    display: flex;
    align-items: center;
    gap: 6px;
}

.f32-meta-read svg {
    width: 16px;
    height: 16px;
}

.f32-meta-read-text {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 120%;
    color: var(--color-text-main);
}

.f32-meta-tag {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 100%;
    color: var(--color-blue);
}

.f32-meta-author {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.f32-meta-author-name {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 100%;
    color: var(--color-red);
}

.f32-meta-author-sep {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    color: var(--color-red);
}

.f32-meta-author-date {
    font-family: 'Manrope', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 100%;
    color: var(--color-red);
}

/* Card Separator Line */
.f32-card-separator {
    width: 100%;
    height: 0.5px;
    background-color: var(--color-separator-blue);
    border: none;
}

/* Text-Only Card Overrides */
.f32-card.text-only .f32-card-title {
    min-height: 44px;
    /* Exact 2 lines (18px * 1.2 * 2) */
    font-size: 18px;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.f32-card.text-only .f32-card-summary {
    text-align: center;
    min-height: 36px;
    /* Exact 2 lines (15px * 1.2 * 2) */
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* ========== Ad Banner ========== */
.f32-ad-banner {
    width: 100%;
    height: 243px;
    background: #EAEAEA;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 114px;
}

.f32-ad-banner-text {
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 64px;
    line-height: 120%;
    color: var(--color-text-main);
}

/* ==========================================================================
   FRAME 33 - World/Business/Opinion Sections
   ========================================================================== */

.frame-33 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    width: 100%;
    margin-top: 0;
    margin-bottom: 150px;
}

/* Row container for 3 equal columns */
.f33-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
    align-items: stretch;
    /* Make all columns same height */
}

/* Section (1/3 width each) */
.f33-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 24px;
    width: 100%;
    height: 100%;
    /* Fill available height from grid */
}

/* Section Header (Title + Line + See All) */
.f33-section-header {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    height: 80px;
    position: relative;
}

.f33-section-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 44px;
    letter-spacing: -0.07em;
    color: var(--color-text-main);
    margin: 0;
    white-space: nowrap;
    padding-right: 16px;
    /* GAP: Adjust gap between title and line here */
    z-index: 2;
    background-color: var(--color-bg-light);
}

.f33-section-line {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-dark-blue);
    z-index: 1;
    border: none;
}

/* ==========================================================================
   CATEGORY PAGE STYLES (Revised)
   ========================================================================== */

/* Category Page Header */
.category-page-header {
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100%;
  height: 87px;
  margin-bottom: 60px;
  padding: 0 !important; /* Reset any padding */
}

/* Category Title */
.category-page-title {
  font-family: 'Manrope', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 64px;
  line-height: 87px;
  letter-spacing: -0.07em;
  color: #092040;
  margin: 0;
  white-space: nowrap;
}

/* Subscribe Button Container */
.category-subscribe-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
}

/* Subscribe Text */
.category-subscribe-text {
  font-family: 'Manrope', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 27px;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: #092040;
}

.category-subscribe-circle {
  width: 50px;
  height: 50px;
  border: 1px solid #092040;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.category-subscribe-circle svg {
  width: 50px;
  height: 50px;
}

/* Ad Banner for Category Page */
/* Use existing .ad-banner class if possible, but here is the specific fix */
.category-ad-banner {
  width: 100%;
  height: 243px;
  background: #EAEAEA;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 150px;
  margin-bottom: 150px;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .category-page-title {
    font-size: 48px;
    line-height: 60px;
  }
}

@media (max-width: 720px) {
  .category-page-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px;
    height: auto;
    margin-bottom: 40px;
  }
  
  .category-page-title {
    font-size: 36px;
    line-height: 44px;
  }
}

/* See All Button */
.f33-see-all {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    margin-bottom: 10px;
    z-index: 2;
    background-color: var(--color-bg-light);
    padding-left: 10px;
}

.f33-see-all-text {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 27px;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: var(--color-dark-blue);
}

.f33-see-all-circle {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.f33-see-all-arrow {
    width: 24px;
    height: 24px;
    transform: rotate(-45deg);
}

/* Article Grid - 1 column, 3 rows */
.f33-article-grid {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Distribute cards evenly */
    gap: 24px;
    width: 100%;
    flex: 1;
    /* Fill remaining height after header */
}

/* Business section: fewer rows, flexbox handles distribution */

/* Hide separator for the last article in the column */
.f33-article-grid .f32-card:last-child .f32-card-separator {
    display: none;
}

/* Text-with-Image Card Styles (Business section row 2) */
.f32-card.text-with-image .f32-card-image {
    width: 75%;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-bg-light);
}

.f32-card.text-with-image .f32-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

.f32-card.text-with-image .f32-card-title {
    min-height: 44px;
    font-size: 18px;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.f32-card.text-with-image .f32-card-summary {
    text-align: center;
    min-height: 36px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* ========== Sports Section (Featured Layout) ========== */
.f32-sports-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 69px;
    width: 100%;
}

.f32-sports-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    position: relative;
}

.f32-sports-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 64px;
    line-height: 87px;
    letter-spacing: -0.07em;
    color: var(--color-dark-blue);
    margin: 0;
    white-space: nowrap;
    padding-right: 16px;
}

.f32-sports-line {
    flex: 1;
    height: 0;
    border-bottom: 4px solid var(--color-dark-blue);
    margin-right: 16px;
}

/* Sports grid - 3 columns with featured center */
.f32-sports-grid {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 50px;
    width: 100%;
}

.f32-sports-col-side {
    flex: 321 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.f32-sports-col-center {
    flex: 568 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Featured Card (center column) */
.f32-featured-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

.f32-featured-image {
    width: 100%;
    height: 417px;
    overflow: hidden;
    background: #FFFFFF;
}

.f32-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.f32-featured-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 42px;
    line-height: 120%;
    text-align: center;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    color: var(--color-text-main);
    margin: 16px 0;
}


/* --- Global Site Header --- */
.main-header-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 70px 0 0 0;
    /* Padding top matches header height */
    width: 100%;
    min-height: 110px;
    background: var(--color-bg-light);
    box-shadow: 0px 4px 4px rgba(0, 63, 132, 0.08);
    box-sizing: border-box;
    position: relative;
}

.site-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 15px 80px;
    width: 100%;
    height: 70px;
    background: var(--color-dark-blue);
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
}

.header-left-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 3px;
    height: auto;
}

.icon-btn {
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.icon-btn.menu-btn {
    width: 29px;
    height: 29px;
    justify-content: flex-start;
}

.icon-btn.search-btn {
    width: 29px;
    height: 29px;
}

.brand {
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: 14px;
}

.brand-logo {
    height: 40px;
    width: auto;
    display: block;
}

.header-cta {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 50px; 
    width: auto;
    height: 40px;
}

.header-login-link {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 15px;
    line-height: 20px;
    color: #FFFFFF;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.header-login-link:hover {
    opacity: 0.9;
}

.subscribe-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    /* Reduced padding to squeeze in larger text */
    gap: 10px;
    width: 166px;
    /* Reverted to fixed width */
    height: 40px;
    background: var(--color-red);
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: normal;
    color: #FFFFFF;
    text-decoration: none;
}

/* Trending Bar */
.trending-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    width: 100%;
    height: 40px;
    background: var(--color-bg-light);
    backdrop-filter: blur(2px);
    box-sizing: border-box;
}

.trending-inner {
    display: flex;
    align-items: center;
    width: 100%;
}

.trending-pills a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 6px 10px;
    gap: 10px;
    height: 26px;
    border: 1px solid rgba(5, 19, 39, 0.5);
    border-radius: 100px;
    background: transparent;
    font-family: var(--font-primary);
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 20px;
    color: var(--color-text-main);
    text-decoration: none;
    margin-right: 8px;
}

.trending-label {
    font-family: var(--font-primary);
    font-weight: 800;
    font-size: 18px;
    line-height: 100%;
    color: var(--color-red);
    margin-right: 8px;
    text-transform: capitalize;
}

/* ========================================
   VERTICAL RESPONSIVENESS (Height-based)
   ======================================== */

/* Reduce right column gaps at smaller heights */
@media (max-height: 900px) {
    .col-right .column-separator {
        margin-top: 12px;
        margin-bottom: 16px;
    }
}

/* At 800px: Hide 5th article and separator 4 (above it) */
@media (max-height: 800px) {
    .col-middle>a.news-block:nth-child(9) {
        display: none !important;
    }

    .col-middle>div.column-separator:nth-child(8) {
        display: none !important;
    }

    .col-right .column-separator {
        margin-top: 10px;
        margin-bottom: 14px;
    }
}

/* At 700px: Also hide 4th article and separator 3 */
@media (max-height: 700px) {
    .col-middle>a.news-block:nth-child(7) {
        display: none !important;
    }

    .col-middle>div.column-separator:nth-child(6) {
        display: none !important;
    }

    .col-right .column-separator {
        margin-top: 8px;
        margin-bottom: 12px;
    }
}

/* At 600px: Also hide 3rd article (middle) + 2nd article (right) */
@media (max-height: 600px) {
    .col-middle>a.news-block:nth-child(5) {
        display: none !important;
    }

    .col-middle>div.column-separator:nth-child(4) {
        display: none !important;
    }

    .col-right>a.news-block:nth-child(3) {
        display: none !important;
    }

    .col-right>div.column-separator:nth-child(2) {
        display: none !important;
    }

    .col-right .column-separator {
        margin-top: 6px;
        margin-bottom: 10px;
    }
}

/* ========================================
   HORIZONTAL RESPONSIVENESS (Width-based)
   ======================================== */

/* Responsive: Hide 3rd Column (Right) when screen is smaller (Half Screen) */
@media (max-width: 1100px) {
    .frame-41-grid>.col-right {
        display: none;
    }
}

/* --- Frame More Grid (Replicated Group 29 - 3 Rows) --- */
.frame-more-grid {
    display: grid;
    /* 5 columns: 1st is 230px (More), rest are 1fr */
    grid-template-columns: 230px repeat(4, 1fr);
    /* 3 rows of fixed height 131px */
    grid-template-rows: repeat(3, 131px);
    width: 100%;
    margin-top: 80px;
    margin-bottom: 80px;
    border-top: 1px solid #003F84;
    border-bottom: 1px solid #003F84;
    position: relative;
    /* Ensure borders align */
    box-sizing: border-box;
}

/* Column 1: More Icon (Spans 3 Rows) */
.f-more-col-icon {
    grid-column: 1 / 2;
    grid-row: 1 / 4;
    /* Span all 3 rows */
    background-color: transparent;
    border-right: 0.5px solid var(--color-separator-blue);
    display: flex;
    align-items: center;
    /* Center Vertically? Or Top? User said "division line on top of 1st row and bottom of 3rd row". That's the container border. */
    justify-content: center;
    position: relative;
    box-sizing: border-box;
}

/* More Icon Styling */
.more-icon-large {
    width: 203px;
    height: 147px;
    background: url('latest-arrow.svg') no-repeat center/contain;
    position: absolute;
    top: -39px;
    left: 13px;
    /* (230px col width - 203px icon width) / 2 = 13.5px */
    z-index: 10;
}

/* Articles (Auto-placed in grid cells) */
.f-more-item {
    display: flex;
    align-items: center;
    padding: 0 20px;
    /* Use padding instead of margin for internal spacing */
    box-sizing: border-box;
    position: relative;
    border-right: 0.5px solid var(--color-separator-blue);
    border-bottom: 0.5px solid var(--color-separator-blue);
    overflow: hidden;
}

/* Remove right border for the last column (Col 5) */
/* The grid has 5 cols. Items fall into 2, 3, 4, 5. */
/* We need to target items in the 5th column. */
/* There are 4 items per row. So every 4th item (4, 8, 12) is in the last column of the article area (Grid Col 5). */
/* Note: The More Icon is the 1st DOM element. The loop adds 12 more. */
/* So child 1 is Icon. Child 2, 3, 4, 5 are Row 1. Child 5 is the last in Row 1. */
.f-more-item:nth-child(4n + 5) {
    border-right: none;
}

/* Remove bottom border for the last row (Row 3) */
/* Items 9, 10, 11, 12 are in the last row. */
/* Child 1 is Icon. Items are 2-13. 10, 11, 12, 13 are last row. */
.f-more-item:nth-child(n + 10) {
    border-bottom: none;
}

/* ==========================================================================
   SITE FOOTER - Figma Design
   ========================================================================== */

.site-footer {
    width: 100%;
    margin: 80px 0 0 0;
    padding: 0;
    background: var(--color-dark-blue);
    font-family: 'Manrope', sans-serif;
    color: var(--color-white);
    box-sizing: border-box;
}

/* Logo Section */
.footer-logo-section {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Equal top/bottom padding for vertical centering */
    padding: 40px 80px;
    width: 100%;
    box-sizing: border-box;
}

.footer-logo {
    max-height: 177px;
    width: auto;
    margin-bottom: 0;
    /* Removed to ensure true centering */
}

/* Navigation Bar */
.footer-nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 80px;
    gap: 32px;
    width: 100%;
    height: 66px;
    box-sizing: border-box;
    background: var(--color-dark-blue);
    border-top: 0.5px solid var(--color-footer-border);
    border-bottom: 0.5px solid var(--color-footer-border);
}

.footer-nav a {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 25px;
    text-transform: capitalize;
    color: var(--color-white);
    text-decoration: none;
}

.footer-nav a:hover {
    opacity: 0.8;
}

/* Content Section (Social + Newsletter) */
.footer-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* Center items vertically (Socials vs Newsletter) */
    align-items: center;
    padding: 40px 80px;
    gap: 24px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* Vertical Separator */
.footer-content::before {
    content: '';
    position: absolute;
    left: 290px;
    top: 0;
    height: 100%;
    border-left: 0.5px solid var(--color-footer-border);
}

/* Social Icons */
.footer-social {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* Ensure icons are centered in their container */
    justify-content: center;
    gap: 24px;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.footer-social svg {
    width: 22px;
    height: 22px;
    fill: var(--color-white);
}

/* Newsletter Section */
.footer-newsletter {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
    max-width: 400px;
}

.footer-newsletter-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 300;
    font-size: 32px;
    line-height: 100%;
    color: var(--color-white);
    margin: 0;
}

.footer-newsletter-form {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 12px 6px 12px 24px;
    gap: 8px;
    width: 100%;
    height: 55px;
    background: var(--color-footer-input-bg);
    border: 1px solid var(--color-footer-input-border);
    backdrop-filter: blur(2px);
    border-radius: 100px;
    box-sizing: border-box;
}

.footer-newsletter-form input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: var(--color-white);
    outline: none;
}

.footer-newsletter-form input::placeholder {
    color: var(--color-white);
    opacity: 0.7;
}

.footer-newsletter-form button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 16px;
    gap: 8px;
    background: var(--color-dark-blue);
    backdrop-filter: blur(2px);
    border-radius: 100px;
    border: none;
    cursor: pointer;
    font-family: 'Manrope', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    color: var(--color-white);
}

.footer-newsletter-form button:hover {
    background: var(--color-footer-bg-hover);
}

.footer-newsletter-form button svg {
    width: 16px;
    height: 16px;
    transform: rotate(-45deg);
}

/* Bottom Bar */
.footer-bottom-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 20px 80px;
    border-top: 0.5px solid var(--color-footer-border);
    position: relative;
    width: 100%;
    box-sizing: border-box;
    /* Added to fix layout overflow */
}

/* Center vertical line */
.footer-bottom-bar::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    border-left: 0.5px solid var(--color-footer-border);
}

.footer-copyright {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
}

.footer-copyright-icon {
    width: 14px;
    height: 14px;
}

.footer-copyright-text {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 19px;
    text-transform: uppercase;
    color: var(--color-white);
}

.footer-legal {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.footer-legal a {
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 19px;
    text-transform: uppercase;
    color: var(--color-white);
    text-decoration: none;
}

.footer-legal-sep {
    color: var(--color-white);
}
/* ==========================================================================
   Link Hover Styles for Granular Interactivity
   ========================================================================== */

/* Tag Link Styles */
.tag-link {
    color: inherit;
    text-decoration: none;
    transition: text-decoration 0.2s ease;
}

.tag-link:hover {
    text-decoration: underline;
}

/* Author Link Styles */
.author-link {
    color: inherit;
    text-decoration: none;
    transition: text-decoration 0.2s ease;
}

.author-link:hover {
    text-decoration: underline;
}

/* Ensure news-block cards are still selectable/interactive */
.news-block {
    cursor: default;
    user-select: text;
}

.news-block .block-title a,
.news-block .block-image a,
.f32-card .f32-card-title a,
.f32-card .f32-card-image a {
    cursor: pointer;
}

/* ==========================================================================
   HOVER EFFECTS - Final User Specifications
   ========================================================================== */

/* --- CELL-LEVEL HOVER: Hovering anywhere in card changes title to RED --- */
.news-block:hover .block-title a,
.f32-card:hover .f32-card-title a,
.more-news-item:hover .more-news-title,
.more-news-item:hover .more-news-title a,
.latest-item:hover .latest-item-title,
.latest-item:hover .latest-item-title a {
    color: var(--color-red) !important;
    text-decoration: none !important;
}

/* --- TITLE LINKS: Base styles --- */
.block-title a,
.f32-card-title a,
.more-news-title,
.more-news-title a,
.latest-item-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
    cursor: pointer;
}

/* --- IMAGE LINKS: Clicking image goes to article --- */
.block-image a,
.f32-card-image a {
    display: block;
    cursor: pointer;
}

/* --- TAG LINKS: Underline on hover --- */
.tag-link,
.f32-meta-tag a,
.meta-tag a,
.category-tag a {
    color: inherit;
    text-decoration: none;
    transition: text-decoration 0.2s ease;
    cursor: pointer;
}

.tag-link:hover,
.f32-meta-tag a:hover,
.meta-tag a:hover,
.category-tag a:hover {
    text-decoration: underline;
}

/* --- AUTHOR LINKS: Underline on hover --- */
.author-link,
.f32-meta-author-name a,
.meta-author a,
.author-name a {
    color: inherit;
    text-decoration: none;
    transition: text-decoration 0.2s ease;
    cursor: pointer;
}

.author-link:hover,
.f32-meta-author-name a:hover,
.meta-author a:hover,
.author-name a:hover {
    text-decoration: underline;
}

/* --- SEPARATOR (-): Selectable, NOT clickable --- */
.meta-sep,
.f32-meta-author-sep,
.meta-dash {
    user-select: text;
    cursor: text;
    pointer-events: none;
}

/* --- TIME TO READ: Selectable, NOT clickable --- */
.meta-read,
.f32-meta-read,
.f32-meta-read-text,
.time-read {
    user-select: text;
    cursor: text;
}

/* --- DATE: Selectable, NOT clickable --- */
.meta-date,
.f32-meta-author-date,
.publish-date,
.more-news-meta .meta-date {
    user-select: text;
    cursor: text;
}

/* --- DECK/SUMMARY: Clickable AND Selectable --- */
.block-summary,
.f32-card-summary {
    user-select: text;
    cursor: text;
}

/* --- ALL TEXT: Selectable and copyable (except image) --- */
.news-block,
.f32-card,
.more-news-item,
.more-news-content,
.latest-item {
    user-select: text;
}

/* --- MORE GRID: Entire cell clickable, title turns red on hover --- */
.more-news-item {
    cursor: pointer;
}

.more-news-item:hover {
    /* Cell is clickable */
}

/* --- LATEST GRID: Entire cell clickable, title turns red on hover --- */
.latest-item {
    cursor: pointer;
}

/* --- Selection highlight color --- */
::selection {
    background: var(--color-blue);
    color: white;
}

/* --- Base cursor for cards --- */
.news-block {
    cursor: default;
}

.f32-card {
    cursor: default;
}

/* ==========================================================================
   ADDITIONAL FIXES - Image Darkening Removal & More Section Hover
   ========================================================================== */

/* --- REMOVE ALL IMAGE DARKENING --- */
.img-overlay {
    display: none !important;
}

.block-image a:hover img,
.f32-card-image a:hover img,
.block-image:hover img,
.f32-card-image:hover img {
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* --- MORE SECTION: Entire cell clickable, title turns RED on hover --- */
.more-news-item {
    cursor: pointer;
}

.more-news-item:hover .more-news-title,
.more-news-content:hover .more-news-title {
    color: var(--color-red) !important;
}

.more-news-title {
    transition: color 0.2s ease;
}

/* --- LATEST SECTION (frame-more-grid): Entire cell clickable, title turns RED on hover --- */
.f-more-item {
    cursor: pointer;
}

.f-more-item:hover .more-news-title {
    color: var(--color-red) !important;
}

/* Ensure the link fills the entire cell */
.f-more-item .more-news-content {
    display: block;
    width: 100%;
    height: 100%;
}

/* --- FIX: Make text-only cards fill entire cell for consistent hover --- */
.col-middle .news-block.text-only {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 8px 0;
    position: relative;
    cursor: pointer;
}

/* Title turns red when hovering anywhere in the middle column card */
.col-middle .news-block.text-only:hover .block-title a {
    color: var(--color-red);
}

/* Ensure the col-middle container uses flexbox for equal height distribution */
.col-middle {
    display: flex;
    flex-direction: column;
}

/* Make the separator not interfere with hover */
.col-middle .column-separator {
    flex-shrink: 0;
}

/* ==========================================================================
   HAMBURGER MENU OVERLAY
   ========================================================================== */

/* Overlay - covers entire screen for click detection */
.hamburger-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: transparent;
    z-index: 9999;
    display: flex;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: background 0.3s ease, opacity 0.3s ease, visibility 0s 0.3s;
}

/* Visible state */
.hamburger-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background for overlay */
    transition: background 0.3s ease, opacity 0.3s ease, visibility 0s 0s;
}

/* Menu container - slides in */
.hamburger-menu {
    position: relative;
    width: 402px;
    height: 100%;
    margin-left: 0; /* No external gap */
    padding: 40px 0 40px 40px; /* Top, Right=0, Bottom, Left=40px */
    box-sizing: border-box;
    background: #092040;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%); /* Start fully off-screen */
    transition: transform 0.3s ease;
}

/* Slide menu in when active */
.hamburger-menu-overlay.active .hamburger-menu {
    transform: translateX(0);
}



/* Menu content wrapper */
.hamburger-menu-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 24px;
    width: 100%; /* Full width */
}

/* Search form - styled like email subscription */
.hamburger-search-form {
    display: flex;
    align-items: center;
    width: calc(100% - 40px); /* Inset on right side too */
    height: 48px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(217, 217, 217, 0.3);
}

.hamburger-search-input {
    flex: 1;
    height: 100%;
    padding: 0 20px;
    background: transparent;
    border: none;
    outline: none;
    font-family: 'Inter', 'Manrope', sans-serif;
    font-size: 14px;
    color: #FFFFFF;
}

.hamburger-search-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.hamburger-search-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 20px;
    height: 100%;
    background: transparent;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    font-family: 'Inter', 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #FFFFFF;
    transition: background 0.2s;
}

.hamburger-search-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.hamburger-search-btn svg {
    width: 16px;
    height: 16px;
    stroke: #FFFFFF;
}

/* Separator line */
.hamburger-separator {
    width: 100%;
    height: 0;
    border-top: 0.5px solid rgba(255, 255, 255, 0.6);
}

/* Menu links */
.hamburger-menu-link {
    display: block;
    width: 100%;
    padding: 12px 0;
    margin: -12px 0;
    font-family: 'Inter', 'Manrope', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    text-transform: capitalize;
    color: #FFFFFF;
    text-decoration: none;
    transition: color 0.2s;
}

.hamburger-menu-link:hover {
    color: var(--color-red);
}



/* Responsive adjustments */
@media (max-width: 500px) {
    .hamburger-menu-overlay {
        width: 100%;
    }
    
    .hamburger-menu {
        margin-left: 0;
        width: 85%;
        padding: 24px;
        transform: translateX(-100%);
    }
    
    .hamburger-menu-overlay::before {
        display: none;
    }
    
    .hamburger-menu-content {
        width: 100%;
        gap: 16px;
    }
    
    .hamburger-separator {
        width: 100%;
    }
    
    .hamburger-search-form {
        height: 48px;
    }
}
