/*
 * Блок «Новогодние корпоративы» (АМАКС, Figma node 2493:289)
 *
 * Все селекторы начинаются с .nk27. Правил для html, body и голых тегов нет,
 * поэтому стили блока не затрагивают сайт.
 * Обратная защита: .nk27 задаёт все наследуемые свойства, а .nk27.nk27 *
 * сбрасывает то, за что обычно цепляются стили сайта. Удвоенный класс весит
 * больше, чем .card h2 или .content p.
 * Макет рассчитан на ширину 1440px. Если контейнер уже 1340px, включается
 * упрощённая вёрстка в одну колонку (@container ниже).
 */

/* ---------- изоляция ---------- */

.nk27 {
  container: nk27 / inline-size;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;

  font-family: "Involve", "Jost", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  line-height: 21px;
  letter-spacing: 0;
  word-spacing: normal;
  color: #f5f0dc;
  text-align: left;
  text-transform: none;
  text-indent: 0;
  text-shadow: none;
  white-space: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* фон с блёстками на всю ширину: картинка 2880px, центр 1440px совпадает
     с макетом; за её краями (экраны шире 2880px) — градиент в цвет краёв */
  background:
    url("images/background.webp") no-repeat 50% 0 / 2880px 4572px,
    #590009 linear-gradient(to bottom,
      #280005 0, #110102 500px, #100101 750px, #180102 1250px, #280104 1750px,
      #350104 2250px, #3f0107 2750px, #450006 3000px, #500008 3500px, #590009 4000px);
}

.nk27.nk27 *,
.nk27.nk27 *::before,
.nk27.nk27 *::after {
  box-sizing: border-box;
  float: none;
  position: static;
  width: auto;
  min-width: 0;
  max-width: none;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: none;
  box-shadow: none;
  opacity: 1;
  transform: none;
  filter: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-align: inherit;
  text-transform: inherit;
  text-decoration: none;
  text-shadow: none;
  vertical-align: baseline;
  list-style: none;
  quotes: none;
  content: none;
}

.nk27.nk27 img {
  display: block;
  border: 0;
}

/* ---------- холст 1440px ---------- */

.nk27 .nk27__canvas {
  display: block;
  width: 1440px;
  margin: 0 calc(50% - 720px);
}

.nk27 .nk27__canvas > section {
  display: block;
}

/* ---------- общие элементы ---------- */

.nk27 .nk27__display {
  font-family: "History Pro", "Forum", Georgia, "Times New Roman", serif;
  font-size: 48px;
  line-height: 55px;
  letter-spacing: 0.48px;
  text-transform: uppercase;
}

.nk27 .nk27__h2 {
  font-size: 48px;
  line-height: 48px;
  letter-spacing: -0.72px;
  text-align: center;
}

.nk27 .nk27__text {
  display: block;
  font-size: 18px;
  line-height: 21px;
}

.nk27 .nk27__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 275px;
  height: 76px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #f5f0dc;
  border-radius: 50%;
  font-size: 18px;
  line-height: 21px;
  text-transform: uppercase;
  text-align: center;
  color: #f5f0dc;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.nk27 .nk27__btn:hover,
.nk27 .nk27__btn:focus-visible {
  background-color: #f5f0dc;
  color: #4d0009;
}

/* ---------- первый экран ---------- */

.nk27 .nk27__hero {
  padding-top: 161px;
  text-align: center;
}

.nk27 .nk27__hero-title {
  font-size: 100px;
  line-height: 100px;
  letter-spacing: 1px;
}

.nk27 .nk27__hero-place {
  margin-top: 30px;
  line-height: 18px;
  letter-spacing: -0.27px;
}

.nk27 .nk27__hero-btn {
  margin-top: 80px;
}

.nk27 .nk27__hero-dates {
  width: 381px;
  margin: 49px auto 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #f5f0dc;
}

.nk27 .nk27__intro-title {
  margin-top: 200px;
}

.nk27 .nk27__intro-text,
.nk27 .nk27__magic-text {
  margin-top: 30px;
}

/* лента шире холста: крайние фото уходят за край на 25–26px, как в макете */
.nk27 .nk27__gallery {
  display: flex;
  gap: 20px;
  width: 1491px;
  margin: 71px 0 0 -25px;
}

