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

/* Junior storis badge override */
.page-junior .storis-badge-yellow {
  background: var(--color-violet-pale);
  color: var(--color-violet-main);
  transform: rotate(-2deg);
}

.page-junior .storis-step--tl { top: clamp(160px, 22.9vh, 222px); left: 1%; }

.page-junior .storis-card[data-card="1"] .storis-step--bl {
  top: clamp(328px, 47.1vh, 457px);
  left: 3%;
}

.page-junior .storis-card[data-card="1"] .storis-step--tl {
  top: clamp(160px, 22.9vh, 222px);
  left: 14%;
}

.page-junior .storis-card[data-card="2"] .storis-step--tl {
  top: clamp(160px, 22.9vh, 222px);
  left: 0%;
}

.page-junior .storis-card[data-card="1"] .storis-step--tr {
  top: clamp(188px, 26.9vh, 261px);
  right: 196px;
}

.page-junior .storis-card[data-card="2"] .storis-step--tr {
  top: 30%;
  right: 3%;
}

.page-junior .storis-card[data-card="2"] .storis-step--bl {
  top: clamp(328px, 47.1vh, 457px);
  left: 98px;
  width: 440px;
}

.page-junior .storis-card[data-card="2"] .storis-step--bl .storis-step-item > span:last-child {
  max-width: 440px;
}

.page-junior .storis-dot { background: var(--color-violet-light); }

.page-junior .storis-dot.active::after { background: var(--color-violet-main); }

.page-junior .jr-slider {
  margin: 0px;
}

.page-junior .jr-slider-title {
  color: var(--color-violet-main);
}

.page-junior .jr-slider-title-l1 {
  color: var(--color-violet-accent);
}

.page-junior .jr-promo-new {
  margin-top: 16px;
}

@media (max-width: 1170px) and (min-width: 1001px) {
  .page-junior .jr-promo-new {
    margin-top: 16px;
  }
}

@media (max-width: 1000px) and (min-width: 692px) {
  .page-junior .jr-promo-new {
      margin-top: -8%;
    }
}

@media (max-width: 691px) {
  .page-junior .jr-promo-new {
    margin-top: -5%;
  }
}

/* ── Footer override for junior/middle pages ── */
.page-junior .cust-footer {
  border-radius: 64px;
  background: var(--color-violet-pale);
}

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

.page-junior .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-junior .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-junior .cust-footer-social {
  background: var(--color-violet-main);
}

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

@media (max-width: 1200px) {
  .page-junior .storis-card[data-card="1"] .storis-step--tr { top: 261px; right: 55px; }

  .page-junior .storis-card[data-card="2"] .storis-step--tr { top: 249px; right: -11%; }

  .page-junior .storis-card[data-card="1"] .storis-step--tl { top: 222px; left: 2%; }
}

@media (max-width: 990px) {
  /* ── STORIS STEP ITEMS — COLUMN LAYOUT ── */
    .page-junior .storis-step--tl,
  .page-junior .storis-step--tr,
  .page-junior .storis-step--bl,
  .page-junior .storis-step--br {
      left: 54% !important;
      right: auto !important;
    }

  .page-junior .storis-step--tl { top: 300px; }

  .page-junior .storis-step--tr { top: 390px; }

  .page-junior .storis-step--bl { top: 480px; }

  .page-junior .storis-step--br { top: 500px; }

  .page-junior .storis-step-item {
      border-radius: 24px 24px 4px 24px;
      width: 100%;
      box-sizing: border-box;
    }

  .page-junior .storis-card[data-card="1"] .storis-step--tl,
  .page-junior .storis-card[data-card="2"] .storis-step--tl { top: 32%; }

  .page-junior .storis-card[data-card="1"] .storis-step--tr,
  .page-junior .storis-card[data-card="2"] .storis-step--tr { top: 48%; right: auto; }

  .page-junior .storis-card[data-card="1"] .storis-step--bl { top: 480px; left: 48%; }

  .page-junior .storis-card[data-card="2"] .storis-step--bl { top: 64%; left: 48%; }
}

/* junior: вернуть desktop-облачко, которое глобально скрывается в 990px */
.page-junior .storis-cloud--desktop { display: block; }

.page-junior .storis-cloud--mobile { display: none; }

@media (max-width: 1200px) and (min-width: 900px) {
  .page-junior .tags-cloud .tag:nth-child(1) { left: 18% !important; top: 54% !important; --tag-r: -30deg !important; }

  .page-junior .tags-cloud .tag:nth-child(2) { left: 70% !important; top: 64% !important; --tag-r: 32deg !important; }

  .page-junior .tags-cloud .tag:nth-child(5) { left: 47% !important; top: 103% !important; --tag-r: 3deg !important; }
}

@media (max-width: 1200px) {
  .page-junior .jr-slider-unit-body { padding: 60px 48px 60px 52px; gap: 48px; }

  .page-junior .jr-slider-title { font-size: 20px; line-height: 40px; }

  .page-junior .jr-slider-spec { bottom: -1%; left: -20%; width: 155%; }

  .page-junior .jr-slider-spec--slide2 { bottom: 9%; left: -24%; width: 142%; }

  .page-junior .jr-slider-spec--slide3 { bottom: -6%; left: -86%; width: 80%; }

  .page-junior .jr-slider-spec--slide4 { bottom: -4%; left: -32%; width: 147%; }
}

