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

:root {
    /* === PROPOSAL A: MONOCHROME (Iron Guard Theme) === */
    
    /* Primary Brand */
    --color-green: #437C53;           /* Forest Green */
    --color-blue-selection: #254E91;  /* Vivid Dark Blue (Active/Hover) */
    --color-blue-unselected: #AFC0D6; /* Solid Light Steel Blue for unselected/hamburger hover */
    
    /* Text Colors */
    --color-text-main: #1A1A1A;         /* Black - primary text */
    --color-text-secondary: #4A4A4A;    /* Dark Grey - dates, read time */
    --color-text-author: #2D5A3D;       /* Dark Green - author names */
    
    /* Background Colors */
    --color-bg-light: #F5F7F5;          /* Off-White with green tint */
    --color-bg-card: #FFFFFF;           /* Pure white cards */
    
    /* UI Colors */
    --color-separator-green: #D1D5D1;   /* Light grey-green dividers */
    --color-border: #1A1A1A;            /* Black borders (pills) */
    
    /* Button Colors */
    --color-btn-primary-bg: #1A1A1A;    /* Black subscribe button */
    --color-btn-primary-text: #FFFFFF;  /* White text on button */
    
    /* Fonts & Layout */
    --font-primary: 'Manrope', sans-serif;
    --container-width: 1400px;

    /* Footer Colors */
    --color-white: #FFFFFF;
    --color-footer-border: #4A4A4A;
    --color-footer-bg-hover: #2D5A3D;
    --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: 100%;
    max-width: var(--container-width); /* 1400px */
    margin: 0 auto; /* Center horizontally */
    padding: 22px 80px 16px 80px; /* Reduced top padding by further 9px */
    position: relative;
    box-sizing: border-box;
}

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

/* ==========================================================================
   SHARED HEADER STYLES (Iron Guard Theme - Black Button)
   Overrides newsroom.css
   ========================================================================== */
.header-cta .subscribe-btn {
    background-color: #1A1A1A;
    background: #1A1A1A;
    color: #FFFFFF;
}

.header-cta .subscribe-btn:hover {
    background-color: #333333;
    background: #333333;
}

/* ==========================================================================
   FRAME 32 - SHARED CARD STYLES (Homepage + Category)
   Standardized to match Homepage Look (Hidden Summary, 3 Columns)
   ========================================================================== */

/* Grid Layout */
.f32-article-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Force 3 columns */
  gap: 24px;
  align-content: start;
}

/* Row Alignment */
.f32-row {
  align-items: stretch;
}

/* Section Layout */
.f32-section {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Card Container */
.f32-card {
  display: flex;
  flex-direction: column;
  height: auto;
}

/* Title Styles (Fixed Height) */
.f32-article-grid .f32-card-title {
  min-height: 96px; /* 4 lines fixed */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  align-items: start;
  justify-content: center;
}

/* Meta Section (Fixed Height) */
.f32-card-meta {
  min-height: 65px;
}

/* Hide Summary (Standard Homepage Look) */
.f32-card-summary {
  display: none;
}


/* Hide Summary (Standard Homepage Look) */
.f32-card-summary {
  display: none;
}


/* ==========================================================================
   SHARED PAGE HEADER (Homepage + Category)
   Standardized Iron Guard Theme (Black Text)
   ========================================================================== */

.homepage-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: 15px;
  padding: 0 !important;
}

.homepage-title {
  font-family: 'Manrope', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 64px;
  line-height: 87px;
  letter-spacing: -0.07em;
  color: #1A1A1A;
  margin: 0;
  white-space: nowrap;
}

.homepage-subscribe-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  background: transparent;
}

.homepage-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: #1A1A1A;
}

.homepage-subscribe-circle {
  width: 50px;
  height: 50px;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
}

.homepage-subscribe-circle svg {
  width: 50px;
  height: 50px;
  display: block;
}

/* Ensure SVG elements are Black */
.homepage-subscribe-circle svg circle,
.homepage-subscribe-circle svg path {
  stroke: #1A1A1A !important;
  fill: #1A1A1A !important;
}

.homepage-subscribe-circle svg circle {
  fill: none !important;
}

/* ==========================================================================
   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-green);
    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-green);
    border-left: 4px solid var(--color-green);
    margin-bottom: 8px;
}

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

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

/* Hover Effect: Cards turn Visible Dark Green */
.news-block:hover .block-title,
.f32-card:hover .f32-card-title,
.celebrity-card:hover .card-title {
    color: var(--color-blue-selection) !important;
    transition: color 0.2s ease;
}

/* For some headers */



/* --- Frame 41 Layout --- */
.frame-41-grid {
    display: flex;
    flex-direction: row;
    align-items: flex-start; /* Decouple Right Column height */
    width: 100%;
    gap: 50px;
}

