/* ===========================
   Full-bleed section wrapper
   =========================== */
.sdbg-featured-swiper {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}

.sdbg-featured-swiper h2 {
  position: relative;
  z-index: 999; /* keeps heading above bg/slider */
}

/* Base container */
.sdbg-featured-swiper {
  position: relative;
  overflow: hidden;
}

/* ========================================
   Blurred background (no dark overlay)
   ======================================== */
.sdbg-featured-swiper .slider-background {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.10;            /* subtle, per your style */
  max-width: 100vw;
  z-index: 0;
  transition: background-image .5s ease;
}

/* ========================================
   Swiper viewport respects the height cap
   ======================================== */
.sdbg-featured-swiper .swiper {
  position: relative; z-index: 1;
  width: 100%;
  height: var(--slider-h);   /* <- key: section never gets too tall */
  display: flex; align-items: center;
  overflow: visible;
  max-width: unset;
}

/* Slides fill the viewport height so content never pushes it taller */
.sdbg-featured-swiper .swiper-slide {
  background: transparent;
  display: flex; justify-content: center; align-items: center;
  height: 100%;
  width: 30vw; /* healthy min, capped max width for portrait */
  max-width: 100%;
}
@media (max-width: 1199px) {
    .sdbg-featured-swiper .swiper-slide {
        width: 36vw; /* healthy min, capped max width for portrait */
    }
}
@media (max-width: 959px) {
    .sdbg-featured-swiper .swiper-slide {
        width: 45vw; /* healthy min, capped max width for portrait */
    }
}
@media (max-width: 767px) {
    .sdbg-featured-swiper .swiper-slide {
        width: 60vw; /* healthy min, capped max width for portrait */
    }
}
@media (max-width: 599px) {
    .sdbg-featured-swiper .swiper-slide {
        width: 85vw; /* healthy min, capped max width for portrait */
    }
}

/* ========================================
   Card layout: image + caption + actions
   ======================================== */
.sdbg-featured-swiper .slide-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto auto; /* image grows; caption + actions sit below */
  align-items: end;
  text-align: center;
}

/* Portrait media: 4/5 (less tall than 9/16 to keep section balanced) */
.sdbg-featured-swiper .slide-content img {
  width: 100%;
  aspect-ratio: 4 / 5;      /* portrait */
  height: auto;
  object-fit: cover;
  box-shadow: 0 16px 54px rgba(0,0,0,.35);
  display: block;
}

/* Caption only on active */
.sdbg-featured-swiper .caption {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  color: var(--wp--preset--color--theme-primary);
  margin-top: 1rem;  /* slightly tighter to save height */
  margin-bottom: 1rem;
  font-family: var(--wp--preset--font-family--playfair-display);
  font-size: var(--wp--preset--font-size--m);
  font-style: italic;
  line-height: 1.2;
  text-transform: capitalize;
}
.sdbg-featured-swiper .swiper-slide-active .caption {
  opacity: 1;
  pointer-events: auto;
  margin-top: 1.5rem;
}

/* Remove default 3D shadows */
.sdbg-featured-swiper .swiper-3d .swiper-slide-shadow-right,
.sdbg-featured-swiper .swiper-3d .swiper-slide-shadow-left { background: none; }

/* ========================================
   Navigation (custom SVG buttons)
   ======================================== */
/* Hide Swiper's default ::after glyphs */
.sdbg-featured-swiper .swiper-button-next::after,
.sdbg-featured-swiper .swiper-button-prev::after { content: none; }

/* Custom nav buttons */
.sdbg-featured-swiper .nav-btn {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 1px solid var(--wp--preset--color--theme-primary);
  border-radius: 100%;
  background: none;
  color: var(--wp--preset--color--theme-primary); /* currentColor -> SVG fill */
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.sdbg-featured-swiper .nav-btn svg {
  width: 24px; height: 24px;
  fill: currentColor;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
  transition: all 0.3s ease-in-out;
}
.sdbg-featured-swiper .nav-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
@media (hover:hover) {
  .sdbg-featured-swiper .nav-btn:hover {
    color: var(--wp--preset--color--theme-secondary-2);
    border-color: var(--wp--preset--color--theme-secondary-2);
  }
}

/* ========================================
   Hide raw Query Loop (source for JS)
   ======================================== */
.sdbg-featured-swiper .wp-block-post-template {
  position: absolute; width:1px; height:1px; overflow:hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Prevent featured-image links from hijacking clicks inside the slider */
.sdbg-featured-swiper .wp-block-post-featured-image a { pointer-events: none; }

/* ========================================
   Read-more button (actions)
   ======================================== */
.sdbg-featured-swiper .slide-actions {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  margin-top: .5rem;
}
.sdbg-featured-swiper .swiper-slide-active .slide-actions {
  opacity: 1;
  pointer-events: auto;
}

.sdbg-featured-swiper .read-more {
  position: relative;
  margin: 0 auto;
  font-family: var(--wp--preset--font-family--montserrat);
  font-size: var(--wp--preset--font-size--xs);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--wp--preset--color--theme-primary);
  text-decoration: none;
  padding: .5em 1em;

  background: linear-gradient(
    to top,
    var(--wp--preset--color--theme-secondary-2) 100%,
    transparent 0%
  );
  background-position: bottom;
  background-size: 100% 0%;
  background-repeat: no-repeat;
  transition: background-size 0.4s ease, color 0.4s ease;
}

.sdbg-featured-swiper .read-more::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--wp--preset--color--theme-secondary-2);
}

.sdbg-featured-swiper .read-more:hover {
  background-size: 100% 100%;
}
.sdbg-featured-swiper .read-more:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}