.nk27 .nk27__gallery-img {
  flex: 0 0 auto;
  width: 358px;
  height: 485px;
  object-fit: cover;
}

.nk27 .nk27__gallery-img:nth-child(3) { width: 357px; }

.nk27 .nk27__magic-title {
  margin-top: 100px;
}

/* ---------- новогодняя программа ---------- */

.nk27 .nk27__canvas > .nk27__program {
  display: flex;
  align-items: flex-start;
}

.nk27 .nk27__program-left {
  flex: 0 0 464px;
  margin: 237px 0 0 59px;
}

.nk27 .nk27__program-photo {
  width: 366px;
  height: 489px;
  margin-left: 1px;
}

/* ветка лежит поверх нижней части фото */
.nk27 .nk27__program-branch {
  width: 464px;
  height: 215px;
  margin-top: -133px;
}

.nk27 .nk27__program-center {
  flex: 0 0 517px;
  margin: 150px 0 0 -61px;
  text-align: center;
}

.nk27 .nk27__program-text {
  margin-top: 30px;
}

.nk27 .nk27__program-list {
  display: block;
  width: 381px;
  margin: 80px auto 0;
}

.nk27 .nk27__program-item {
  display: block;
  padding: 20px 0;
  border-bottom: 1px solid rgba(245, 240, 220, .5);
}

.nk27 .nk27__program-btn {
  margin-top: 149px;
}

.nk27 .nk27__program-right {
  flex: 0 0 464px;
  margin: 255px 0 0 -60px;
}

.nk27 .nk27__program-sparkler {
  width: 329px;
  height: 272px;
  margin-left: 135px;
}

/* фото закрывает кончик бенгальского огня, бокал лежит поверх фото */
.nk27 .nk27__program-photo2 {
  width: 357px;
  height: 485px;
  margin: -43px 0 0 104px;
}

.nk27 .nk27__program-glass {
  width: 235px;
  height: 290px;
  margin-top: -199px;
}

/* ---------- банкет ---------- */

.nk27 .nk27__canvas > .nk27__banquet {
  display: flex;
  align-items: flex-start;
}

.nk27 .nk27__banquet-info {
  flex: 0 0 616px;
  margin: 86px 0 0 100px;
}

.nk27 .nk27__banquet-text {
  margin-top: 30px;
}

.nk27 .nk27__banquet-text::after {
  content: "";
  display: block;
  width: 381px;
  height: 1px;
  margin-top: 30px;
  background: rgba(245, 240, 220, .5);
}

.nk27 .nk27__banquet-btn {
  margin: 29px 0 0 -1px;
}

.nk27 .nk27__banquet-photo {
  flex: 0 0 auto;
  width: 488px;
  height: 489px;
  margin: 38px 0 0 116px;
}

/* ветка заходит на фото слева */
.nk27 .nk27__banquet-branch {
  flex: 0 0 auto;
  width: 183px;
  height: 179px;
  margin: 389px 0 0 -671px;
}

/* ---------- тарифы ---------- */

.nk27 .nk27__formats {
  padding: 59px 100px 100px;
  text-align: center;
}

.nk27 .nk27__formats-text {
  margin-top: 30px;
}

.nk27 .nk27__formats-btn {
  margin-top: 68px;
}

.nk27 .nk27__tariffs {
  display: grid;
  grid-template-columns: 611fr 609fr;
  gap: 20px;
  margin-top: 119px;
  text-align: left;
}

.nk27 .nk27__tariff {
  display: flex;
  flex-direction: column;
  min-height: 650px;
  padding: 40px 30px;
  background: #4d0009;
}

.nk27 .nk27__tariff-title,
.nk27 .nk27__tariff-price {
  font-size: 48px;
  line-height: 48px;
  letter-spacing: -0.72px;
}

.nk27 .nk27__tariff-list {
  display: block;
  margin-top: 25px;
}

.nk27 .nk27__tariff-list > li {
  display: block;
}

.nk27 .nk27__tariff-notes {
  margin-top: 25px;
}

.nk27 .nk27__tariff-notes > p + p {
  margin-top: 15px;
}

.nk27 .nk27__tariff-price {
  margin-top: auto;
  padding-top: 32px;
}

.nk27 .nk27__tariff--lite .nk27__tariff-list {
  margin-top: 50px;
}

