/**
 * Studio block.
 *
 * @package Krizia
 */

/* ==========================================================
   STUDIO
   ========================================================== */

.krz-studio {
  --krz-section-background: #e8ddd1;
  --krz-studio-padding-top: clamp(4rem, 8vw, 7rem);
  --krz-studio-padding-bottom: clamp(6rem, 10vw, 9rem);

  text-align: center;
  width: 100%;
  z-index: 19 !important;
}

/* ==========================================================
   SURFACE
   ========================================================== */

.krz-studio__surface {
  background: var(--krz-section-background);

  /*
   * Le padding supérieur naturel du Studio est additionné
   * à la compensation de la superposition globale.
   */
  padding:
    calc(
      var(--krz-studio-padding-top) +
      var(--krz-overlap-offset, 0px)
    )
    0
    var(--krz-studio-padding-bottom);

  position: relative;
  text-align: center;
  width: 100%;
}

/* ==========================================================
   LAYOUT
   ========================================================== */

.krz-studio__container {
  max-width: 1140px;
  text-align: center;
}

/* ==========================================================
   TITLE
   ========================================================== */

.krz-studio__title {
  border: 0;
  clear: none;
  color: #4a3021;
  font-family: "Spectral", Georgia, serif;
  font-size: 36px;
  font-weight: 200;
  letter-spacing: 0.2em;
  line-height: 44px;
  margin: 0 0 1.5rem;
  margin-right: -0.2em;
  padding: 0;
  text-align: center;
  text-transform: uppercase;
}

/* ==========================================================
   GALLERY
   ========================================================== */

.krz-studio__gallery {
  margin-bottom: 2rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 980px;
}

.krz-studio__image {
  border-radius: 6px;
  display: block;
  height: 520px;
  object-fit: cover;
  width: 100%;
}

/* ==========================================================
   TEXT
   ========================================================== */

.krz-studio__text {
  color: #5d4a3f;
  font-family: "Manrope", Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 34px;
  margin: 0 auto;
  max-width: 860px;
  text-align: center;
}

/* ==========================================================
   TABLET
   ========================================================== */

@media screen and (max-width: 991px) {
  .krz-studio {
    --krz-studio-padding-top: 5rem;
    --krz-studio-padding-bottom: 6rem;
  }

  .krz-studio__image {
    height: 430px;
  }
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media screen and (max-width: 767px) {
  .krz-studio {
    --krz-studio-padding-top: 4rem;
    --krz-studio-padding-bottom: 5rem;
  }

  .krz-studio__title {
    font-size: 30px;
    font-weight: 200;
    letter-spacing: 0.2em;
    line-height: 48px;
    margin-right: -0.2em;
  }

  .krz-studio__gallery {
    max-width: 380px;
    width: 100%;
  }

  .krz-studio__gallery .col-6 {
    padding-left: 0.32rem !important;
    padding-right: 0.32rem !important;
  }

  .krz-studio__image {
    aspect-ratio: 132.5 / 185;
    border-radius: 4px;
    height: auto;
    object-fit: cover;
    width: 100%;
  }

  .krz-studio__text {
    font-size: 18px;
    letter-spacing: 0.04em;
    line-height: 34px;
    max-width: none;
  }
}

/* ==========================================================
   GUTENBERG EDITOR
   ========================================================== */

.editor-styles-wrapper .krz-studio__surface {
  min-height: 500px;
}