/* =========================================
   SILK ROAD TOUR — HOMEPAGE HERO
   ========================================= */

.home-hero.silk-tour-hero{
  position:relative !important;

  display:block !important;

  width:100% !important;
  height:100svh !important;
  min-height:720px !important;
  max-height:none !important;

  margin:0 !important;
  padding:0 !important;

  overflow:hidden !important;

  box-sizing:border-box !important;

  background:#031d35 !important;
  color:#fff;

  isolation:isolate;
}

.home-hero.silk-tour-hero::before,
.home-hero.silk-tour-hero::after{
  content:none !important;
}


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

.silk-tour-hero__bg{
  position:absolute !important;
  inset:0 !important;

  z-index:-3;

  width:100%;
  height:100%;

  background-image:url("../home/silk-road-tour-bg.png");
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
}


/* затемнение только слева и снизу */

.silk-tour-hero__shade{
  position:absolute;
  inset:0;

  z-index:-2;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(0,19,38,.90) 0%,
      rgba(0,25,46,.72) 27%,
      rgba(0,28,50,.25) 53%,
      rgba(0,21,40,.04) 75%
    ),
    linear-gradient(
      0deg,
      rgba(0,16,32,.78) 0%,
      rgba(0,18,35,.12) 42%,
      transparent 68%
    );
}


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

/*
  ВАЖНО:
  content больше не управляет высотой hero.
  Текст и слайдер позиционируются относительно hero.
*/

.silk-tour-hero__content{
  position:static !important;

  display:block !important;

  width:auto !important;
  height:auto !important;
  min-height:0 !important;

  margin:0 !important;
  padding:0 !important;
}


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

.silk-tour-copy{
  position:absolute !important;

  z-index:4;

  top:clamp(135px,16vh,170px) !important;
  left:max(
    52px,
    calc((100% - 1580px) / 2)
  ) !important;

  width:min(520px,38vw) !important;

  margin:0 !important;
  padding:0 !important;
}


/* small title */

.silk-tour-kicker{
  margin:0 0 14px !important;

  font-family:inherit;
  font-size:clamp(10px,.72vw,13px);
  line-height:1.2;
  font-weight:600;

  letter-spacing:.07em;
  text-transform:uppercase;

  color:rgba(239,251,255,.90);
}


/* SILK ROAD TOUR */

.silk-tour-title{
  margin:0 !important;
  padding:0 !important;

  font-family:inherit;
  font-weight:800;

  line-height:.80 !important;
  letter-spacing:-.055em;

  text-transform:uppercase;
}

.silk-tour-title span,
.silk-tour-title strong{
  display:block;
}

.silk-tour-title span{
  font-size:clamp(54px,4.8vw,88px);
  color:#fff;
}

.silk-tour-title strong{
  margin-top:4px;

  font-size:clamp(74px,6.4vw,118px);
  line-height:.83;

  font-weight:800;

  color:#05c8df;
}


/* TAGLINE */

.silk-tour-tagline{
  max-width:510px;

  margin:20px 0 0 !important;

  font-family:inherit;

  font-size:clamp(13px,.88vw,16px);
  line-height:1.18;
  font-weight:700;

  text-transform:uppercase;

  color:#fff;
}


/* DESCRIPTION */

.silk-tour-description{
  max-width:480px;

  margin:9px 0 0 !important;

  font-family:inherit;

  font-size:clamp(11px,.72vw,13px);
  line-height:1.48;
  font-weight:400;

  color:rgba(255,255,255,.82);
}


/* BUTTON */

.silk-tour-cta{
  display:inline-flex;

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

  gap:26px;

  width:max-content;
  min-width:195px;
  height:44px;

  margin:16px 0 0 !important;
  padding:0 20px;

  border:1px solid rgba(255,255,255,.42);
  border-radius:13px;

  background:#06c6de;
  color:#00243a;

  font-family:inherit;
  font-size:10px;
  line-height:1;
  font-weight:700;

  text-decoration:none;
  text-transform:uppercase;

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

.silk-tour-cta:hover{
  background:#35d9ea;
  transform:translateY(-2px);
}


/* =========================================
   SLIDER
   ========================================= */

.silk-tour-slider{
  position:absolute !important;

  z-index:5;

  left:50% !important;
  right:auto !important;

  bottom:55px !important;

  width:min(1120px,72vw) !important;

  margin:0 !important;

  transform:translateX(-50%) !important;
}


/* cards wrapper */

.silk-tour-track{
  width:100% !important;

  margin:0 !important;
  padding:0 !important;

  display:grid !important;

  grid-template-columns:
    minmax(0,.82fr)
    minmax(0,1.14fr)
    minmax(0,.82fr);

  align-items:end;

  gap:26px;
}


/* =========================================
   CARDS
   ========================================= */

.silk-stop-card{
  position:relative;

  box-sizing:border-box;

  height:115px;

  overflow:hidden;

  border:1px solid rgba(58,198,225,.38);
  border-radius:16px;

  background:rgba(0,31,53,.66);

  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);

  opacity:.60;

  transform:scale(.95);

  cursor:pointer;

  transition:
    height .25s ease,
    opacity .25s ease,
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}


