/* ================================================
   NEWS PAGE STYLES  —  extends styles.css
   ================================================ */

/* Keep footer at the bottom when the listing is empty / loading */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- PAGE BANNER ---- */
.page-banner {
  position: relative;
  background: var(--primary-dark);
  padding: 8rem 3rem 4rem;
  overflow: hidden;
  margin-top: 96px;
}

.page-banner-watermark {
  position: absolute;
  right: 3rem;
  top: 50%;
  transform: translateY(-50%);
  width: 280px;
  height: 280px;
  object-fit: contain;
  opacity: 0.06;
  pointer-events: none;
}

.page-banner .section-label {
  color: var(--primary-light);
}

.page-banner .section-title {
  color: #fff;
  font-size: clamp(3rem, 6vw, 5.5rem);
  margin-bottom: 0;
}

.page-banner .section-title::after {
  background: var(--primary-light);
}

/* ---- NEWS LISTING ---- */
.news-listing {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3.5rem 3rem 5rem;
}

/* Override featured card to be slightly less wide on this page */
.news-listing .news-card.featured {
  grid-template-columns: 1.4fr 1fr;
}

/* ---- ANIMATIONS ---- */

/* Banner entrance — same cadence as squad/club page headers */
.page-banner .section-label { animation: fadeUp 0.7s 0.1s both; }
.page-banner .section-title  { animation: fadeUp 0.7s 0.25s both; }

/* News cards use the shared scroll-reveal system (see styles.css + script.js) */

/* ---- NAV ACTIVE STATE ---- */
.nav-links a.nav-active {
  opacity: 1;
  color: var(--primary);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
  .page-banner { padding: 7rem 1.5rem 3rem; }
  .page-banner-watermark { width: 200px; height: 200px; right: 1.5rem; }
  .news-listing { padding: 2.5rem 1.5rem 4rem; }
}

@media (max-width: 768px) {
  .page-banner { padding: 6rem 1rem 2.5rem; margin-top: 76px; }
  .page-banner-watermark { display: none; }
  .news-listing { padding: 2rem 1rem 3.5rem; }
  .news-listing .news-card.featured { grid-template-columns: 1fr; }
  .news-listing .news-card.featured .news-card-img { aspect-ratio: 16/9; height: auto; }
}

@media (max-width: 480px) {
  .news-listing .news-card-excerpt { display: none; }
}