/* =========================
   Banners section
   ========================= */

.banners{
  margin: 16px 0 26px;
}

.banners__grid{
  display:grid;
  gap: var(--gap);
  grid-template-columns: 2fr 1fr;
}

@media (max-width: 980px){
  .banners__grid{ grid-template-columns: 1fr; }
}

/* Banner card */
.banner{
  position: relative;
  display:block;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  overflow:hidden;
  box-shadow: var(--shadow);
  transition: transform .14s ease, border-color .14s ease;
  min-height: 210px;
}

.banner:hover{
  transform: translateY(-2px);
  border-color: rgba(59,130,246,.35);
}

.banner__media{
  height: 100%;
}

.banner img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
}

.banner__media-fallback{
  width:100%;
  height:100%;
  background:
    radial-gradient(700px 240px at 30% 20%, rgba(59,130,246,.25), transparent 60%),
    radial-gradient(700px 240px at 80% 10%, rgba(34,197,94,.18), transparent 60%),
    rgba(255,255,255,.02);
}

/* Dark overlay for text readability */
.banner__overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.62));
}

.banner__badge{
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  font-weight: 900;
}

.banner__title{
  margin:0;
  font-size: 18px;
  line-height: 1.18;
  letter-spacing: -.02em;
  color: rgba(255,255,255,.96);
}

.banner__sub{
  margin:0;
  color: rgba(255,255,255,.80);
  font-size: 13px;
}

.banner__cta{
  margin-top: 4px;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.95);
  font-weight: 900;
  font-size: 13px;
}

/* Make the right banner smaller (2nd column) look balanced */
.banners__grid > .banner:nth-child(2){
  min-height: 210px;
}