/* Wrapper for Left and Middle Columns (Equal Height) */
.col-left-middle-container {
    display: flex;
    flex-direction: row;
    align-items: stretch; /* Enforce equal height */
    gap: 50px; /* Preserve gap between Left and Middle */
    flex: 939 1 0%; /* Combined ratio (568 + 321 + 50) */
    min-width: 0;
}

.col-hero-main {
    flex: 568 1 0%; /* Ratio from 568px width */
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Middle Column (Text Only) */
.col-middle {
    flex: 321 1 0%; /* Ratio from 321px width */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    justify-content: flex-start; /* Removed space-between constraint */
    padding: 36.5px 0; /* Reverted to 36.5px as requested */
    box-sizing: border-box;
}

/* Middle Column Text-Only Card Spacing */
.col-middle .news-block.text-only {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: auto;
    flex: 0 1 auto;
    padding: 0;
    gap: 0;
}

/* Reset default browser margins and apply exact values */
.col-middle .news-block.text-only .block-title {
    margin: 0;
    margin-bottom: 10px; /* Reduced to 10px as requested */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35; /* Prevent clipping of descenders */
}

.col-middle .news-block.text-only .block-summary {
    margin: 0;
    margin-bottom: 9px; /* Reduced by 20% from 11px */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35; /* Prevent clipping of descenders */
}

.col-middle .news-block.text-only .block-meta {
    margin: 0;
}

.col-middle .news-block.text-only .meta-primary {
    margin: 0;
    margin-bottom: 8px; /* Reduced by 20% from 10px */
}

/* Author line (meta-secondary) to Separator */
.col-middle .news-block.text-only .meta-secondary {
    margin: 0; /* Spacing handled by separator margin */
}

/* Standardized Column Separator - Middle Column */
.col-middle .column-separator {
    height: 0.5px;
    background-color: var(--color-separator-green);
    border: none;
    margin-top: 5.2px; /* Reduced by 20% from 6.5px */
    margin-bottom: 5.2px;
    width: 100%;
}

/* Right Column Separator: 13px top (Author), 5px bottom (Next Image) */
.col-right .column-separator {
    height: 0.5px;
    background-color: var(--color-separator-green);
    border: none;
    margin-top: 13px;
    margin-bottom: 10.6px; /* Precision alignment: author lines matched */
    width: 100%;
}

/* Right Column (Small Images) */
.col-right {
    flex: 321 1 0%; /* Ratio from 321px width */
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0px;
    justify-content: flex-start; /* Removed space-between constraint */
    height: auto;
    padding-top: 0; /* Removing top padding as requested to shorten column */
}

.news-block.small-image .block-image {
    width: 100%;
    aspect-ratio: 16 / 9 !important; /* Reverted to 16:9 as requested */
    margin-bottom: 0;
    overflow: hidden;
    border-radius: 4px;
}

.news-block.small-image .block-image a {
    display: block;
    width: 100%;
    height: 100%;
}

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

/* Right Column Card Spacing */
.col-right .news-block.small-image {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 0;
}

.col-right .news-block.small-image .small-card-content {
    padding: 0;
    margin: 0;
}

/* 0px gap between image and title - handled by margin-bottom: 0 on .block-image */
.col-right .news-block.small-image .block-title {
    margin: 0;
    margin-bottom: 16px; /* Title to Deck: 16px */
}

.col-right .news-block.small-image .block-summary {
    margin: 0;
    margin-bottom: 9px; /* Deck to Read Time: reduced by 25% to 9px */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35; /* Increased to prevents clipping of descenders */
    padding-bottom: 1px; /* Extra safety for descenders */
    display: none; /* Hide Decks */
}

.col-right .news-block.small-image .block-meta {
    margin: 0;
}

.col-right .news-block.small-image .meta-primary {
    margin: 0;
    margin-bottom: 9px; /* Read Time to Author: reduced by 25% to 9px */
}

.col-right .news-block.small-image .meta-secondary {
    margin: 0;
}

/* 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;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4; /* Reduced from 6 to 4 lines max */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Meta Row: Author (left) + Category (right) - pushed to bottom */
/* Meta Row: Standard Layout (Read/Tag + Author/Date) */
.news-block.hero-mainframe .block-meta {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.news-block.hero-mainframe .meta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px; /* Primary Gap */
}

.news-block.hero-mainframe .meta-primary {
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-main);
    width: 100%;
    gap: 0; /* No gap, use placeholder margins instead */
}

/* Invisible placeholder to match separator width/margins */
.news-block.hero-mainframe .meta-gap-placeholder {
    width: 6px; /* Same as separator character width */
    margin: 0 32px; /* Scaled spacing (1.77x Middle) */
    visibility: hidden;
}

.news-block.hero-mainframe .meta-secondary {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-green);
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0; /* No gap, use separator margins instead */
}

