/* Доработки многостраничника jobcrafting (поверх style.css) */

/* 1. Шапка: двухъярусная раскладка целиком в style.css (меню на своей строке,
   логотип+контакты сверху). Старый патч под одну строку удалён — он перебивал
   размер/центрирование меню и прятал телефон. */
.header__link {
  white-space: nowrap;
}

/* 2. Аккордеоны вместо плоских списков (FAQ, этапы) */
.acc {
  border: 1px solid rgba(43, 122, 158, 0.22);
  border-radius: 14px;
  margin-bottom: 0.75rem;
  background: var(--color-white, #fff);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.acc[open] {
  border-color: var(--color-primary, #2b7a9e);
  box-shadow: 0 10px 26px -18px rgba(31, 95, 125, 0.45);
}
.acc__q {
  list-style: none;
  cursor: pointer;
  padding: 1rem 3rem 1rem 1.25rem;
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 1.02rem;
  color: #184b63;
  position: relative;
}
.acc__q::-webkit-details-marker { display: none; }
.acc__q::after {
  content: "+";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5em;
  line-height: 1;
  color: var(--color-primary, #2b7a9e);
}
.acc[open] .acc__q::after { content: "\2013"; }
.acc__a {
  padding: 0 1.25rem 1.1rem;
  color: var(--color-text, #334);
  line-height: 1.6;
}
.acc__a strong { color: #184b63; }

/* 3. Типографика внутренних страниц: ровные отступы разделов и вводных */
.article-lead,
.teaches__intro {
  max-width: 54rem;
}
.section > .container > .section__title {
  margin-bottom: 1rem;
}

/* 4. Единый стиль подстраниц (блоки одностраничника сведены к одному ритму).
   Скоп .jc-page — только на <main> контентных страниц, главную не трогает. */

/* 4.1 Единый стиль заголовков: без капители, один цвет, по левой линии.
   Иерархия кеглем: H1 крупнее, H2-подзаголовки мельче тем же весом. */
.jc-page .section__title,
.jc-page .helps__title,
.jc-page .teaches__title {
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-primary-dark);
  text-align: left;
}
.jc-page h1.section__title {
  font-size: clamp(1.75rem, 4.5vw, 2.375rem);
  margin: 0 0 1.25rem;
}
.jc-page h2.section__title,
.jc-page .helps__title,
.jc-page .teaches__title {
  font-size: clamp(1.1875rem, 2.6vw, 1.5rem);
  margin: 0 0 1.25rem;
}
.jc-page .teaches__title {
  display: block;
}
.jc-page .teaches__title-accent {
  color: inherit;
}

/* 4.2 Единая левая линия: заголовки и вводные выравниваем влево,
   узкую центрованную колонку .teaches__inner распускаем на ширину контейнера.
   Компоненты (3 шага в ряд, callout-бокс, карточки) НЕ трогаем. */
.jc-page .teaches__intro {
  text-align: left;
  margin-inline: 0;
}
.jc-page .teaches__inner {
  max-width: 72rem;
  margin-inline: auto;
}
.jc-page .teaches__list {
  margin-inline: 0;
}

/* 4.3 Единый вертикальный ритм секций: .helps сбрасываем с 4.5rem до 3.5rem.
   Первой секции сохраняем клиренс под фикс-шапку. */
.jc-page section.section {
  padding-block: 3.5rem;
}
.jc-page > section:first-child:not(.hero) {
  padding-top: calc(var(--header-height) + 1.75rem);
}

/* 4.4 Карточки «три вида крафтинга» — параллельные категории с иконками */
.jc-page .helps--cards .helps__steps {
  gap: 1.25rem;
}
.jc-page .helps--cards .helps__step {
  flex: 1;
  align-items: flex-start;
  text-align: left;
  gap: 1rem;
  background: var(--color-white);
  border: 1px solid rgba(43, 122, 158, 0.16);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  box-shadow: 0 6px 22px -14px rgba(31, 95, 125, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
  overflow: hidden;
}
.jc-page .helps--cards .helps__step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.jc-page .helps--cards .helps__step:hover,
.jc-page .helps--cards .helps__step:focus-within {
  transform: translateY(-5px);
  box-shadow: 0 20px 44px -20px rgba(31, 95, 125, 0.55);
  border-color: var(--color-primary);
}
.jc-page .helps--cards .helps__step:hover::before,
.jc-page .helps--cards .helps__step:focus-within::before {
  transform: scaleX(1);
}
.jc-page .helps--cards .helps__num {
  width: 3rem;
  height: 3rem;
  font-size: 1.3rem;
  color: var(--color-primary);
  background: var(--color-surface-soft);
  border: none;
  box-shadow: none;
  border-radius: 14px;
}
.jc-page .helps--cards .helps__step-body {
  max-width: none;
}

/* 4.5 Карточки «управление стрессом» — последовательный процесс, иной вид */
.jc-page .helps--process .helps__steps {
  gap: 1rem;
  align-items: stretch; /* карточки одинаковой высоты */
}
.jc-page .helps--process .helps__step {
  flex: 1;
  align-items: flex-start;
  text-align: left;
  gap: 0.9rem;
  background: var(--color-bg-alt);
  border: 1px solid rgba(43, 122, 158, 0.12);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.4rem 1.3rem;
}
.jc-page .helps--process .helps__num {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.05rem;
  color: #fff;
  background: var(--color-primary);
  border: none;
  box-shadow: none;
}
.jc-page .helps--process .helps__step-body {
  max-width: none;
}

/* 4.6 Пунктирный коннектор одностраничника на подстраницах не нужен */
.jc-page .helps__timeline {
  display: none;
}

/* 4.7 Callout в карточных блоках — по левой линии, на всю ширину ряда карточек.
   Был узкий (46rem) и прижат влево; на десктопе раздвигаем до ширины контейнера. */
.jc-page .helps__callout {
  margin-inline: 0;
  text-align: left;
  max-width: none;
}
/* Заголовок callout без капители — как остальные заголовки подстраниц */
.jc-page .helps__callout-lead {
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-primary-dark);
}

/* 4.9 «Зачем это бизнесу» — сетка карточек-выгод на всю ширину.
   Был узкий список галочек у левого края, справа пусто. Теперь 2x2,
   по той же левой линии и в том же карточном ритме, что и соседние блоки. */
.jc-page .teaches--benefits .teaches__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: none;
  margin: 0;
}
.jc-page .teaches--benefits .teaches__item {
  background: var(--color-white);
  border: 1px solid rgba(43, 122, 158, 0.16);
  border-radius: var(--radius);
  padding: 1.2rem 1.35rem;
  box-shadow: 0 6px 22px -16px rgba(31, 95, 125, 0.4);
}
@media (max-width: 640px) {
  .jc-page .teaches--benefits .teaches__list {
    grid-template-columns: 1fr;
  }
}

/* 4.8 Форма-лид: уже по ширине, воздух между полями и согласием */
.jc-page .contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 32rem;
  margin: 0;
}
.jc-page .contact-form .btn {
  align-self: flex-start;
}

/* 5. Страница «Курс» (/kurs/) */

/* 5.1 Итоговая фраза блока «Как работает курс» — вывод предыдущих пунктов,
   без галочки, отделён тонкой линией сверху. */
.jc-page .program__feature--result {
  border-top: 1px solid rgba(43, 122, 158, 0.18);
  padding-top: 0.75rem;
  margin-top: -0.5rem;
}

/* 5.2 «4 шага к запуску» — переходы между шагами градиентным бейджем-шевроном.
   Мобилка: шаги в столбик, бейдж вниз между ними, лёгкое движение. */
.jc-page .helps__steps--flow .helps__step:not(:last-child)::after {
  content: "\276F"; /* ❯ heavy chevron */
  position: absolute;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 6px 16px -6px rgba(31, 95, 125, 0.75);
  z-index: 2;
  bottom: -1.7rem;
  left: 50%;
  transform: translateX(-50%) rotate(90deg); /* шеврон смотрит вниз */
  animation: flow-bob-down 1.7s ease-in-out infinite;
}
@keyframes flow-bob-down {
  0%, 100% { transform: translateX(-50%) rotate(90deg) translateY(0); }
  50% { transform: translateX(-50%) rotate(90deg) translateY(3px); }
}
@media (min-width: 768px) {
  /* Десктоп: шаги в ряд, бейдж вправо в разрыве между ними. */
  .jc-page .helps__steps--flow .helps__step:not(:last-child)::after {
    top: 1.75rem;
    bottom: auto;
    left: auto;
    right: 0;
    transform: translate(calc(50% + 0.5rem), -50%) rotate(0deg);
    animation: flow-bob-right 1.7s ease-in-out infinite;
  }
  @keyframes flow-bob-right {
    0%, 100% { transform: translate(calc(50% + 0.5rem), -50%) translateX(0); }
    50% { transform: translate(calc(50% + 0.5rem), -50%) translateX(3px); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .jc-page .helps__steps--flow .helps__step:not(:last-child)::after {
    animation: none;
  }
}

/* 5.2b Финальный шаг «Запуск» — взрыв: кружок набухает, разлетаются частицы,
   рождается цифра 4. Запуск по появлению в зоне видимости (класс .is-boom). */
.jc-page .helps__steps-wrap--flow {
  overflow: visible; /* чтобы частицы взрыва не обрезались */
}
.jc-page .helps__num--boom {
  position: relative;
  overflow: visible;
}
.jc-page .helps__num--boom .boom__digit {
  position: relative;
  z-index: 2;
  line-height: 1;
}
.jc-page .helps__num--boom .boom__burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.jc-page .helps__num--boom .boom__burst i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.45rem;
  height: 0.45rem;
  margin: -0.225rem 0 0 -0.225rem;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0;
}
.jc-page .helps__num--boom .boom__burst i:nth-child(1) { --a: 0deg; }
.jc-page .helps__num--boom .boom__burst i:nth-child(2) { --a: 45deg; background: var(--color-primary-dark); }
.jc-page .helps__num--boom .boom__burst i:nth-child(3) { --a: 90deg; }
.jc-page .helps__num--boom .boom__burst i:nth-child(4) { --a: 135deg; background: var(--color-primary-dark); }
.jc-page .helps__num--boom .boom__burst i:nth-child(5) { --a: 180deg; }
.jc-page .helps__num--boom .boom__burst i:nth-child(6) { --a: 225deg; background: var(--color-primary-dark); }
.jc-page .helps__num--boom .boom__burst i:nth-child(7) { --a: 270deg; }
.jc-page .helps__num--boom .boom__burst i:nth-child(8) { --a: 315deg; background: var(--color-primary-dark); }

/* Запуск анимации */
.jc-page .helps__num--boom.is-boom {
  animation: boom-swell 2.2s cubic-bezier(0.3, 1.2, 0.4, 1) both;
}
.jc-page .helps__num--boom.is-boom .boom__digit {
  animation: boom-digit 2.2s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.jc-page .helps__num--boom.is-boom .boom__burst i {
  animation: boom-particle 1.2s ease-out 0.84s forwards;
}
@keyframes boom-swell {
  0% { transform: scale(0.45); box-shadow: 0 0 0 0 rgba(43, 122, 158, 0); }
  38% { transform: scale(1.32); box-shadow: 0 0 26px 6px rgba(43, 122, 158, 0.55); }
  50% { transform: scale(1.12); }
  64% { transform: scale(0.88); box-shadow: 0 0 0 0 rgba(43, 122, 158, 0); }
  100% { transform: scale(1); }
}
@keyframes boom-digit {
  0%, 40% { opacity: 0; transform: scale(0); }
  58% { opacity: 1; transform: scale(1.45); }
  74% { transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes boom-particle {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-2rem) scale(0.3); }
}
@media (prefers-reduced-motion: reduce) {
  .jc-page .helps__num--boom.is-boom,
  .jc-page .helps__num--boom.is-boom .boom__digit,
  .jc-page .helps__num--boom.is-boom .boom__burst i {
    animation: none;
  }
  .jc-page .helps__num--boom .boom__digit { opacity: 1; transform: none; }
}

/* 5.3 «Этапы создания программы» — интерактивная лесенка вместо аккордеона.
   Вертикальный стэппер: нумерованные узлы на соединительной линии + карточки. */
.jc-page .ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  text-align: left;
}
.jc-page .ladder__item {
  position: relative;
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  padding-bottom: 1.1rem;
}
.jc-page .ladder__item:last-child {
  padding-bottom: 0;
}
/* Соединительная линия между узлами */
.jc-page .ladder__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: 3rem;
  bottom: -0.2rem;
  width: 2px;
  background: linear-gradient(var(--color-primary), rgba(43, 122, 158, 0.25));
  transform: translateX(-50%);
}
.jc-page .ladder__num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  box-shadow: 0 6px 16px -8px rgba(31, 95, 125, 0.7);
}
.jc-page .ladder__body {
  background: var(--color-white);
  border: 1px solid rgba(43, 122, 158, 0.16);
  border-radius: var(--radius);
  padding: 0.9rem 1.15rem;
  box-shadow: 0 6px 22px -16px rgba(31, 95, 125, 0.4);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.jc-page .ladder__item:hover .ladder__body,
.jc-page .ladder__item:focus-within .ladder__body {
  transform: translateX(4px);
  box-shadow: 0 16px 34px -18px rgba(31, 95, 125, 0.55);
  border-color: var(--color-primary);
}
.jc-page .ladder__title {
  display: block;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 0.15rem;
}
.jc-page .ladder__text {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* 5.4 «Что получает компания» — две колонки на десктопе (было три). */
@media (min-width: 640px) {
  .jc-page .stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 6. Благодарственные письма — раскрывающаяся галерея (страница эксперта) */
.jc-page .letters {
  border: 1px solid rgba(43, 122, 158, 0.2);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  overflow: hidden;
}
.jc-page .letters__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 1.15rem 3rem 1.15rem 1.35rem;
  position: relative;
}
.jc-page .letters__summary::-webkit-details-marker { display: none; }
.jc-page .letters__summary::after {
  content: "\276F";
  position: absolute;
  right: 1.35rem;
  top: 1.3rem;
  color: var(--color-primary);
  transition: transform 0.25s ease;
  transform: rotate(90deg);
}
.jc-page .letters[open] .letters__summary::after { transform: rotate(-90deg); }
.jc-page .letters__summary-title {
  font-weight: 800;
  color: var(--color-primary-dark);
  font-size: 1.05rem;
}
.jc-page .letters__summary-hint {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.jc-page .letters__grid {
  list-style: none;
  margin: 0;
  padding: 0 1.35rem 1.35rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
}
.jc-page .letters__link {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--color-text-muted);
}
.jc-page .letters__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid rgba(43, 122, 158, 0.14);
  box-shadow: 0 6px 18px -12px rgba(31, 95, 125, 0.5);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.jc-page .letters__link:hover .letters__img,
.jc-page .letters__link:focus-visible .letters__img {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -16px rgba(31, 95, 125, 0.6);
}
.jc-page .letters__caption {
  font-size: 0.82rem;
  line-height: 1.35;
}

/* Hub: главная = навигация по разделам, без дублирования подстраниц */
.hub__lead{max-width:640px;margin:0 0 2rem;text-align:left;color:var(--color-text-muted);font-size:1.125rem;line-height:1.5}
.hub__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.hub__card{display:flex;flex-direction:column;gap:.6rem;padding:1.75rem;background:var(--color-white);border:1px solid var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow);text-decoration:none;color:var(--color-text);transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}
.hub__card:hover,.hub__card:focus-visible{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(43,122,158,.5);border-color:var(--color-primary);outline:none}
.hub__card-kicker{font-family:"Caveat",cursive;font-size:1.5rem;line-height:1;color:var(--color-primary)}
.hub__card-title{margin:0;font-size:1.3rem;font-weight:800;line-height:1.2}
.hub__card-text{margin:0;flex:1;color:var(--color-text-muted);font-size:1rem;line-height:1.55}
.hub__card-link{font-weight:700;color:var(--color-primary)}
@media(max-width:720px){.hub__grid{grid-template-columns:1fr}}