/* ===========================================================
   Trending Now — /trending-now/
   Dark variant of the site theme. Everything below is scoped
   under body.trending-page so it never touches the rest of
   the site (which reuses .wrap, .card, .eyebrow etc. with
   different, light-theme meanings).
   Fonts reuse the site's own --font-display / --font-body /
   --font-mono and --radius. Only new tokens are the dark
   surfaces plus two brightened accents for legibility on a
   dark background.
=========================================================== */

body.trending-page {
  --tn-bg:         #16232E; /* = site --ink, reused as page background */
  --tn-surface:    #1D2C3A;
  --tn-surface-hi: #24384A;
  --tn-hairline:   #33495C;
  --tn-text-soft:  #C9D3D6;
  --tn-muted:      #8CA0AC;
  --tn-mint:       #2FD9AE; /* brightened var(--green), up-trend */
  --tn-coral:      #E28259; /* brightened var(--rust), down-trend */

  /* Light "news card" tokens -- the individual feed cards are
     intentionally light-on-dark (see the Feed section below): the
     page shell stays the dark theme above, but each card itself
     reads like a standalone article card sitting on that canvas. */
  --tn-card-bg:     #FFFFFF;
  --tn-card-border: #E7EAEE;
  --tn-card-hi:     #F4F6F8;
  --tn-card-heading:#16202B;
  --tn-card-muted:  #6B7785;
  --tn-card-link:   #2A6DF4;
  --tn-card-share:  #12B3A0;

  margin: 0;
  background: var(--tn-bg);
  color: var(--paper);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

.trending-page .wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px 80px;
}

/* ---------- Page layout with sticky side-rail ads ----------
   Left/right ad rails only appear on wide viewports where there's
   real space for them without squeezing the card grid below a
   comfortable width; below that they simply don't render (see
   trending-now.php -- the PHP only outputs the rail markup, CSS below
   handles showing/hiding it responsively). Sticky so the ad stays in
   view as someone scrolls a long feed, which is what makes a rail
   placement worth the inventory. */
.trending-page .page-layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  max-width: 1300px;
  margin: 0 auto;
}
.trending-page .rail {
  display: none;
  width: 160px;
  flex: 0 0 160px;
  position: sticky;
  top: 84px;
}
.trending-page .rail .ad-slot {
  margin: 0;
}
@media (min-width: 1280px) {
  .trending-page .rail { display: block; }
}

/* ---------- Ticker tape (signature element) ---------- */
.trending-page .ticker-outer {
  background: var(--tn-surface);
  border-bottom: 1px solid var(--tn-hairline);
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 10;
}
.trending-page .ticker-track {
  display: flex;
  width: max-content;
  animation: tn-scroll-left 38s linear infinite;
  padding: 10px 0;
}
.trending-page .ticker-outer:hover .ticker-track { animation-play-state: paused; }
@keyframes tn-scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.trending-page .tick {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 0 22px;
  border-right: 1px solid var(--tn-hairline);
  font-family: var(--font-mono);
  white-space: nowrap;
  font-size: 13px;
  letter-spacing: 0.01em;
}
.trending-page .tick b { font-weight: 600; color: var(--paper); }
.trending-page .tick .arrow-up    { color: var(--tn-mint); }
.trending-page .tick .arrow-down  { color: var(--tn-coral); }
.trending-page .tick .arrow-flat  { color: var(--tn-muted); }

/* ---------- Header / footer ----------
   The real site header and footer are now embedded on this page.
   header.site-nav is self-contained (own light background) and
   needs no changes. The footer needs two small overrides: restore
   full site width (this page's own .wrap is narrower, for the
   feed column only) and a light background, since it has none of
   its own and would otherwise inherit this page's dark body. */
.trending-page footer.site-footer {
  background: var(--paper);
  color: var(--ink-soft);
  margin-top: 48px;
}
.trending-page footer.site-footer .wrap {
  max-width: var(--max);
  padding: 0 28px;
}

/* ---------- Header ---------- */
.trending-page header.page-head {
  padding: 40px 0 24px;
}
.trending-page .eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  color: var(--gold);
  margin: 0 0 10px;
}
.trending-page h1 {
  font-family: var(--font-display);
  color: var(--paper);
  font-weight: 600;
  font-size: 40px;
  line-height: 1.1;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.trending-page .subhead {
  color: var(--tn-text-soft);
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 20px;
  max-width: 54ch;
}
.trending-page .last-updated {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--tn-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.trending-page .pulse-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tn-mint);
  box-shadow: 0 0 0 0 rgba(47, 217, 174, 0.6);
  animation: tn-pulse 2s ease-out infinite;
}
@keyframes tn-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(47, 217, 174, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(47, 217, 174, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 217, 174, 0); }
}

