/* Scripps Tweaks: media-hub-events-no-gray. The two gray bands of the Media Hub page (News & Events), the Upcoming Events
   section and the Magazine section, on the page background instead of the theme's gray-50. Each section keeps its margins
   and its card row keeps its padding, so the spacing is unchanged; only the bands go. The other sections are already white. */
.mediaHub :is(#events, #magazine).mediaHub__section--gray {
  background-color: transparent;
}

/* The theme told these cards they sit on a gray band (data-surface="grey"), so their tag and the panel that slides up on
   hover are gray-50 to blend in. On the plain background they take the colours the same cards have on a white page. */
.mediaHub :is(#events, #magazine) [data-surface='grey'] .mediaTag {
  background-color: var(--color-white);
}

.mediaHub :is(#events, #magazine) [data-surface='grey'] .mediaCard__content--eventHover .mediaCard__hoverContent {
  background: var(--color-white);
}

@media (hover: hover) {
  .mediaHub :is(#events, #magazine) [data-surface='grey']:has(.mediaCard__link):hover .mediaCard__content {
    background: var(--color-white);
  }
}