/* Category-only photo layer. Existing hero sizing/spacing and Marcellus/Noto type remain native. */
.category-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  color: #fff;
  background: #78756f;
}

.category-banner > .category-banner__picture {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.category-banner > .category-banner__picture > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: var(--category-banner-position, 50% 50%);
}

/* Luminous room edges, with a consistent local shade beneath the real HTML copy. */
.category-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 72%, rgba(26, 29, 27, .70) 0%, rgba(26, 29, 27, .60) 36%, rgba(26, 29, 27, .10) 90%),
    linear-gradient(180deg, rgba(26, 29, 27, .16), rgba(26, 29, 27, .20) 45%, rgba(26, 29, 27, .40));
}

.category-banner > :not(.category-banner__picture) {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.category-banner h1,
.category-banner p,
.category-banner a {
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
  text-wrap: pretty;
}

.category-banner h1 {
  color: #fff;
  text-shadow: 0 2px 22px rgba(26, 29, 27, .22);
}

.category-banner.page-hero p:not(.kicker),
.category-banner.page-hero .kicker {
  color: #fff;
}

/* Events' inline styles are retained; override only the isolated leading header. */
.event-page__head.category-banner {
  border-bottom-color: rgba(222, 208, 173, .38);
}

.event-page__head.category-banner .event-page__eyebrow,
.event-page__head.category-banner .event-page__period,
.event-page__head.category-banner .event-page__period strong,
.event-page__head.category-banner .event-page__period a {
  color: #fff;
}

/* Explicit notices remain on their original light panels with original dark text. */
.event-page__head.category-banner .event-page__notice {
  text-shadow: none;
}

.category-banner a:focus-visible {
  outline: 2px solid var(--gold-light, #ded0ad);
  outline-offset: 4px;
}

@media (max-width: 767px) {
  .category-banner > .category-banner__picture > img {
    object-position: var(--category-banner-mobile-position, 50% 50%);
  }

  .category-banner::before {
    background:
      linear-gradient(180deg, rgba(26, 29, 27, .42), rgba(26, 29, 27, .64) 55%, rgba(26, 29, 27, .68));
  }

  .category-banner h1,
  .category-banner p {
    max-width: 100%;
  }

  .category-banner .button {
    max-width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}