/* Блок «Новогодняя ночь 2027 / Koza Nostra». Все селекторы начинаются с .koza */

/* ---------- корень, переменные, сброс ---------- */
.koza {
  /* Пути к фонам. Если папку images/ кладут по другому адресу, правятся только эти три строки. */
  --koza-bg-tile: url(images/bg-tile.jpg);
  --koza-bg-drift: url(images/snow-drift.webp);

  --koza-text: #231f20;
  --koza-navy: #000b28;
  --koza-gold: #b8821c;
  /* заголовки и цены: 3.4:1 на белом, макет 2.3:1 не проходит AA */
  --koza-gold-btn: #d9a241;
  --koza-check: #d9a241;
  --koza-green: #047c4b;
  --koza-label: #fff1c9;
  --koza-red: #d7141b;
  --koza-menu-gold: #d59852;
  --koza-paper: #fff;
  --koza-sky: #eef0f3;

  --koza-g: clamp(24px, 3.5cqw, 50px);
  /* боковое поле */
  --koza-perk: clamp(130px, calc((100cqw - 96px) / 3), 240px);
  --koza-chat: 120px;
  /* ширина шапки на карточке билета */

  container-type: inline-size;
  position: relative;
  overflow-x: clip;
  font-size: 20px;
  line-height: 1.2;
  color: var(--koza-text);
  -webkit-text-size-adjust: 100%;
}

.koza.koza *,
.koza.koza ::before,
.koza.koza ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
}

.koza img {
  display: block;
  max-width: 100%;
  height: auto;
}

.koza ul {
  list-style: none;
}

.koza a {
  text-decoration: none;
}

.koza a:focus-visible {
  outline: 3px solid var(--koza-text);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--koza-paper);
}

/* ---------- hero ---------- */
.koza .koza__hero {
  position: relative;
  aspect-ratio: 1440 / 1057;
  background: var(--koza-sky);
}

.koza img.koza__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 0;
}

.koza .koza__title {
  position: absolute;
  left: 10%;
  right: 0;
  top: 67.6%;
  text-align: center;
  text-transform: uppercase;
  font-size: 2.2cqw;
  line-height: 1.1;
  color: var(--koza-navy);
}

.koza .koza__title:before {
  display: none;
}

/* ---------- тело страницы на снежном фоне ---------- */
.koza .koza__body {
  padding-bottom: clamp(160px, 16.7cqw, 240px);
  background:
    var(--koza-bg-drift) center bottom / max(100%, 960px) auto no-repeat,
    var(--koza-bg-tile) center top / max(100%, 960px) auto repeat-y,
    var(--koza-sky);
}

/* ---------- о празднике ---------- */
.koza .koza__about {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  align-items: end;
  width: min(852px, 100% - 2 * var(--koza-g));
  min-height: 475px;
  margin: calc(-1.3cqw) auto 0;
  padding: 35px 0 0 35px;
  overflow: hidden;
  border-radius: 40px;
  background: var(--koza-paper);
}

.koza .koza__about-text {
  align-self: start;
  padding-bottom: 35px;
}

.koza .koza__about-text p+p {
  margin-top: 1.2em;
}

.koza img.koza__about-goat {
  justify-self: end;
  width: 292px;
}

/* ---------- что будет на празднике ---------- */
.koza .koza__perks {
  display: grid;
  grid-template-columns: repeat(3, var(--koza-perk));
  justify-content: space-between;
  row-gap: calc(var(--koza-perk) * 0.39);
  width: min(976px, 100% - 2 * var(--koza-g));
  margin: clamp(56px, 9.7cqw, 140px) auto 0;
}

.koza .koza__perk {
  width: var(--koza-perk);
}

.koza img.koza__perk-icon {
  width: 100%;
}

