/* WDK listing gallery fix: reduce photo cropping, put working prev/next
   arrows on the main photo, and stop the thumbnail strip overlapping the
   text below it. Overrides wp-content/plugins/wpdirectorykit/.../
   wdk-listing-slider.css AND the per-template CSS generated by Elementor
   for the shared "Single Listing" layout
   (wp-content/uploads/elementor/css/post-611.css), which explicitly sets
   `.wdk-listing-slider_arrows{display:none}` and a -78px margin on
   `.banner-thumbs-con` that pulls it up into the content below - both need
   !important to win over that generated stylesheet, which loads after this
   file. NOTE: the plugin's own CSS also loads after this file, so any
   property it also sets (e.g. justify-content on .wdk-listing-slider_arrows)
   needs !important here too, or it silently wins. */

/* Real listing photos range from portrait (~0.9:1) to wide (~2:1), but the
   box itself is a fixed 2.4:1 banner - no single object-fit setting handles
   both ends well: `cover` chops portrait photos down to a sliver, `contain`
   alone left big blank gray gutters on anything narrower than the box.
   Fix: show the full photo uncropped (contain) on top of a blurred, scaled
   copy of the same photo filling the rest of the box, instead of blank
   space - the class/--wdk-bg custom property are set by wdk-gallery-fix.js.
   Scoped to .wdk_listing_slider_ini so it does NOT also match the thumbnail
   <img> tags, which reuse the same "wdk-listing-image" class - matching
   those too was collapsing every thumbnail to a blank box. */
.wdk-listing-slider .wdk_listing_slider_ini .wdk-listing-image-card {
  height: 460px;
  overflow: hidden;
}

.wdk-listing-slider .wdk_listing_slider_ini .wdk-listing-image-card.wdk-has-bg {
  position: relative;
}

.wdk-listing-slider .wdk_listing_slider_ini .wdk-listing-image-card.wdk-has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--wdk-bg);
  background-size: cover;
  background-position: center;
  filter: blur(24px) brightness(0.65);
  transform: scale(1.15);
}

.wdk-listing-slider .wdk_listing_slider_ini .wdk-listing-image:not(.auto_height) {
  height: 460px !important;
  object-fit: contain !important;
  position: relative;
}

/* Prev/next arrows: force them visible (the Elementor template CSS hides
   them) and place them directly on the image, vertically centered at the
   edges, with a solid background so they read as buttons against any photo. */
.wdk-listing-slider .wdk_listing_slider_box {
  position: relative;
}

.wdk-listing-slider .wdk-listing-slider_arrows {
  display: flex !important;
  position: absolute !important;
  top: 50%;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0 !important;
  padding: 0 15px;
  justify-content: space-between !important;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 5;
}

.wdk-listing-slider .wdk-listing-slider_arrows .wdk-listing-slider_arrow {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Thumbnail strip: cancel the -78px negative margin the Elementor template
   applies (that's what was dragging it up into the text below) and force it
   to display on mobile too. */
.wdk-listing-slider .banner-thumbs-con {
  position: static !important;
  bottom: auto;
  margin: 15px 0 0 0 !important;
}

.wdk-listing-slider .banner-thumbs-con .banner-thumbs {
  width: 100% !important;
}

/* wdk-gallery-fix.js unslicks the thumbnail nav and adds this class, turning
   it into a plain horizontally-scrolling row instead - see that file for why
   (slick's centerMode can't cleanly clamp at the first/last photo). Fixed
   thumbnail width so however many fit at the current viewport width show at
   once, with the rest reachable by scrolling. */
.wdk-listing-slider .banner-thumbs-con .banner-thumbs.wdk-native-thumbs {
  display: flex !important;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 4px;
}

.wdk-listing-slider .banner-thumbs-con .banner-thumbs.wdk-native-thumbs .banner-thumb {
  flex: 0 0 130px;
  width: 130px;
  margin-right: 0;
}

/* The plugin hides `.banner-thumbs > .banner-thumb` (direct children) by
   default with !important - that's meant to hide them only briefly, before
   slick wraps each one in .slick-slide (at which point they're no longer
   direct children and the rule stops matching). Unslicking returns them to
   being direct children again, so this needs an explicit override. */
.wdk-listing-slider .banner-thumbs-con .banner-thumbs.wdk-native-thumbs > .banner-thumb {
  display: block !important;
}

.wdk-listing-slider .banner-thumbs-con .banner-thumbs .banner-thumb > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.wdk-listing-slider .banner-thumbs-con .banner-thumbs.wdk-native-thumbs .banner-thumb.is-active {
  border-color: #0074e4;
}

.wdk-listing-slider .banner-thumbs-con .banner-thumbs.wdk-native-thumbs .banner-thumb.is-active:before {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 480px) {
  .wdk-listing-slider .banner-thumbs-con .banner-thumbs.wdk-native-thumbs .banner-thumb {
    flex-basis: 100px;
    width: 100px;
  }
}

@media (max-width: 767px) {
  .wdk-listing-slider .wdk_listing_slider_ini .wdk-listing-image-card {
    height: 300px;
  }

  .wdk-listing-slider .wdk_listing_slider_ini .wdk-listing-image:not(.auto_height) {
    height: 300px !important;
  }
}