/*
============================================================
THE NEWS SCROLLER

The slow marquee of headlines, shared by:

    index.php                      under the hero
    news/PoliticalNewsMedia.php    above the story grid

Markup is includes/news-scroller.php; the stories come from
newsFeedForVisitor() in includes/news-feed.php. All three use
the news-scroller- prefix; keep them in step.

It lives in its own stylesheet rather than in a <style> block
because two pages render it now. A second copy of these rules
is a second copy to update, and the failure mode is the quiet
one -- the scroller looks right on the page somebody was
testing and wrong on the other.
============================================================
*/

/* ---- the headline scroller ---- */
.news-scroller{margin:0 0 26px;padding:14px 0 16px;border:1px solid var(--line);border-radius:16px;background:var(--paper);box-shadow:var(--shadow);overflow:hidden}
.news-scroller-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 20px 12px}
.news-scroller-eyebrow{color:#333e94;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em}
.news-scroller-hint{color:#98a0ae;font-size:10.5px}

/* The viewport clips; the track slides. Keeping the two jobs on
   separate elements is what lets the animation be a single
   transform with nothing else to fight it. */
.news-scroller-viewport{overflow:hidden}
.news-scroller-track{display:flex;width:max-content;animation:news-scroll 90s linear infinite}
.news-scroller-run{display:flex;gap:14px;padding:0 7px}

/* -50% and not -100%: the track holds two identical copies, so
   half of it is exactly one full pass. At that point the second
   copy sits precisely where the first started and the reset is
   invisible. */
@keyframes news-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Pause on hover so a headline can actually be read, and on
   focus so a keyboard user tabbing into a card is not carried
   away from it. */
.news-scroller:hover .news-scroller-track,
.news-scroller:focus-within .news-scroller-track{animation-play-state:paused}

/* Motion that moves on its own for 90 seconds is exactly what
   this setting is for. Stopped, not hidden -- the headlines are
   content, and they stay readable and scrollable by hand. */
@media (prefers-reduced-motion: reduce){
    .news-scroller-track{animation:none}
    .news-scroller-viewport{overflow-x:auto}
    .news-scroller-run:nth-child(2){display:none}
}

.news-scroller-card{display:flex;gap:12px;width:330px;flex:0 0 330px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;text-decoration:none;transition:border-color .15s,transform .15s}
.news-scroller-card:hover{border-color:#c3cad6;transform:translateY(-2px)}
.news-scroller-image{width:76px;height:76px;flex:0 0 76px;border-radius:9px;object-fit:cover;background:#eef1f6}
.news-scroller-noimage{display:grid;place-items:center;background:var(--navy);color:#fff;font-size:26px;font-weight:800}
.news-scroller-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.news-scroller-outlet{display:flex;align-items:center;gap:6px;color:#333e94;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.news-scroller-world{padding:1px 6px;border-radius:3px;background:#fff4e2;color:#8d6216;letter-spacing:.04em}
/* Two lines of headline, three of brief, clamped -- the cards
   have to be the same height or the row wobbles as it slides. */
.news-scroller-title{color:var(--ink);font-size:13px;font-weight:800;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-scroller-brief{color:var(--muted);font-size:11.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

@media (max-width:640px){
    .news-scroller-card{width:270px;flex-basis:270px}
    .news-scroller-image{width:60px;height:60px;flex-basis:60px}
}