/* ============================================================
   ROLLIT — NEWS  (css/news.fe4f996f.css)
   The Reel: a generated film & TV news feed. Each story kind carries
   its own accent through a --k custom property set inline by news.js,
   so one rule set covers every chip, rail and hover state.
   ============================================================ */

#news-app { max-width: 900px; margin: 0 auto; padding: 1.5rem 1.5rem 5rem; }

/* ---- HERO / LEAD STORY ---- */
/* ---- HERO ZONE ----
   A grid so the arrows can sit OUTSIDE the slide without overlapping its art:
     desktop  [ ‹ ][ slide ][ › ]   with the dots centred underneath
     phone    the slide spans the row, and ‹ dots › cluster below it
   Same DOM in both — only the grid areas move. */
.news-heroz {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "prev hero next" ".    dots .";
  align-items: center;
  gap: .7rem .6rem;
  margin-bottom: 1.4rem;
}
.news-hero { grid-area: hero; }

.news-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  border-radius: 20px; border: 1px solid var(--border2);
  padding: 2rem 2.1rem;
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(232,201,107,.14), transparent 55%),
    var(--surface);
}

/* Every slide is the same height. The hero grows with its headline (one line
   vs two swung it 244px→295px, so the whole page jumped on each advance), so
   the two variable blocks reserve their tallest form and clamp to it:
   the headline always occupies 2 lines, the dek always 2. Sized in em, so it
   still tracks the clamp()ed font size across breakpoints. */
.news-hero-inner h1 {
  min-height: 2.04em;                 /* 2 x line-height 1.02 */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-hero-inner > p {
  min-height: 3.1em;                  /* 2 x line-height 1.55 */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Backdrop art sits behind the copy, dimmed hard so text keeps its contrast
   in both themes. */
.news-hero.has-bd::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--news-bd);
  background-size: cover; background-position: center 22%;
  opacity: .3;
}
.news-hero.has-bd::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--surface) 18%, rgba(26,27,40,.78) 52%, rgba(26,27,40,.34) 100%);
}
[data-theme="light"] .news-hero.has-bd::after {
  background: linear-gradient(100deg, var(--surface) 18%, rgba(255,255,255,.82) 52%, rgba(255,255,255,.4) 100%);
}
[data-theme="light"] .news-hero.has-bd::before { opacity: .22; }

.news-hero-inner { position: relative; z-index: 2; min-width: 0; flex: 1; }
.news-hero-blank { padding: 2.4rem 2.1rem; }

/* Kicker + timestamp on one line above the headline. */
.news-hero-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }

.news-kicker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: var(--k, var(--gold));
  background: color-mix(in srgb, var(--k, var(--gold)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--k, var(--gold)) 38%, transparent);
  border-radius: 20px; padding: 3px 11px;
}
.news-kicker i { font-size: 12px; }

.news-hero h1 {
  font-family: 'Bebas Neue', sans-serif; font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.02; letter-spacing: .8px;
  margin: 0 0 .55rem; color: var(--text);
}
.news-hero p { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0; max-width: 46ch; }

/* Buttons only, and deliberately nowrap — a wrapped second row is exactly what
   made slide heights differ. They shrink instead (see the phone rules). */
.news-hero-actions { display: flex; align-items: center; gap: 10px; margin-top: 1.2rem; flex-wrap: nowrap; }
.news-cta {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
  color: #160d2e; background: linear-gradient(180deg, #f2d885, var(--gold));
  /* Transparent border, not none: the ghost variant below has a real 1px
     border, and without this the two buttons differ by 2px — which showed up
     as the hero changing height between a slide with one CTA and one with
     two. */
  border: 1px solid transparent; border-radius: 9px; padding: 9px 16px;
  transition: transform .12s, filter .15s;
}
.news-cta:hover { transform: translateY(-1px); filter: brightness(1.06); }
/* Secondary hero action — used when the lead story has a trailer, so "Watch"
   keeps the gold fill and "Open title" steps back to an outline. */
.news-cta-ghost {
  color: var(--text); background: transparent;
  border: 1px solid var(--border2);
}
.news-cta-ghost:hover { background: var(--surface2); filter: none; }
.news-hero-time { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }

.news-hero-poster {
  position: relative; z-index: 2; flex-shrink: 0;
  width: 108px; border-radius: 12px; display: block;
  /* Reserve the poster's box before the image arrives. Without it the element
     is 0px tall until load and the art pops in after the slide has painted. */
  aspect-ratio: 2 / 3; object-fit: cover;
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
}

/* ---- CAROUSEL CONTROLS ----
   Placed by the grid outside the slide, so they never cover the backdrop art
   or the headline. Solid --surface: over a page background they read as real
   buttons rather than washes, in either theme. */
