/**

 * Statement block.

 *

 * @package Krizia

 */



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

   BLOCK

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



.krz-statement {

  --krz-statement-padding-top: clamp(5rem, 8vw, 7rem);

  --krz-statement-padding-bottom: clamp(5rem, 8vw, 7rem);



  color: #fff;

  min-height: clamp(620px, 56vw, 820px);

  overflow: visible;

  position: relative;

  text-align: center;

  width: 100%;

}



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

   SURFACE

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



.krz-statement__surface {

  align-items: center;

  background-image: var(--krz-statement-background-image);

  background-position: center center;

  background-repeat: no-repeat;

  background-size: cover;

  display: flex;

  justify-content: center;

  min-height: clamp(620px, 56vw, 820px);

  overflow: hidden;

  padding:

    calc(

      var(--krz-statement-padding-top) +

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

    )

    0

    var(--krz-statement-padding-bottom);

  position: relative;

  text-align: center;

  width: 100%;

}



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

   CONTENT

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



.krz-statement__container {

  max-width: 1140px;

  position: relative;

  width: 100%;

  z-index: 2;

}



.krz-statement__logo {

  height: auto;

  left: 50%;

  max-width: min(34vw, 300px);

  opacity: 0.24;

  position: absolute;

  top: 50%;

  transform: translate(-50%, -45%);

  width: 300px;

  z-index: 1;

}



.krz-statement__content {

  margin-left: auto;

  margin-right: auto;

  max-width: 720px;

  position: relative;

  z-index: 2;

}



.krz-statement__kicker {

  color: rgba(255, 255, 255, 0.86);

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

  font-size: 16px;

  font-weight: 700;

  letter-spacing: 0.4em;

  line-height: 28px;

  margin: 0 0 1.5rem;

  margin-right: -0.4em;

  text-align: center;

  text-transform: uppercase;

}



.krz-statement__text {

  color: #fff;

  font-family: "Spectral", Georgia, serif;

  font-size: 48px;

  font-weight: 200;

  letter-spacing: 0.4em;

  line-height: 74px;

  margin: 0 auto;

  margin-right: -0.4em;

  max-width: 720px;

  text-align: center;

  text-transform: uppercase;

}



.krz-statement__text p {

  margin: 0;

}



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

   MOBILE

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



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

  .krz-statement {

    --krz-statement-padding-top: 4rem;

    --krz-statement-padding-bottom: 4rem;



    min-height: 430px;

  }



  .krz-statement__surface {

    min-height: 430px;

  }



  .krz-statement__logo {

    max-width: 175px;

    opacity: 0.22;

    width: 175px;

  }



  .krz-statement__kicker {

    font-size: 16px;

    letter-spacing: 0.4em;

    line-height: 28px;

    margin-right: -0.4em;

  }



  .krz-statement__text {

    font-size: 30px;

    letter-spacing: 0.4em;

    line-height: 46px;

    margin-right: -0.4em;

  }

}



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

   GUTENBERG

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



.editor-styles-wrapper .krz-statement__surface {

  min-height: 430px;

}



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

   PRIVATE COURSE -> STATEMENT OVERLAP FIX

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



/*

 * WordPress layout styles can add a block gap between consecutive blocks.

 * Force the standard Krizia overlap when Statement follows Private Course.

 * The Statement min-height is unrelated to the visible gap.

 */

.krz-private-course + .krz-statement {

  --krz-overlap-offset: var(--krz-block-overlap);

  margin-block-start: calc(var(--krz-block-overlap) * -1) !important;

  margin-top: calc(var(--krz-block-overlap) * -1) !important;

}