/* ==========================================================
   Riverport Business Club - Benefits of Networking
   hero > why it works (white) > what membership brings (grey)
   > learning + local (white) > CTA (dark) > member circles > footer
   ========================================================== */

.bn-lead { font-size: clamp(1.08rem, 1rem + 0.35vw, 1.25rem); font-weight: 500; color: #3a3a3a; line-height: 1.65; }

.bn-intro__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.bn-quote { margin: 0; background: var(--grey); border-radius: var(--radius-lg); padding: clamp(1.75rem, 3vw, 2.5rem); border-left: 3px solid var(--brand); }
.bn-quote__mark { color: var(--brand); font-size: 1.6rem; margin-bottom: 1rem; }
.bn-quote blockquote { margin: 0 0 1rem; }
.bn-quote blockquote p { margin: 0; font-size: 1.1rem; line-height: 1.6; font-weight: 500; color: #3a3a3a; }
.bn-quote figcaption { font-weight: 800; color: var(--charcoal); }

.bn-brings__head { text-align: center; margin-bottom: var(--stack); }
.bn-brings__head .rp-rule { margin-bottom: 0; }
.bn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.bn-card {
  display: flex; gap: 1.25rem; align-items: flex-start; min-width: 0;
  background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: clamp(1.5rem, 2.6vw, 2rem);
}
.bn-card__icon { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; flex-shrink: 0; border-radius: 50%; background: var(--charcoal); color: var(--brand); font-size: 1.15rem; }
.bn-card__title { font-size: clamp(1.08rem, 1rem + 0.3vw, 1.2rem); font-weight: 800; margin: 0.35rem 0 0.5rem; }
.bn-card p { margin: 0; font-size: 1rem; }

.bn-more__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 6vw, 5rem); }
.bn-topics { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1.5rem; }
.bn-topics li { padding: 0.4rem 0.9rem; border-radius: 999px; background: var(--brand-tint); color: #3a3a3a; font-size: 0.925rem; font-weight: 600; }

@media (max-width: 900px) {
  .bn-intro__grid, .bn-more__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .bn-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .bn-card { flex-direction: column; gap: 0.75rem; }
}