/* ============================================================
   sections/sbc-banner.css  —  Summer Bible Classes top banner
   Full-width image, 475px tall (shorter on small screens),
   with a top scrim for header legibility. Inlined in the page.
   ============================================================ */
.sbc-banner {
  position: relative; width: 100%;
  height: clamp(280px, 48vh, 475px);
  overflow: hidden;
  background: var(--brown-deep);   /* fallback before image loads */
}
.sbc-banner__bg { position: absolute; inset: 0; z-index: 0; }
.sbc-banner__bg img { width: 100%; height: 100%; object-fit: cover; }
.sbc-banner::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(20, 14, 10, 0.45) 0%, rgba(20, 14, 10, 0.12) 32%, transparent 60%);
}