/* static/css/banners.css */
/* Only affects elements rendered by templates/components/_banners.html */

/* wrapper spacing */
.portal-banners { margin-bottom: 12px; }
.portal-banners:last-child { margin-bottom: 0; }

/* card perimeter (optional) */
.banner-card{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(16,24,40,.10); /* subtle perimeter */
  background: transparent;
}

/* fixed slot heights (hero is thicker now) */
.banner-hero .banner-media{
  height: 280px;           /* <-- thicker (adjust 220–320) */
  width: 100%;
  overflow: hidden;
  background: transparent; /* <-- no gray fill */
}

.banner-side .banner-media{
  height: 150px;
  width: 100%;
  overflow: hidden;
  background: transparent;
}

/* fill slot, no letterbox */
.banner-media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;       /* <-- key change (no gray) */
  object-position: center;
}

/* overlay */
.banner-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
}

/* carousel tweaks */
.banner-carousel .carousel-control-prev,
.banner-carousel .carousel-control-next{ width: 10%; }
.banner-carousel .carousel-indicators{ margin-bottom: .4rem; }