/* Editorial Layout CSS Fix with Typography Overrides - Complete Version */
/* This CSS adds missing editorial layout AND typography styles from the Known Good version */
/* All typography rules use !important to ensure they override demo environment styles */

/* ===== CORE EDITORIAL LAYOUT STYLES ===== */

/* Editorial Row - Main content grid container */
.editorial-row {
  display: grid !important;
  gap: 2rem !important;
  margin-bottom: 2rem !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  box-sizing: border-box !important;
}

@media screen and (min-width: 768px) {
  .editorial-row {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

@media screen and (min-width: 1280px) {
  .editorial-row {
    grid-template-columns: 238fr 804fr 238fr !important;
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
}

/* Editorial Data Row - Alternative grid layout for data-heavy content */
.editorial-data-row {
  display: grid !important;
  gap: 2rem !important;
  margin-bottom: 2rem !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  box-sizing: border-box !important;
}

@media screen and (min-width: 768px) {
  .editorial-data-row {
    grid-template-columns: 429fr 251fr !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

@media screen and (min-width: 1280px) {
  .editorial-data-row {
    grid-template-columns: 238fr 648fr 386fr !important;
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  }
  
  .editorial-data-row .editorial-center-col {
    padding-right: 2rem !important;
  }
  
  .editorial-data-row [data-testid=data-point-card] {
    max-width: 20rem !important;
  }
}

/* Editorial Center Column - Main content area */
.editorial-center-col {
  display: grid !important;
  gap: 1.5rem !important;
  min-width: 0 !important;
}

@media screen and (min-width: 1280px) {
  .editorial-center-col {
    gap: 2rem !important;
    grid-column: span 1 / span 1 !important;
  }
}

/* Editorial Side Rail - Sidebar content area */
.editorial-side-rail {
  min-width: 0 !important;
}

@media screen and (min-width: 1280px) {
  .editorial-side-rail {
    grid-column: span 1 / span 1 !important;
  }
}

/* Hide empty side rails on mobile, show on desktop */
.editorial-side-rail:empty {
  display: none !important;
}

@media screen and (min-width: 1280px) {
  .editorial-side-rail:empty {
    display: grid !important;
  }
}

/* Additional editorial container styles */
@media screen and (min-width: 1280px) {
  .editorial-lg-breaker {
    max-width: 72% !important;
  }
  
  .\!container.editorial {
    max-width: 41rem !important;
  }
  
  .container.editorial {
    max-width: 41rem !important;
  }
}

/* ===== TYPOGRAPHY - DISPLAY HEADINGS ===== */

/* Heading Display 1 */
.heading-display-1 {
  font-family: 'Comcast New Vision', Verdana, sans-serif !important;
  font-size: 3rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  line-height: 0.96 !important;
}

@media screen and (min-width: 768px) {
  .heading-display-1 {
    font-size: 4rem !important;
    letter-spacing: -0.03em !important;
  }
}

@media screen and (min-width: 1280px) {
  .heading-display-1 {
    font-size: 7.5rem !important;
    letter-spacing: -0.03em !important;
  }
}

.heading-display-1.font-serif {
  font-family: Tobias, Georgia, serif !important;
  font-size: 3.25rem !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
}

@media screen and (min-width: 768px) {
  .heading-display-1.font-serif {
    font-size: 4rem !important;
    letter-spacing: -0.01em !important;
  }
}

@media screen and (min-width: 1280px) {
  .heading-display-1.font-serif {
    font-size: 8rem !important;
    letter-spacing: -0.01em !important;
  }
}

/* Heading Display 2 */
.heading-display-2 {
  font-family: 'Comcast New Vision', Verdana, sans-serif !important;
  font-size: 2.5rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  line-height: 0.96 !important;
}

@media screen and (min-width: 768px) {
  .heading-display-2 {
    font-size: 3.5rem !important;
    letter-spacing: -0.03em !important;
  }
}

@media screen and (min-width: 1280px) {
  .heading-display-2 {
    font-size: 5rem !important;
    letter-spacing: -0.03em !important;
  }
}

.heading-display-2.font-serif {
  font-family: Tobias, Georgia, serif !important;
  font-size: 2.75rem !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
}

@media screen and (min-width: 768px) {
  .heading-display-2.font-serif {
    font-size: 3.75rem !important;
    letter-spacing: -0.01em !important;
  }
}

@media screen and (min-width: 1280px) {
  .heading-display-2.font-serif {
    font-size: 5rem !important;
    letter-spacing: -0.01em !important;
  }
}

/* ===== TYPOGRAPHY - STANDARD HEADINGS ===== */

/* Heading 3x-lg */
.heading-3x-lg {
  font-family: 'Comcast New Vision', Verdana, sans-serif !important;
  font-size: 2rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.08 !important;
}

@media screen and (min-width: 768px) {
  .heading-3x-lg {
    font-size: 2.25rem !important;
    letter-spacing: -0.02em !important;
  }
}

@media screen and (min-width: 1280px) {
  .heading-3x-lg {
    font-size: 3.5rem !important;
    letter-spacing: -0.02em !important;
  }
}

.heading-3x-lg.font-light {
  font-family: 'Comcast New Vision', Verdana, sans-serif !important;
  font-size: 2rem !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.08 !important;
}

@media screen and (min-width: 768px) {
  .heading-3x-lg.font-light {
    font-size: 2.25rem !important;
    letter-spacing: -0.02em !important;
  }
}

@media screen and (min-width: 1280px) {
  .heading-3x-lg.font-light {
    font-size: 3.5rem !important;
    letter-spacing: -0.02em !important;
  }
}

.heading-3x-lg.font-serif {
  font-family: Tobias, Georgia, serif !important;
  font-size: 2.125rem !important;
  font-weight: 400 !important;
  letter-spacing: 0em !important;
  line-height: 1.3 !important;
}

@media screen and (min-width: 768px) {
  .heading-3x-lg.font-serif {
    font-size: 2.5rem !important;
  }
}

@media screen and (min-width: 1280px) {
  .heading-3x-lg.font-serif {
    font-size: 4rem !important;
    letter-spacing: -0.02em !important;
  }
}

/* Heading 2x-lg */
.heading-2x-lg {
  font-family: 'Comcast New Vision', Verdana, sans-serif !important;
  font-size: 1.75rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.08 !important;
}

@media screen and (min-width: 768px) {
  .heading-2x-lg {
    font-size: 2rem !important;
    letter-spacing: -0.02em !important;
  }
}

@media screen and (min-width: 1280px) {
  .heading-2x-lg {
    font-size: 3rem !important;
    letter-spacing: -0.01833em !important;
  }
}

.heading-2x-lg.font-serif {
  font-family: Tobias, Georgia, serif !important;
  font-size: 1.75rem !important;
  font-weight: 400 !important;
  letter-spacing: 0em !important;
  line-height: 1.28 !important;
}

@media screen and (min-width: 768px) {
  .heading-2x-lg.font-serif {
    font-size: 2rem !important;
  }
}

@media screen and (min-width: 1280px) {
  .heading-2x-lg.font-serif {
    font-size: 3rem !important;
  }
}

/* Heading x-lg */
.heading-x-lg {
  font-family: 'Comcast New Vision', Verdana, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  letter-spacing: 0em !important;
  line-height: 1.12 !important;
}

@media screen and (min-width: 1280px) {
  .heading-x-lg {
    font-size: 2.5rem !important;
    letter-spacing: -0.02em !important;
    line-height: 1.08 !important;
  }
}

.heading-x-lg.font-serif {
  font-family: Tobias, Georgia, serif !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  letter-spacing: 0em !important;
  line-height: 1.32 !important;
}

@media screen and (min-width: 1280px) {
  .heading-x-lg.font-serif {
    font-size: 2.5rem !important;
    line-height: 1.28 !important;
  }
}

/* Heading lg */
.heading-lg {
  font-family: 'Comcast New Vision', Verdana, sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  letter-spacing: 0em !important;
  line-height: 1.2 !important;
}

@media screen and (min-width: 1280px) {
  .heading-lg {
    font-size: 1.75rem !important;
  }
}

.heading-lg.font-serif {
  font-family: Tobias, Georgia, serif !important;
  font-size: 1.375rem !important;
  font-weight: 400 !important;
  letter-spacing: 0em !important;
  line-height: 1.4 !important;
}

@media screen and (min-width: 1280px) {
  .heading-lg.font-serif {
    font-size: 2rem !important;
  }
}

/* Heading md */
.heading-md {
  font-family: 'Comcast New Vision', Verdana, sans-serif !important;
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  letter-spacing: 0em !important;
  line-height: 1.2 !important;
}

@media screen and (min-width: 1280px) {
  .heading-md {
    font-size: 1.5rem !important;
    line-height: 1.16 !important;
  }
}

.heading-md.font-serif {
  font-family: Tobias, Georgia, serif !important;
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  letter-spacing: 0em !important;
  line-height: 1.3 !important;
}

@media screen and (min-width: 1280px) {
  .heading-md.font-serif {
    font-size: 1.75rem !important;
  }
}

/* Heading sm */
.heading-sm {
  font-family: 'Comcast New Vision', Verdana, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  letter-spacing: 0em !important;
  line-height: 1.2 !important;
}

@media screen and (min-width: 1280px) {
  .heading-sm {
    font-size: 1.25rem !important;
    line-height: 1.32 !important;
  }
}

.heading-sm.font-serif {
  font-family: Tobias, Georgia, serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  letter-spacing: 0em !important;
  line-height: 1.4 !important;
}

@media screen and (min-width: 1280px) {
  .heading-sm.font-serif {
    font-size: 1.125rem !important;
  }
}

/* Heading x-sm */
.heading-x-sm {
  font-family: 'Comcast New Vision', Verdana, sans-serif !important;
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  letter-spacing: 0em !important;
  line-height: 1.2 !important;
}

@media screen and (min-width: 1280px) {
  .heading-x-sm {
    line-height: 1.48 !important;
  }
}

.heading-x-sm.font-serif {
  font-family: Tobias, Georgia, serif !important;
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  letter-spacing: 0em !important;
  line-height: 1.4 !important;
}

@media screen and (min-width: 1280px) {
  .heading-x-sm.font-serif {
    font-size: 1.125rem !important;
  }
}

/* ===== TYPOGRAPHY - NUMERAL STYLES ===== */

.numeral-1 {
  font-family: 'Comcast New Vision', Verdana, sans-serif !important;
  font-size: 2.5rem !important;
  font-weight: 300 !important;
  letter-spacing: -0.06em !important;
  line-height: 0.96 !important;
}

@media screen and (min-width: 768px) {
  .numeral-1 {
    font-size: 3.5rem !important;
  }
}

@media screen and (min-width: 1280px) {
  .numeral-1 {
    font-size: 5rem !important;
  }
}

.numeral-1.font-serif {
  font-family: Tobias, Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.3 !important;
}

.numeral-2 {
  font-family: 'Comcast New Vision', Verdana, sans-serif !important;
  font-size: 3.5rem !important;
  font-weight: 300 !important;
  line-height: 0.96 !important;
  letter-spacing: -0.03em !important;
}

.numeral-2.font-serif {
  font-family: Tobias, Georgia, serif !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
}

.numeral-3 {
  font-family: 'Comcast New Vision', Verdana, sans-serif !important;
  font-size: 2.5rem !important;
  font-weight: 300 !important;
  line-height: 0.96 !important;
  letter-spacing: -0.02em !important;
}

.numeral-3.font-serif {
  font-family: Tobias, Georgia, serif !important;
  font-size: 2.75rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
}

.numeral-4 {
  font-family: 'Comcast New Vision', Verdana, sans-serif !important;
  font-size: 2rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
}

.numeral-4.font-serif {
  font-family: Tobias, Georgia, serif !important;
}

.numeral-5 {
  font-family: 'Comcast New Vision', Verdana, sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
}

.numeral-5.font-serif {
  font-family: Tobias, Georgia, serif !important;
}

.numeral-6 {
  font-family: 'Comcast New Vision', Verdana, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
}

.numeral-6.font-serif {
  font-family: Tobias, Georgia, serif !important;
}

/* ===== TYPOGRAPHY - BODY TEXT ===== */

.body-lg {
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  line-height: 1.44 !important;
}

.body-lg.font-bold {
  font-weight: 700 !important;
}

.body-md {
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.48 !important;
}

.body-md.font-bold {
  font-weight: 700 !important;
}

.body-sm {
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

.body-sm.font-bold {
  font-weight: 700 !important;
}

.body-editorial {
  font-size: 1.125rem !important;
  font-weight: 400 !important;
  line-height: 1.48 !important;
}

/* ===== TYPOGRAPHY - UTILITY TEXT ===== */

.body-utility {
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.32 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

.utility-metadata {
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

.utility-default-1 {
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-transform: capitalize !important;
}

.\!utility-default-2,
.utility-default-2 {
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  text-transform: capitalize !important;
}

.utility-default-3 {
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  text-transform: capitalize !important;
}

.utility-default-3.font-bold {
  font-weight: 700 !important;
}

.utility-cta-lg {
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  text-transform: capitalize !important;
}

.utility-cta-lg:hover {
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  text-decoration-line: underline !important;
  text-transform: capitalize !important;
}

.utility-cta-md {
  font-size: 1rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  text-transform: capitalize !important;
}

/* ===== TYPOGRAPHY - OVERVIEW TEXT ===== */

.overview-text {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

.overview-text.font-serif {
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  line-height: 1.32 !important;
}

@media screen and (min-width: 1280px) {
  .overview-text.font-serif {
    font-size: 1.5rem !important;
  }
}

/* ===== TYPOGRAPHY - RICH TEXT BLOCK OVERRIDES ===== */

/* Rich text block headings */
.rich-text-block h1 {
  font-family: 'Comcast New Vision', Verdana, sans-serif !important;
  font-size: 2rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.08 !important;
}

@media screen and (min-width: 768px) {
  .rich-text-block h1 {
    font-size: 2.25rem !important;
    letter-spacing: -0.02em !important;
  }
}

@media screen and (min-width: 1280px) {
  .rich-text-block h1 {
    font-size: 3.5rem !important;
    letter-spacing: -0.02em !important;
  }
}

.rich-text-block h1.font-serif {
  font-family: Tobias, Georgia, serif !important;
  font-size: 2.125rem !important;
  font-weight: 400 !important;
  letter-spacing: 0em !important;
  line-height: 1.3 !important;
}

@media screen and (min-width: 768px) {
  .rich-text-block h1.font-serif {
    font-size: 2.5rem !important;
  }
}

@media screen and (min-width: 1280px) {
  .rich-text-block h1.font-serif {
    font-size: 4rem !important;
    letter-spacing: -0.02em !important;
  }
}

.rich-text-block h2 {
  font-family: 'Comcast New Vision', Verdana, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  letter-spacing: 0em !important;
  line-height: 1.12 !important;
}

@media screen and (min-width: 1280px) {
  .rich-text-block h2 {
    font-size: 2.5rem !important;
    letter-spacing: -0.02em !important;
    line-height: 1.08 !important;
  }
}

.rich-text-block h2.font-serif {
  font-family: Tobias, Georgia, serif !important;
  font-size: 1.5rem !important;
  font-weight: 400 !important;
  letter-spacing: 0em !important;
  line-height: 1.32 !important;
}

@media screen and (min-width: 1280px) {
  .rich-text-block h2.font-serif {
    font-size: 2.5rem !important;
    line-height: 1.28 !important;
  }
}

.rich-text-block h3 {
  font-family: 'Comcast New Vision', Verdana, sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  letter-spacing: 0em !important;
  line-height: 1.2 !important;
}

@media screen and (min-width: 1280px) {
  .rich-text-block h3 {
    font-size: 1.75rem !important;
  }
}

.rich-text-block h3.font-serif {
  font-family: Tobias, Georgia, serif !important;
  font-size: 1.375rem !important;
  font-weight: 400 !important;
  letter-spacing: 0em !important;
  line-height: 1.4 !important;
}

@media screen and (min-width: 1280px) {
  .rich-text-block h3.font-serif {
    font-size: 2rem !important;
  }
}

.rich-text-block h4 {
  font-family: 'Comcast New Vision', Verdana, sans-serif !important;
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  letter-spacing: 0em !important;
  line-height: 1.2 !important;
}

@media screen and (min-width: 1280px) {
  .rich-text-block h4 {
    font-size: 1.5rem !important;
    line-height: 1.16 !important;
  }
}

.rich-text-block h4.font-serif {
  font-family: Tobias, Georgia, serif !important;
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  letter-spacing: 0em !important;
  line-height: 1.3 !important;
}

@media screen and (min-width: 1280px) {
  .rich-text-block h4.font-serif {
    font-size: 1.75rem !important;
  }
}

.rich-text-block h5,
.rich-text-block h6 {
  font-family: 'Comcast New Vision', Verdana, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  letter-spacing: 0em !important;
  line-height: 1.2 !important;
}

@media screen and (min-width: 1280px) {
  .rich-text-block h5,
  .rich-text-block h6 {
    font-size: 1.25rem !important;
    line-height: 1.32 !important;
  }
}

.rich-text-block h5.font-serif,
.rich-text-block h6.font-serif {
  font-family: Tobias, Georgia, serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  letter-spacing: 0em !important;
  line-height: 1.4 !important;
}

@media screen and (min-width: 1280px) {
  .rich-text-block h5.font-serif,
  .rich-text-block h6.font-serif {
    font-size: 1.375rem !important;
  }
}

/* Rich text block paragraphs and lists */
.rich-text-block p:not(.overview-text),
.rich-text-block li {
  font-size: 1.125rem !important;
  font-weight: 400 !important;
  line-height: 1.48 !important;
}

/* Rich text block blockquotes */
.rich-text-block blockquote {
  font-family: Tobias, Georgia, 'Times New Roman', Times, serif !important;
  border-left-width: 2px !important;
  border-style: solid !important;
  border-color: rgb(200 200 200) !important;
  padding-left: 1rem !important;
}

/* ===== GLOBAL FONT FALLBACKS ===== */

/* Ensure font families are properly defined globally */
body,
.editorial-row,
.editorial-data-row,
.editorial-center-col,
.editorial-side-rail {
  font-family: 'Comcast New Vision', Verdana, ui-sans-serif, system-ui, sans-serif !important;
}

/* Reset any conflicting line-height on containers */
.editorial-row *,
.editorial-data-row *,
.editorial-center-col *,
.editorial-side-rail * {
  line-height: inherit;
}

/* ===== SPACING OVERRIDES FOR EDITORIAL CONTENT ===== */

/* Ensure proper spacing between editorial content blocks */

.editorial-center-col > *:last-child {
  margin-bottom: 0 !important;
}

@media screen and (min-width: 1280px) { 
  .editorial-center-col > *:last-child {
    margin-bottom: 0 !important;
  }
}

/* Ensure React components respect typography */
.editorial-center-col [data-react-component],
.editorial-side-rail [data-react-component] {
  font-family: inherit !important;
}

/* ===== STORY SIDE RECIRC ===== */

/* Hide both the category link and date in StorySideRecirculation */
[data-react-component="StorySideRecirculation"] .flex.flex-row.items-center.gap-3 {
    display: none !important;
}

/* Increase the padding-top on the second story item (and any subsequent items) */
[data-react-component="StorySideRecirculation"] .divide-y > div:not(:first-child) {
    padding-top: 1.5rem !important; /* Increase from 0.5rem (pt-2) to 1.5rem */
}

/* Change the container div from square to 16:9 */
[data-react-component="StorySideRecirculation"] .aspect-square {
    aspect-ratio: 16/9 !important;
    width: auto !important;
    height: auto !important;
}

/* Adjust the image sizing to fill the 16:9 container */
[data-react-component="StorySideRecirculation"] img.aspect-auto {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16/9 !important;
}

/* Make the container wider to accommodate 16:9 ratio */
[data-react-component="StorySideRecirculation"] .w-16 {
    width: 10rem !important; /* Increase width from 4rem (64px) to 6rem (96px) */
}

/* Target the Related Stories heading specifically */
[data-react-component="StorySideRecirculation"] > div > h3:first-child {
    font-size: 1.15rem !important;
    font-weight: 500 !important;
}