/* News & Events page. Loaded by activities/index.html only, with gallery.css for the events
   (photo gallery). Two sections: Latest news (four cards) and Events & photos (cream band). */

/* ---------- Section headings ----------
   A short olive line and a kicker above the title, left-aligned; anything after the text (the
   events filter) sits on the right on wide screens. */
.ne-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  margin-block-end: var(--space-6);
}

.ne-head__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-2);
  color: var(--c-brass-text);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ne-head__kicker::before {
  content: "";
  flex: none;
  inline-size: 1.75rem;
  block-size: 2px;
  border-radius: var(--radius-pill);
  background: var(--c-brass);
}

.ne-head h2 {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.ne-head__meta {
  margin-block-start: var(--space-1);
  color: var(--c-ink-soft);
  font-size: var(--fs-small);
  font-weight: 700;
}

/* ---------- Latest news ----------
   Four white cards: tag (and a "Latest" label on the newest), title, one sentence, and a foot
   line with the date and an optional link to the event's photos. The newest card has an olive
   line along its top. Four across on wide screens, two on tablets, one on phones. */
.news-grid {
  display: grid;
  gap: var(--space-4);
  max-inline-size: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .news-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
  }
}

.news-card article {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  block-size: 100%;
  overflow: hidden;
  padding: var(--space-5);
  border: 1px solid var(--c-rule);
  border-radius: calc(var(--radius-l) - 12px);
  background: var(--c-surface);
  box-shadow: var(--shadow-card);
}

.news-card--latest article::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  block-size: 4px;
  background: var(--c-brass);
}

.news-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.news-card__tag {
  color: var(--c-brass-text);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.news-card__new {
  padding: 0.125rem var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--c-emerald);
  color: var(--c-on-emerald);
  font-size: 0.8125rem;
  font-weight: 700;
}

.news-card h3 {
  font-size: 1.125rem;
  line-height: 1.35;
}

.news-card__text {
  color: var(--c-ink-soft);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.news-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-block-start: auto;
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--c-rule);
  font-size: var(--fs-small);
}

.news-card time {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--c-ink-soft);
  font-weight: 700;
}

.news-card time .icon {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  color: var(--c-brass-text);
}

.news-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: 44px;
  margin-block: calc(var(--space-2) * -1);
  color: var(--c-emerald);
  font-weight: 700;
  text-decoration: none;
}

.news-card__link:hover {
  text-decoration: underline;
  text-decoration-color: var(--c-brass);
  text-underline-offset: 3px;
}

.news-card__link .icon {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

/* Two or four across: the cards in a row share their row tracks (subgrid), so tags, titles,
   texts and the dated foot line up across the row even when a card has no photos link. */
@media (min-width: 640px) {
  .news-card {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
  }

  .news-card article {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    row-gap: var(--space-3);
    block-size: auto;
  }

  .news-card__foot {
    align-self: start;
    margin-block-start: 0;
  }
}

/* ---------- Events & photos: the warm cream band of the Home page ---------- */
.ne-events {
  background: var(--c-cream);
}