/* Стили, специфичные только для страницы: Специалисты с опытом (for_middle.html).
 * Автоматически выделены из main.css (выделяет только правила с
 * селекторами .page-middle). Подключать ПОСЛЕ main.css.
 */

.page-middle .jr-promo-right {
  margin-top: 11%;
  margin-left: 3%;
  padding: 180px 60px 180px 30px;
  gap: 0px;
  height: 648px;
}

.page-middle .storis-cloud {
  top: 180px;
}

.page-middle .storis-step--tl { top: clamp(98px, 14.1vh, 137px); left: 78px; }

.page-middle .jr-slider {
  padding-top: 0;
}

.page-middle .jr-slider-unit:nth-child(1) .jr-slider-photo-unit {
  clip-path: inset(0 0 -2000px 0 round 68px);
}

.page-middle .jr-slider-unit:nth-child(1) .jr-slider-spec {
  bottom: -6%;
  left: -13%;
  width: 134%;
}

.page-middle .jr-slider-unit-body {
  padding: 80px 64px 152px;
}

.page-middle .jr-slider-spec--slide2 {
  bottom: -5%;
  left: 0%;
  width: 137%;
}

.page-middle .jr-slider-spec--slide3 {
  bottom: -8%;
  left: -13%;
  width: 135%;
}

.page-middle .jr-slider-title {
  color: var(--color-violet-main);
  text-transform: uppercase;
}

.page-middle .jr-slider-photo-unit,
.page-middle .jr-slider-unit-body {
  display: none;
}

.page-middle .jr-new-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

@media (min-width: 896px) {
  .page-middle .jr-promo-left picture,
  .page-middle .jr-promo-left img {
      width: auto;
      height: 92%;
    }
}

@media (max-width: 895px) {
  .page-middle .jr-promo-right {
      margin-top: 0;
    }
}

/* ── Кросс-промо «опыта ещё нет?» на page-middle — единая картинка
   (фото + сиреневый блок уже запечены) вместо старой двухчастной вёрстки ── */
/* .jr-promo-new { display: none; } */
.page-middle .jr-promo-left,
.page-middle .jr-promo-right {
  display: none;
}

.page-middle .jr-promo-new {
  position: relative;
  display: block;
  flex: 1 1 100%;
  width: 100%;
}

@media (max-width: 1400px) {
  .page-middle .storis-step--tl {
      top: 125px;
      left: 9px;
    }

  .page-middle .storis-c2-s2 {
      top: 275px;
      right: -88px;
    }

  .page-middle .storis-card[data-card="3"] .storis-photo {
      position: absolute;
      top: 134px;
    }
}

.page-middle .cust-footer {
  border-radius: 64px;
  background: var(--color-violet-pale);
}

