/* my-carousel.css - responsive carousel styles */
.my-carousel { width:100%; padding: 12px 0; box-sizing:border-box; }
.swiper-wrapper { align-items: stretch; }
.swiper-slide { display:flex; justify-content:center; padding:8px; box-sizing:border-box; }
.card {
  display:flex;
  flex-direction:column;
  width: 100%;
  max-width: 320px;
  min-height: 260px;
  border-radius: 10px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: 0 12px 26px rgba(0,0,0,0.08); }
.card-media img { width:100%; height:160px; object-fit:cover; display:block; }
.card-body { padding:12px; display:flex; flex-direction:column; gap:8px; flex:1 1 auto; }
.card-title { font-size:1.05rem; margin:0; word-break:break-word; }
.card-excerpt { font-size:0.9rem; color:#444; margin:0; }

/* Mobile responsiveness */
@media (max-width:640px) {
  .card { max-width:100%; min-height:auto; }
  .card-media img { height:180px; }
}

/* Navigation buttons */
.my-carousel .swiper-button-prev,
.my-carousel .swiper-button-next {
  width:44px; height:44px; border-radius:50%; background:rgba(0,0,0,0.55); color:#fff;
  display:flex; align-items:center; justify-content:center; transition:opacity 0.18s ease, transform 0.18s ease;
}

/* Hide nav when class hide-nav is present (tablet/mobile) */
.my-carousel.hide-nav .swiper-button-prev,
.my-carousel.hide-nav .swiper-button-next { display:none; }

/* Ensure pagination dots are not too large */
.swiper-pagination-bullet { width:8px; height:8px; opacity:0.8; }