/* Previously gated categories now receive the same mobile containment checks. */
@media (max-width: 780px) {
  body[data-category="community"] :is(.communityHub, .communityDetail) > *,
  body[data-category="digital"] .dmPage > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body[data-category="community"] :is(.communityHero, .communityDetailHero) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body[data-category="community"] :is(.communityHero__copy, .communityHero__trust) {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body[data-category="community"] .communityHero__copy h1 {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  body[data-category="community"] .communityHero__actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: visible !important;
  }
  body[data-category="community"] .communityHero__actions > .communityBtn {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    padding-block: 10px;
    text-align: center;
  }
  body[data-category="community"] .communityHero__trust {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: visible !important;
  }
  body[data-category="community"] .communityTabs[data-cone-app-navigation] {
    scrollbar-width: none;
  }
  body[data-category="community"] .communityTabs[data-cone-app-navigation]::-webkit-scrollbar {
    display: none;
  }
  body[data-category="community"] :is(.communityComposerMediaMenu__option, .communityComposerShortToggle) {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  body[data-category="community"] .communityComposerShortToggle > span {
    min-width: 0;
  }
  body[data-category="digital"] .dmDiscover {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}
/* The original hero kept a dark background after switching to light text colors. */
html[data-theme="light"] body[data-category="community"] :is(.communityHero, .communityDetailHero) {
  background: radial-gradient(circle at 90% 15%, rgba(80, 210, 160, .15), transparent 45%),
    linear-gradient(135deg, #ffffff, #edf5fb) !important;
}
html[data-theme="light"] body[data-category="community"] :is(.communityHero__copy h1, .communityDetailHero h1) {
  color: #0f172a !important;
}
html[data-theme="light"] body[data-category="community"] .communityHero__trust > :is(div, a) {
  background: rgba(255, 255, 255, .8) !important;
  color: #23475d !important;
}
html[data-theme="light"] body[data-category="community"] .communityTabs {
  background: rgba(255, 255, 255, .96) !important;
}
html[data-theme="light"] body[data-category="community"] .communityTabs a.is-active {
  color: #065f46 !important;
}
html[data-theme="light"] body[data-category="community"] .communityHero__actions > .communityBtn:not(.communityBtn--primary) {
  background: #ffffff !important;
  color: #23475d !important;
  border-color: #cbd5e1 !important;
}