.news-block.hero-mainframe .meta-author {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.news-block.hero-mainframe .meta-date {
    flex: 1;
    display: flex;
    justify-content: flex-start;
}

/* Meta author/date empty rules removed */
.news-block.hero-mainframe .meta-sep {
    color: var(--color-green);
    margin: 0 32px; /* Secondary Gap */
}

.news-block.hero-mainframe .meta-read {
    flex: 1; /* Split width for absolute centering */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
}

.news-block.hero-mainframe .meta-tag {
    flex: 1; /* Split width for absolute centering */
    display: flex;
    justify-content: flex-start;
}

/* Meta tag empty rule removed */

.news-block.hero-mainframe .meta-tag .tag-link {
    color: var(--color-green);
    text-decoration: none;
    font-weight: 700;
}

.news-block.hero-mainframe .author-link {
    color: var(--color-green);
    text-decoration: none;
    font-weight: 700;
}

/* 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: 0; /* No gap, use placeholder margins instead */
    margin: 0 auto;
}

/* Invisible placeholder to match separator width/margins */
.news-block.text-only .meta-gap-placeholder {
    width: 6px; /* Same as separator character width */
    margin: 0 18px; /* Same as .meta-sep margins */
    visibility: hidden;
}

/* Meta Secondary: Author + Date */
.news-block.text-only .meta-secondary {
    display: flex;
    width: 100%;
    font-size: 14px;
    justify-content: center;
    align-items: center;
    gap: 0; /* No gap, use separator margins instead */
    margin: 0 auto;
}

.news-block.text-only .meta-author {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-green);
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.news-block.text-only .meta-date {
    font-size: 14px;
    font-weight: 300;
    color: var(--color-green);
    flex: 1;
    display: flex;
    justify-content: flex-start;
}

.news-block.text-only .meta-sep {
    color: var(--color-green);
    font-weight: 400;
    margin: 0 18px;
}

.news-block.text-only .meta-read {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-main);
}

.news-block.text-only .meta-tag {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-green);
}

/* 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;
    min-height: auto;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.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%;
    font-size: 14px;
    justify-content: center;
    align-items: center;
    gap: 0; /* No gap, use placeholder margins instead */
    margin: 0 auto;
}

/* Invisible placeholder to match separator width/margins */
.news-block.small-image .meta-gap-placeholder {
    width: 6px; /* Same as separator character width */
    margin: 0 18px; /* Same as .meta-sep margins */
    visibility: hidden;
}

.news-block.small-image .meta-secondary {
    display: flex;
    width: 100%;
    font-size: 14px;
    justify-content: center;
    align-items: center;
    gap: 0; /* No gap, use separator margins instead */
    margin: 0 auto;
}

.news-block.small-image .meta-author {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-green);
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.news-block.small-image .meta-date {
    font-size: 14px;
    font-weight: 300;
    color: var(--color-green);
    flex: 1;
    display: flex;
    justify-content: flex-start;
}

.news-block.small-image .meta-sep {
    color: var(--color-green);
    font-weight: 400;
    margin: 0 18px;
}

/* Flex 1 Mirroring for Primary */
.news-block.small-image .meta-read {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-main);
}

.news-block.small-image .meta-tag {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-green);
}

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



/* --- Frame 31 (3-Column Mixed Layout) --- */
/* Legacy Frame 31 Grid removed. See end of file for Flex implementation. */
.f31-col-left {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 321px; /* Fixed width for Flex layout */
    flex: none;
}

.f31-col-middle {
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex: 1; /* Fluid width */
}

/* Frame 31 Title Only Card */
.news-block.f31-title-only {
    padding: 0;
    border-bottom: 0.5px solid var(--color-separator-green);
    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; removed - let container shrink to fit image */
}

.news-block.f31-image-side .block-image img {
    width: 100%;
    /* Max height constraints to help alignment */
    height: auto;
    max-height: 332px;
    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;
}

/* --- Celebrities Section --- */
.celebrities-section {
    margin: 150px 0;
    width: 100%;
}

.celebrities-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 24px; /* Updated to match US section */
    height: 80px;
    position: relative;
    width: 100%;
    cursor: pointer;
}

.celebrities-title {
    font-weight: 700;
    font-size: 32px;
    line-height: 44px;
    letter-spacing: -0.07em;
    color: var(--color-text-main);
    margin: 0;
    padding-right: 16px; /* Match US section padding */
    flex-shrink: 0;
    z-index: 2;
    background: var(--color-bg-light); /* Hide line behind text */
    transition: color 0.3s ease;
}

/* The line fills the remaining space betwen title and button */
.celebrities-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-green);
    z-index: 1;
    transition: background-color 0.3s ease;
}

.celebrities-see-all {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    margin-bottom: 10px; /* Match US section spacing */
    flex-shrink: 0;
    z-index: 2;
    background-color: var(--color-bg-light);
    padding-left: 10px;
}

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

.celebrities-see-all .circle {
    width: 50px;
    height: 50px;
}

/* Hover effects for header - Removed as per request */
/* .celebrities-header:hover .celebrities-title {
    color: var(--color-green);
}

.celebrities-header:hover .celebrities-line {
    background-color: var(--color-green);
} */

