/*
  Home · Product Assurance (Ring Carousel, no dependencies)
*/

.xz-home-assurance{
  padding: 12rem 0;
  background: #F6F8FA;
}

.xz-home-assurance .xz-home-sec-title{
  text-align: center;
  margin: 0 0 6rem;
}

.xz-home-assurance .xz-assurance-wrap{
  position: relative;
  margin: 0 auto;
  padding: 0 6rem;
}

/* Fade masks (left/right) */
.xz-home-assurance .xz-assurance-wrap:before,
.xz-home-assurance .xz-assurance-wrap:after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 22%;
  pointer-events: none;
  z-index: 5;
}
.xz-home-assurance .xz-assurance-wrap:before{
  left: 0;
  background: linear-gradient(90deg, #f5f7f9 0%, rgba(245,247,249,0) 100%);
}
.xz-home-assurance .xz-assurance-wrap:after{
  right: 0;
  background: linear-gradient(270deg, #f5f7f9 0%, rgba(245,247,249,0) 100%);
}

.xz-home-assurance .xz-assurance-slider{
  position: relative;
  overflow: visible;
  /* height is set by JS to match current slide */
}

.xz-home-assurance .xz-assurance-slide{
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(280px, 36vw, 620px);
  padding: 0;
  transition:
    transform .52s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity .52s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter .52s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform, opacity;
}

.xz-home-assurance .xz-assurance-card{
  border-radius: 1.6rem;
  padding: 2.6rem 2.8rem;
  min-height: 15rem;
  border: 1px solid rgba(0,0,0,.06);
  background: rgb(1 255 148 / 20%);
  color: inherit;
}

.xz-home-assurance .xz-assurance-title{ margin: 0 0 1rem; }
.xz-home-assurance .xz-assurance-text{ margin: 0; }

/* States */
.xz-home-assurance .xz-assurance-slide.is-current{
  transform: translateX(-50%) scale(1);
  opacity: 1;
  filter: none;
  z-index: 4;
}

.xz-home-assurance .xz-assurance-slide.is-current .xz-assurance-card{
  background: #19813B;
  color: #fff;
  border-color: #19813B;
}

.xz-home-assurance .xz-assurance-slide.is-prev{
  transform: translateX(-165%) scale(.92);
  /* opacity: .22; */
  filter: saturate(.3);
  z-index: 3;
  cursor: pointer;
}

.xz-home-assurance .xz-assurance-slide.is-next{
  transform: translateX(65%) scale(.92);
  /* opacity: .22; */
  filter: saturate(.3);
  z-index: 3;
  cursor: pointer;
}

.xz-home-assurance .xz-assurance-slide.is-hidden{
  transform: translateX(-50%) scale(.86);
  opacity: 0;
  filter: saturate(.2);
  z-index: 1;
  pointer-events: none;
}

/* Nav buttons */
.xz-home-assurance .xz-assurance-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #fff;
  border: 0;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  z-index: 6;
  cursor: pointer;
}

.xz-home-assurance .xz-assurance-prev{ left: clamp(10px, 20%, 240px); }
.xz-home-assurance .xz-assurance-next{ right: clamp(10px, 20%, 240px); }

.xz-home-assurance .xz-assurance-nav:before{
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 auto;
  border-top: 2px solid #111;
  border-right: 2px solid #111;
}
.xz-home-assurance .xz-assurance-prev:before{ transform: rotate(-135deg); }
.xz-home-assurance .xz-assurance-next:before{ transform: rotate(45deg); }

.xz-home-assurance .xz-assurance-nav:hover{ transform: translateY(-50%) scale(1.04); }
.xz-home-assurance .xz-assurance-nav:active{ transform: translateY(-50%) scale(.98); }

@media (max-width: 900px){
  .xz-home-assurance .xz-assurance-wrap{ padding: 0 1.2rem; }
  .xz-home-assurance .xz-assurance-wrap:before,
  .xz-home-assurance .xz-assurance-wrap:after{ width: 14%; }

  .xz-home-assurance .xz-assurance-slide{ width: min(92vw, 560px); }
  .xz-home-assurance .xz-assurance-slide.is-prev,
  .xz-home-assurance .xz-assurance-slide.is-next{ opacity: 0; pointer-events: none; }

  .xz-home-assurance .xz-assurance-prev{ left: 10px; }
  .xz-home-assurance .xz-assurance-next{ right: 10px; }
}