/**

 * Quote Band block.

 *

 * @package Krizia

 */



/* ==========================================================

   BLOCK

   ========================================================== */



.krz-quote-band {

  --krz-quote-band-padding-top: 0px;

  --krz-quote-band-padding-bottom: 0px;



  min-height: clamp(620px, 59.2vw, 853px);

  overflow: visible;

  position: relative;

  width: 100%;

}



/* ==========================================================

   SURFACE

   ========================================================== */



.krz-quote-band__surface {

  align-items: center;

  background-color: #32231b;

  color: #fff;

  display: flex;

  min-height: clamp(620px, 59.2vw, 853px);

  overflow: hidden;

  position: relative;

  text-align: center;

  width: 100%;



  padding:

    calc(

      var(--krz-quote-band-padding-top) +

      var(--krz-overlap-offset, 0px)

    )

    0

    var(--krz-quote-band-padding-bottom);

}



.krz-quote-band__background {

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  inset: 0;

  opacity: 0;

  pointer-events: none;

  position: absolute;

  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1);

  z-index: 0;

}



.krz-quote-band__background.is-active {

  opacity: 1;

}



/* ==========================================================

   CONTENT

   ========================================================== */



.krz-quote-band__container {

  max-width: 1140px;

  position: relative;

  z-index: 2;

}



.krz-quote-band__nav {

  display: flex;

  flex-wrap: wrap;

  gap: clamp(2.4rem, 7vw, 7rem);

  justify-content: center;

  list-style: none;

  margin: 0 0 3rem;

  padding: 0;

}



.krz-quote-band__nav li {

  display: flex;

}



.krz-quote-band__nav-button {

  appearance: none;

  background: transparent;

  border: 0;

  color: #fff;

  cursor: pointer;

  font-family: "Manrope", Arial, sans-serif;

  font-size: 16px;

  font-weight: 700;

  letter-spacing: 0.4em;

  line-height: 28px;

  margin: 0;

  margin-right: -0.4em;

  opacity: 0.72;

  padding: 0 0 0.9rem;

  position: relative;

  text-align: center;

  text-transform: uppercase;

}



.krz-quote-band__nav-button::after {

  border-top: 1px solid #fff;

  bottom: 0;

  content: "";

  left: 50%;

  opacity: 0;

  position: absolute;

  transform: translateX(-50%);

  width: 36px;

}



.krz-quote-band__nav-button:hover,

.krz-quote-band__nav-button:focus,

.krz-quote-band__nav-button.is-active {

  color: #fff;

  opacity: 1;

}



.krz-quote-band__nav-button.is-active::after {

  opacity: 1;

}



.krz-quote-band__nav-button:focus {

  outline: 0;

}



.krz-quote-band__swiper {

  margin-left: auto;

  margin-right: auto;

  max-width: 760px;

  overflow: hidden;

}



.krz-quote-band__swiper .swiper-slide {

  align-items: center;

  display: flex;

  height: auto;

  justify-content: center;

}



.krz-quote-band__text {

  color: #fff;

  font-family: "Manrope", Arial, sans-serif;

  font-size: 22px;

  font-weight: 400;

  letter-spacing: 0.04em;

  line-height: 40px;

  max-width: 760px;

  text-align: center;

}



.krz-quote-band__text p {

  margin: 0;

}



.krz-quote-band__text p + p {

  margin-top: 1.5rem;

}



.krz-quote-band__pagination {

  display: none;

}



/* ==========================================================

   MOBILE

   ========================================================== */



@media screen and (max-width: 767px) {

  .krz-quote-band,

  .krz-quote-band__surface {

    min-height: 430px;

  }



  .krz-quote-band__surface {

    padding:

      calc(

        3.8rem +

        var(--krz-overlap-offset, 0px)

      )

      0

      3.8rem;

  }



  .krz-quote-band__nav {

    flex-wrap: nowrap;

    gap: 2.4rem;

    justify-content: flex-start;

    margin: 0 auto 2.2rem;

    max-width: 100%;

    overflow-x: auto;

    padding: 0 50%;

    scroll-behavior: smooth;

    scrollbar-width: none;

    white-space: nowrap;

  }



  .krz-quote-band__nav::-webkit-scrollbar {

    display: none;

  }



  .krz-quote-band__nav li {

    flex: 0 0 auto;

  }



  .krz-quote-band__nav-button {

    font-size: 16px;

    letter-spacing: 0.4em;

    line-height: 28px;

    margin-right: -0.4em;

    white-space: nowrap;

  }



  .krz-quote-band__swiper {

    max-width: calc(100% - 38px);

  }



  .krz-quote-band__text {

    font-size: 20px;

    letter-spacing: 0.04em;

    line-height: 36px;

    max-width: 340px;

  }



  .krz-quote-band__pagination {

    background: rgba(255, 255, 255, 0.28);

    display: block;

    height: 2px;

    margin: 2.2rem auto 0;

    max-width: 230px;

    overflow: hidden;

    position: relative;

    width: calc(100% - 90px);

  }



  .krz-quote-band__pagination span {

    background: #fff;

    display: block;

    height: 100%;

    left: 0;

    position: absolute;

    top: 0;

    transition: transform 280ms ease, width 280ms ease;

    width: 25%;

  }

}



/* ==========================================================

   GUTENBERG

   ========================================================== */



.editor-styles-wrapper .krz-quote-band__surface {

  min-height: 520px;

}