.page-middle .cust-footer-nav-col a,
.page-middle .cust-footer-email,
.page-middle .cust-footer-copy {
  color: var(--color-violet-main);
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.page-middle .cust-footer-phone {
  color: var(--color-violet-main);
  font-family: 'Nunito Sans', sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 135%;
  letter-spacing: -0.494px;
}

.page-middle .cust-footer-legal a {
  color: var(--color-violet-main);
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.page-middle .cust-footer-social {
  background: var(--color-violet-main);
}

.page-middle .cust-footer-social img { filter: brightness(0) invert(1); }

@media (max-width: 990px) {
  .page-middle .storis-bubble {
      width: 100% !important;
      max-width: none !important;
      white-space: normal;
      box-sizing: border-box;
      flex-wrap: wrap;
      position: relative;
      padding-left: 40px !important;
    }

  .page-middle .storis-bubble .storis-search-icon {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
    }

  .page-middle .storis-c1-b1,
  .page-middle .storis-c1-b2,
  .page-middle .storis-c1-b3,
  .page-middle .storis-c1-b4 {
      left: 16px;
      right: 16px;
    }

  /* ── STORIS card 2 & 3 (page-middle) — column layout, matching card 1 ── */
    .page-middle .storis-card[data-card="2"] .storis-step-item {
      left: 16px !important;
      right: 16px !important;
      width: auto;
      max-width: none;
      transform: none;
    }

  .page-middle .storis-step--tl { top: 250px; }

  .page-middle .storis-c2-s2 { top: 350px; left: 16px; right: 16px; }

  .page-middle .storis-step--bl { top: 460px; left: 16px; right: 16px; width: auto; }

  .page-middle .storis-c3-b1,
  .page-middle .storis-c3-b2,
  .page-middle .storis-c3-b3 {
      left: 16px;
      right: 16px;
      width: auto;
    }

  .page-middle .storis-c3-b1 { top: 340px; }

  .page-middle .storis-c3-b2 { top: 420px; border-radius: 32px 32px 8px 32px; }

  .page-middle .storis-c3-b3 { top: 500px; }

  .page-middle .storis-leader-bubble {
      width: auto;
      padding: 12px;
    }
}

/* Дуги-точки пагинации на планшетном диапазоне (1001–1170px) — должны быть
   внутри сиреневого блока (нижняя часть картинки-слайда), а не на границе
   с фото и не внизу всей карточки */
@media (max-width: 1170px) and (min-width: 1001px) {
  .page-middle .jr-slider-dots {
      position: absolute;
      grid-area: auto;
      align-self: auto;
      justify-self: auto;
      top: 72%;
      right: 30px;
      margin: 0;
    }

  .page-middle .jr-path {
      margin: 0 0 24px;
      padding: 80px 60px;
  }
}

@media (max-width: 1000px) and (min-width: 692px) {
  /* В этом диапазоне слайдер стековый (колонкой) и заведомо выше экрана —
       sticky тут не нужен, иначе блок «прилипает» к верху экрана (top:0 по
       умолчанию, JS больше не задаёт top) и резко прыгает при скролле. */
    .page-middle .jr-slider { position: relative; top: auto !important; }

  .page-middle .jr-slider-wrapper { height: auto !important; }

  .page-middle .jr-slider-unit:nth-child(1) .jr-slider-photo-unit {
      background-image: url('../images/middle/slides/slide1_1024.webp') !important;
    }

  .page-middle .jr-slider-unit:nth-child(1) .jr-slider-spec {
      display: none;
    }

  .page-middle .jr-slider-unit:nth-child(2) .jr-slider-photo-unit {
      background-image: url('../images/middle/slides/slide2_1024.webp') !important;
    }

  .page-middle .jr-slider-unit:nth-child(2) .jr-slider-spec {
      display: none;
    }

  .page-middle .jr-slider-unit:nth-child(3) .jr-slider-photo-unit {
      background-image: url('../images/middle/slides/slide3_1024.webp') !important;
    }

  .page-middle .jr-slider-unit:nth-child(3) .jr-slider-spec {
      display: none;
    }

  .page-middle .jr-slider-unit {
      flex-direction: column;
      min-height: auto;
    }

  .page-middle .jr-slider-photo-unit {
      flex: none;
      width: 100%;
      height: 660px;
    }

  .page-middle .jr-slider-unit-body {
      width: 100%;
    }

  .page-middle .jr-slider-dots {
      align-self: end;
      justify-self: end;
      margin-right: 64px;
      margin-bottom: 22%;
    }
}

@media (max-width: 900px) and (min-width: 692px) {
  .page-middle .jr-slider-unit:nth-child(1) .jr-slider-photo-unit {
      background-image: url('../images/middle/slides/slide1_768.webp') !important;
    }

  .page-middle .jr-slider-unit:nth-child(2) .jr-slider-photo-unit {
      background-image: url('../images/middle/slides/slide2_768.webp') !important;
    }

  .page-middle .jr-slider-unit:nth-child(3) .jr-slider-photo-unit {
      background-image: url('../images/middle/slides/slide3_768.webp') !important;
    }

  .page-middle .jr-slider-dots {
      grid-area: auto;
      align-self: auto;
      justify-self: center;
      flex-direction: row;
    }

  .page-middle .jr-slider-unit:nth-child(1).active ~ .jr-slider-dots { margin: -114px; }

  .page-middle .jr-slider-unit:nth-child(2).active ~ .jr-slider-dots,
  .page-middle .jr-slider-unit:nth-child(3).active ~ .jr-slider-dots { margin: -60px; }

  .page-middle .jr-slider-unit-body {
      align-items: center;
      text-align: center;
    }

  .page-middle .storis-cloud {
      top: 244px;
    }
}

@media (max-width: 691px) {
  .page-middle .storis-step-item {
      font-family: 'Nunito Sans', sans-serif;
      font-weight: 600;
      font-size: 20px;
      line-height: 28px;
      letter-spacing: -0.38px;
    }

  .page-middle .storis-leader-bubble {
      font-family: 'Nunito Sans', sans-serif;
      font-weight: 600;
      font-size: 20px;
      line-height: 28px;
      letter-spacing: -0.38px;
    }

  .page-middle .storis-leader-highlight {
      font-family: 'Nunito Sans', sans-serif;
      font-weight: 500;
      font-style: normal;
      font-size: 14px;
      line-height: 135%;
      letter-spacing: -0.019em;
      text-decoration: underline;
      text-decoration-style: solid;
      text-decoration-skip-ink: auto;
    }

  .page-middle .storis-c3-b1 { top: 45%; }

  .page-middle .storis-c3-b2 { top: 60%; }

  .page-middle .storis-c3-b3 { top: 76%; }

  .page-middle .cust-footer { border-radius: 32px; }

  /* ── JR-SLIDER mobile images swap (page-middle) ── */
    .page-middle .jr-slider-unit:nth-child(1) .jr-slider-photo-unit { background-image: url('../images/middle/slides/slide1_mobile.webp') !important; }

  .page-middle .jr-slider-unit:nth-child(2) .jr-slider-photo-unit { background-image: url('../images/middle/slides/slide2_mobile.webp') !important; }

  .page-middle .jr-slider-unit:nth-child(3) .jr-slider-photo-unit { background-image: url('../images/middle/slides/slide3_mobile.webp') !important; }

  .page-middle .jr-slider-unit:nth-child(1) .jr-slider-spec,
  .page-middle .jr-slider-unit:nth-child(2) .jr-slider-spec,
  .page-middle .jr-slider-unit:nth-child(3) .jr-slider-spec {
      display: none;
    }

  .page-middle .jr-slider-title {
      font-family: 'Onder', sans-serif;
      font-weight: 500;
      font-size: 13px;
      line-height: 212%;
      letter-spacing: 0.26px;
      text-align: center;
    }

  .page-middle .jr-slider-subtitle {
      font-family: 'Nunito Sans', sans-serif;
      font-weight: 400;
      font-size: 16px;
      line-height: 135%;
      letter-spacing: -0.304px;
      text-align: center;
    }

  /* ── page-middle: keep the same "separate cards" look as at 768px ── */
    .page-middle .jr-slider-unit {
      background: transparent;
      border-radius: 0;
      overflow: visible;
    }

  .page-middle .jr-slider-photo-unit {
      height: 340px;
      border-radius: 32px;
      clip-path: inset(-2000px 0 0 0 round 32px);
    }

  .page-middle .jr-slider-photo-unit--slide3 {
      clip-path: inset(-2000px -2000px 0 -2000px round 32px);
    }

  .page-middle .jr-slider-unit-body {
      padding: 40px 20px 80px;
      border-radius: 32px;
      background: var(--color-violet-pale);
      align-items: center;
      text-align: center;
    }

  .page-middle .jr-slider-dots {
      grid-area: auto;
      align-self: auto;
      justify-self: center;
      flex-direction: row;
      margin: -53px;
      padding: 12px 0 20px;
    }

  .page-middle .jr-slider-unit:nth-child(1).active ~ .jr-slider-dots { margin: -82px; }
}

@media (max-width: 599px) {
  .page-middle .storis-c3-b1 { top: 57%; }

  .page-middle .storis-c3-b2 { top: 71%; }

  .page-middle .storis-c3-b3 { top: 85%; }

  .page-middle .storis-card[data-card="3"] .storis-photo {
      position: absolute;
      top: 140px;
    }

  .page-middle .storis-cloud {
      top: 65%;
    }

  .page-middle .storis-bubble {
      width: 100% !important;
      max-width: none !important;
      white-space: normal;
      box-sizing: border-box;
      flex-wrap: wrap;
      position: relative;
      padding-left: 40px !important;
    }

  .page-middle .storis-bubble .storis-search-icon {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
    }

  .page-middle .storis-c1-b1,
  .page-middle .storis-c1-b2,
  .page-middle .storis-c1-b3,
  .page-middle .storis-c1-b4 {
      left: 16px;
      right: 16px;
    }
}

@media (max-width: 540px) {
  .page-middle .storis-step--tl {
      top: 59%;
    }

  .page-middle .storis-c2-s2 {
      top: 72%;
    }

  .page-middle .storis-leader-bubble {
      font-family: "Nunito Sans", sans-serif;
      font-weight: 500;
      font-style: normal;
      font-size: 14px;
      line-height: 135%;
      letter-spacing: -0.019em;
    }
}

@media (max-width: 499px) {
  /* middle: story2-4 — почти квадратные фото, при том же width что у
       портретного story1 (contain) выходят визуально мельче — компенсируем */
    .page-middle .storis-card[data-card="1"] .storis-photo {
      left: 50%;
      right: auto;
      transform: translateX(-50%);
      width: 130%;
    }

  .page-middle .storis-card[data-card="2"] .storis-photo {
      left: 50%;
      right: auto;
      transform: translateX(-50%);
      width: 128%;
    }

  .page-middle .storis-card[data-card="3"] .storis-photo {
      left: 50%;
      right: auto;
      transform: translateX(-50%);
      width: 130%;
    }
}

@media (max-width: 406px) {
  .page-middle .storis-bubble {
    left: 16px !important;
    right: auto !important;
    flex-wrap: wrap;
    }
}