@media (max-width: 1000px) {
  /* ── JR-SLIDER mobile images swap (page-junior) ── */
    .page-junior .jr-slider-unit:nth-child(1) .jr-slider-photo-unit { background-image: url('../images/juniors/slides/slide1_mobile.webp') !important; }

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

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

  .page-junior .jr-slider-unit:nth-child(4) .jr-slider-photo-unit { background-image: url('../images/juniors/slides/slide4_mobile.webp') !important; }

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

  /* ── JR-SLIDER mobile layout (page-junior, столбик) ── */
    .page-junior .jr-slider { margin: 0 8px; padding: 0; position: relative; }

  .page-junior .jr-slider-unit {
      flex-direction: column;
      border-radius: 64px;
      overflow: hidden;
      min-height: auto;
    }

  .page-junior .jr-slider-photo-unit {
      flex: none;
      width: 100%;
      height: auto;
      aspect-ratio: 5 / 5;
      border-radius: 64px 64px 0 0;
      overflow: hidden !important;
      clip-path: none !important;
    }

  .page-junior .jr-slider-unit-body {
      padding: 48px 48px 76px;
      gap: 24px;
      border-radius: 64px;
      background: var(--color-violet-pale);
    }

  .page-junior .jr-slider-dots {
      grid-area: auto;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 20px;
      justify-self: center;
      justify-content: center;
      margin-right: 0;
      flex-direction: row;
      gap: 12px;
      padding: 0;
      z-index: 3;
    }

  .page-junior .jr-slider-title { font-size: 22px; line-height: 32px; }

  .page-junior .jr-slider-subtitle { font-size: 15px; line-height: 22px; }

  .page-junior .jr-slider-btn { font-size: 14px; padding: 14px 20px; width: 100%; box-sizing: border-box; justify-content: center; }
}

@media (max-width: 800px) {
  .page-junior .storis-cloud--desktop { display: none; }

  .page-junior .storis-cloud--mobile {
      display: block;
      left: 55%;
      right: auto;
      transform: none;
      top: 358px;
      width: 220px;
      height: auto;
      z-index: 2;
    }
}

@media (max-width: 691px) {
  .page-junior .cust-footer { border-radius: 32px; }

  /* ── STORIS steps — stretch to full width ── */
    .page-junior .storis-card[data-card="1"] .storis-step--tl,
  .page-junior .storis-card[data-card="2"] .storis-step--tl,
  .page-junior .storis-card[data-card="1"] .storis-step--tr,
  .page-junior .storis-card[data-card="2"] .storis-step--tr,
  .page-junior .storis-card[data-card="1"] .storis-step--bl,
  .page-junior .storis-card[data-card="2"] .storis-step--bl { left: 8px !important; right: 8px !important; width: auto; }

  .page-junior .storis-card[data-card="1"] .storis-step-item,
  .page-junior .storis-card[data-card="2"] .storis-step-item { width: 100%; max-width: none; box-sizing: border-box; left: 0 !important; right: 0 !important; transform: none !important; }

  .page-junior .jr-slider-unit {
      flex-direction: column;
      border-radius: 32px;
    }

  .page-junior .jr-slider-unit-body { padding: 32px 28px 100px; border-radius: 32px; }

  .page-junior .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-junior .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;
    }
}

@media (max-width: 625px) {
  .page-junior .development-left h2 {
      text-align: center;
    }
}

@media (max-width: 599px) {
  body:not(.page-junior) .tags-cloud .tag:nth-child(5) { left: 60% !important; top: -57px !important; --tag-r: -13deg !important; }

  .page-junior .tags-cloud .tag:nth-child(1) { left: 20% !important; top: 84% !important; }

  .page-junior .tags-cloud .tag:nth-child(2) { left: 63% !important; top: 92px !important; }

  .page-junior .tags-cloud .tag:nth-child(4) { left: 81% !important; top: 53% !important; }

  .page-junior .tags-cloud .tag:nth-child(5) { left: 47% !important; top: 100% !important; --tag-r: 3deg !important; }

  .page-junior .tags-cloud .tag:nth-child(6) { left: 72% !important; top: 87% !important; }

  .page-junior .tags-cloud .tag:nth-child(8) { left: 74% !important; top: 72% !important; }

  .page-junior .storis-cloud--mobile {
    display: block;
    left: 16%;
    }

  .page-junior .storis-step--tl { left: 30% !important; }

  .page-junior .storis-step--tr { left: 42% !important; }

  .page-junior .storis-card[data-card="1"] .storis-step--tl,
  .page-junior .storis-card[data-card="2"] .storis-step--tl { top: 260px; left: 8px !important; right: 8px !important; width: auto; }

  .page-junior .storis-card[data-card="1"] .storis-step--tr,
  .page-junior .storis-card[data-card="2"] .storis-step--tr { top: 356px; left: 8px !important; right: 8px !important; width: auto; }

  .page-junior .storis-card[data-card="1"] .storis-step--bl,
  .page-junior .storis-card[data-card="2"] .storis-step--bl { top: 453px; left: 8px !important; right: 8px !important; width: auto; }
}

@media (max-width: 500px) {
  .page-junior .jr-slider-unit-body { padding: 32px 16px 100px; border-radius: 32px; }

  .page-junior .jr-slider-unit:nth-child(4) .jr-slider-title {
      font-family: 'Onder', sans-serif;
      font-weight: 500;
      font-size: 12px;
    }
}

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

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

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