.silk-stop-card.is-active{
  height:150px;

  opacity:1;

  transform:scale(1);

  border-color:#25d4eb;

  box-shadow:
    0 14px 45px rgba(0,0,0,.32),
    0 0 25px rgba(0,201,224,.14);
}


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

.silk-stop-card__image{
  position:absolute;
  inset:0;

  overflow:hidden;
}


.silk-stop-card__image--empty{
  background:
    radial-gradient(
      circle at 50% 5%,
      rgba(11,144,173,.30),
      transparent 55%
    ),
    linear-gradient(
      135deg,
      rgba(2,67,92,.74),
      rgba(0,21,40,.96)
    );
}


.silk-stop-card__image img{
  display:block;

  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center;

  transform:none !important;
}


.silk-stop-card__image::after{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(0,10,20,.03) 10%,
      rgba(0,16,30,.18) 48%,
      rgba(0,15,29,.96) 100%
    );

  pointer-events:none;
}


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

.silk-stop-card__content{
  position:absolute;

  z-index:3;

  left:0;
  right:0;
  bottom:13px;

  padding:0 12px;

  display:flex;

  flex-direction:column;
  align-items:center;

  text-align:center;
}


.silk-stop-card__content{
  position:absolute;
  z-index:3;

  left:0;
  right:0;
  bottom:14px;

  padding:0 16px;

  display:flex;
  flex-direction:column;
  align-items:center;

  text-align:center;
}


/* 1-Й ЭТАП */

.silk-stop-stage{
  margin:0 !important;

  font-family:inherit;
  font-size:clamp(16px,1.2vw,21px) !important;
  line-height:1.05;
  font-weight:800;

  color:#fff !important;
  text-transform:uppercase;
}


/* DATE */

.silk-stop-date{
  margin-top:7px;

  font-family:inherit;
  font-size:clamp(10px,.72vw,12px) !important;
  line-height:1.2;
  font-weight:700;

  letter-spacing:.035em;

  color:#13d1e7 !important;
  text-transform:uppercase;
}


/* COUNTRY, CITY */

.silk-stop-location{
  margin-top:5px !important;

  font-family:inherit;
  font-size:clamp(9px,.64vw,11px) !important;
  line-height:1.2;
  font-weight:600;

  letter-spacing:.025em;

  color:rgba(255,255,255,.86) !important;
  text-transform:uppercase;
}


/* =========================================
   ARROWS
   ========================================= */

.silk-tour-arrow{
  position:absolute;

  z-index:10;

  top:50%;

  width:48px;
  height:48px;

  padding:0;

  display:flex;

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

  border:1px solid rgba(75,203,229,.42);
  border-radius:50%;

  background:rgba(0,31,54,.72);

  color:#fff;

  font-family:inherit;
  font-size:30px;
  line-height:1;

  cursor:pointer;

  transform:translateY(-50%);

  transition:.2s ease;
}


.silk-tour-arrow:hover{
  background:#07c8df;
  color:#002139;
}


.silk-tour-arrow--prev{
  left:-66px;
}


.silk-tour-arrow--next{
  right:-66px;
}


/* =========================================
   DOTS
   ========================================= */

.silk-tour-dots{
  margin-top:10px;

  display:flex;

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

  gap:9px;
}


.silk-tour-dots button{
  display:block;

  width:7px;
  height:7px;

  margin:0;
  padding:0;

  border:0;
  border-radius:50%;

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

  cursor:pointer;
}


.silk-tour-dots button.is-active{
  background:#08cfe6;
  transform:scale(1.35);
}


/* =========================================
   SILK ROAD TOUR — FINAL RESPONSIVE
   ========================================= */


/* =========================================
   DESKTOP
   ========================================= */

