/* =========================================
   ATMOSPHERE
   ========================================= */

.mb-atmo {
  position: relative;
  isolation: isolate;

  min-height: 820px;

  display: flex;
  align-items: center;

  overflow: hidden;

  color: #f6ead2;

  background:
    url("/images/optimized/atmo.webp")
    center center / cover
    no-repeat;
}


/* Основное затемнение */

.mb-atmo::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -2;

  background:
    linear-gradient(
      90deg,
      rgba(9, 3, 3, 0.92) 0%,
      rgba(9, 3, 3, 0.73) 28%,
      rgba(9, 3, 3, 0.36) 51%,
      rgba(9, 3, 3, 0.10) 72%,
      rgba(9, 3, 3, 0.18) 100%
    );
}


/* Лёгкая виньетка */

.mb-atmo::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -1;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(13, 3, 4, 0.24) 0%,
      rgba(13, 3, 4, 0) 24%,
      rgba(13, 3, 4, 0) 69%,
      rgba(13, 3, 4, 0.48) 100%
    );
}


.mb-atmo__inner {
  width: min(1450px, calc(100% - 72px));

  margin: 0 auto;

  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(320px, 0.58fr);

  gap: clamp(70px, 9vw, 170px);

  align-items: center;

  padding:
    clamp(86px, 8vw, 130px)
    0;
}


/* LEFT */

.mb-atmo__content {
  max-width: 760px;
}


.mb-atmo__ornament {
  width: 160px;

  display: flex;
  align-items: center;
  gap: 13px;

  margin-bottom: 25px;

  color: #d9b46c;
}


.mb-atmo__ornament::before,
.mb-atmo__ornament::after {
  content: "";

  flex: 1;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(219, 181, 108, 0.78)
    );
}


.mb-atmo__ornament::after {
  background:
    linear-gradient(
      90deg,
      rgba(219, 181, 108, 0.78),
      transparent
    );
}


.mb-atmo__ornament span {
  font-size: 14px;
}


.mb-atmo__title {
  margin: 0;

  font-family: var(--mb-serif);
  font-size: clamp(54px, 5.6vw, 88px);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.035em;

  text-transform: uppercase;

  color: #f5ead4;

  text-shadow:
    0 5px 30px rgba(0,0,0,0.35);
}


.mb-atmo__text {
  max-width: 680px;

  margin: 34px 0 0;

  font-family: var(--mb-serif);
  font-size: clamp(20px, 1.55vw, 27px);
  line-height: 1.45;

  color: rgba(248, 237, 216, 0.90);

  text-shadow:
    0 3px 20px rgba(0,0,0,0.48);
}


/* RIGHT CALLOUT */

.mb-atmo__card {
  position: relative;

  width: min(100%, 390px);

  justify-self: end;

  padding:
    55px
    45px
    50px;

  border:
    1px solid rgba(223, 183, 106, 0.76);

  background:
    radial-gradient(
      circle at 50% 10%,
      rgba(155, 34, 48, 0.62),
      transparent 52%
    ),
    linear-gradient(
      145deg,
      rgba(104, 8, 19, 0.95),
      rgba(55, 4, 10, 0.96)
    );

  box-shadow:
    0 30px 80px rgba(0,0,0,0.38);
}


.mb-atmo__card::before {
  content: "";

  position: absolute;
  inset: 8px;

  pointer-events: none;

  border:
    1px solid rgba(229, 195, 127, 0.18);
}


.mb-atmo__card-text {
  position: relative;
  z-index: 1;

  margin: 0;

  font-family: var(--mb-serif);
  font-size: clamp(27px, 2.1vw, 36px);
  font-weight: 400;
  line-height: 1.30;

  text-transform: uppercase;

  color: #e4c27d;
}


.mb-atmo__card-divider {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  gap: 12px;

  margin-top: 37px;

  color: #d9ad5c;
}


.mb-atmo__card-divider::before,
.mb-atmo__card-divider::after {
  content: "";

  flex: 1;

  height: 1px;

  background:
    rgba(218, 175, 94, 0.45);
}


.mb-atmo__card-divider span {
  font-size: 15px;
}


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

@media (max-width: 1100px) {

  .mb-atmo {
    min-height: 720px;

    background-position:
      56% center;
  }


  .mb-atmo__inner {
    width: min(100% - 48px, 1100px);

    grid-template-columns:
      minmax(0, 1fr)
      minmax(280px, 0.5fr);

    gap: 50px;
  }


  .mb-atmo__title {
    font-size: clamp(48px, 6vw, 68px);
  }


  .mb-atmo__text {
    font-size: 20px;
  }


  .mb-atmo__card {
    padding:
      42px
      32px
      38px;
  }

}


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

@media (max-width: 700px) {

  .mb-atmo {
    min-height: 100svh;

    align-items: stretch;

    background-position:
      58% center;
  }


  .mb-atmo::before {
    background:
      linear-gradient(
        180deg,
        rgba(8, 2, 3, 0.90) 0%,
        rgba(8, 2, 3, 0.69) 34%,
        rgba(8, 2, 3, 0.32) 58%,
        rgba(8, 2, 3, 0.63) 78%,
        rgba(8, 2, 3, 0.94) 100%
      );
  }


  .mb-atmo__inner {
    width: calc(100% - 34px);

    display: flex;
    flex-direction: column;

    gap: 44px;

    margin: 0 auto;

    padding:
      67px
      0
      56px;
  }


  .mb-atmo__content {
    max-width: 100%;
  }


  .mb-atmo__ornament {
    width: 125px;

    margin-bottom: 18px;
  }


  .mb-atmo__title {
    max-width: 390px;

    font-size: clamp(42px, 12vw, 55px);
    line-height: 0.94;
  }


  .mb-atmo__text {
    max-width: 360px;

    margin-top: 25px;

    font-size: 18px;
    line-height: 1.42;
  }


  .mb-atmo__card {
    width: min(330px, 88%);

    margin-top: auto;

    justify-self: auto;
    align-self: flex-end;

    padding:
      36px
      29px
      32px;
  }


  .mb-atmo__card-text {
    font-size: clamp(23px, 6.5vw, 29px);
  }


  .mb-atmo__card-divider {
    margin-top: 28px;
  }

}


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

@media (max-width: 380px) {

  .mb-atmo__inner {
    width: calc(100% - 28px);
  }


  .mb-atmo__title {
    font-size: 39px;
  }


  .mb-atmo__text {
    font-size: 17px;
  }


  .mb-atmo__card {
    width: 92%;
  }

}