/* ========================================
   News Article Detail Page Styles
   - Scoped under #MainZone to override legacy
     .title-style-*, .label-style, .note-style-1, .link-style-1
   - Shares .news-card/.news-grid/.news-grid__item from news.css
   - Mirrors events.css scoping pattern and
     locations.css sidebar-card vocabulary
   ======================================== */

/* ---- Article Shell ---- */
#MainZone .news-detail {
  margin: 0;
}

/* Zero top margin on the first child so the visual top of the
   article sits flush with the two-col row, not double-spaced. */
#MainZone .news-detail > :first-child {
  margin-top: 0;
}

/* ---- Article Header ---- */
#MainZone .news-detail__header {
  margin: 0 0 1.5rem;
}

/* Article title — primary h1 */
#MainZone .news-detail__header h1 {
  font-family: var(--font-heading);
  font-size: 2.625rem;
  font-weight: 700;
  color: #000;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}

/* ---- Meta Row (Category / Posted On / Written By) ----
   Replaces legacy .inline-items / .label-style / .note-style-1
   with a flat, left-aligned flex row using allied-green accents. */
#MainZone .news-detail__meta {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.4;
  color: #555;
}

#MainZone .news-detail__meta li {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}

/* Override legacy .label-style inside meta — small uppercase label */
#MainZone .news-detail__meta .label-style {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--allied-green);
  margin: 0;
}

#MainZone .news-detail__meta time,
#MainZone .news-detail__meta span {
  color: #333;
  font-weight: 500;
}

#MainZone .news-detail__meta a {
  color: var(--allied-blue-light);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

#MainZone .news-detail__meta a:hover,
#MainZone .news-detail__meta a:focus {
  color: var(--allied-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- Hero Figure ----
   Uses aspect-ratio directly instead of the legacy
   figure.system-card { padding-bottom: 50%; height: 0 } hack. */
#MainZone .news-detail__hero {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  margin: 0 0 1.75rem;
}

/* ---- Article Body ----
   Body typography inherits from .content-style in static_page.css.
   This rule only tightens the top/bottom rhythm for the detail page. */
#MainZone .news-detail__body {
  margin: 0;
}

#MainZone .news-detail__body > :first-child {
  margin-top: 0;
}

#MainZone .news-detail__body > :last-child {
  margin-bottom: 0;
}

/* ---- Related News Sidebar Section ---- */
#MainZone .news-related {
  margin: 0;
}

#MainZone .news-related__heading {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--allied-blue);
  line-height: 1.3;
  letter-spacing: 0;
  margin: 0 0 16px;
  padding: 0 0 10px;
  border-bottom: 2px solid var(--allied-green);
}

/* ---- Compact Card Variant (sidebar) ----
   Modifier on .news-card (defined in news.css).
   Switches layout from vertical to horizontal-friendly stack with
   smaller thumbnail + tight title. Used in the Related News sidebar. */
#MainZone .news-card--compact {
  border: 1px solid var(--allied-green);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

#MainZone .news-card--compact .news-card__image-wrap {
  aspect-ratio: 16 / 9;
  border-radius: 0;
}

#MainZone .news-card--compact .news-card__body {
  padding: 14px 16px 16px;
  gap: 8px;
}

#MainZone .news-card--compact .news-card__meta {
  margin: 0;
}

#MainZone .news-card--compact .news-card__title {
  font-size: 1rem;
  line-height: 1.3;
  margin: 0;
  /* Clamp to 3 lines — sidebar has narrower width than list grid */
  -webkit-line-clamp: 3;
}

#MainZone .news-card--compact .news-card__link {
  font-size: 0.8125rem;
  padding-top: 8px;
  margin-top: 0;
}

/* Stack related cards vertically in the sidebar */
#MainZone .news-related .news-grid {
  grid-template-columns: 1fr;
  gap: 16px;
}

/* ---- Featured Band (below two-col shell, full-bleed) ----
   Replaces the old inline linear-gradient(160deg, blue → green)
   featured badge. Badge now lives on .news-card__featured
   (already defined in news.css, uses --allied-green). */
#MainZone .news-featured {
  background-color: #f5f6f8; /* soft neutral — no --off-white token exists */
  padding: 56px 40px;
  margin-top: 48px;
}

#MainZone .news-featured__inner {
  max-width: 1400px;
  margin: 0 auto;
}

#MainZone .news-featured__heading {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--allied-blue);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 28px;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  #MainZone .news-detail__header h1 {
    font-size: 2.125rem;
  }

  #MainZone .news-related {
    max-width: 600px;
    margin-top: 2rem;
  }

  #MainZone .news-featured {
    padding: 44px 32px;
  }

  #MainZone .news-featured__heading {
    font-size: 1.75rem;
    margin-bottom: 24px;
  }
}

/* Sidebar stacks full-width at 800px (matches .two-col-container stack point
   in static_page.css); only then can related cards flow 2-up without overflow. */
@media (max-width: 800px) {
  #MainZone .news-related .news-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  #MainZone .news-detail__header h1 {
    font-size: 1.75rem;
  }

  #MainZone .news-detail__meta {
    font-size: 0.8125rem;
    gap: 6px 16px;
  }

  #MainZone .news-detail__hero {
    margin-bottom: 1.25rem;
    border-radius: 6px;
  }

  #MainZone .news-related__heading {
    font-size: 1.25rem;
  }

  #MainZone .news-featured {
    padding: 36px 20px;
    margin-top: 36px;
  }

  #MainZone .news-featured__heading {
    font-size: 1.5rem;
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  #MainZone .news-detail__header h1 {
    font-size: 1.5rem;
  }

  #MainZone .news-detail__meta .label-style {
    font-size: 0.6875rem;
  }

  #MainZone .news-detail__hero {
    border-radius: 4px;
    margin-bottom: 1rem;
  }

  #MainZone .news-card--compact .news-card__body {
    padding: 12px 14px 14px;
  }

  #MainZone .news-card--compact .news-card__title {
    font-size: 0.9375rem;
  }

  #MainZone .news-related__heading {
    font-size: 1.125rem;
  }

  /* Collapse related grid back to 1-up on true mobile */
  #MainZone .news-related .news-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  #MainZone .news-featured {
    padding: 28px 16px;
    margin-top: 28px;
  }

  #MainZone .news-featured__heading {
    font-size: 1.375rem;
    margin-bottom: 16px;
  }
}