/* Member tool banners — bright imagery, optional light scrim */

:root {
  --mbr-banner-min-h: clamp(200px, 26vw, 320px);
  --mbr-strip-h: clamp(100px, 16vw, 152px);
}

/* Full-stage banner (legacy; prefer strip + page title for new layouts) */
.mbr-banner-stage {
  position: relative;
  width: 100%;
  min-height: var(--mbr-banner-min-h);
  overflow: hidden;
  border-bottom: 1px solid rgba(15, 181, 160, 0.22);
  background: linear-gradient(165deg, #0f1a22 0%, #0c1520 40%, #0a121c 100%);
  box-sizing: border-box;
}

.mbr-banner-stage .mbr-banner-asset {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  /* Slightly subdued so UI (titles, ghost buttons nearby) stays legible on bright stock photos */
  filter: brightness(1.02) saturate(1.12) contrast(1.04);
}

/* Scrim — top/center vignette + vertical fade so bright flares and skies don’t wash out controls */
.mbr-banner-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 95% 85% at 50% -5%, rgba(9, 13, 24, 0.62) 0%, transparent 55%),
    radial-gradient(ellipse 70% 55% at 12% 38%, rgba(9, 13, 24, 0.42) 0%, transparent 50%),
    linear-gradient(
      180deg,
      rgba(9, 13, 24, 0.35) 0%,
      rgba(9, 13, 24, 0.08) 42%,
      rgba(9, 13, 24, 0.22) 100%
    );
}

.mbr-banner-stage.mbr-banner-fallback .mbr-banner-asset {
  display: none;
}

.mbr-banner-stage.mbr-banner-fallback {
  background: linear-gradient(145deg, #122428 0%, #0e1c22 45%, #152a2c 100%);
}

/* Short decorative band — image only, no scrim (maximum “shine”) */
.mbr-banner-strip {
  position: relative;
  width: 100%;
  height: var(--mbr-strip-h);
  min-height: unset;
  overflow: hidden;
  border-bottom: 1px solid rgba(15, 181, 160, 0.2);
  background: #0a1218;
  box-sizing: border-box;
}

.mbr-banner-strip .mbr-banner-asset {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  filter: brightness(1.04) saturate(1.14) contrast(1.04);
}

.mbr-banner-strip .mbr-banner-scrim {
  display: none;
}

.mbr-banner-strip.mbr-banner-fallback .mbr-banner-asset {
  display: none;
}

.mbr-banner-strip.mbr-banner-fallback {
  background: linear-gradient(90deg, #142428, #0e1a22, #1a2830);
}

/* Use under a fixed top nav (e.g. Compound Library) */
.mbr-banner-strip--below-fixed-nav {
  margin-top: 56px;
}