.nk27 .nk27__tariff--lite .nk27__tariff-notes {
  margin-top: 77px;
}

/* ---------- узкий контейнер: одна колонка ---------- */

@container nk27 (max-width: 1339px) {
  .nk27 .nk27__canvas {
    width: auto;
    margin: 0;
    padding: 0 20px;
    /* в одну колонку блок выше макета — растягиваем фон на всю высоту без шва */
    background: #590009 url("images/background.webp") no-repeat 50% 0 / auto 100%;
  }

  .nk27 .nk27__hero { padding-top: 80px; }
  .nk27 .nk27__hero-title { font-size: clamp(40px, 9cqw, 100px); line-height: 1; }
  .nk27 .nk27__hero-btn { margin-top: 50px; }
  .nk27 .nk27__hero-dates { width: 100%; max-width: 381px; }
  .nk27 .nk27__intro-title { margin-top: 100px; }

  .nk27 .nk27__h2,
  .nk27 .nk27__display,
  .nk27 .nk27__tariff-title,
  .nk27 .nk27__tariff-price {
    font-size: clamp(30px, 5cqw, 48px);
    line-height: 1.15;
  }

  .nk27 .nk27__text br { display: none; }

  .nk27 .nk27__gallery {
    flex-wrap: wrap;
    gap: 12px;
    width: auto;
    margin: 50px -20px 0;
  }

  .nk27 .nk27__gallery-img,
  .nk27 .nk27__gallery-img:nth-child(n) {
    flex: 1 1 calc(50% - 6px);
    width: calc(50% - 6px);
    height: auto;
    aspect-ratio: 357 / 485;
  }

  .nk27 .nk27__magic-title { margin-top: 60px; }

  .nk27 .nk27__canvas > .nk27__program,
  .nk27 .nk27__canvas > .nk27__banquet {
    flex-direction: column;
    align-items: center;
    padding-top: 80px;
  }

  .nk27 .nk27__program-left,
  .nk27 .nk27__program-center,
  .nk27 .nk27__program-right,
  .nk27 .nk27__banquet-info {
    flex: 0 0 auto;
    width: 100%;
    max-width: 517px;
    margin: 0;
  }

  .nk27 .nk27__program-center { order: -1; }
  .nk27 .nk27__program-left { margin-top: 60px; }
  .nk27 .nk27__program-list { width: 100%; max-width: 381px; margin-top: 50px; }
  .nk27 .nk27__program-btn { margin-top: 50px; }
  .nk27.nk27 img.nk27__program-sparkler { display: none; }

  .nk27 .nk27__program-photo,
  .nk27 .nk27__program-branch,
  .nk27 .nk27__banquet-photo {
    width: 100%;
    max-width: 464px;
    height: auto;
    margin: 0 auto;
  }

  .nk27 .nk27__program-left,
  .nk27 .nk27__program-right { max-width: 464px; }
  .nk27 .nk27__program-left .nk27__program-photo { width: 78.9%; max-width: none; margin: 0 0 0 .2%; }
  .nk27 .nk27__program-left .nk27__program-branch { margin-top: -28.7%; }
  .nk27 .nk27__program-right { margin-top: 30px; }
  .nk27 .nk27__program-right .nk27__program-photo2 { width: 76.9%; height: auto; margin: 0 0 0 22.4%; }
  .nk27 .nk27__program-right .nk27__program-glass { width: 50.6%; height: auto; max-width: none; margin: -42.9% 0 0; }

  .nk27 .nk27__banquet-info { text-align: center; }
  .nk27 .nk27__banquet-text::after { width: 100%; max-width: 381px; margin-left: auto; margin-right: auto; }
  .nk27 .nk27__banquet-btn { margin: 30px auto 0; }
  .nk27.nk27 img.nk27__banquet-branch { display: none; }
  .nk27 .nk27__banquet-photo { margin-top: 50px; }

  .nk27 .nk27__formats { padding: 80px 0 60px; }
  .nk27 .nk27__formats-btn { margin-top: 40px; }

  .nk27 .nk27__tariffs {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    margin-top: 60px;
  }

  .nk27 .nk27__tariff { min-height: 0; padding: 30px 20px; }
  .nk27 .nk27__tariff--lite .nk27__tariff-list,
  .nk27 .nk27__tariff--lite .nk27__tariff-notes { margin-top: 25px; }
}