/* ==========================================================================
   news-rail.css - the horizontal news rail.

   ONE copy, used by two kinds of page:
     - index.html: the News & Commentary band under the chamber
       (markup from a build script)
     - division/<name>/index.html: the "Latest from the X" band
       (markup from a build script)
   Behavior for both: js/home-news.js (arrows only; swipe and scroll are
   native, so the rail works with JavaScript off).
   Moved verbatim out of css/home.css, where it was BAND 1B.
   ========================================================================== */

/* ── BAND 1B · THE NEWS RAIL ─────────────────────────────────
   Markup is generated into index.html by a build script.
   A native scroll-snap rail: it swipes on touch and scrolls with JS off, and
   js/home-news.js only un-hides the arrows and moves the rail one card-width.
   Three cards across on desktop, two on tablet, one-and-a-peek on a phone -
   the peek is the affordance, same idea as .uc-card's. */
.hn-all {
  font-family: var(--font-heading);
  font-size: .78rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rws-white-80);
  text-decoration: none;
  padding: .6rem 0;               /* 44px-ish hit area without a box */
  border-bottom: 1px solid var(--rws-white-30);
}
.hn-all:hover, .hn-all:focus-visible { color: #fff; border-bottom-color: #fff; }
.hn { position: relative; }
.hn-rail {
  list-style: none;
  margin: 0;
  padding: 0 0 .75rem;
  display: grid;
  grid-auto-flow: column;
  /* Two across plus a peek of the third. The band container is ~670px, so a
     straight 3-up gave ~205px cards and clamped every headline. The peek is
     what says "this scrolls" before anyone finds the arrow. */
  grid-auto-columns: calc((100% - 2rem) / 2.4);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--rws-white-30) transparent;
}
.hn-card { scroll-snap-align: start; min-width: 0; }
.hn-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  background: var(--house-base, #0D0D0F);
  border: 1px solid var(--rws-border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .2s, transform .2s;
}
.hn-card a:hover, .hn-card a:focus-visible {
  border-color: var(--house-accent, var(--rws-crimson));
  transform: translateY(-2px);
}
.hn-card a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* The plate is absolutely positioned on purpose: plates are NOT all 16:9 (the
   KO_OP one is square), and an in-flow img at height:100% lets its intrinsic
   ratio stretch the box - first preview had cards of three different heights. */
.hn-art {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  border-bottom: 2px solid var(--house-accent, var(--rws-crimson));
  background:
    radial-gradient(ellipse at 50% 60%, var(--house-glow, rgba(192,57,43,.35)) 0%, transparent 62%),
    var(--house-base, #0D0D0F);
}
.hn-plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hn-emblem { width: 76px; height: 76px; object-fit: contain; }
.hn-body {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
  padding: 1rem 1.1rem 1.15rem;
}
.hn-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .8rem;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rws-white-80);
}
.hn-meta time { color: var(--rws-white-50); font-weight: 500; }
.hn-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0;
  color: #fff;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.hn-dek {
  font-size: .9rem;
  line-height: 1.5;
  margin: 0;
  color: var(--rws-white-80);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.hn-src {
  margin-top: auto;
  padding-top: .3rem;
  font-size: .78rem;
  color: var(--rws-white-50);
}
/* Arrows sit over the ART row, where there is no text to cover. `top` here is
   only the fallback: a percentage `top` is a share of the rail's HEIGHT, which
   varies with the deks, so js/home-news.js pins it to half the first card's
   art height on every resize. */
.hn-arrow {
  position: absolute;
  top: 22%;
  z-index: 5;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 1px solid var(--rws-border);
  border-radius: 50%;
  background: rgba(8, 8, 10, .85);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
}
.hn-arrow[hidden] { display: none; }
.hn-arrow:hover, .hn-arrow:focus-visible { background: rgba(8, 8, 10, .98); border-color: var(--rws-white-30); }
.hn-arrow:disabled { opacity: .3; cursor: default; }
.hn-arrow[data-dir="prev"] { left: -14px; }
.hn-arrow[data-dir="next"] { right: -14px; }
@media (max-width: 960px) {
  .hn-rail { grid-auto-columns: calc((100% - 1rem) / 1.6); }
}
@media (max-width: 640px) {
  .hn-rail { grid-auto-columns: 84%; }
  .hn-arrow { display: none; }     /* swipe is the control on a phone */
}

/* ── Division pages: the band around the rail ─────────────────────────── */
.dnews { padding: clamp(2.5rem, 6vw, 4rem) 0; border-top: 1px solid var(--rws-border); }
.dn-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.dn-head h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.15;
  color: #fff;
  letter-spacing: .03em;
  margin: 0;
}
.dn-head .eyebrow { margin: 0 0 .4rem; }
/* Few cards on a division page: let a short rail sit left instead of
   stretching, and never leave one lonely card at 84% width on desktop. */
.dnews .hn-rail { grid-auto-columns: calc((100% - 2rem) / 3); }
@media (max-width: 960px) { .dnews .hn-rail { grid-auto-columns: calc((100% - 1rem) / 1.6); } }
@media (max-width: 640px) { .dnews .hn-rail { grid-auto-columns: 84%; } }
.hn-kind { color: var(--house-accent-lit, var(--rws-white-80)); }

@media (prefers-reduced-motion: reduce) {
  .hn-rail { scroll-behavior: auto; }
  .hn-card a { transition: none; }
  .hn-card a:hover, .hn-card a:focus-visible { transform: none; }
}