/* ==========================================================================
   NeonFilmyCab — trending.css
   Trending Now: horizontal premium carousel with huge neon rank numerals
   ========================================================================== */

.fmc-trending { position: relative; }

.fmc-trending__row {
  display: grid; grid-auto-flow: column; grid-auto-columns: 46vw;
  gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; padding: 6px 4px 18px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.fmc-trending__row::-webkit-scrollbar { display: none; }

.fmc-trend-card {
  --movie-accent: var(--fmc-cyan);
  scroll-snap-align: start; position: relative; display: block;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--movie-accent) 60%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--movie-accent) 20%, transparent), 0 16px 34px rgba(0, 0, 0, .55);
  background: #0a0d18;
  transition: transform .25s ease, box-shadow .3s ease;
}
.fmc-trend-card:hover { transform: translateY(-4px); box-shadow: 0 0 36px color-mix(in srgb, var(--movie-accent) 40%, transparent), 0 20px 40px rgba(0, 0, 0, .6); }

.fmc-trend-card__media { position: relative; aspect-ratio: 2 / 3; }
.fmc-trend-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.fmc-trend-card:hover .fmc-trend-card__media img { transform: scale(1.05); }
.fmc-trend-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(5, 6, 13, .92) 4%, rgba(5, 6, 13, .1) 45%, rgba(5, 6, 13, .25) 100%);
}

.fmc-trend-card__imdb { position: absolute; top: 8px; right: 8px; z-index: 2; }

.fmc-trend-card__rank {
  position: absolute; z-index: 2; left: 8px; bottom: -6px;
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  font-size: clamp(46px, 13vw, 74px); letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 2px var(--rank-c, var(--fmc-pink));
  text-shadow: 0 0 24px color-mix(in srgb, var(--rank-c, var(--fmc-pink)) 55%, transparent);
  transition: transform .3s ease;
}
.fmc-trend-card:hover .fmc-trend-card__rank { transform: scale(1.06); }

.fmc-trend-card__info { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 8px; padding-left: clamp(52px, 14vw, 84px); }
.fmc-trend-card__title {
  font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.fmc-trend-card__year { font-size: 11.5px; color: var(--fmc-muted); font-weight: 700; }

.fmc-trending__nav { display: none; gap: 8px; }
.fmc-trending__nav button {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  border: 1px solid var(--fmc-line-strong); background: var(--fmc-surface); color: var(--fmc-muted);
  transition: all .2s ease;
}
.fmc-trending__nav button:hover { color: var(--fmc-orange); border-color: color-mix(in srgb, var(--fmc-orange) 55%, transparent); }
.fmc-trending__nav button[disabled] { opacity: .35; cursor: default; }