/* =========================
   FONTS
========================= */

@font-face {
  font-family: "UNCAGE";
  src:
    url("https://zabkazaki.ru/wp-content/uploads/2026/05/UNCAGE-Medium.otf")
    format("opentype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "UNCAGE";
  src:
    url("https://zabkazaki.ru/wp-content/uploads/2026/05/UNCAGE-SemiBold.otf")
    format("opentype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "UNCAGE";
  src:
    url("https://zabkazaki.ru/wp-content/uploads/2026/05/UNCAGE-Bold.otf")
    format("opentype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "BebasNeue";
  src:
    url("https://zabkazaki.ru/wp-content/uploads/2026/05/Bebas-Neue-Cyrillic.ttf")
    format("truetype");
  font-weight: 400;
  font-style: normal;
}

/* =========================
   BASE
========================= */

.tour-page,
.tour-page * {
  box-sizing: border-box;
}

.tour-page {

  --tour-bg: #07111f;
  --tour-bg-2: #050b14;

  --tour-text: #f5f0e6;
  --tour-muted: rgba(245,240,230,.72);

  --tour-gold: #d6a33c;
  --tour-gold-2: #f0c76b;

  --tour-max: 1280px;

  position: relative;

  overflow-x: hidden;

  min-height: 100vh;

  color: var(--tour-text);

  font-family:
    "UNCAGE",
    sans-serif;

  background:

    radial-gradient(
      900px 520px at 18% 0%,
      rgba(24,107,190,.34),
      transparent 60%
    ),

    radial-gradient(
      720px 460px at 82% 12%,
      rgba(255,194,92,.16),
      transparent 58%
    ),

    linear-gradient(
      180deg,
      var(--tour-bg),
      var(--tour-bg-2)
    );
}

.tour-page a {
  text-decoration: none;
}

.tour-container {

  width: 100%;

  max-width: 1120px;

  padding:
    0 24px;

  margin: 0 auto;
}

/* =========================
   HERO
========================= */

.tour-hero {

  position: relative;

  min-height: max(100vh, 920px);

  overflow: hidden;

  padding:
    48px 0 140px;
}

/* =========================
   HERO BACKGROUND
========================= */

.tour-hero__background,
.tour-hero__spotlights {

  position: absolute;
  inset: 0;

  pointer-events: none;
}

.tour-hero__background {

  background:

    radial-gradient(
      720px 820px at 18% 0%,
      rgba(39,112,199,.26),
      transparent 72%
    ),

    radial-gradient(
      760px 760px at 82% 10%,
      rgba(255,194,92,.12),
      transparent 74%
    );
}

/* =========================
   STAGE FOG
========================= */

.tour-hero::before {

  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 320px;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.58),
      transparent
    );

  pointer-events: none;

  z-index: 2;
}

/* =========================
   CENTRAL LIGHT
========================= */

.tour-hero::after {

  content: "";

  position: absolute;

  left: 50%;
  top: -10%;

  transform: translateX(-50%);

  width: 560px;
  height: 140%;

  background:
    linear-gradient(
      to bottom,
      rgba(255,240,200,.08),
      transparent 72%
    );

  filter: blur(34px);

  pointer-events: none;

  z-index: 0;
}

/* =========================
   SPOTLIGHTS
========================= */

.tour-hero__spotlights::before,
.tour-hero__spotlights::after {

  content: "";

  position: absolute;

  top: -120px;

  width: 520px;
  height: 1200px;

  opacity: .48;

  filter: blur(10px);
}

.tour-hero__spotlights::before {

  left: -40px;

  background:
    linear-gradient(
      to bottom,
      rgba(90,170,255,.42),
      transparent 72%
    );

  transform: rotate(11deg);
}

.tour-hero__spotlights::after {

  right: -40px;

  background:
    linear-gradient(
      to bottom,
      rgba(255,220,150,.24),
      transparent 72%
    );

  transform: rotate(-11deg);
}

/* =========================
   PERFORMERS
========================= */

.tour-hero__performers {

  position: absolute;
  inset: 0;

  pointer-events: none;

  z-index: 2;
}

.tour-hero__performers img {

  position: absolute;

  width: auto;

  object-fit: contain;

  filter:
    drop-shadow(
      0 30px 50px rgba(0,0,0,.45)
    );
}

/* =========================
   DANCER
========================= */

.tour-hero__dancer {

  left: 2vw;

  bottom: -40px;

  height:
    min(78vh, 980px);
}

/* =========================
   PAIR
========================= */

.tour-hero__pair {

  right: 3vw;

  bottom: -40px;

  height:
    min(76vh, 920px);
}

/* =========================
   CONTENT
========================= */

.tour-hero__content {

  position: relative;

  z-index: 5;

  text-align: center;
}

/* =========================
   EYEBROW
========================= */

.tour-hero__eyebrow {

  margin-bottom: 20px;

  color: var(--tour-gold-2);

  font-size: 18px;

  letter-spacing: .55em;

  text-transform: uppercase;

  font-weight: 500;
}

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

.tour-hero__title {

  position: relative;

  margin: 0;

  text-transform: uppercase;

  line-height: .86;

  text-shadow:
    0 10px 30px rgba(0,0,0,.45);
}

.tour-hero__title::after {

  content: "";

  position: absolute;

  left: 50%;
  bottom: -34px;

  transform: translateX(-50%);

  width:
    min(720px, 72vw);

  height: 1px;

  background:
    linear-gradient(
      to right,
      transparent,
      rgba(240,199,107,.72),
      transparent
    );
}

.tour-hero__title-line {

  display: block;

  font-size:
    clamp(52px, 6vw, 94px);

  letter-spacing: .06em;
}

.tour-hero__title-line--big {

  font-size:
    clamp(120px, 15vw, 260px);

  letter-spacing: .03em;
}

/* =========================
   TOUR BLOCK
========================= */

.tour-hero__tour {

  margin-top: 72px;
}

.tour-hero__tour-name {

  font-family:
    "BebasNeue",
    sans-serif;

  font-size:
    clamp(64px, 8vw, 140px);

  line-height: .9;

  letter-spacing: .03em;

  text-transform: uppercase;

  background:
    linear-gradient(
      180deg,
      #f6d68a,
      #d69a31
    );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tour-hero__tour-subtitle {

  margin-top: 12px;

  font-size:
    clamp(18px, 1.8vw, 28px);

  line-height: 1.35;

  font-weight: 700;

  text-transform: uppercase;

  color:
    rgba(245,240,230,.82);
}

.tour-hero__tour-dates {

  margin-top: 20px;

  font-family:
    "BebasNeue",
    sans-serif;

  font-size:
    clamp(34px, 4vw, 58px);

  line-height: .92;

  letter-spacing: .04em;

  color: #f4dfb1;
}

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

@media (max-width: 980px) {

  .tour-hero {

    min-height: 920px;
  }

  .tour-hero__dancer {

    left: -80px;

    height: 720px;
  }

  .tour-hero__pair {

    right: -70px;

    height: 680px;
  }
}

@media (max-width: 640px) {

  .tour-hero {

    min-height: 820px;

    padding:
      28px 0 100px;
  }

  .tour-hero__content {

    position: relative;

    z-index: 5;
  }

  .tour-hero__eyebrow {

    font-size: 13px;

    letter-spacing: .34em;
  }

  .tour-hero__title-line {

    font-size:
      clamp(34px, 8vw, 60px);
  }

  .tour-hero__title-line--big {

    font-size:
      clamp(86px, 24vw, 140px);
  }

  .tour-hero__tour {

    margin-top: 56px;
  }

  .tour-hero__tour-name {

    font-size:
      clamp(56px, 18vw, 100px);
  }

  .tour-hero__tour-subtitle {

    font-size: 16px;
  }

  .tour-hero__tour-dates {

    font-size: 34px;
  }

  .tour-hero__dancer {

    left: -120px;

    bottom: -20px;

    height: 520px;
  }

  .tour-hero__pair {

    right: -90px;

    bottom: -10px;

    height: 500px;
  }
}

/* =========================
   SECTION
========================= */

.tour-section {
  padding: 72px 0;
}

.tour-section__head {
  margin-bottom: 28px;
}

.tour-section__title {

  margin: 0 0 16px;

  font-size:
    clamp(28px, 3vw, 52px);

  text-transform: uppercase;

  letter-spacing: .08em;

  color: #fff3d9;
}

/* =========================
   GRID
========================= */

.tour-grid {

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 24px;
}

/* =========================
   CARD
========================= */

.tour-card {

  position: relative;

  display: flex;
  flex-direction: column;


  padding: 34px;

  border-radius: 30px;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      rgba(15,22,40,.96),
      rgba(7,12,24,.98)
    );

  border:
    1px solid rgba(255,214,122,.14);

  box-shadow:
    0 24px 70px rgba(0,0,0,.38);

  backdrop-filter: blur(14px);
}

/* =========================
   TOP
========================= */

.tour-card__top {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 0;
}

/* =========================
   CITY
========================= */

.tour-card__city {

  margin: 0;

  font-size:
    clamp(44px, 4vw, 64px);

  line-height: .88;

  letter-spacing: .03em;

  text-transform: uppercase;

  color: #fff6e8;
}

/* =========================
   VENUE
========================= */

.tour-card__venue {

  margin-top: 16px;

  font-size: 24px;

  line-height: 1.15;

  font-weight: 700;

  color: #f2ddb0;
}

/* =========================
   ADDRESS
========================= */

.tour-card__address {

  margin-top: 28px;

  font-size: 18px;

  line-height: 1.45;

  font-weight: 600;

  color:
    rgba(245,240,230,.72);
}

/* =========================
   DATE + TIME
========================= */

.tour-card__datetime {

  display: flex;

  align-items: baseline;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 28px;

  color:
    rgba(255,245,220,.96);
}

.tour-card__day,
.tour-card__month,
.tour-card__time {

  font-family:
    "BebasNeue",
    sans-serif;

  font-size: 42px;

  line-height: .9;

  letter-spacing: .03em;

  text-transform: uppercase;
}

.tour-card__divider {

  font-size: 24px;

  opacity: .55;
}

/* =========================
   NOTE
========================= */

.tour-card__note {

  margin-top: 28px;

  font-size: 16px;

  line-height: 1.4;

  font-weight: 700;

  color:
    rgba(245,240,230,.72);

  text-transform: uppercase;
}

/* =========================
   FOOTER
========================= */

.tour-card__footer {

  margin-top: 28px;

  display: flex;

  flex-wrap: wrap;

  gap: 14px;
}

/* =========================
   BUTTONS
========================= */

.tour-btn {

  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 54px;

  padding:
    0 26px;

  border-radius: 999px;

  font-size: 15px;

  font-weight: 700;

  letter-spacing: .06em;

  transition:
    transform .18s ease,
    background .18s ease;
}

.tour-btn:hover {

  transform:
    translateY(-2px);
}

/* =========================
   BUY BUTTON
========================= */

.tour-btn--site {

  order: 1;

  background:
    linear-gradient(
      180deg,
      #f4d17d,
      #d0942b
    );

  color:
    #201304;
}

/* =========================
   PHONE
========================= */

.tour-btn--phone {

  order: 2;

  background:
    rgba(255,255,255,.05);

  border:
    1px solid rgba(255,255,255,.08);

  color:
    #fff2d8;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 980px) {

  .tour-grid {

    grid-template-columns: 1fr;
  }

  .tour-hero {

    min-height: auto;

    padding-bottom: 80px;
  }

  .tour-hero__performers img {

    opacity: .45;
  }
}

@media (max-width: 640px) {

  .tour-container {

    width:
      calc(100% - 20px);
  }

  .tour-hero {

    padding:
      32px 0 60px;
  }

  .tour-hero__title-line {

    font-size:
      clamp(34px, 7vw, 60px);
  }

  .tour-hero__title-line--big {

    font-size:
      clamp(74px, 18vw, 120px);
  }

  .tour-hero__subtitle {

    font-size: 16px;
  }

  .tour-hero__dancer {

    left: -140px;

    height: 420px;
  }

  .tour-hero__pair {

    right: -120px;

    height: 420px;
  }

  .tour-card {

    padding: 22px;
  }

  .tour-card__city {

    font-size: 42px;
  }

  .tour-card__venue {

    margin-top: 14px;

    font-size: 20px;
  }

  .tour-card__address {

    margin-top: 22px;

    font-size: 15px;
  }

  .tour-card__datetime {

    margin-top: 22px;

    gap: 8px;
  }

  .tour-card__day,
  .tour-card__month,
  .tour-card__time {

    font-size: 30px;
  }

  .tour-card__note {

    margin-top: 22px;

    font-size: 14px;
  }

  .tour-card__footer {

    margin-top: 22px;
  }

  .tour-btn {

    width: 100%;
  }
}