/* Grid Layout */
.celebrities-grid {
    display: grid;
    /* Recalculated for 1240px content width (inside 1400px container with 80px padding) */
    /* 307px + 41px + 544px + 41px + 307px = 1240px */
    grid-template-columns: 307px 544px 307px;
    gap: 41px;
    justify-content: space-between;
}

.col-celebs-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    padding-bottom: 32px;
    box-sizing: border-box;
}

.col-celebs-left .celebrity-card:last-child {
    margin-top: auto;
}

.celebrity-separator {
    width: 100%;
    height: 0.5px;
    background-color: var(--color-separator-green);
    margin: 24px 0;
    flex-shrink: 0;
}

.col-celebs-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    padding-bottom: 32px;
    box-sizing: border-box;
}

.col-celebs-right .celebrity-card:last-child {
    margin-top: auto;
}

/* Card Styles */
.celebrity-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.celebrity-card .card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 16px;
    overflow: hidden;
    border-radius: 4px;
}

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

.celebrity-card .card-title {
    width: 100%;
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 800;
    font-size: 20px;
    line-height: 120%;
    text-align: center;
    letter-spacing: -0.05em;
    color: var(--color-text-main);
    margin: 0 0 8px 0;
    
    /* Clamp at 4 lines */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 96px;
}

.celebrity-card .card-deck {
    width: 100%;
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-size: 15px;
    line-height: 120%;
    text-align: center;
    color: var(--color-text-main);
    margin: 0 0 16px 0;
    
    /* Clamp at 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 36px;
}

.celebrity-card .card-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    align-items: center;
}

.celebrity-card .meta-row-1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between; /* "gap: 82px" in figma on 315px width means space-between effectively */
    align-items: center;
    width: 100%;
    max-width: 250px; /* Constrain width to keep items closer if needed, or remove for full width */
    padding: 0 20px; /* Add some padding to push items in */
    box-sizing: border-box;
}

/* Read Time Line */
.celebrity-card .read-time {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-size: 13px; /* Estimated from context, user didn't specify font size for meta inner text, assumed inherit or similar */
    color: var(--color-text-main);
}

.celebrity-card .category {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-size: 13px; 
    color: var(--color-green);
}

.celebrity-card .meta-row-2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    justify-content: center;
}

.celebrity-card .author {
    font-family: 'Manrope';
    font-weight: 700;
    font-size: 13px;
    color: var(--color-green);
}

.celebrity-card .sep {
    color: var(--color-green);
    font-size: 13px;
}

.celebrity-card .date {
    font-family: 'Manrope';
    font-weight: 300;
    font-size: 13px;
    color: var(--color-green);
}

/* Middle Column Styles */
.col-celebs-middle {
    display: flex;
    flex-direction: column;
    /* width: 621px; implied */
}

.celebrity-card-middle {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%; /* Stretch to fill column */
}

/* Title on top */
.celebrity-card-middle .middle-title {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 800;
    font-size: 42px; /* User requested 42px */
    line-height: 1.2;
    text-align: center;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    color: var(--color-text-main);
    margin: 0 0 24px 0; /* Spacing below title */
    width: 100%;
}

/* 4:3 Image */
.celebrity-card-middle .middle-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 24px; /* Spacing below image */
}

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

/* Deck */
.celebrity-card-middle .middle-deck {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
    text-align: center;
    color: var(--color-text-main);
    margin: 0 0 24px 0;
    width: 100%;
    max-width: 95%; /* Prevent edge-to-edge reading */
}

/* Meta Container */
.celebrity-card-middle .middle-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px; /* Gap between rows */
    margin-top: auto; /* Push to bottom */
    width: 100%;
    /* Extra spacing at the bottom to ensure it looks "below" others if needed? 
       User said "absolute bottom of the frame". margin-top: auto does this within the flex container. 
       If this column is taller than the others, it will define the row height. 
       If shorter, it will stretch and this will sit at the bottom. */
}

.celebrity-card-middle .meta-row-1 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 82px; /* As per prompt "gap: 82px" for time read line */
    width: 100%;
}

.celebrity-card-middle .read-time {
    font-family: 'Manrope';
    font-weight: 500;
    font-size: 15px; /* Prompt didn't specify but used 13px elsewhere, user said "time read category" width 257 height 25. */
    color: var(--color-text-main);
}

.celebrity-card-middle .category {
    font-family: 'Manrope';
    font-weight: 700;
    font-size: 15px;
    color: var(--color-green);
    text-transform: uppercase; /* Usually categories are uppercase or capitalized */
}

.celebrity-card-middle .meta-row-2 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 4px; /* As per prompt */
    width: 100%;
}

.celebrity-card-middle .author {
    font-family: 'Manrope';
    font-weight: 700;
    font-size: 15px;
    color: var(--color-green);
}

.celebrity-card-middle .sep {
    color: var(--color-green);
}