.koza .koza__perk-label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--koza-perk) * 0.279);
  margin-top: calc(var(--koza-perk) * 0.096);
  padding: 4px calc(var(--koza-perk) * 0.045);
  border-radius: 999px;
  background: var(--koza-green);
  font-size: calc(var(--koza-perk) * 0.104);
  line-height: 1.1;
  text-align: center;
  color: var(--koza-label);
}

.koza img.koza__perk-hat {
  position: absolute;
  left: calc(var(--koza-perk) * -0.129);
  top: calc(var(--koza-perk) * -0.133);
  width: calc(var(--koza-perk) * 0.358);
  max-width: none;
}

/* ---------- билеты ---------- */
.koza .koza__tickets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 3.9cqw, 56px);
  width: min(900px, 100% - 2 * var(--koza-g));
  margin: clamp(90px, 13.3cqw, 192px) auto 0;
}

.koza .koza__ticket {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 25px 25px 37px;
  border-radius: 28px;
  background: var(--koza-paper);
}

.koza img.koza__ticket-hat {
  position: absolute;
  left: calc(var(--koza-chat) * -0.358);
  top: calc(var(--koza-chat) * -0.383);
  width: var(--koza-chat);
  max-width: none;
}

.koza .koza__ticket-title,
.koza .koza__ticket-lead,
.koza .koza__ticket-list,
.koza .koza__ticket-foot {
  position: relative;
}

/* текст поверх белой части шапки */
.koza .koza__ticket-title {
  font-size: clamp(26px, 2.5cqw, 36px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--koza-gold);
}

.koza .koza__ticket-lead {
  margin-top: 17px;
  font-weight: 700;
}

.koza .koza__ticket-list {
  margin-top: 20px;
}

.koza .koza__ticket-list li {
  position: relative;
  padding-left: 35px;
}

.koza .koza__ticket-list li+li {
  margin-top: 18px;
}

.koza .koza__ticket-list li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 0.12em;
  width: 7px;
  height: 13px;
  border-right: 2px solid var(--koza-check);
  border-bottom: 2px solid var(--koza-check);
  transform: rotate(45deg);
}

.koza .koza__ticket-foot {
  margin-top: auto;
  padding-top: 28px;
}

.koza .koza__ticket-price {
  margin-bottom: 19px;
  font-size: clamp(40px, 3.8cqw, 55px);
  font-weight: 700;
  line-height: 1;
  color: var(--koza-gold);
}

.koza .koza__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  border-radius: 25px;
  background: var(--koza-gold-btn);
  color: var(--koza-text);
}

.koza .koza__btn:hover {
  background: #e6b354;
}

.koza .koza__btn:active {
  background: #c99433;
}

/* ---------- меню и схема столов ---------- */
.koza .koza__docs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(28px, 3.9cqw, 56px);
  width: min(1340px, 100% - 2 * var(--koza-g));
  margin: clamp(60px, 8.2cqw, 118px) auto 0;
}

.koza .koza__doc {
  position: relative;
  display: flex;
  align-items: center;
  aspect-ratio: 408 / 156;
  overflow: hidden;
  border-radius: 32px;
  font-size: clamp(18px, 1.74cqw, 25px);
  line-height: 1.2;
  text-transform: uppercase;
}

.koza img.koza__doc-img {
  position: absolute;
  inset: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  max-width: none;
  object-fit: cover;
}

.koza .koza__doc-text {
  position: relative;
  padding-right: 10px;
}

.koza .koza__doc--adult {
  color: var(--koza-menu-gold);
}

.koza .koza__doc--adult .koza__doc-text {
  padding-left: 47.8%;
}

.koza .koza__doc--kids {
  color: var(--koza-red);
}

.koza .koza__doc--kids .koza__doc-text {
  padding-left: 35%;
}

.koza .koza__doc--tables {
  color: #fff;
}

.koza .koza__doc--tables .koza__doc-text {
  padding-left: 50.2%;
}

.koza .koza__doc:hover .koza__doc-img {
  filter: brightness(1.08);
}