/* ---------- Ad slot (dark variant; base .ad-slot rules above still apply) ---------- */
.trending-page .ad-slot {
  padding: 14px;
  border: 1px solid var(--tn-hairline);
  border-radius: var(--radius);
  background: var(--tn-surface);
}
.trending-page .ad-slot .ad-label {
  color: var(--tn-muted);
  opacity: 1;
}
.trending-page .ad-slot-infeed {
  margin: 28px 0;
}

/* ---------- Explore-more internal links ---------- */
.trending-page .explore-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 0;
}
.trending-page .explore-links a {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--tn-hairline);
  background: var(--tn-surface);
  color: var(--tn-text-soft);
  text-decoration: none;
  transition: border-color .15s, color .15s;
  white-space: nowrap;
}
.trending-page .explore-links a:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* ---------- Breadcrumb ---------- */
/* Visible counterpart to the BreadcrumbList JSON-LD in <head> — same
   path, so crawlers and users see one consistent hierarchy. */
.trending-page .breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--tn-muted);
}
.trending-page .breadcrumb a {
  color: var(--tn-muted);
  text-decoration: none;
}
.trending-page .breadcrumb a:hover { color: var(--gold); }
.trending-page .breadcrumb [aria-current="page"] { color: var(--tn-text-soft); }
.trending-page .breadcrumb .sep { opacity: 0.5; }

/* ---------- Filter chips ---------- */
.trending-page .filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 8px;
}
.trending-page .chip {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--tn-hairline);
  background: transparent;
  color: var(--tn-muted);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.trending-page .chip:hover { border-color: var(--gold); color: var(--paper); }
.trending-page .chip.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--tn-bg);
  font-weight: 600;
}

/* ---------- Feed ---------- */
.trending-page .feed {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  align-items: start;
}
.trending-page .feed .ad-slot-infeed {
  grid-column: 1 / -1;
}
.trending-page .card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tn-card-border);
  border-radius: 14px;
  background: var(--tn-card-bg);
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  outline: none;
}
.trending-page .card:hover,
.trending-page .card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
}
.trending-page .card:focus-visible { box-shadow: 0 0 0 2px var(--gold), 0 16px 32px rgba(0, 0, 0, 0.35); }

/* Thin top accent stripe stands in for the illustration panel that used
   to sit here -- keeps at-a-glance category color-coding without an
   image slot to fill. */
.trending-page .card { border-top: 3px solid transparent; }
.trending-page .card.accent-gold  { border-top-color: #C99A2E; }
.trending-page .card.accent-mint  { border-top-color: #1FA98A; }
.trending-page .card.accent-coral { border-top-color: #C96A46; }
.trending-page .card.accent-teal  { border-top-color: #1B7A88; }

.trending-page .card-body {
  position: relative;
  padding: 18px 44px 14px 20px; /* extra right padding clears the share button in the corner */
  display: flex;
  flex-direction: column;
  flex: 1;
}

.trending-page .card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-family: var(--font-mono);
}
.trending-page .badge {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--tn-card-hi);
  color: #9A7412;
  border: 1px solid var(--tn-card-border);
}
.trending-page .badge.fresh {
  background: rgba(18, 179, 129, 0.1);
  color: #0E9C6F;
  border-color: rgba(18, 179, 129, 0.25);
}
.trending-page .time {
  font-size: 12px;
  color: var(--tn-card-muted);
}
.trending-page .stat-inline {
  font-size: 12px;
  font-weight: 600;
}
.trending-page .stat-inline.up   { color: #0E9C6F; }
.trending-page .stat-inline.down { color: #C94F3B; }
.trending-page .stat-inline.flat { color: var(--tn-card-muted); }

.trending-page h2.headline {
  font-family: var(--font-display);
  color: var(--tn-card-heading);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.32;
  margin: 0 0 10px;
  letter-spacing: -0.005em;
  scroll-margin-top: 90px; /* keeps the ticker from covering an anchor-jumped card */
}
/* Permalink id lives on the <article> itself (for #slug deep links and
   the share button below); no separate inline "#" affordance needed
   now that the share icon in the corner does that job persistently. */
/* Landing state when someone arrives via a shared #anchor link */
.trending-page .card.card-target {
  box-shadow: 0 0 0 2px var(--gold), 0 16px 32px rgba(0, 0, 0, 0.35);
}
.trending-page p.insight {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: #4A5560;
  margin: 0 0 16px;
}
.trending-page p.insight a {
  position: relative;
  z-index: 1;
  color: var(--tn-card-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.trending-page p.insight a:hover {
  color: var(--tn-card-heading);
}

/* Byline + date/source row, and the Read More link -- mirrors a
   standard news-card footer: who/when on the left, the link on the
   right, wrapping onto its own line on narrow cards. */
.trending-page .card-foot {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 14px;
  padding-top: 2px;
}
.trending-page .byline {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tn-card-link);
}
.trending-page .card-foot-meta {
  flex: 1 0 100%;
  font-size: 11.5px;
  color: var(--tn-card-muted);
  order: 2;
}
.trending-page .card-cta {
  order: 1;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--tn-card-link);
  text-decoration: none;
}
.trending-page .card:hover .card-cta,
.trending-page .card:focus-visible .card-cta {
  text-decoration: underline;
}
.trending-page .card-cta-arrow { display: none; } /* replaced by a text-underline hover, matching the reference card */

/* Share icon — same copy-link action as the "#" permalink, presented
   as the share icon in the corner instead. Always visible (unlike the
   hover-only "#"), matching the reference card's persistent share
   affordance. */
.trending-page .card-share {
  position: absolute;
  bottom: 6px;
  right: 8px;
  z-index: 1;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--tn-card-share);
  border-radius: 50%;
  transition: background .15s ease;
}
.trending-page .card-share:hover,
.trending-page .card-share:focus-visible {
  background: rgba(18, 179, 160, 0.1);
}
.trending-page .card-share svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trending-page .card-share.copied::after {
  content: "Link copied";
  position: absolute;
  bottom: 36px;
  right: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--tn-card-heading);
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
}

.trending-page .empty-state {
  padding: 60px 0;
  text-align: center;
  color: var(--tn-muted);
  font-family: var(--font-mono);
  font-size: 14px;
}

.trending-page footer.page-foot {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--tn-hairline);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--tn-muted);
  line-height: 1.6;
}

