/* ══════════════════════════════════════════════════════════════
   NEWS.CSS — page-specific styles for news.php (nw- prefix).
   Extracted verbatim from news.html during Phase 3 (dynamic News).
   Shared components live in design-system/shared.css. Uses the short
   cta-section aspect-ratio (1920/1100) since no news-teaser follows.
   ══════════════════════════════════════════════════════════════ */

.nw-hero {
  background: #0a0a0a;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(72px + var(--space-20));
  padding-bottom: var(--space-20);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--color-gray-800);
}

.nw-hero-content {
  position: relative;
  z-index: 1;
}

.nw-hero-eyebrow {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.62);
  margin-bottom: var(--space-8);
}

.nw-hero-title {
  font-size: clamp(var(--text-5xl), 7.5vw, var(--text-8xl));
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tighter);
  line-height: 0.95;
  color: var(--color-white);
  max-width: 18ch;
}

.nw-hero-desc {
  margin-top: var(--space-8);
  font-size: clamp(var(--text-base), 1.4vw, var(--text-lg));
  color: rgb(255 255 255 / 0.55);
  line-height: var(--leading-relaxed);
  max-width: 48ch;
}

/* ─── FEED ──────────────────────────────────────────────── */
.nw-feed {
  padding-block: var(--space-40) var(--space-20);
  border-bottom: 1px solid var(--color-gray-200);
}

.nw-feed-head {
  margin-bottom: var(--space-16);
  max-width: 56ch;
}

.nw-feed-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gray-500);
  margin-bottom: var(--space-5);
}

.nw-feed-heading {
  font-size: clamp(var(--text-3xl), 3.5vw, var(--text-5xl));
  font-weight: var(--weight-black);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--color-black);
}

.nw-feed-empty {
  font-size: var(--text-base);
  color: var(--color-gray-500);
  padding-block: var(--space-10);
}

.nw-list {
  display: flex;
  flex-direction: column;
}

.nw-row {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 3rem;
  padding-block: var(--space-10);
  border-bottom: 1px solid var(--color-gray-200);
  align-items: center;
}

.nw-row:first-child { padding-top: 0; }
.nw-row:last-child { border-bottom: none; }

.nw-row-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-gray-100);
}

.nw-row-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nw-row:hover .nw-row-img-wrap img { transform: scale(1.04); }

.nw-row-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.nw-row-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nw-row-tag {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gray-400);
}

.nw-row-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-gray-300);
  flex-shrink: 0;
}

.nw-row-date {
  font-size: var(--text-xs);
  color: var(--color-gray-400);
}

.nw-row-title {
  font-size: clamp(var(--text-xl), 2vw, var(--text-2xl));
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  color: var(--color-black);
}

.nw-row-excerpt {
  font-size: var(--text-base);
  color: var(--color-gray-600);
  line-height: var(--leading-relaxed);
  max-width: 68ch;
}

.nw-row-link {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-black);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  transition: gap 150ms ease;
}

.nw-row-link:hover { gap: var(--space-3); }

/* ─── MOBILE (news-only overrides) ──────────────────────── */
@media (max-width: 768px) {
  .nw-row { grid-template-columns: 1fr; gap: var(--space-4); }
}