/* ================================================================
   HERO SWIPER — front-page top slider (mobile-first, simple flow)
   ================================================================ */

/* The slider container itself fills its column. */
.heroSwiper {
  position: relative;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: #111;            /* shows behind the image while it loads */
}

/* Each slide owns its own aspect ratio — that's what gives the slider height.
   No absolute children, just normal flow inside the slide. */
.heroSwiper .swiper-slide {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111;
  overflow: hidden;
  display: block;
}

/* The <a> wrapping each slide. position-relative is also added by Bootstrap
   so the overlay can absolute-position itself. */
.heroSwiper .hero-box {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: #fff;
}

/* The featured image fills the slide. Important: !important on the
   width/height because style.css's `.hero-img { width: 100%; border-radius: 6px }`
   and Bootstrap's `.w-100` (which is also on the element) compete for the
   width property. Force ours to win across all viewports. */
.heroSwiper .hero-img,
.heroSwiper .hero-img--ph {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover;
  border-radius: 0;
}
.heroSwiper .hero-img--ph {
  background: linear-gradient(135deg, #2c3e50 0%, #4a5568 100%);
}

/* Title + meta gradient overlay anchored to the bottom of the slide. */
.heroSwiper .hero-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 60px 20px 18px;
  background: linear-gradient(to top, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .35) 60%, transparent 100%);
  color: #fff;
  pointer-events: none; /* let clicks reach the parent <a> */
}

.heroSwiper .badge-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: #e60023;
  color: #fff;
  padding: 3px 10px;
  border-radius: 3px;
  margin-bottom: 8px;
}
.heroSwiper .badge-cat a { color: #fff; text-decoration: none; }

.heroSwiper .hero-title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
  color: #fff;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.heroSwiper .hero-meta {
  font-size: 12.5px;
  color: rgba(255, 255, 255, .85);
  margin: 0;
}
.heroSwiper .hero-meta span { color: #fff; font-weight: 600; }

/* Nav arrows — translucent circles. Stay inside the slide bounds. */
.heroSwiper .swiper-button-prev,
.heroSwiper .swiper-button-next {
  width: 38px;
  height: 38px;
  margin-top: -19px;
  background: rgba(0, 0, 0, .45);
  border: 0;
  border-radius: 50%;
  color: #fff;
  transition: background .15s ease, transform .15s ease;
  z-index: 3;
}
.heroSwiper .swiper-button-prev:hover,
.heroSwiper .swiper-button-next:hover {
  background: rgba(0, 0, 0, .75);
  transform: scale(1.05);
}
.heroSwiper .swiper-button-prev::after,
.heroSwiper .swiper-button-next::after {
  font-size: 16px;
  font-weight: 800;
}

.heroSwiper .swiper-pagination {
  bottom: 6px !important;
  z-index: 3;
}
.heroSwiper .swiper-pagination-bullet {
  background: #fff;
  opacity: .55;
  transition: opacity .15s ease, transform .15s ease;
}
.heroSwiper .swiper-pagination-bullet-active {
  opacity: 1;
  transform: scale(1.2);
}

/* ── Mobile / tablet ── */
@media (max-width: 991.98px) {
  .heroSwiper .hero-overlay { padding: 50px 16px 16px; }
  .heroSwiper .hero-title   { font-size: 18px; }
}
@media (max-width: 575.98px) {
  /* On phones the column goes full-width and the slider already gets the
     screen width — keep the 16:9 slot for predictable height. */
  .heroSwiper .hero-overlay { padding: 40px 14px 12px; }
  .heroSwiper .hero-title   { font-size: 15px; -webkit-line-clamp: 3; }
  .heroSwiper .hero-meta    { font-size: 11.5px; }
  .heroSwiper .swiper-button-prev,
  .heroSwiper .swiper-button-next { width: 30px; height: 30px; margin-top: -15px; }
  .heroSwiper .swiper-button-prev::after,
  .heroSwiper .swiper-button-next::after { font-size: 13px; }
}