.celebrity-card-middle .date {
    font-family: 'Manrope';
    font-weight: 300;
    font-size: 15px;
    color: var(--color-green);
}

/* ===========================================================================
   Celebrities Section Hover Effects  
   =========================================================================== */

/* Card-level hover: Hovering anywhere on celebrity card turns title red */
.celebrity-card:hover .card-title a,
.celebrity-card-middle:hover .middle-title a {
    color: var(--color-green) !important;
}

/* Title links base styles */
.celebrity-card .card-title a,
.celebrity-card-middle .middle-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
    cursor: pointer;
}

/* Image links are clickable */
.celebrity-card .card-image a,
.celebrity-card-middle .middle-image a {
    display: block;
    cursor: pointer;
}


.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) */
/* Legacy f31-large-text block removed to prevent conflict */

/* 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-green);
    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-green);
    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);
    color: var(--color-text-main);
    margin: 0;
    min-height: auto;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

/* Slightly smaller for narrower col */

/* Responsive */
@media (max-width: 1300px) {
    :root {
    /* === PROPOSAL A: MONOCHROME (Iron Guard Theme) === */
    
    /* Primary Brand */
    --color-green: #437C53;           /* Forest Green */
    --color-blue-selection: #254E91;  /* Vivid Dark Blue (Active/Hover) */
    
    /* Text Colors */
    --color-text-main: #1A1A1A;         /* Black - primary text */
    --color-text-secondary: #4A4A4A;    /* Dark Grey - dates, read time */
    --color-text-author: #2D5A3D;       /* Dark Green - author names */
    
    /* Background Colors */
    --color-bg-light: #F5F7F5;          /* Off-White with green tint */
    --color-bg-card: #FFFFFF;           /* Pure white cards */
    
    /* UI Colors */
    --color-separator-green: #D1D5D1;   /* Light grey-green dividers */
    --color-border: #1A1A1A;            /* Black borders (pills) */
    
    /* Button Colors */
    --color-btn-primary-bg: #1A1A1A;    /* Black subscribe button */
    --color-btn-primary-text: #FFFFFF;  /* White text on button */
    
    /* Fonts & Layout */
    --font-primary: 'Manrope', sans-serif;
    --container-width: 1400px;

    /* Footer Colors */
    --color-white: #FFFFFF;
    --color-footer-border: #4A4A4A;
    --color-footer-bg-hover: #2D5A3D;
    --color-footer-input-bg: rgba(255, 255, 255, 0.21);
    --color-footer-input-border: rgba(217, 217, 217, 0.56);
}

/* 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;
    }

}

/* --- Single Row More Grid (Copy of Latest Section, but 1 row) --- */
.frame-more-grid-single {
    display: grid;
    /* 5 columns: 1st is 252px (More icon), rest are 1fr */
    grid-template-columns: 252px repeat(4, 1fr);
    /* 1 row only, minimum height 131px, but expandable */
    grid-template-rows: minmax(131px, auto);
    width: 100%;
    margin-top: 80px;
    margin-bottom: 80px;
    border-top: 1.5px solid #003F84;
    border-bottom: 1.5px solid #003F84;
    position: relative;
    box-sizing: border-box;
}

/* Column 1: More Icon (Spans 1 row) */
.frame-more-grid-single .f-more-col-icon {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    background-color: transparent;
    border-right: 0.5px solid var(--color-separator-green);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
}

/* More Icon Styling - uses more-arrow.svg */
.frame-more-grid-single .more-icon-large {
    width: 203px;
    height: 147px;
    background: url('more-arrow.svg') no-repeat center/contain;
    position: absolute;
    top: -39px;
    left: 13px;
    z-index: 10;
}

/* Articles in single-row More grid */
.frame-more-grid-single .f-more-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 15.5px 30px;
    box-sizing: border-box;
    position: relative;
    border-right: 0.5px solid var(--color-separator-green);
    border-bottom: none; /* No bottom border for single row */
    overflow: hidden;
}

/* Remove right border and padding for the last column */
.frame-more-grid-single .f-more-item:nth-child(5) {
    border-right: none;
    padding-right: 0;
}

/* Reuse the same content/title/meta styles from Latest section via .f-more-item */
/* These are defined in the Latest Section CSS at the end of the file */

/* --- 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-green);
    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-green);
}

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

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

/* Frame 31 - Image Side Card (Middle Main) */
/* Frame 31 - Image Side Card (Middle Main) */
.news-block.f31-image-side {
    display: flex;
    flex-direction: row;
    /* align-items: stretch; handled by generic rule now, or inherit */
    gap: 19px;
    cursor: pointer;
}

.news-block.f31-image-side .block-image {
    /* width and height removed to allow auto sizing */
    flex-shrink: 0;
    overflow: hidden;
}

.news-block.f31-image-side .block-image img {
    /* width/height handled by generic img rule */
    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-green);
}

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

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

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

