/* ============================================================
   page-news.css — Newsroom index, v3 blueprint design.
   Sits on top of service.css (shared tokens: --c-line, --c-mute,
   --c-bg, --r-md/lg, --t-fast/mid, --ease-out/spring).
   Ported from public/proposed/nas-v3/page-news.css with the
   chromatic palette re-anchored to the NAS navy brand tokens.
   ============================================================ */

:root {
  --c-navy: #0E2A6B;
  --c-navy-2: #1C4DBD;
  --c-blue: #2158D6;
  --c-blue-2: #4A7EE8;
  --c-accent: #7BDFB1;   /* mint — dark-surface accent only */
  --c-accent-2: #FFA8C6;
}

/* ========== HERO ========== */
.nw-hero .hero-grid { grid-template-columns: 1.05fr 1fr; }

/* Category filter chips */
.nw-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 34px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
}
.nw-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  border: none;
  background: transparent;
  font: 600 .9rem/1 'Space Grotesk', 'Inter', sans-serif;
  color: var(--c-navy);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out);
}
.nw-filter:hover { color: var(--c-navy-2); }
.nw-filter.active {
  background: linear-gradient(135deg, var(--c-navy), var(--c-navy-2));
  color: #fff;
}
.nw-filter:focus-visible {
  outline: 2px solid var(--c-navy-2);
  outline-offset: 2px;
}
.nw-f-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-navy-2);
  transition: background var(--t-fast) var(--ease-out);
}
.nw-filter.active .nw-f-dot { background: var(--c-accent); }
.nw-f-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  opacity: .6;
}

/* Broadcast-signal diorama */
.nw-diorama { position: relative; width: 100%; aspect-ratio: 1; }
.nw-svg { width: 100%; height: 100%; display: block; overflow: visible; }

.nw-tip {
  transform-box: fill-box; transform-origin: center;
  animation: nwTip 1.8s ease-out infinite;
}
@keyframes nwTip {
  0%   { transform: scale(1); opacity: .9; }
  100% { transform: scale(4.4); opacity: 0; }
}

.nw-arc { animation: nwArcFlow 3s linear infinite; }
.nw-arc-2 { animation-duration: 3.4s; }
.nw-arc-3 { animation-duration: 3.8s; }
.nw-arc-4 { animation-duration: 4.2s; }
.nw-arc-5 { animation-duration: 4.6s; }
@keyframes nwArcFlow { to { stroke-dashoffset: -36; } }

.nw-pill {
  transform-box: fill-box; transform-origin: center;
  animation: nwPill 5s ease-in-out infinite;
}
.nw-pill-2 { animation-delay: 1s; }
.nw-pill-3 { animation-delay: 2s; }
.nw-pill-4 { animation-delay: 3s; }
.nw-pill-5 { animation-delay: 4s; }
@keyframes nwPill {
  0%, 100% { transform: translateX(0); opacity: .92; }
  50%      { transform: translateX(8px); opacity: 1; }
}


/* ========== UPCOMING EVENTS ========== */
.nw-ev-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.nw-ev {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 20px;
  padding: 26px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  transition: transform var(--t-mid) var(--ease-spring),
              border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}
.nw-ev:hover {
  transform: translateY(-4px);
  border-color: var(--c-navy-2);
  box-shadow: 0 28px 56px -28px rgba(14, 42, 107, .22);
}
.nw-ev-date {
  background: linear-gradient(160deg, var(--c-navy), var(--c-navy-2));
  color: #fff;
  border-radius: var(--r-md);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  align-self: start;
}
.nw-ev-d {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}
.nw-ev-m {
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-accent);
  margin-top: 6px;
}
.nw-ev-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nw-ev-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: var(--c-navy-2);
  padding: 4px 10px;
  background: rgba(14, 42, 107, .07);
  border-radius: 4px;
  width: fit-content;
}
.nw-ev-body h3 { font-size: 1.12rem; line-height: 1.3; margin: 2px 0 4px; }
.nw-ev-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: .86rem;
  color: var(--c-mute);
}
.nw-ev-meta li { display: flex; align-items: baseline; gap: 8px; }
.nw-ev-k {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-mute);
  flex: 0 0 46px;
}
.nw-ev-cta {
  margin-top: 6px;
  color: var(--c-navy-2);
  font-weight: 700;
  font-size: .92rem;
}
.nw-ev-cta span { display: inline-block; transition: transform var(--t-fast) var(--ease-spring); }
.nw-ev:hover .nw-ev-cta span { transform: translateX(6px); }


/* ========== ARTICLES GRID ========== */
.nw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* Featured article — spans the row, split media / copy */
.nw-feat {
  grid-column: span 3;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-mid) var(--ease-spring),
              border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}
