.swiper-wrapper {
  margin-bottom: 20px;
}

.bns-section {
  padding: 40px 20px;
}

.bns-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.bns-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.bns-nav {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  /* Prevent shrinking */
}

/* === ARROWS (Matched to Events) === */
.bns-nav .bns-prev,
.bns-nav .bns-next {
  width: 36px;
  height: 36px;
  background: #1e3a8a;
  color: #fff;
  border: none;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s;
  font-size: 18px;
  line-height: 1;
  padding-bottom: 2px;
  position: relative;
  /* Ensure z-index works */
  z-index: 10;
}

.bns-nav .bns-prev:hover,
.bns-nav .bns-next:hover {
  background: #2e55cc;
}

/* === CARD === */
.swiper-slide {
  height: auto;
  display: flex;
}

.bns-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #E9F0FF;
  /* Light Blue */
  border-radius: 24px;
  overflow: hidden;
  text-align: left;
  padding-bottom: 0;
  height: 100%;
  width: 100%;
  transition: background 0.3s, transform 0.3s;
}

.bns-card:hover {
  background: #385DA8;
  /* Dark Blue */
  color: #fff;
}

/* === IMAGEN === */
.bns-image {
  width: 100%;
  height: 250px;
  overflow: hidden;
  padding: 20px 20px 0 20px;
  /* Padding inside card logic */
}

.bns-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px !important;
}

/* === INFO === */
.bns-info {
  padding: 20px;
  flex: 1;
}

.bns-info h3 {
  margin-top: 0;
  color: #172748;
  font-size: 20px;
  font-weight: 700;
  transition: color 0.3s;
}

.bns-card:hover .bns-info h3 {
  color: #fff;
}

.bns-date {
  color: #555;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
  transition: color 0.3s;
}

.bns-card:hover .bns-date {
  color: rgba(255, 255, 255, 0.8);
}

.bns-excerpt {
  color: #333;
  margin-bottom: 0;
  transition: color 0.3s;
}

.bns-card:hover .bns-excerpt {
  color: #fff;
}


.bns-footer {
  padding: 0 20px 20px 20px;
  text-align: left;
}

.bns-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #385DA8;
  color: #fff;
  padding: 10px 24px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  border: 2px solid transparent;
  transition: all 0.3s;
}

.bns-btn:hover {
  background: #2b4ea1;
  /* Slightly darker */
  color: #fff;
}

/* On card hover, button might change or stay same. 
   Reference image shows button is blue inside white card (before hover).
   If card is dark blue on hover, button might need contrast or just stay blue/white.
   Let's keep it blue for now.*/

.bns-card:hover .bns-btn {
  background: #fff;
  color: #385DA8;
}

/* === PAGINACIÓN === */
.swiper-pagination {
  margin-top: 15px;
}

.swiper-pagination-bullet {
  background: #ccc;
  opacity: 1;
  width: 8px;
  height: 8px;
  margin: 0 5px !important;
}

.swiper-pagination-bullet-active {
  background: #385DA8;
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
  .bns-image {
    height: 220px;
  }
}

@media (max-width: 768px) {
  .bns-image {
    height: 200px;
  }
}