.news-hero-arrow {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--muted); font-size: 18px;
  background: var(--surface);
  border: 1px solid var(--border2);
  transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.news-hero-arrow.prev { grid-area: prev; }
.news-hero-arrow.next { grid-area: next; }
.news-hero-arrow:hover { background: var(--surface2); border-color: var(--gold); color: var(--gold); }
.news-hero-arrow:active { transform: scale(.92); }

.news-hero-dots {
  grid-area: dots; justify-self: center;
  display: flex; align-items: center; gap: 6px;
}
.news-hero-dot {
  width: 6px; height: 6px; padding: 0; border: none; border-radius: 50%;
  background: var(--border2); cursor: pointer;
  transition: background .15s, width .2s, border-radius .2s;
}
.news-hero-dot:hover { background: var(--muted); }
.news-hero-dot.active { background: var(--gold); width: 18px; border-radius: 3px; }

/* ---- SCOPE ROW — PRIMARY (which FEED) ----
   Sits directly under the hero and carries the heavier treatment: a filled
   pill when active. Choosing between Headlines and your own feeds is the
   bigger decision, so it gets the stronger control and the top row. */
.news-scopes {
  display: flex; gap: 8px; margin-bottom: .7rem;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.news-scopes::-webkit-scrollbar { display: none; }
.news-scope {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; color: var(--muted);
  background: var(--surface); border: 0.5px solid var(--border);
  border-radius: 20px; padding: 7px 14px;
  transition: color .15s, border-color .15s, background .15s;
}
.news-scope i { font-size: 15px; }
.news-scope:hover { color: var(--text); border-color: var(--border2); }
.news-scope.active { color: #160d2e; background: var(--gold); border-color: var(--gold); }
/* Tinted from currentColor rather than a fixed white/black wash, so the pill
   stays visible on both the dark surface and the white one light mode uses. */
.news-scope-n {
  font-size: 10.5px; font-weight: 700; line-height: 1;
  background: color-mix(in srgb, currentColor 14%, transparent);
  border-radius: 20px; padding: 3px 6px;
}

/* ---- KIND TABS — SECONDARY (which KIND of story) ----
   Refines whichever feed is selected above, so it's visually lighter —
   squarer and outlined rather than filled — and reads as subordinate to the
   row above instead of competing with it. */
.news-tabs {
  display: flex; gap: 7px; margin-bottom: 1.5rem;
  overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.news-tabs::-webkit-scrollbar { display: none; }
.news-tab {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; color: var(--muted);
  background: transparent; border: 0.5px solid var(--border2);
  border-radius: 9px; padding: 6px 11px;
  transition: color .15s, border-color .15s, background .15s;
}
.news-tab i { font-size: 14px; }
.news-tab:hover { color: var(--text); border-color: var(--muted); }
.news-tab.active {
  color: var(--gold); border-color: var(--gold);
  background: rgba(232,201,107,.10);
}
.news-tab-n { font-size: 10.5px; font-weight: 700; color: var(--dim); }
.news-tab.active .news-tab-n { color: var(--gold); }

/* Signed-out: visible but clearly gated. Dimmed rather than disabled, because
   it is still clickable — it opens the sign-in modal. */
.news-scope.locked { color: var(--dim); border-style: dashed; }
.news-scope.locked:hover { color: var(--gold); border-color: var(--gold); border-style: solid; }
.news-scope-lock { font-size: 12px; opacity: .8; }

/* ---- SECTIONS ---- */
.news-section { margin-bottom: 2.2rem; }
.news-sec-head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 1rem; padding-bottom: .55rem; border-bottom: 0.5px solid var(--border);
}
.news-sec-head h2 {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 1.6rem; letter-spacing: .6px;
  color: var(--text);
}
.news-sec-head h2 i { color: var(--gold); font-size: 1.25rem; }
.news-sec-n { font-size: 12px; color: var(--dim); margin-left: auto; }

.news-list { display: flex; flex-direction: column; gap: 10px; }

/* ---- STORY CARD ---- */
.news-card {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  background: var(--surface); border: 0.5px solid var(--border);
  border-left: 2px solid var(--k, var(--gold));
  border-radius: 14px; padding: 12px 14px;
  transition: transform .16s, box-shadow .18s, border-color .16s;
}
.news-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.3);
  border-color: color-mix(in srgb, var(--k, var(--gold)) 45%, transparent);
  border-left-color: var(--k, var(--gold));
}

.news-thumb {
  position: relative;
  width: 56px; height: 84px; flex-shrink: 0;
  border-radius: 8px; overflow: hidden; background: var(--surface2);
}
.news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-thumb-ph {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  color: var(--dim); font-size: 1.4rem;
}

/* ---- TRAILER PLAY AFFORDANCES ----
   Only trailer stories carry a video, so only they get these. The poster
   becomes a play target and a labelled button sits in the meta row — the
   button is what makes it obvious, the overlay is what makes it feel like a
   video. */