/* ---------- контакты ---------- */
.koza .koza__contacts {
  position: relative;
  display: block;
  width: 100%;
  min-height: 489px;
  margin: 51px 0 0;
  padding: 153px 0 0 max(12.5cqw, calc(50cqw - 540px));
  font-style: normal;
}

.koza .koza__contacts-list {
  display: grid;
  grid-template-columns: minmax(0, min(44.2cqw, 637px)) auto;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  row-gap: 52px;
  justify-content: start;
}

.koza .koza__contact {
  display: grid;
  grid-template-columns: 38px auto;
  column-gap: 19px;
  align-items: center;
  width: max-content;
  min-height: 44px;
  font-size: clamp(22px, 2.08cqw, 30px);
  line-height: 1.2;
}

.koza .koza__contact:hover span {
  text-decoration: underline;
}

.koza img.koza__contact-icon {
  max-width: none;
  justify-self: start;
}

.koza img.koza__contacts-goat {
  position: absolute;
  right: 0;
  top: 0;
  width: clamp(180px, 18.6cqw, 268px);
  -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent);
  mask-image: linear-gradient(to bottom, #000 88%, transparent);
}

/* ---------- планшет: 600..1099 ---------- */
@container (max-width: 1099px) {
  .koza .koza__hero {
    aspect-ratio: 1100 / 1057;
  }

  .koza .koza__title {
    font-size: 2.9cqw;
  }

  .koza .koza__about {
    margin-top: -19px;
  }

  .koza .koza__body {
    --koza-chat: 100px;
  }

  .koza .koza__tickets {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    row-gap: 70px;
    margin-top: 110px;
  }

  .koza .koza__ticket:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 14px);
  }

  .koza .koza__docs {
    grid-template-columns: minmax(0, 440px);
    justify-content: center;
    row-gap: 20px;
  }

  .koza .koza__doc {
    font-size: 24px;
  }

  .koza .koza__contacts {
    min-height: 0;
    padding: 40px var(--koza-g) 0;
  }

  .koza .koza__contacts-list {
    grid-template-columns: auto;
    grid-auto-flow: row;
    grid-template-rows: none;
    row-gap: 12px;
  }

  .koza .koza__contact {
    font-size: 24px;
  }

  .koza img.koza__contacts-goat {
    width: clamp(150px, 26cqw, 220px);
  }
}

/* ---------- телефон: до 599 ---------- */
@container (max-width: 599px) {
  .koza .koza__body {
    font-size: 18px;
    --koza-chat: 84px;
    --koza-perk: min(200px, calc((100cqw - 2 * var(--koza-g) - 16px) / 2));
  }

  .koza .koza__hero {
    aspect-ratio: 860 / 1057;
  }

  .koza .koza__title {
    font-size: 3cqw;
  }

  .koza .koza__about {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding: 26px 0 0 22px;
  }

  .koza .koza__about-text {
    padding-right: 22px;
    padding-bottom: 12px;
  }

  .koza img.koza__about-goat {
    width: min(58%, 240px);
  }

  .koza .koza__perks {
    grid-template-columns: repeat(2, var(--koza-perk));
    margin-top: 56px;
  }

  .koza .koza__tickets {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 76px;
    margin-top: 92px;
  }

  .koza .koza__ticket:last-child {
    width: auto;
  }

  .koza .koza__ticket-title {
    font-size: 28px;
  }

  .koza .koza__ticket-price {
    font-size: 44px;
  }

  .koza .koza__docs {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 56px;
  }

  .koza .koza__doc {
    font-size: 20px;
  }

  .koza .koza__contacts {
    padding-top: 36px;
  }

  .koza .koza__contact {
    font-size: 20px;
  }

  .koza img.koza__contacts-goat {
    position: static;
    margin: 12px calc(-1 * var(--koza-g)) 0 auto;
    width: 130px;
  }
}