/* 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-green);
    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-green);
}

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

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

/* 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: 4px;
}

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

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

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

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

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

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

/* 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: var(--color-white);
}

.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;
}

/* FIX: Ensure Section Titles are Transparent and Line follows text (Flexbox) */
.f32-section-header {
    display: flex;
    align-items: center; /* Center vertically */
    gap: 0px; /* Reduced gap to 0px as requested */
    width: 100%;
    margin-bottom: 24px;
}

.f32-section-title {
    background-color: transparent !important;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 44px;
    letter-spacing: -0.07em;
    color: #385292; /* Vivid Blue from screenshot/previous */
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0;
}

.f32-section-line {
    position: static !important; /* Override any absolute positioning */
    flex-grow: 1; /* Take up remaining space */
    height: 1px;
    background-color: #385292; /* Match title color */
    border: none;
    width: auto !important;
}


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

/* Frame 33 Row Container */
.f33-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
    margin-bottom: 0;
}

/* Frame 33 Individual Section */
.f33-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 0px;
}

/* Frame 33 Section Header */
.f33-section-header {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 24px;
    height: 80px; /* Added height to match Celebrities section */
    cursor: pointer;
    position: relative;
}

/* Frame 33 Category Title */
.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 0 0 0;
    white-space: nowrap;
    padding-right: 16px;
    transition: color 0.3s ease;
    z-index: 2;
    background-color: var(--color-bg-light);
}

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

/* 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-green);
}

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

/* Article Grid for Frame 33 sections */
.f33-article-grid {
    display: grid;
    gap: 24px;
    width: 100%;
    grid-template-columns: 1fr;
}

/* Hover effects for Frame 33 headers */
.f33-section-header:hover .f33-section-title {
    color: var(--color-green);
}

.f33-section-header:hover .f33-section-line {
    background-color: var(--color-green);
}


/* 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);
    color: rgba(37, 78, 145, 0.5); /* Vivid Dark Blue, transparent */
}

/* Selected section title (visible dark green) */
.f32-section-header.selected .f32-section-title {
    color: var(--color-blue-selection); /* Vivid Dark Blue */
}

/* 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: rgba(37, 78, 145, 0.5); /* Vivid Dark Blue, transparent */
    transition: background-color 0.3s ease;
    z-index: 1;
    border: none;
}

/* Selected section line (visible dark green) */
.f32-section-header.selected .f32-section-line {
    background-color: var(--color-blue-selection);
}

/* 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-green);
}

.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);
    width: 100%;
    min-height: 96px; /* 4 lines fixed height */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Card Summary */
.f32-card-summary {
    display: none; /* Hide decks on homepage */
    min-height: 0;
}

/* 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-green);
}

.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-blue-selection);
}

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

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

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

/* Text-Only Card Overrides */
.f32-card.text-only .f32-card-title {
    min-height: 65px; /* 3 lines (21.6px * 3) */
    /* Exact 3 lines */
    font-size: 18px;
    text-align: center;
    align-items: center;
    justify-content: center;
    /* Exact 4 lines */
    font-size: 18px;
    text-align: center;
    align-items: center;
    justify-content: center;
    -webkit-line-clamp: 4;
}

.f32-card.text-only .f32-card-summary {
    display: none;
    min-height: 54px; /* 3 lines (18px * 3) */
    /* Exact 3 lines */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

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

.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);
    color: #2D5A3D; /* Dark Green for Section Titles */
}

.f33-section-line {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-green);
    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: var(--color-green);
  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: var(--color-green);
}

.category-subscribe-circle {
  width: 50px;
  height: 50px;
  border: 1px solid var(--color-green);
  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-green);
}

.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: 65px; /* 3 lines */
    font-size: 18px;
    text-align: center;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.f32-card.text-with-image .f32-card-summary {
    text-align: center;
    min-height: 54px; /* 3 lines */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

/* ========== 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-green);
    margin: 0;
    white-space: nowrap;
    padding-right: 16px;
}

.f32-sports-line {
    flex: 1;
    height: 0;
    border-bottom: 4px solid var(--color-green);
    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: var(--color-white);
}

.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-green);
    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: 50px;
    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: var(--color-white);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.header-login-link:hover {
    color: var(--color-blue-unselected);
}

.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: #1A1A1A;
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: normal;
    color: var(--color-white);
    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;
    transition: color 0.2s, border-color 0.2s;
}

.trending-pills a:hover {
    color: var(--color-blue-selection);
    border-color: var(--color-blue-selection);
}

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

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

/* Reduce right column gaps at smaller heights */
@media (max-height: 900px) {

}

/* 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;
    }


}

/* 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;
    }


}

/* 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;
    }


}

/* ========================================
   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 252px (More), rest are 1fr */
    grid-template-columns: 252px repeat(4, 1fr);
    /* 3 rows of minimum height 131px, but expandable */
    grid-template-rows: repeat(3, minmax(131px, auto));
    width: 100%;
    margin-top: 80px;
    margin-bottom: 80px;
    border-top: 1.5px solid #003F84;
    border-bottom: 1.5px 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-green);
    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: flex-start; /* Changed from center to flex-start for proper top alignment */
    padding: 15.5px 30px; /* Use padding for spacing: top/bottom 15.5px, left/right 30px */
    box-sizing: border-box;
    position: relative;
    border-right: 0.5px solid var(--color-separator-green);
    border-bottom: 0.5px solid var(--color-separator-green);
    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-green);
    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-green);
    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-green);
    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: var(--color-blue-selection);
    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 BLUE --- */
