/* stylelint-disable selector-class-pattern */

/* =========================================================
   JSC COMPONENT CONTRACT
   File: jsc-idx-single-gallery.css
   Layer: IDX / Single Listing / Gallery
   Version: 2.1

   PURPOSE
   ----------------------------------------------------------------
   Owns:
   - Single listing slideshow shell
   - Slide image treatment
   - Overlay
   - Owl nav button styling
   - Single custom prev / next arrows
========================================================= */

:root{
  --jsc-idx-single-gallery-radius: 28px;
  --jsc-idx-single-gallery-min-h: clamp(360px, 56vw, 760px);
  --jsc-idx-single-gallery-nav-size: 52px;
  --jsc-idx-single-gallery-nav-offset: 20px;
  --jsc-idx-single-gallery-nav-icon-size: 18px;
  --jsc-idx-single-gallery-overlay:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.18),
      rgba(0, 0, 0, 0.02) 38%,
      transparent 68%
    );
}

:is(
  .jsc-idx-single-shell,
  body.page-id-2147 .flexmls-listing-details.flexmls-v2-widget
) .slideshow-wrapper{
  position: relative;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid var(--jsc-idx-single-border);
  border-radius: var(--jsc-idx-single-gallery-radius);
  background: var(--jsc-idx-single-surface);
  box-shadow: var(--jsc-idx-single-shadow-lg);
}

:is(
  .jsc-idx-single-shell,
  body.page-id-2147 .flexmls-listing-details.flexmls-v2-widget
) #listing-slideshow{
  position: relative;
}

:is(
  .jsc-idx-single-shell,
  body.page-id-2147 .flexmls-listing-details.flexmls-v2-widget
) #listing-slideshow .owl-stage-outer{
  overflow: hidden;
  border-radius: inherit;
}

:is(
  .jsc-idx-single-shell,
  body.page-id-2147 .flexmls-listing-details.flexmls-v2-widget
) #listing-slideshow .listing-photo,
:is(
  .jsc-idx-single-shell,
  body.page-id-2147 .flexmls-listing-details.flexmls-v2-widget
) #listing-slideshow .item{
  position: relative;
  min-height: var(--jsc-idx-single-gallery-min-h);
  background: rgba(18, 20, 26, 0.04);
}

:is(
  .jsc-idx-single-shell,
  body.page-id-2147 .flexmls-listing-details.flexmls-v2-widget
) #listing-slideshow img{
  display: block;
  width: 100%;
  height: var(--jsc-idx-single-gallery-min-h);
  object-fit: cover;
  object-position: center;
}

:is(
  .jsc-idx-single-shell,
  body.page-id-2147 .flexmls-listing-details.flexmls-v2-widget
) #listing-slideshow .listing-photo::after,
:is(
  .jsc-idx-single-shell,
  body.page-id-2147 .flexmls-listing-details.flexmls-v2-widget
) #listing-slideshow .item::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--jsc-idx-single-gallery-overlay);
}

/* =========================================================
   NAV
========================================================= */

:is(
  .jsc-idx-single-shell,
  body.page-id-2147 .flexmls-listing-details.flexmls-v2-widget
) #listing-slideshow .owl-nav{
  pointer-events: none;
}

:is(
  .jsc-idx-single-shell,
  body.page-id-2147 .flexmls-listing-details.flexmls-v2-widget
) #listing-slideshow .owl-prev,
:is(
  .jsc-idx-single-shell,
  body.page-id-2147 .flexmls-listing-details.flexmls-v2-widget
) #listing-slideshow .owl-next{
  pointer-events: auto;
  position: absolute;
  top: 50%;
  z-index: 3;
  transform: translateY(-50%);
  width: var(--jsc-idx-single-gallery-nav-size);
  height: var(--jsc-idx-single-gallery-nav-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: none;

  font-size: 0;
  line-height: 0;
  color: transparent;
  text-indent: 0;
  overflow: hidden;
  white-space: nowrap;

  transition:
    transform var(--jsc-idx-single-fast) var(--jsc-idx-single-ease),
    background var(--jsc-idx-single-fast) var(--jsc-idx-single-ease),
    border-color var(--jsc-idx-single-fast) var(--jsc-idx-single-ease),
    box-shadow var(--jsc-idx-single-med) var(--jsc-idx-single-ease);
}

:is(
  .jsc-idx-single-shell,
  body.page-id-2147 .flexmls-listing-details.flexmls-v2-widget
) #listing-slideshow .owl-prev{
  left: var(--jsc-idx-single-gallery-nav-offset);
}

:is(
  .jsc-idx-single-shell,
  body.page-id-2147 .flexmls-listing-details.flexmls-v2-widget
) #listing-slideshow .owl-next{
  right: var(--jsc-idx-single-gallery-nav-offset);
}

:is(
  .jsc-idx-single-shell,
  body.page-id-2147 .flexmls-listing-details.flexmls-v2-widget
) #listing-slideshow .owl-prev:hover,
:is(
  .jsc-idx-single-shell,
  body.page-id-2147 .flexmls-listing-details.flexmls-v2-widget
) #listing-slideshow .owl-next:hover{
  transform: translateY(-50%) scale(1.02);
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 10px 24px rgba(18, 20, 26, 0.18);
}

/* kill any native owl text/icon output */
:is(
  .jsc-idx-single-shell,
  body.page-id-2147 .flexmls-listing-details.flexmls-v2-widget
) #listing-slideshow .owl-prev span,
:is(
  .jsc-idx-single-shell,
  body.page-id-2147 .flexmls-listing-details.flexmls-v2-widget
) #listing-slideshow .owl-next span{
  display: none !important;
}

:is(
  .jsc-idx-single-shell,
  body.page-id-2147 .flexmls-listing-details.flexmls-v2-widget
) #listing-slideshow .owl-prev::after,
:is(
  .jsc-idx-single-shell,
  body.page-id-2147 .flexmls-listing-details.flexmls-v2-widget
) #listing-slideshow .owl-next::after{
  content: "";
  display: block;
  width: var(--jsc-idx-single-gallery-nav-icon-size);
  height: var(--jsc-idx-single-gallery-nav-icon-size);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex: 0 0 auto;
}

:is(
  .jsc-idx-single-shell,
  body.page-id-2147 .flexmls-listing-details.flexmls-v2-widget
) #listing-slideshow .owl-prev::after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M11.25 4.5L6.75 9L11.25 13.5' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

:is(
  .jsc-idx-single-shell,
  body.page-id-2147 .flexmls-listing-details.flexmls-v2-widget
) #listing-slideshow .owl-next::after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M6.75 4.5L11.25 9L6.75 13.5' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (max-width: 1199.98px){
  :root{
    --jsc-idx-single-gallery-min-h: clamp(320px, 58vw, 620px);
    --jsc-idx-single-gallery-nav-size: 48px;
  }
}

@media (max-width: 767.98px){
  :root{
    --jsc-idx-single-gallery-radius: 20px;
    --jsc-idx-single-gallery-min-h: clamp(260px, 62vw, 460px);
    --jsc-idx-single-gallery-nav-size: 44px;
    --jsc-idx-single-gallery-nav-offset: 14px;
    --jsc-idx-single-gallery-nav-icon-size: 16px;
  }
}

/* stylelint-enable selector-class-pattern */