.nw-feat:hover {
  transform: translateY(-4px);
  border-color: var(--c-navy-2);
  box-shadow: 0 40px 80px -40px rgba(14, 42, 107, .28);
}
.nw-feat-vis { min-height: 300px; overflow: hidden; background: var(--c-navy); }
.nw-feat-vis img,
.nw-feat-vis svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.nw-feat-body {
  padding: clamp(28px, 4vw, 46px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
}
.nw-feat-body h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.95rem);
  line-height: 1.18;
}
.nw-feat-body p { color: var(--c-mute); font-size: 1rem; line-height: 1.55; }

/* Standard card */
.nw-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--t-mid) var(--ease-spring),
              border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-mid) var(--ease-out);
}
.nw-card:hover {
  transform: translateY(-4px);
  border-color: var(--c-navy-2);
  box-shadow: 0 28px 56px -28px rgba(14, 42, 107, .25);
}
.nw-card-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-navy);
}
.nw-card-thumb img,
.nw-card-thumb svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.nw-card-body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.nw-card-body h3 { font-size: 1.05rem; line-height: 1.3; }
.nw-card-body p { color: var(--c-mute); font-size: .9rem; line-height: 1.5; }

.nw-cat {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: var(--c-navy-2);
  letter-spacing: .02em;
  display: block;
}
.nw-cta {
  color: var(--c-navy-2);
  font-weight: 700;
  margin-top: 8px;
}
.nw-cta span { display: inline-block; transition: transform var(--t-fast) var(--ease-spring); }
.nw-feat:hover .nw-cta span { transform: translateX(6px); }

/* Filtered out */
.nw-card.nw-hide,
.nw-feat.nw-hide { display: none; }

/* Empty state after filtering / no articles */
.nw-empty {
  padding: clamp(40px, 6vw, 72px);
  text-align: center;
  color: var(--c-mute);
  border: 1px dashed var(--c-line-2);
  border-radius: var(--r-lg);
  background: #fff;
}
.nw-empty svg { width: 40px; height: 40px; color: var(--c-navy-2); opacity: .5; margin-bottom: 14px; }
.nw-empty p { font-size: .98rem; }


/* ========== SIGNAL (subscribe / speaker) ========== */
.nw-signal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.nw-signal {
  position: relative;
  padding: clamp(28px, 4vw, 40px);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}
.nw-signal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 30% 60% at 100% 0%, rgba(33, 88, 214, .08), transparent 60%);
  pointer-events: none;
}
.nw-signal > * { position: relative; }
.nw-s-icon {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--c-navy), var(--c-navy-2));
  color: #fff;
  border-radius: 12px;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px -10px rgba(14, 42, 107, .6);
}
.nw-s-icon svg { width: 26px; height: 26px; }
.nw-signal h3 { font-size: 1.3rem; }
.nw-signal p { color: var(--c-mute); }

.nw-form {
  display: flex;
  align-items: center;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 5px;
  gap: 4px;
}
.nw-form:focus-within { border-color: var(--c-navy-2); }
.nw-form input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 11px 16px;
  color: var(--c-navy);
  font: 400 .94rem/1 'Inter', sans-serif;
  outline: none;
  min-width: 0;
}
.nw-form button {
  background: var(--c-navy);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 11px 20px;
  font: 700 .9rem/1 'Space Grotesk', sans-serif;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}
.nw-form button:hover { background: var(--c-navy-2); }
.nw-ok { font-size: .86rem; color: var(--c-mute); }
.nw-signal .btn-cta { align-self: flex-start; margin-top: auto; }


/* ========== PRESS band (dark) ========== */
.nw-press {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: clamp(28px, 4vw, 44px);
  background: linear-gradient(160deg, var(--c-navy), var(--c-navy-2));
  color: #fff;
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
}
.nw-press::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(closest-side, rgba(123, 223, 177, .18), transparent 60%) 82% 22% / 40% 60% no-repeat;
  filter: blur(50px);
  pointer-events: none;
}
.nw-press > * { position: relative; }
.nw-press h3 { color: #fff; margin-bottom: 8px; }
.nw-press p { color: rgba(255, 255, 255, .8); max-width: 560px; }
.nw-press .btn-line {
  background: rgba(255, 255, 255, .06);
  color: #fff;
  border-color: rgba(255, 255, 255, .22);
}
.nw-press .btn-line:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
}


/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
  .nw-hero .hero-grid { grid-template-columns: 1fr; }
  .nw-diorama { max-width: 460px; margin: 0 auto; }
  .nw-ev-grid { grid-template-columns: 1fr; }
  .nw-grid { grid-template-columns: repeat(2, 1fr); }
  .nw-feat { grid-column: span 2; }
  .nw-feat-vis { min-height: 240px; }
  .nw-signal-grid { grid-template-columns: 1fr; }
  .nw-press { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .nw-grid { grid-template-columns: 1fr; }
  .nw-feat { grid-column: span 1; grid-template-columns: 1fr; }
  .nw-feat-vis { min-height: 200px; }
  .nw-ev { grid-template-columns: 76px 1fr; gap: 16px; padding: 20px; }
  .nw-ev-d { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nw-tip, .nw-arc, .nw-pill { animation: none !important; }
}