.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-blue-selection) !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: var(--color-blue-selection);
    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-green);
    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-green) !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-green) !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-green);
}

/* 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: var(--color-green);
    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: 0; /* Removed gap to ensure links touch each other/separators for full click area */
    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);
    margin-bottom: 24px; /* Added spacing since parent gap is removed */
}

.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: var(--color-white);
}

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


.hamburger-search-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px 0 8px; /* Adjusted to move text 2px left (10->12 right, 10->8 left) */
    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: var(--color-white);
    transition: background 0.2s;
}

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

.hamburger-search-btn svg {
    width: 16px;
    height: 16px;
    stroke: var(--color-white);
}

/* 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: 20px 0; /* Increased padding, removed negative margin */
    margin: 0;
    font-family: 'Inter', 'Manrope', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    text-transform: capitalize;
    color: var(--color-white);
    text-decoration: none;
    transition: color 0.2s;
}

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



/* 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;
    }
}


/* ==========================================================================
   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-green) !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-green) !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-green);
}

/* 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;
}


/* ==========================================================================
   MORE & LATEST SECTIONS - Complete Typography & Layout
   ========================================================================== */

/* --- Single Row More Grid (Copy of Latest Section, but 1 row) --- */
.frame-more-grid-single {
    display: grid;
    /* 5 columns: 1st is 252px (More icon), rest are 1fr */
    grid-template-columns: 252px repeat(4, 1fr);
    /* Single row */
    grid-template-rows: minmax(131px, auto);
    width: 100%;
    margin-top: 80px;
    margin-bottom: 80px;
    border-top: 1.5px solid #003F84;
    border-bottom: 1.5px solid #003F84;
    position: relative;
    box-sizing: border-box;
}

/* Column 1: More Icon in single-row grid */
.frame-more-grid-single .f-more-col-icon {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    background-color: transparent;
    border-right: 0.5px solid var(--color-separator-green);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
}

/* More Icon Styling - uses more-arrow.svg for single row */
.frame-more-grid-single .more-icon-large {
    width: 203px;
    height: 147px;
    background: url('more-arrow.svg') no-repeat center/contain;
    position: absolute;
    top: -39px;
    left: 13px;
    z-index: 10;
}

/* Articles in single-row More grid */
.frame-more-grid-single .f-more-item {
    display: flex;
    align-items: flex-start; /* Changed from center to flex-start for proper top alignment */
    padding: 15.5px 30px; /* Use padding for spacing: top/bottom 15.5px, left/right 30px */
    box-sizing: border-box;
    position: relative;
    border-right: 0.5px solid var(--color-separator-green);
    overflow: hidden;
}

/* Remove right border for the last column */
.frame-more-grid-single .f-more-item:last-child {
    border-right: none;
}

/* --- Content Container (Frame 30) --- */
.more-news-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 7.5px; /* Gap between title and meta line */
    width: 100%;
    height: 100%;
    margin: 0; /* Spacing is now handled by parent .f-more-item padding */
}

/* Rightmost articles: no right margin/padding, content touches container border */
.frame-more-grid .f-more-item:nth-child(4n + 5),
.frame-more-grid-single .f-more-item:last-child {
    padding-right: 0;
}

/* --- Title Styling (Figma specs) --- */
.more-news-title {
    font-family: 'Manrope', sans-serif;
    font-style: normal;
    font-weight: 800;
    font-size: 24px;
    line-height: 1.2; /* Increased from 100% to 1.2 to prevent cut-off descenders */
    letter-spacing: -0.05em;
    color: var(--color-text-main);
    margin: 0;
    /* Clamp to 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

/* --- Meta Container (Frame 19) --- */
.more-news-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 2px;
    font-family: 'Manrope', sans-serif;
}

/* Author Name */
.more-news-meta .meta-name {
    font-family: 'Manrope', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-green);
}

/* Dash Separator */
.more-news-meta .meta-dash {
    font-family: 'Manrope', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    color: var(--color-green);
    margin: 0 2px;
}

/* Date */
.more-news-meta .meta-date {
    font-family: 'Manrope', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-green);
}

/* Hover: Title turns red */
.f-more-item:hover .more-news-title,
.more-news-content:hover .more-news-title {
    color: var(--color-green);
}

/* Ensure clickable area */
.f-more-item {
    cursor: pointer;
}

.f-more-item .more-news-content {
    text-decoration: none;
    color: inherit;
}

