/* Community headers use the same vertical rhythm as the centered column header. */
.community-page .community-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px !important;
  min-height: 300px;
  padding: 55px 24px 45px !important;
  text-align: center;
}

.community-page .community-hero .eyebrow {
  margin: 0 0 12px !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
}

.community-page .community-hero h1 {
  margin: 0 !important;
  font-size: 64px !important;
  line-height: 1.18 !important;
}

html[data-community-page="faq"] .community-hero .community-tabs:last-of-type {
  position: static;
  width: min(1240px, calc(100% - 48px));
  max-width: calc(100% - 48px);
  margin: 28px auto 0 !important;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 28px;
}

@media (min-width: 901px) {
  html[data-community-page="faq"] .community-hero {
    height: auto !important;
    min-height: 280px;
    padding: 55px 24px 36px !important;
  }
}

html[data-community-page="event"] .event-card h2 {
  margin: 18px 0 5px !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

@media (max-width: 900px) {
  .community-page .community-hero {
    height: 250px !important;
    min-height: 250px;
    padding: 48px 20px 34px !important;
  }

  .community-page .community-hero h1 {
    font-size: clamp(40px, 10vw, 52px) !important;
  }

  html[data-community-page="faq"] .community-hero {
    height: auto !important;
    min-height: 0;
    padding: 48px 20px 24px !important;
  }

  html[data-community-page="faq"] .community-hero .community-tabs:last-of-type {
    width: 100%;
    max-width: none;
    margin-top: 24px !important;
    justify-content: flex-start;
    gap: 8px 16px;
  }
}