.news-thumb.is-playable { cursor: pointer; }
.news-thumb-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 17px;
  background: rgba(0,0,0,.42);
  opacity: .85; transition: opacity .15s, background .15s;
}
.news-thumb-play i { filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.news-thumb.is-playable:hover .news-thumb-play { opacity: 1; background: rgba(0,0,0,.55); }
.news-thumb.is-playable:focus-visible { outline: 2px solid var(--k, var(--gold)); outline-offset: 2px; }

.news-play {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  margin-left: auto;
  font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 600;
  color: var(--k, var(--gold));
  background: color-mix(in srgb, var(--k, var(--gold)) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--k, var(--gold)) 40%, transparent);
  border-radius: 7px; padding: 4px 10px;
  transition: background .15s, transform .1s;
}
.news-play i { font-size: 12px; }
.news-play:hover { background: color-mix(in srgb, var(--k, var(--gold)) 24%, transparent); transform: translateY(-1px); }

.news-body { flex: 1; min-width: 0; }
.news-chips { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.news-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--k, var(--gold));
  background: color-mix(in srgb, var(--k, var(--gold)) 13%, transparent);
  border-radius: 5px; padding: 2px 7px;
}
.news-chip i { font-size: 12px; }
.news-time { font-size: 11.5px; color: var(--dim); }

/* Why a story is in YOUR feed ("On your watchlist", "You rated this 8"). */
.news-why {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600;
  color: var(--gold); background: rgba(232,201,107,.11);
  border-radius: 5px; padding: 2px 7px;
  max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.news-why i { font-size: 11px; flex-shrink: 0; }

.news-card h3 {
  font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 600; line-height: 1.35;
  color: var(--text); margin: 0 0 3px;
}
.news-card:hover h3 { color: var(--k, var(--gold)); }
.news-card p {
  font-size: 12.5px; line-height: 1.45; color: var(--muted); margin: 0 0 5px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-meta { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--dim); }
.news-meta i { font-size: 13px; }

.news-go { color: var(--dim); font-size: 18px; flex-shrink: 0; transition: color .15s, transform .15s; }
.news-card:hover .news-go { color: var(--k, var(--gold)); transform: translateX(2px); }

/* ---- QUIET / EMPTY STATES ---- */
.news-quiet {
  font-size: 12.5px; color: var(--dim); padding: 1rem 0 .2rem;
}
.news-empty {
  text-align: center; padding: 3.5rem 1.5rem; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  background: var(--surface); border: 0.5px dashed var(--border2); border-radius: 14px;
}
.news-empty i { font-size: 2.4rem; color: var(--gold); opacity: .7; }
.news-empty div { font-size: 14.5px; color: var(--text); }
.news-empty p { font-size: 12.5px; margin: 0; max-width: 340px; line-height: 1.5; }

/* ---- PROVENANCE FOOTER ---- */
.news-foot {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 2.4rem; padding: .95rem 1.1rem;
  background: var(--bg2); border: 0.5px solid var(--border); border-radius: 12px;
}
.news-foot i { color: var(--dim); font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.news-foot p { font-size: 11.5px; line-height: 1.55; color: var(--dim); margin: 0; }
.news-foot-loading { color: var(--gold); }

/* ---- PHONE ---- */
/* Below this there is no room for side arrows without squeezing the slide, so
   the whole control cluster moves under it: ‹ dots ›, centred. */
@media (max-width: 820px) {
  /* 1fr | auto | 1fr with the arrows pulled toward the middle column keeps the
     ‹ dots › cluster genuinely centred under a full-width slide. */
  .news-heroz {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "hero hero hero" "prev dots next";
    gap: .85rem .9rem;
  }
  .news-hero { grid-column: 1 / -1; }
  .news-hero-arrow.prev { justify-self: end; }
  .news-hero-arrow.next { justify-self: start; }
}

@media (max-width: 720px) {
  #news-app { padding: 1rem 1rem 4.5rem; }
  .news-hero { padding: 1.5rem 1.4rem; gap: 1rem; }
  .news-hero-poster { width: 76px; }
  .news-hero p { font-size: 13px; }
  .news-hero-arrow { width: 32px; height: 32px; font-size: 16px; }
}
@media (max-width: 520px) {
  .news-hero-poster { display: none; }
  /* Let the CTAs shrink rather than wrap, so both one- and two-button slides
     keep the same height. */
  .news-cta { padding: 9px 12px; font-size: 12.5px; min-width: 0; }
  .news-cta i { flex-shrink: 0; }
  .news-card { gap: 11px; padding: 11px 12px; }
  .news-thumb { width: 46px; height: 69px; }
  .news-card h3 { font-size: 14px; }
  .news-go { display: none; }
}