/* newsroom.css - page-specific styles for newsroom.html (prefix: s-news-) */

.s-section { --s-section-y: 64px; }
#news { padding-top: 40px; }

/* Tabs: text buttons with an underline on the active one */
.s-news-tabs {
  display: flex;
  gap: 32px;
  border-bottom: 1px solid var(--s-line);
}
.s-news-tab {
  position: relative;
  padding: 14px 0 16px;
  font-size: 17px;
  font-weight: 500;
  color: var(--s-ink-3);
  transition: color .2s;
}
.s-news-tab:hover { color: var(--s-ink); }
.s-news-tab[aria-selected="true"] { color: var(--s-ink); font-weight: 700; }
.s-news-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--s-ink);
}
.s-news-tab__count {
  margin-left: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--s-ink-3);
}

/* Cards: image, meta line, title. The whole card is the link. */
.s-news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 28px;
  margin-top: 40px;
}
.s-news-card { display: block; }
.s-news-card[hidden] { display: none; }
.s-news-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 6px;
  background: var(--s-photo);
}
.s-news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--s-ease);
}
.s-news-card:hover .s-news-card__media img { transform: scale(1.04); }
.s-news-card__meta {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-top: 16px;
  font-size: 14px;
  color: var(--s-ink-3);
}
.s-news-card__kind { font-weight: 600; color: var(--s-ink-2); }
.s-news-card__title {
  margin-top: 8px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--s-ink);
  text-wrap: pretty;
}
.s-news-card:hover .s-news-card__title { text-decoration: underline; text-underline-offset: 4px; }
.s-news-card__outlet { display: block; margin-top: 6px; font-size: 14px; color: var(--s-ink-3); }

.s-news-empty { margin-top: 40px; color: var(--s-ink-3); }

@media (max-width: 1023px) {
  .s-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
}
@media (max-width: 767px) {
  .s-section { --s-section-y: 48px; }
  #news { padding-top: 28px; }
  .s-news-tabs { gap: 24px; }
  .s-news-tab { font-size: 16px; padding: 12px 0 14px; }
  .s-news-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 28px; }
  .s-news-card__title { font-size: 18px; }
}