/* ------------------------------
   Core container
------------------------------ */

.swiper,
.swiper-inner {
  position: relative;
  width: 100%;
  z-index: 1; 
}



.swiper .swiper-inner {
  overflow: hidden; /* hide overscroll glow while still allowing inner scroll */
}

/* Fade tunables */
.swiper {
  --edge-left: 18px;    /* how wide the left fade is */
  --edge-right: 18px;   /* how wide the right fade is */
}

/* The Post Template UL behaves as the track */
.swiper .swiper-wrapper {
  display: flex !important;       /* override WP grid */
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 16px;                      /* visual gap between cards */
  overflow-x: auto;               /* enable native horizontal scroll */
  overflow-y: hidden;
  scroll-snap-type: x mandatory;  /* snap */
  scroll-behavior: smooth;        /* smooth arrow scrolling */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  

  /* 1) Pad the track so the first slide starts outside the fade */
  padding-inline: var(--edge-left) var(--edge-right);
  /* Make snapping respect that padding too */
  scroll-padding-inline: var(--edge-left) var(--edge-right);

  /* 2) Softer, narrower fades (mask alpha matters; black=show, transparent=hide) */
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0.25) calc(var(--edge-left) * 0.45),
    rgba(0,0,0,0.6)  calc(var(--edge-left) * 0.75),
    rgba(0,0,0,1)    var(--edge-left),
    rgba(0,0,0,1)    calc(100% - var(--edge-right)),
    rgba(0,0,0,0.6)  calc(100% - var(--edge-right) * 0.75),
    rgba(0,0,0,0.25) calc(100% - var(--edge-right) * 0.45),
    rgba(0,0,0,0)    100%
  );
  mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,0.25) calc(var(--edge-left) * 0.45),
    rgba(0,0,0,0.6)  calc(var(--edge-left) * 0.75),
    rgba(0,0,0,1)    var(--edge-left),
    rgba(0,0,0,1)    calc(100% - var(--edge-right)),
    rgba(0,0,0,0.6)  calc(100% - var(--edge-right) * 0.75),
    rgba(0,0,0,0.25) calc(100% - var(--edge-right) * 0.45),
    rgba(0,0,0,0)    100%
  );
}

/* Default slide sizing; JS adjusts via data-* if present */
.swiper .swiper-slide {
  flex: 0 0 auto;                 /* no shrink, no grow */
  width: clamp(260px, 50vw, 420px);
  box-sizing: border-box;
  scroll-snap-align: start;
}


/* Make content clickable */
.swiper, .swiper-wrapper, .swiper-slide, .swiper-slide * { pointer-events: auto; }

/* ------------------------------
   Arrows (optional)
------------------------------ */
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; color: #63856e00;
  background: rgba(0, 0, 0, 0);
  color: #63856E;
  z-index: 30;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.swiper-button-prev { left: .1rem; }
.swiper-button-next { right: .1rem; }
.swiper-button-prev::after { content: "‹"; font-size: 50px; line-height: 1; }
.swiper-button-next::after { content: "›"; font-size: 50px; line-height: 1; }

.swiper-button-prev:focus,
.swiper-button-next:focus,
.swiper-button-prev:active,
.swiper-button-next:active {
  outline: none;
  box-shadow: none;
}

.swiper .swiper-wrapper {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-gutter: stable both-edges;
  padding-bottom: 20px;                 /* moves scrollbar visually lower */
}

/* ------------------------------
   Badges (optional)
------------------------------ */

/* The slide/card is the positioning context */
.listing-card { position: relative; }

/* Overlay container (your Tags block) */
.listing-card .listing-badges{
  position: absolute;
  top: .2rem;
  left: 0rem;
  right: .4rem; 
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0;                /* prevent Gutenberg default margins */
  pointer-events: none;     /* overlay doesn't block swipes/clicks */
}

/* If the Tags block renders a UL, tidy it */
.listing-card .listing-badges .wp-block-post-terms__list{
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin: 0; padding: 0; list-style: none;
}
.listing-card .listing-badges .wp-block-post-terms__separator{ display:none; }

/* Base pill styling (keeps them readable on images) */
.listing-card .listing-badges a{
  display:inline-flex; align-items:center;
  padding:.28rem .6rem;
  border-radius:9999px;
  font-size:.85rem; font-weight:600; line-height:1;
  text-decoration:none;
  color:#fff;
  background: rgba(0,0,0,.55);  /* fallback bg for anything unmatched */
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(2px);
}

/* Hide location/city badges - grouped selector */
.listing-badges a[href*="amherst"],
.listing-badges a[href*="belchertown"],
.listing-badges a[href*="florence"],
.listing-badges a[href*="greenfield"],
.listing-badges a[href*="hadley"],
.listing-badges a[href*="leverett"],
.listing-badges a[href*="northampton"],
.listing-badges a[href*="pelham"],
.listing-badges a[href*="shelburne"],
.listing-badges a[href*="deerfield"],
.listing-badges a[href*="sunderland"] {
  display: none !important;
}

/* 💵 tags with "$" or “price” keywords */
.listing-badges a[href*="%24"], /* URL-encoded $ */
.listing-badges a[href*="month"],
.listing-badges a[href*="price"],
.listing-badges a[href*="rent"],
.listing-badges a[href*="cost"] {
  background: #3d5f48;
  color: #fff;
}

/* 🛏 bedroom-related */
.listing-badges a[href*="bed"],
.listing-badges a[href*="bedroom"] {
  background: #1a5fa8;
  color: #fff;
}

/* 🚿 bathroom-related */
.listing-badges a[href*="bath"],
.listing-badges a[href*="bathroom"] {
  background: #6d3d7f;
  color: #fff;
}

/* 🏠 general "home" or "listing" tags */
.listing-badges a[href*="home"],
.listing-badges a[href*="listing"] {
  background: #b57108;
  color: #fff;
}

/* Optional: disable clicking */
.listing-badges a { pointer-events: none; cursor: default; }

.listing-image {
  overflow: hidden;
  border-radius: 9.2px 9.2px 0 0;
}



/* Mobile: one slide per view, no fades, keep arrows visible */
@media (max-width: 640px) {
  /* Remove fades and padding */
  .swiper {
    --edge-left: 0px;
    --edge-right: 0px;
  }

  .swiper .swiper-wrapper {
    -webkit-mask-image: none;
    mask-image: none;
    padding-inline: 0;
    scroll-padding-inline: 0;
    gap: 0;
  }

  /* Make each slide full width (one at a time) */
  .swiper .swiper-slide {
    width: 100%;
    scroll-snap-align: center; /* Center snapping feels better on mobile */
  }

  /* Keep the arrows visible and usable */
  .swiper-button-prev,
  .swiper-button-next {
    display: grid;             /* ensure they remain visible */
    width: 40px;
    height: 40px;
    font-size: 40px;
    background: rgba(0, 0, 0, 0); /* transparent background */
    color: #63856E;              /* your existing arrow color */
    z-index: 30;
  }
}