/* ---------- Promo pop-up (trading account partner offer) ---------- */
.trending-page .promo-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 16, 22, 0.72);
  backdrop-filter: blur(2px);
  animation: tn-fade-in .2s ease;
}
.trending-page .promo-overlay[hidden] { display: none; }
@keyframes tn-fade-in { from { opacity: 0; } to { opacity: 1; } }
.trending-page .promo-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: var(--tn-surface);
  border: 1px solid var(--tn-hairline);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  animation: tn-pop-in .25s ease;
}
@keyframes tn-pop-in {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.trending-page .promo-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  color: var(--tn-text-soft);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.trending-page .promo-close:hover,
.trending-page .promo-close:focus-visible { background: rgba(0, 0, 0, 0.55); color: var(--paper); }
.trending-page .promo-link {
  display: block;
  padding: 26px 24px 22px;
  text-decoration: none;
  color: inherit;
}
.trending-page .promo-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 14px;
}
.trending-page .promo-title {
  font-family: var(--font-display);
  color: var(--paper);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 6px;
}
.trending-page .promo-sub {
  font-size: 13px;
  color: var(--tn-muted);
  margin: 0 0 16px;
}
.trending-page .promo-benefits {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.trending-page .promo-benefits li {
  font-size: 14px;
  color: var(--tn-text-soft);
  line-height: 1.4;
}
.trending-page .promo-cta {
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--tn-bg);
  background: var(--gold);
  border-radius: 999px;
  padding: 13px 20px;
  transition: filter .15s ease, transform .15s ease;
  animation: tn-cta-pulse 2.2s ease-in-out infinite;
}
@keyframes tn-cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.55); transform: scale(1); }
  50%      { box-shadow: 0 0 0 10px rgba(212, 175, 55, 0); transform: scale(1.03); }
}
.trending-page .promo-link:hover .promo-cta,
.trending-page .promo-link:focus-visible .promo-cta {
  filter: brightness(1.08);
  transform: translateY(-1px);
  animation-play-state: paused;
}
.trending-page .promo-disclaimer {
  display: block;
  margin-top: 14px;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--tn-muted);
  text-align: center;
}

@media (max-width: 520px) {
  .trending-page h1 { font-size: 28px; }
  .trending-page .wrap { padding: 0 16px 60px; }
  .trending-page .feed {
    grid-template-columns: 1fr; /* one card per row -- explicit rather than
      relying only on auto-fill, so very narrow phones (<320px) can't end
      up with a squeezed column before the minmax() floor kicks in */
    gap: 14px;
  }
  .trending-page .card-body { padding: 16px 40px 12px 16px; }
  .trending-page h2.headline { font-size: 17px; }
  .trending-page p.insight { font-size: 14px; }
  .trending-page .promo-card { max-width: 340px; }
  .trending-page .promo-link { padding: 24px 20px 20px; }
}

/* Comfortable two-up range before the grid naturally reaches three
   columns on wider desktops (minmax(240px,1fr) inside a 900px .wrap
   settles around 3 columns past ~980px on its own; this just keeps
   tablets from squeezing a cramped third column into ~700-900px). */
@media (min-width: 700px) and (max-width: 980px) {
  .trending-page .feed { grid-template-columns: repeat(2, 1fr); }
}