@media(min-width:1101px){

  .silk-tour-copy{
    position:absolute !important;

    top:clamp(185px,22vh,220px) !important;
    left:max(
      70px,
      calc((100% - 1600px) / 2)
    ) !important;

    width:600px !important;

    margin:0 !important;
    padding:0 !important;

    transform:none !important;

    text-align:left !important;
  }


  /* КУБОК МИРА... */

  .silk-tour-kicker{
    width:100% !important;
    max-width:none !important;

    margin:0 0 18px !important;

    font-size:15px !important;
    line-height:1.2 !important;
    font-weight:700 !important;

    letter-spacing:.025em !important;

    text-align:left !important;
    white-space:nowrap !important;
  }


  /* SILK ROAD TOUR */

  .silk-tour-title{
    width:560px !important;

    margin:0 !important;
    padding:0 !important;

    line-height:.78 !important;
    letter-spacing:-.055em !important;

    text-align:left !important;
  }


  .silk-tour-title span{
    display:block !important;

    width:500px !important;

    font-size:110px !important;
    line-height:.78 !important;

    text-align:left !important;

    color:#fff !important;
  }


  .silk-tour-title strong{
    display:block !important;

    width:auto !important;

    margin-top:11px !important;

    font-size:142px !important;
    line-height:.74 !important;

    text-align:left !important;

    color:#05c8df !important;
  }


  /* SLIDER */

  .silk-tour-slider{
    position:absolute !important;

    left:50% !important;
    right:auto !important;

    bottom:28px !important;

    width:min(1120px,72vw) !important;

    margin:0 !important;

    transform:translateX(-50%) !important;
  }


  .silk-tour-track{
    display:grid !important;

    width:100% !important;

    grid-template-columns:
      minmax(0,.82fr)
      minmax(0,1.14fr)
      minmax(0,.82fr) !important;

    align-items:end !important;

    gap:28px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;
  }


  .silk-stop-card{
    height:112px !important;

    opacity:.62 !important;

    transform:scale(.96) !important;
  }


  .silk-stop-card.is-active{
    height:150px !important;

    opacity:1 !important;

    transform:scale(1) !important;
  }


  .silk-tour-arrow{
    display:flex !important;
  }

}



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

@media(min-width:701px) and (max-width:1100px){

  .silk-tour-copy{
    position:absolute !important;

    top:145px !important;
    left:40px !important;

    width:470px !important;

    text-align:left !important;
  }


  .silk-tour-kicker{
    margin-bottom:15px !important;

    font-size:12px !important;

    text-align:left !important;
  }


  .silk-tour-title{
    width:450px !important;

    text-align:left !important;
  }


  .silk-tour-title span{
    display:block !important;

    width:390px !important;

    font-size:82px !important;
    line-height:.80 !important;

    text-align:left !important;
  }


  .silk-tour-title strong{
    display:block !important;

    margin-top:8px !important;

    font-size:108px !important;
    line-height:.78 !important;

    text-align:left !important;
  }


  .silk-tour-slider{
    bottom:24px !important;

    width:78vw !important;
  }

}



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

