.newsroom-section {
  background-color: rgb(var(--color-light));
  box-sizing: border-box;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-top: var(--space-5);
  padding-bottom: var(--space-10);
}

.newsroom-section__inner {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 var(--space-2);
}

.newsroom-section__inner header {
  margin-bottom: var(--space-2);
  color: rgb(var(--color-grey));
}

/* min-height, not a fixed height - a floor so short cards still match the
   original design size, not a cap that clips a long title. Combined with
   the base .content-card's own height: 100% (content-card.css, not
   overridden here anymore), each card still stretches to fill
   .newsroom-teaser__recent's flex row (default align-items: stretch) up to
   whichever sibling card ends up tallest, so a row's cards stay
   consistent-height with each other without any of them cutting content
   off. */
.press-release-cards .content-card {
  display: flex;
  flex-direction: column;
  min-height: 252px;
}

@media (max-width: 767px) {
  .press-release-cards .content-card {
    min-height: 364px;
  }
}

.press-release-cards .content-card > * {
  margin: 0;
}
.press-release-cards .content-card > * + * {
  margin-top: var(--space-2);
}
.press-release-cards .content-card__heading {
  padding-bottom: 0;
}

/* Whole card is clickable (js/newsroom-card.js) when it has a real link
   (title wraps an <a> - see node--press-release--card.html.twig); cards
   with no field_pdf render a plain, non-interactive title and stay
   unaffected. Kept as a hover/focus affordance only - the click handling
   itself lives in JS since CSS alone can't distinguish a genuine click
   from the mouseup that ends a text-selection drag. */
.press-release-cards .content-card:has(.newsroom-card__link) {
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}
.press-release-cards .content-card:has(.newsroom-card__link):hover {
  box-shadow: 0 2px 8px rgb(var(--color-grey) / 0.25);
}
.newsroom-card__link {
  color: inherit;
  text-decoration: none;
}
.newsroom-card__link:focus-visible {
  outline: 2px solid rgb(var(--color-main-blue-light));
  outline-offset: 2px;
}

/* Heading is deliberately NOT line-clamped - a long title displays in
   full, wrapping onto as many lines as it needs, rather than being cut off
   at 2 lines with an ellipsis. The description (below) was previously
   clamped to 2 lines the same way the heading isn't - removed so the full
   description is always visible; the card's own min-height is a floor, not
   a cap (see .press-release-cards .content-card above), so it grows to fit
   instead of clipping. */
.press-release-cards .content-card__heading {
  line-height: 125%;
}
.press-release-cards .content-card__subtext {
  line-height: 1.5;
  color: rgb(var(--color-grey));
}

.newsroom-list .views-row + .views-row {
  margin-top: var(--space-3);
}

/* Wraps the badge + date so they sit side by side instead of stacking - the
   badge is inline-block but the date is a <p> (block-level), so without
   this they'd render on separate lines regardless of the badge's own
   display value. */
.newsroom-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* .content-card__date's own bottom margin (content-card.css) is meant for
   stacked contexts elsewhere (About/Careers cards) - in this flex row it
   would offset the date a few px above vertical-center with the badge, so
   it's zeroed out here only. */
.newsroom-card__meta .content-card__date {
  margin: 0;
}

.newsroom-card__badge {
  display: inline-block;
  background-color: rgb(var(--color-main-blue-light));
  color: rgb(var(--color-white));
  font-size: 12px;
  font-weight: var(--font-weight-h4);
  border-radius: 4px;
  padding: 4px 8px;
}