/* --- Frame 31 Section --- */
.frame-31-grid {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch; /* Stretch to make columns equal height */
    gap: 41px;
    width: 100%;
    margin-bottom: 60px;
    height: auto; /* Ensure auto height */
}

.f31-col-left {
    flex: 313;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: auto; /* Ensure auto height */
}

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

/* Right Column - Fixed Width 418px + Stretch Height */
.f31-col-right {
    width: 418px; /* Fixed width */
    flex: 0 0 418px; /* Strict Flex Sizing */
    display: flex;
    flex-direction: column;
    /* Force stretch to match siblings */
    align-self: stretch;
    height: auto; /* Let flex stretch handle height */
}

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

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

/* Frame 31 Cards */
/* Frame 31 Cards */
.f31-title-only {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 0.5px solid var(--color-separator-green);
}
.f31-title-only:last-child {
    border-bottom: none;
}
.f31-title-only .block-title a {
    display: -webkit-box; /* Required for line-clamp */
    display: -moz-box;
    font-size: 18px;
    line-height: 1.5;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    padding-bottom: 0; /* Removing padding from clamped element */
    min-height: 3em; /* Enforce 2 lines min height */
}
.f31-title-only .block-title {
    margin: 0;
    padding-bottom: 3px; /* Apply padding to parent for descenders */
}

/* Middle Column Top Card */
.f31-image-side {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: stretch; /* Stretches content to match image height */
}
.news-block.f31-image-side .block-image {
    flex-shrink: 0;
    width: 135px; /* Widened based on user feedback (approx 1:1.7) */
    height: 230px;
}
.news-block.f31-image-side .block-image a {
    display: block;
    width: 100%;
    height: 100%;
}
.news-block.f31-image-side .block-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}
.f31-image-side .block-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex: 1; /* Text takes remaining width */
    min-width: 0; /* Allow shrinking */
}
.f31-image-side .block-title a {
    font-size: 20px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: -4px;
}
/* Increase specificity to override collisions */
.news-block.f31-image-side .block-summary,
.f31-image-side .block-summary {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 4.5em; /* 3 lines * 1.5 */
    line-height: 1.5;
    margin-top: 8px;
}

/* Push meta to bottom */
.news-block.f31-image-side .block-meta,
.f31-image-side .block-meta {
    margin-top: auto;
    padding-bottom: 0;
    margin-bottom: 0;
    transform: translateY(4px); /* Optical alignment adjustment: increased to 4px */
}


/* Right Column */
/* Right Column */
.news-block.f31-large-text {
    display: flex;
    flex-direction: row;
    gap: 24px;
    height: 100%; /* Fill the column to match left column height */
    border-bottom: none;
    align-items: stretch; /* Stretch content vertically */
    padding-bottom: 4px; /* Reduced from 8px to move author line down 4px */
    box-sizing: border-box;
}
.news-block.f31-large-text .f31-card-image {
    order: 2;
    flex-shrink: 0;
    width: 191px; /* Increased to 191px to maintain ratio with 325px height */
    height: 325px; /* Increased to 325px to match column height */
    border-radius: 4px;
    overflow: hidden;
    /* align-self: flex-end; Removed to allow default stretch/top alignment */
}
.news-block.f31-large-text .f31-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}
/* Content Wrapper */
.news-block.f31-large-text .f31-card-content {
    order: 1;
    flex: 1; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 16px;
    min-width: 0;
    padding-bottom: 0px; 
}
.news-block.f31-large-text .block-title {
    font-size: 28px;
    line-height: 1.3;
    margin-top: -6px;
    /* Verified 180px for perfect alignment (can be adjusted if needed) */
    min-height: 180px; 
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-block.f31-large-text .block-summary {
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Clamped at 3 lines as requested */
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 4.5em; /* 3 lines min height */
    line-height: 1.5;
    margin-top: 0;
}
.news-block.f31-large-text .block-meta {
    margin-top: auto;
    padding-bottom: 0;
    transform: translateY(2px);
}

.f31-compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Fix for Frame 31 Middle Column Clipping and Spacing */
.f31-col-middle {
    height: auto !important;
    overflow: visible !important;
    gap: 12px !important; /* Doubled from 6px as requested */
}

/* Fix for Sub-article Titles (Bottom Row) */
.news-block.f31-compact .block-title {
    line-height: 1.3 !important;
    min-height: 47px; /* Enforce 2 lines height */
    margin-bottom: 1px; /* Reduced from 4px to align author line */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-block.f31-compact .block-meta {
    display: flex;
    font-size: 13px;
    color: #666;
    margin-top: 1px; /* Reduced from 4px to align author line */
}

/* Ensure sub-articles container flows properly */
.f31-middle-subs {
    display: flex;
    flex-direction: row;
    gap: 16px;
    margin-top: 0; /* Removing extra margin, relying on parent gap */
}

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

/* GR Logo Footer Override */
.footer-logo-section .brand-logo {
    height: 177px !important;
    width: auto;
}
