/* =========================================================
   FortuneSpace — fs_overrides.css (PRODUCTION)
   News: Restored "Free Featured Image + Train Rail" on MOBILE
   Desktop: 3-card filmstrip window
   ========================================================= */

/* ===================== FONTS / TYPOGRAPHY ===================== */
:root{
  --fs-headline-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-body-font: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.fs-news-scope{font-family: var(--fs-body-font);}
.fs-news-scope h1,
.fs-news-scope h2,
.fs-news-scope h3{font-family: var(--fs-headline-font);}

/* A1 Compact: reduce wasted space in the hero */
.fs-news-hero--compact{padding-top: 8px !important; padding-bottom: 6px !important;}
.fs-news-hero--compact h1,
.fs-news-hero--compact .fs-news-title{margin: 10px 0 8px !important; line-height: 1.02 !important; letter-spacing: -0.01em;}
.fs-news-hero--compact .fs-news-subtitle{margin: 0 !important; max-width: 42rem; line-height: 1.5;}

@media(min-width:768px){
  .fs-news-hero--compact{padding-top: 14px !important; padding-bottom: 10px !important;}
  .fs-news-hero--compact h1,
  .fs-news-hero--compact .fs-news-title{margin: 12px 0 10px !important;}
}

/* ===================== READS PILL ===================== */
.fs-news-reads-pill{
  position:absolute; top:14px; right:14px; z-index:5;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:999px;
  background: rgba(2,6,23,0.55);
  border:1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
  font-size:12px; font-weight:800;
  backdrop-filter: blur(8px);
}
.fs-news-reads-pill svg{width:16px; height:16px; opacity:0.9;}
.fs-news-reads-pill .num{font-variant-numeric: tabular-nums;}

/* modifier: left placement (your “perfect” mobile screenshots) */
.fs-news-reads-pill--left{ left:14px !important; right:auto !important; }

/* ===================== STATS RIBBON ===================== */
.fs-stats-ribbon{
  width:100%;
  margin-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.10);
  border-bottom:1px solid rgba(255,255,255,0.10);
  background: rgba(15,23,42,0.18);
}
.fs-stats-ribbon .fs-stats-inner{
  max-width: 72rem;
  margin: 0 auto;
  padding: 10px 16px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.fs-stats-left{
  display:flex; align-items:center; gap:10px;
  color: rgba(255,255,255,0.60);
  font-size:12px;
}
.fs-dot{width:8px;height:8px;border-radius:999px;background:#34d399;}
.fs-stats-mid{
  display:flex; align-items: baseline; gap: 18px;
  font-size:14px;
}
.fs-stats-mid strong{
  color:#fff;
  font-weight:900;
  font-size:18px;
  font-variant-numeric: tabular-nums;
}
.fs-stats-mid .label{color: rgba(255,255,255,0.45);}
.fs-sep{width:1px;height:16px;background: rgba(255,255,255,0.10); align-self:center;}
.fs-stats-right{
  display:none;
  color: rgba(255,255,255,0.35);
  font-size:12px;
  align-items:center;
  gap:8px;
}
@media(min-width:640px){
  .fs-stats-ribbon .fs-stats-inner{flex-direction: row; align-items:center; justify-content: space-between;}
  .fs-stats-right{display:flex;}
}

/* ===================== MOBILE STABILITY (PAGE) ===================== */
html, body{ max-width:100%; overflow-x:hidden; }

@media (max-width: 768px){
  .main-content,
  .main-content > .container,
  #feed-page,
  .feed-container,
  .feed-container .grid,
  .news-section,
  .fs-news-inner,
  .fs-news-rail{
    width:100% !important;
    max-width:100% !important;
  }

  .feed-container{
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .feed-container .grid{
    column-count:1 !important;
    column-gap:12px !important;
  }

  .feed-container .grid > .card.post-card{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .fs-appbar__inner{
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    gap:8px !important;
  }
  .fs-appbar__inner::-webkit-scrollbar{ display:none; }

  .fs-brand img{ width:48px !important; height:48px !important; }
  .fs-brand__name{ font-size:clamp(16px, 5vw, 20px) !important; }

  .app-actions{
    gap:8px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    max-width:100%;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    flex-shrink:0;
    display:flex;
    flex-wrap:nowrap;
  }
  .app-actions::-webkit-scrollbar{ display:none; }

  body.is-guest .app-actions{
    max-width:clamp(170px, 52vw, 236px) !important;
  }
  .app-actions .btn{
    padding:8px 10px !important;
    font-size:14px !important;
    white-space:nowrap;
  }

  .floating-refresh-container,
  #fs-search-fab,
  .fs-map-fab,
  .fs-nudge{
    right:max(10px, env(safe-area-inset-right)) !important;
  }
}

/* =========================================================
   NEWS — SINGLE PRODUCTION LAYOUT (RESTORED OLD LOOK)
   MOBILE: free featured image + train rail + outside updated
   DESKTOP: 3-card rail window + thumbnail-left rail cards
   ========================================================= */

/* Hydration: reserve space + hide moving parts until ready */
.news-section.fs-news--featured-rail[data-news-carousel]:not(.is-ready) .fs-news-side-track,
.news-section.fs-news--featured-rail[data-news-carousel]:not(.is-ready) [data-news-next],
.news-section.fs-news--featured-rail[data-news-carousel]:not(.is-ready) [data-news-prev]{
  visibility: hidden;
}
.news-section.fs-news--featured-rail[data-news-carousel].is-ready .fs-news-side-track,
.news-section.fs-news--featured-rail[data-news-carousel].is-ready [data-news-next],
.news-section.fs-news--featured-rail[data-news-carousel].is-ready [data-news-prev]{
  visibility: visible;
}

/* Shared media foundation (prevents “small image floating in dark box”) */
body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card__media{
  position: relative;
  overflow: hidden;
}
body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card__media img{
  width: 100%;
  height: 100%;
  display: block;
  object-position: center center;
}

/* News pill (top-right on image) */
body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card__pill{
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  z-index: 6 !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  background: rgba(2,6,23,0.55) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.92) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
}

/* Never show any "Updated …" helper on the featured (big) card.
   When a rail card is promoted to featured by JS, it can carry
   .news-card__updated-outside markup with it, so hide all featured variants. */
body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card--featured .news-card__updated,
body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card--featured .news-card__updated-outside,
body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card--featured .news-card__updated-outside--featured{
  display: none !important;
}
 
/* ===================== MOBILE (THE “PERFECT” LOOK) ===================== */
@media (max-width: 991.98px){

  /* Mobile “train” controls (tunable knobs) */
  body.fs-has-news-hero .news-section.fs-news--featured-rail{
    --fs-m-featured-max-h: clamp(420px, 72svh, 820px);
    --fs-m-rail-w: 78vw;               /* rail card width (peek next card) */
    --fs-m-rail-lift: 72px;            /* lift rail upward under featured */
    --fs-m-gap: 12px;
  }

  /* Header stays simple and clean (kicker visible like your screenshot) */
  body.fs-has-news-hero .news-section.fs-news--featured-rail [data-news-mobile-header]{
    position: relative !important;
    margin: 0 !important;
    padding: 10px 14px 12px !important;
    background: transparent !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    z-index: 12 !important;
  }

  /* Keep the kicker line (LATEST UPDATES) visible on mobile */
  body.fs-has-news-hero .news-section.fs-news--featured-rail [data-news-mobile-header] .fs-news-kicker{
    display: none !important;
  }

  body.fs-has-news-hero .news-section.fs-news--featured-rail [data-news-mobile-header] .fs-news-line{
    width: 34px;
    height: 3px;
    border-radius: 999px;
    background: rgba(52,211,153,0.75);
    display: inline-block;
  }

  body.fs-has-news-hero .news-section.fs-news--featured-rail [data-news-mobile-header] .fs-news-kicker-text{
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(148,163,184,0.85);
    font-weight: 800;
  }

  body.fs-has-news-hero .news-section.fs-news--featured-rail [data-news-mobile-header] .fs-news-controls{
    display: inline-flex !important;
    margin-left: auto !important;
    gap: 8px !important;
    z-index: 16 !important;
  }

  body.fs-has-news-hero .news-section.fs-news--featured-rail [data-news-mobile-header] .fs-news-controls .news-control{
    width: 40px !important;
    height: 40px !important;
    border-radius: 999px !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  /* FEATURED: image is “FREE” (no enclosing card frame) */
  body.fs-has-news-hero .news-section.fs-news--featured-rail .fs-news-featured .news-card--featured{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }

  /* Featured image box: consistent size, no crop, rounded like screenshot */
  body.fs-has-news-hero .news-section.fs-news--featured-rail .fs-news-featured .news-card--featured .news-card__media{
    width: 100% !important;
    height: auto !important;
    max-height: var(--fs-m-featured-max-h) !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }
  body.fs-has-news-hero .news-section.fs-news--featured-rail .fs-news-featured .news-card--featured .news-card__media img{
    width: 100% !important;
    height: auto !important;
    max-height: var(--fs-m-featured-max-h) !important;
    object-fit: contain !important;
    object-position: center top !important;
  }

  body.fs-has-news-hero .news-section.fs-news--featured-rail .fs-news-featured .news-card--featured .news-card__body,
  body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card__updated-outside--featured{
    display: none !important;
  }

  /* Featured views pill top-left (like your screenshots) */
  body.fs-has-news-hero .news-section.fs-news--featured-rail .fs-news-featured .fs-news-reads-pill{
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
  }

  /* Featured footer: show only Read more inside card, updated goes OUTSIDE (like screenshot) */
  body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card--featured .news-card__updated{
    display: none !important;
  }

  body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card__updated-outside--featured{
    display: none !important;
  }

  /* SIDEHEAD hidden on mobile (your “simple clean” mobile) */
  body.fs-has-news-hero .news-section.fs-news--featured-rail .fs-news-sidehead{
    display: none !important;
  }

  /* Train lift: pull rail upward so featured + rail fit in one screenshot */
  body.fs-has-news-hero .news-section.fs-news--featured-rail .fs-news-side{
    margin-top: calc(-1 * var(--fs-m-rail-lift)) !important;
    padding-top: var(--fs-m-rail-lift) !important;
  }

  /* Rail track: horizontal train */
  body.fs-has-news-hero .news-section.fs-news--featured-rail .fs-news-side-track{
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: var(--fs-m-rail-w) !important;
    gap: var(--fs-m-gap) !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding: 0 14px 18px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.fs-has-news-hero .news-section.fs-news--featured-rail .fs-news-side-track::-webkit-scrollbar{ display:none; }

  body.fs-has-news-hero .news-section.fs-news--featured-rail .fs-news-side-track > article.news-card{
    scroll-snap-align: start;
  }
  /* Mobile: keep the synthetic featured clone visible as the first rail card.
     This makes the latest news item appear first in both featured and slider rail. */

  /* Rail card: photo-first (cover) with overlay copy */
  body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card--rail{
    position: relative !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background: rgba(15,23,42,0.18) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,0.40);
  }

  /* Rail media uses aspect ratio so cards don’t become “too big” */
  body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card--rail .news-card__media{
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    background: rgba(2,6,23,0.35) !important;
  }
  body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card--rail .news-card__media img{
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Rail body becomes bottom overlay */
  body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card--rail .news-card__body{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 34px 14px 12px !important;
    background: linear-gradient(to top,
      rgba(2,6,23,0.96) 0%,
      rgba(2,6,23,0.70) 55%,
      rgba(2,6,23,0.10) 100%
    ) !important;
  }

  body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card--rail .news-card__title{
    color: #f8fafc !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    margin: 0 0 6px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card--rail .news-card__summary{
    color: rgba(226,232,240,0.90) !important;
    font-size: 13px !important;
    line-height: 1.32 !important;
    margin: 0 0 10px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /* Keep rail Read more consistent with featured button style */
  body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card--rail .news-card__readmore{
    position: absolute !important;
    right: 14px !important;
    bottom: 14px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    color: #86efac !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase;
    white-space: nowrap;
  }
  body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card--rail .news-card__readmore:hover{
    text-decoration: none !important;
  }

  /* Meta row visible (clock + views) */
  body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card--rail .news-card__meta-row{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    color: rgba(226,232,240,0.82) !important;
    font-size: 12px !important;
  }

  /* Updated line stays INSIDE every mobile rail card (single consistent position) */
  body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card--rail{
    padding-bottom: 0 !important;
  }
  body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card--rail .news-card__updated-outside{
    position: absolute !important;
    left: 14px !important;
    right: auto !important;
    bottom: 14px !important;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    font-size: 12px !important;
    font-style: italic;
    color: rgba(226,232,240,0.92) !important;
    z-index: 8 !important;
    max-width: calc(100% - 190px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
  }
}

/* Fallback for older browsers that don’t support svh (prevents jump) */
@supports not (height: 1svh){
  @media (max-width: 991.98px){
    body.fs-has-news-hero .news-section.fs-news--featured-rail{
      --fs-m-featured-max-h: clamp(420px, 72vh, 820px);
    }
  }
}

/* ===================== DESKTOP (FILMSTRIP WINDOW) ===================== */
@media (min-width: 992px){

  body.fs-has-news-hero .news-section.fs-news--featured-rail{
    --fs-rail-gap: 14px;
    --fs-rail-card-h: 168px;
    --fs-rail-window-h: calc((var(--fs-rail-card-h) * 3) + (var(--fs-rail-gap) * 2));
  }

  /* Grid: featured + side rail (bigger, premium) */
  body.fs-has-news-hero .news-section.fs-news--featured-rail .fs-news-grid{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(340px, 32vw, 460px) !important;
    gap: 16px !important;
    align-items: stretch !important;
  }

  /* Featured matches rail window height */
  body.fs-has-news-hero .news-section.fs-news--featured-rail .fs-news-featured{
    height: var(--fs-rail-window-h);
  }
  body.fs-has-news-hero .news-section.fs-news--featured-rail .fs-news-featured > .news-card{
    height: 100%;
  }

  /* Featured card styling */
  body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card--featured{
    border-radius: 26px !important;
    overflow: hidden !important;
    background: rgba(15,23,42,0.18) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: 0 26px 70px rgba(0,0,0,0.40);
  }

  body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card--featured .news-card__media{
    height: 58%;
  }
  body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card--featured .news-card__media img{
    height: 100%;
    object-fit: cover;
  }

  /* Show updated inside featured on desktop, hide outside line */
  /* Keep featured card free of updated labels on desktop too */
  body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card__updated-outside--featured{
    display: none !important;
  }

  /* Side rail: exactly 3 visible */
  body.fs-has-news-hero .news-section.fs-news--featured-rail .fs-news-side-track{
    height: var(--fs-rail-window-h);
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column;
    gap: var(--fs-rail-gap) !important;
    transform: none !important;
    perspective: none !important;
  }

  /* Hide clone + hide outside updated on desktop rail */
  body.fs-has-news-hero .news-section.fs-news--featured-rail .fs-news-side-track > article.news-card[data-news-featured-clone="1"],
  body.fs-has-news-hero .news-section.fs-news--featured-rail .fs-news-side-track .news-card__updated-outside{
    display: none !important;
  }

  /* Rail cards: thumbnail-left (160px) + body */
  body.fs-has-news-hero .news-section.fs-news--featured-rail .fs-news-side-track > article.news-card{
    flex: 0 0 var(--fs-rail-card-h);
    min-height: var(--fs-rail-card-h);
    max-height: var(--fs-rail-card-h);
  }

  body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card--rail{
    display: grid !important;
    grid-template-columns: 160px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: stretch !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: rgba(15,23,42,0.18) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,0.28);
  }

  body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card--rail .news-card__media{
    width: 160px;
    height: 100%;
  }
  body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card--rail .news-card__media img{
    height: 100%;
    object-fit: cover;
  }

  /* Rail body stays clean and consistent */
  body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card--rail .news-card__body{
    position: relative !important;
    padding: 14px 14px 12px !important;
  }
  body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card--rail .news-card__title,
  body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card--rail .news-card__summary{
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card--rail .news-card__title{ -webkit-line-clamp: 2 !important; }
  body.fs-has-news-hero .news-section.fs-news--featured-rail .news-card--rail .news-card__summary{ -webkit-line-clamp: 2 !important; }
}