@media(max-width:700px){

  /* FIRST SCREEN */

  .home-hero.silk-tour-hero{
    position:relative !important;

    width:100% !important;

    height:100svh !important;
    min-height:680px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;
  }


  /* BACKGROUND */

  .silk-tour-hero__bg{
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
  }


  .silk-tour-hero__content{
    position:relative !important;

    width:100% !important;
    height:100% !important;

    margin:0 !important;
    padding:0 !important;
  }


  /* =========================
     TITLE — CENTER
     ========================= */

  .silk-tour-copy{
    position:absolute !important;

    z-index:5;

    top:125px !important;
    left:50% !important;

    width:calc(100% - 32px) !important;
    max-width:390px !important;

    margin:0 !important;
    padding:0 !important;

    transform:translateX(-50%) !important;

    text-align:center !important;
  }


  /* КУБОК МИРА... */

  .silk-tour-kicker{
    width:100% !important;
    max-width:340px !important;

    margin:0 auto 14px !important;

    font-size:9px !important;
    line-height:1.28 !important;
    font-weight:700 !important;

    letter-spacing:.015em !important;

    text-align:center !important;

    white-space:normal !important;
  }


  /* SILK ROAD */

  .silk-tour-title{
    width:100% !important;

    margin:0 auto !important;
    padding:0 !important;

    line-height:.80 !important;

    text-align:center !important;
  }


  /*
    В HTML используется именно:
    .silk-tour-title span

    НЕ .silk-tour-title-word
  */

  .silk-tour-title span{
    display:block !important;

    width:100% !important;
    max-width:300px !important;

    margin:0 auto !important;

    font-size:clamp(52px,15.5vw,66px) !important;
    line-height:.82 !important;

    letter-spacing:-.055em !important;

    text-align:center !important;

    color:#fff !important;
  }


  /* TOUR */

  .silk-tour-title strong{
    display:block !important;

    width:100% !important;

    margin:5px auto 0 !important;

    font-size:clamp(70px,21vw,90px) !important;
    line-height:.82 !important;

    letter-spacing:-.055em !important;

    text-align:center !important;

    color:#05c8df !important;
  }


  /* =========================
     SLIDER — BOTTOM
     ========================= */

  .silk-tour-slider{
    position:absolute !important;

    z-index:7;

    left:0 !important;
    right:0 !important;
    bottom:22px !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    transform:none !important;
  }


  .silk-tour-track{
    position:relative !important;

    box-sizing:border-box !important;

    display:flex !important;

    width:100% !important;

    margin:0 !important;
    padding:0 8% !important;

    gap:12px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    scroll-snap-type:x mandatory !important;

    scrollbar-width:none !important;
  }


  .silk-tour-track::-webkit-scrollbar{
    display:none !important;
  }


  /* CARDS */

  .silk-stop-card,
  .silk-stop-card.is-active{
    position:relative !important;

    flex:0 0 84% !important;

    width:84% !important;
    min-width:84% !important;

    height:145px !important;

    margin:0 !important;

    transform:none !important;

    scroll-snap-align:center !important;
    scroll-snap-stop:always !important;
  }


  .silk-stop-card{
    opacity:.45 !important;
  }


  .silk-stop-card.is-active{
    opacity:1 !important;

    border-color:#25d4eb !important;

    box-shadow:
      0 12px 34px rgba(0,0,0,.35),
      0 0 20px rgba(0,201,224,.14) !important;
  }


  /* CARD TEXT */

  .silk-stop-card__content{
    left:0 !important;
    right:0 !important;

    bottom:13px !important;

    padding:0 12px !important;
  }


  .silk-stop-stage{
    font-size:17px !important;
    line-height:1.05 !important;
  }


  .silk-stop-date{
    margin-top:6px !important;

    font-size:10px !important;
  }


  .silk-stop-location{
    margin-top:5px !important;

    font-size:9px !important;
  }


  /* NO ARROWS ON PHONE */

  .silk-tour-arrow{
    display:none !important;
  }


  /* DOTS */

  .silk-tour-dots{
    display:flex !important;

    justify-content:center !important;

    margin-top:11px !important;
  }

}

/* =========================================
   MOBILE — LEFT TITLE + VERTICAL POSITION
   ========================================= */

@media(max-width:700px){

  .home-hero.silk-tour-hero{
    position:relative !important;

    width:100% !important;
    height:100svh !important;
    min-height:700px !important;

    padding:0 !important;
    overflow:hidden !important;
  }


  .silk-tour-hero__content{
    position:relative !important;

    width:100% !important;
    height:100% !important;

    margin:0 !important;
    padding:0 !important;
  }


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

  .silk-tour-copy{
    position:absolute !important;

    top:42% !important;
    left:26px !important;

    width:calc(100% - 52px) !important;
    max-width:340px !important;

    margin:0 !important;

    transform:translateY(-50%) !important;

    text-align:left !important;
  }


  .silk-tour-kicker{
    width:100% !important;
    max-width:330px !important;

    margin:0 0 14px !important;

    font-size:9px !important;
    line-height:1.3 !important;

    text-align:left !important;
  }


  .silk-tour-title{
    width:100% !important;

    margin:0 !important;

    text-align:left !important;

    line-height:.82 !important;
  }


  .silk-tour-title span,
  .silk-tour-title strong{
    display:block !important;

    width:100% !important;

    text-align:left !important;
  }


  .silk-tour-title span{
    max-width:300px !important;

    font-size:clamp(50px,15.5vw,64px) !important;
  }


  .silk-tour-title strong{
    margin-top:5px !important;

    font-size:clamp(72px,21vw,88px) !important;
  }


  /* =========================
     SLIDER BOTTOM
     ========================= */

  .silk-tour-slider{
    position:absolute !important;

    left:0 !important;
    right:0 !important;
    bottom:24px !important;

    width:100% !important;

    margin:0 !important;

    transform:none !important;
  }


  .silk-tour-track{
    width:100% !important;

    margin:0 !important;
    padding:0 8% !important;

    display:flex !important;

    gap:14px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    scroll-snap-type:x mandatory;

    scrollbar-width:none;
  }


  .silk-stop-card,
  .silk-stop-card.is-active{
    flex:0 0 84% !important;

    width:84% !important;
    height:145px !important;

    transform:none !important;

    scroll-snap-align:center !important;
  }


  .silk-tour-arrow{
    display:none !important;
  }


  .silk-tour-dots{
    margin-top:12px !important;
  }

}