/* ══════════════════════════════════════════
   homepage-fixes.css — COMPLETE FORCED FIXES
   EVERY rule uses !important
   Fixes: fonts, ticker, layout blocks, sizing
   ══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   FONT WEIGHT CORRECTIONS
   Reference: Logo=700, Headlines=600, Body=400/300
   The fonts are loading too heavy — force correct weights
   ══════════════════════════════════════════ */

/* Logo — Cormorant Garamond 700 but NOT bolder */
.logo {
  font-weight: 700 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Headlines — Cormorant Garamond 600, elegant not blocky */
h1, .at, .hero-lead h1, .si h3, .ac h3, .ali-c h3,
.product-header__title, .archive-item__title,
.sh h2, .rl h4, .ii h4 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 600 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Body text — Libre Franklin 400, light */
body, p, .exc, .aex, .archive-item__excerpt,
.archive-item__date, .meta, .am {
  font-family: 'Libre Franklin', -apple-system, sans-serif !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Nav links — Libre Franklin 600 */
.na, .nav-a, .nav-list .menu-item a {
  font-family: 'Libre Franklin', -apple-system, sans-serif !important;
  font-weight: 600 !important;
}

/* Mono — JetBrains Mono 400 */
.tc .ch, .mc .ch, .mc .val, .tv, .tl,
.mkt-cell .val, .mono, .pricing-amount {
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 400 !important;
}

/* Section labels — Libre Franklin 700, small caps */
.cat, .post-meta__cat, .ac-badge, .sc-tag,
.product-header__tag, .sw h3 {
  font-family: 'Libre Franklin', -apple-system, sans-serif !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════
   TICKER: force horizontal single line
   ══════════════════════════════════════════ */
.ticker, .ticker-bar {
  white-space: nowrap !important;
  overflow: hidden !important;
  
  display: flex !important;
  align-items: center !important;
  position: relative !important;
}

.tw, .ticker-wrap {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  animation: t 240s linear infinite !important;
}

.ti, .ticker-item {
  display: inline-flex !important;
  flex-shrink: 0 !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 20px !important;
}

.td, .ticker-div {
  display: inline-block !important;
  flex-shrink: 0 !important;
  width: 1px !important;
  height: 14px !important;
}

/* ══════════════════════════════════════════
   HIDE MOBILE NAV ON DESKTOP
   ══════════════════════════════════════════ */
@media (min-width: 768px) {
  .mobile-bottom-nav,
  nav[aria-label="Mobile navigation"] {
    display: none !important;
  }
}

/* ══════════════════════════════════════════
   HOMEPAGE LAYOUT — DESKTOP
   All blocks use 1fr 280px grid
   ══════════════════════════════════════════ */

/* Latest News + Special Coverage */
.main > .tc {
  display: grid !important;
  grid-template-columns: 1fr 280px !important;
  gap: 40px !important;
  align-items: start !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

.main > .tc > aside {
  position: static !important;
  align-self: start !important;
  top: auto !important;
}

/* Latest News 3x3 grid */
.main .ag {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
}

/* ── TWIN BLOCKS: Subscribe + Intelligence ──
   MUST be 1fr 280px like everything else.
   Subscribe = LEFT (content column)
   Intelligence = RIGHT (sidebar column)
   Compact — NOT oversized ── */
.main > .twin-blocks {
  display: grid !important;
  grid-template-columns: 1fr 280px !important;
  gap: 40px !important;
  margin: 0 !important;
  padding: 32px 0 !important;
  border-top: 1px solid var(--g200) !important;
  border-bottom: none !important;
}

/* Compact subscribe block */
.twin-blocks .sw {
  margin-bottom: 0 !important;
}

.twin-blocks .sub-w {
  padding: 22px !important;
}

.twin-blocks .sub-w h3 {
  margin-bottom: 10px !important;
  padding-bottom: 8px !important;
  font-size: 10.5px !important;
}

.twin-blocks .sub-w p {
  font-size: 13px !important;
  margin-bottom: 8px !important;
  line-height: 1.5 !important;
}

.twin-blocks .sub-w .pr {
  font-size: 26px !important;
  margin-bottom: 2px !important;
}

.twin-blocks .sub-w .pr span {
  font-size: 14px !important;
}

.twin-blocks .sub-w .prn {
  font-size: 10px !important;
  margin-bottom: 10px !important;
}

.twin-blocks .sub-w button {
  padding: 9px !important;
  font-size: 11px !important;
}

/* Compact intelligence block */
.twin-blocks > .sw:not(.sub-w) {
  padding: 22px !important;
}

.twin-blocks > .sw:not(.sub-w) h3 {
  margin-bottom: 10px !important;
  padding-bottom: 8px !important;
  font-size: 10.5px !important;
}

.twin-blocks .ii {
  padding: 7px 0 !important;
  border-bottom: 1px solid var(--g200) !important;
}

.twin-blocks .ii:last-child {
  border-bottom: none !important;
}

.twin-blocks .ii h4 {
  font-size: 13px !important;
  margin-top: 3px !important;
}

/* ── MOST READ + ASK RIO TIMES ──
   Same 1fr 280px grid.
   Ask RT fills from 01 to 06 ── */
.main > .tc:last-of-type {
  padding-top: 32px !important;
  border-top: 1px solid var(--g200) !important;
  margin-bottom: 48px !important;
}

/* Ask RT card stretches full height of Most Read */
.main > .tc:last-of-type > aside {
  display: flex !important;
  align-items: stretch !important;
}

.ask-rt-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 24px 20px !important;
}

.ask-rt-card-icon {
  width: 40px !important;
  height: 40px !important;
  font-size: 15px !important;
  margin-bottom: 12px !important;
}

.ask-rt-card-title {
  font-size: 20px !important;
  margin-bottom: 6px !important;
}

.ask-rt-card-text {
  font-size: 12px !important;
  margin-bottom: 12px !important;
  line-height: 1.5 !important;
}

.ask-rt-card-cta {
  font-size: 11px !important;
  padding: 7px 16px !important;
}

/* ══════════════════════════════════════════
   MOBILE OVERRIDES
   ══════════════════════════════════════════ */
@media (max-width: 767px) {
  .main > .tc {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 0 16px !important;
  }

  .main > .twin-blocks {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 20px 16px !important;
  }

  .twin-blocks .sub-w {
    padding: 20px !important;
  }

  .twin-blocks .sub-w .pr {
    font-size: 24px !important;
  }

  .ask-rt-card {
    height: auto !important;
    padding: 20px !important;
  }

  .main .ag {
    grid-template-columns: 1fr !important;
  }
}

/* ── Hero: left column image grows to fill, matching sidebar height (claude 2026-05-23) ──
   The .hero grid stretches both columns to equal height. The left column
   (image + headline + excerpt) was shorter than its cell, leaving an empty
   gap below the meta line. Letting the image link flex-grow makes the photo
   absorb the leftover space so the left column reaches the same depth as the
   7-item sidebar. Desktop only; mobile uses the separate .mob-hero. */
@media (min-width: 1001px) {
  .hero-lead { height: 100%; }
  .hero-lead .hero-img-link {
    flex: 1 1 auto;
    min-height: 0;
    display: block;
  }
  .hero-lead .hero-img {
    height: 100%;
    margin: 0;
    overflow: hidden;
  }
  .hero-lead .hero-img img.hero-thumb {
    height: 100% !important;
    width: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center 32%;
  }
}

/* The hero image is wrapped in a <picture> element by the image optimizer.
   <picture> must also stretch to 100%, otherwise the inner <img> height:100%
   resolves against an auto-height parent and falls back to natural size. */
@media (min-width: 1001px) {
  .hero-lead .hero-img picture {
    display: block;
    width: 100%;
    height: 100% !important;
  }
}