/* =========================================================
   theme.min.css — дизайн-токены и базовое оформление внутренних
   страниц. Все остальные CSS-файлы блоков опираются на эти токены.
   Подключается первым среди новых файлов.
   ========================================================= */

/* ---------- Токены ---------- */
:root {
  --c-bg:        #ffffff;
  --c-bg-alt:    #f6f7f9;
  --c-bg-dark:   #1a1c20;
  --c-text:      #1a1c20;
  --c-text-mute: #5a6169;
  --c-border:    #e3e6ea;
  --c-accent:    #b00a27;
  --c-accent-h:  #8e081f;
  --c-link:      #1a1c20;

  --c-radius:0;
  --c-radius-sm:0;

  --c-shadow:    0 8px 24px rgba(20, 22, 26, 0.08);
  --c-shadow-lg: 0 20px 60px rgba(20, 22, 26, 0.18);

  --c-container: 1240px;
  --c-gap:       24px;
  --c-gap-sm:    12px;

  --c-transition: 0.2s ease;
}

/* ---------- Базовая страница ---------- */
.c-page {
  padding: 32px 0 64px;
}
.c-page__head {
  margin: 0 0 32px;
  max-width: 900px;
}
.c-page__title {
  margin: 0 0 12px;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.15;
  font-weight: 700;
  color: var(--c-text);
}
.c-page__lead {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-text-mute);
}

/* ---------- Заголовок секции ---------- */
.c-service-section__title {
  margin: 0 0 24px;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  font-weight: 700;
  color: var(--c-text);
}

/* ---------- Шапки секций блоков (общий паттерн) ---------- */
.c-services__head,
.c-cases__head,
.c-team__head,
.c-reviews__head,
.c-articles-block__head,
.c-faq__head,
.c-advantages__head,
.c-gallery__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}



/* ---------- Дополнительные кнопки ---------- */
.button--outline {
  background: transparent;
  border: 1px solid var(--c-border);
  color: var(--c-text);
}
.button--outline:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: transparent;
}
/* =========================================================
   Доступность и SEO: скрыть визуально, оставить для скринридеров
   и поисковых роботов. НЕ используем display:none и visibility:hidden.
   ========================================================= */
.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important}
.sr-only-focusable:active,.sr-only-focusable:focus{position:static !important;width:auto !important;height:auto !important;overflow:visible !important;clip:auto !important;white-space:normal !important}

/* ===== TYPOGRAPHY LISTS ===== */
/*
   Глобальный сброс ol,ul { list-style: none } в legacy-epam.min.css
   убирал маркеры на всём сайте. Возвращаем красивые маркеры для
   контентных списков. Акцент #b00a27, крупные отступы, вложенность.
*/

/* --- Маркированный список (ul) --- */
.c-article__body ul,
.c-page p + ul,
.c-page p + ol,
.c-page__lead + ul,
.c-page__lead + ol,
.c-panel ul,
.c-panel ol,
.c-legal ul,
.c-legal ol,
.c-service-cta ul,
.c-legal__section ul,
.c-legal__section ol {
  list-style: none;
  margin: 0 0 20px;
  padding: 0 0 0 28px;
}
.c-article__body ul > li,
.c-page p + ul > li,
.c-page p + ol > li,
.c-page__lead + ul > li,
.c-page__lead + ol > li,
.c-panel ul > li,
.c-panel ol > li,
.c-legal ul > li,
.c-legal ol > li,
.c-service-cta ul > li,
.c-legal__section ul > li,
.c-legal__section ol > li {
  position: relative;
  padding-left: 20px;
  margin: 0 0 10px;
  line-height: 1.65;
}

/* Маркер ul — красный квадрат с белой обводкой (в стиле сайта) */
.c-article__body ul > li::before,
.c-page p + ul > li::before,
.c-page__lead + ul > li::before,
.c-panel ul > li::before,
.c-legal ul > li::before,
.c-service-cta ul > li::before,
.c-legal__section ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 8px;
  background: var(--c-accent);
  border-radius: 1px;
}

/* --- Нумерованный список (ol) --- */
.c-article__body ol,
.c-page p + ol,
.c-page__lead + ol,
.c-panel ol,
.c-legal ol,
.c-legal__section ol {
  counter-reset: c-ol;
}
.c-article__body ol > li,
.c-page p + ol > li,
.c-page__lead + ol > li,
.c-panel ol > li,
.c-legal ol > li,
.c-legal__section ol > li {
  counter-increment: c-ol;
  padding-left: 34px;
}
.c-article__body ol > li::before,
.c-page p + ol > li::before,
.c-page__lead + ol > li::before,
.c-panel ol > li::before,
.c-legal ol > li::before,
.c-legal__section ol > li::before {
  content: counter(c-ol) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-accent);
  line-height: 1.65;
  min-width: 24px;
}

/* --- Вложенные списки --- */
.c-article__body ul ul,
.c-article__body ol ol,
.c-article__body ul ol,
.c-article__body ol ul,
.c-legal__section ul ul,
.c-legal__section ol ol {
  margin: 10px 0 10px;
  padding-left: 20px;
}
.c-article__body ul ul > li::before,
.c-legal__section ul ul > li::before {
  background: transparent;
  border: 2px solid var(--c-accent);
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* --- Тёмный вариант (в .c-full--dark / .c-service-cta) --- */
.c-full--dark ul > li::before,
.c-service-cta ul > li::before {
  background: #ffffff;
}
.c-full--dark ol > li::before,
.c-service-cta ol > li::before {
  color: #ffffff;
}

/* ===== LIST SANITY ===== */
/*
   Глобальная защита: все <ul>/<ol> с явным class="..."
   не должны показывать стандартные маркеры (disc/decimal/...).
   Если списку нужны свои маркеры — они задаются через ::before/::after
   или через вложенные <span>/<svg>-элементы.

   Контентные списки БЕЗ класса (внутри .c-article__body, .c-legal__section и т.д.)
   не попадают под это правило и сохраняют кастомные маркеры из TYPOGRAPHY LISTS.
*/
ul[class],
ol[class] {
  list-style: none;
}

/* Дополнительно — вложенные ul/ol без класса внутри списка с классом. */
ul[class] ul,
ul[class] ol,
ol[class] ul,
ol[class] ol {
  list-style: none;
}

/* Списки внутри .c-article__body БЕЗ класса — тоже снимаем, чтобы TYPOGRAPHY LISTS
   сработал через ::before, а не через list-style (иначе дублирование). */
.c-article__body > ul,
.c-article__body > ol {
  list-style: none;
}
.c-article__body > ul > li,
.c-article__body > ol > li {
  list-style: none;
}

/* ===== SECTION HEADINGS ===== */
/*
   Единый стиль крупных заголовков секций на ВСЕХ страницах
   (не только на главной). Красная вертикальная засечка + отступ.
   Применяется к h2 внутри .c-*__head для стандартных секций.
*/
.c-sh__head,
.c-advantages__head,
.c-stats__head,
.c-process__head,
.c-trust__head,
.c-cases__head,
.c-team__head,
.c-rc__head,
.c-articles-block__head,
.c-faq__head {
  margin: 0 0 32px;
  max-width: 780px;
  text-align: left;   /* прижимаем к левому краю */
}

/* Прижимаем все заголовки к левому краю */

/* Общий вид H2 */
.c-sh__title,
.c-advantages__head h2,
.c-stats__head h2,
.c-process__head h2,
.c-trust__head h2,
.c-cases__head h2,
.c-team__head h2,
.c-rc__head h2,
.c-articles-block__head h2,
.c-faq__head h2 {
  position: relative;
  padding-left: 20px;
  margin-left: 0;
  margin-top: 0;
  margin-right: 0;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.25;
  font-weight: 700;
  color: var(--c-text);
}

/* Красная засечка */
.c-sh__title::before,
.c-advantages__head h2::before,
.c-stats__head h2::before,
.c-process__head h2::before,
.c-trust__head h2::before,
.c-cases__head h2::before,
.c-team__head h2::before,
.c-rc__head h2::before,
.c-articles-block__head h2::before,
.c-faq__head h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 4px;
  background: var(--c-accent);
}

/* --- Адаптив --- */
@media (max-width: 640px) {
  .c-sh__title,
  .c-advantages__head h2,
  .c-stats__head h2,
  .c-process__head h2,
  .c-trust__head h2,
  .c-cases__head h2,
  .c-team__head h2,
  .c-rc__head h2,
  .c-articles-block__head h2,
  .c-faq__head h2 {
    padding-left: 14px;
  }
  .c-sh__title::before,
  .c-advantages__head h2::before,
  .c-stats__head h2::before,
  .c-process__head h2::before,
  .c-trust__head h2::before,
  .c-cases__head h2::before,
  .c-team__head h2::before,
  .c-rc__head h2::before,
  .c-articles-block__head h2::before,
  .c-faq__head h2::before {
    width: 3px;
  }
}

/* ===== SECTION SPACING ===== */
/* Единый вертикальный ритм между секциями на всех страницах.
   Применяется к прямым секциям внутри .wrapper > .percent. */
.wrapper > .percent > section {
  margin-top: 0;
  margin-bottom: 56px;
}
.wrapper > .percent > section:last-child {
  margin-bottom: 0;
}
/* Для главной, где часто используется body.homepage, оставляем тот же ритм */
body.homepage .percent > section {
  margin-top: 0;
  margin-bottom: 56px;
}
body.homepage .percent > section:last-child {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .wrapper > .percent > section,
  body.homepage .percent > section {
    margin-bottom: 40px;
  }
}

/* ===== SECTION LEADS ===== */
/*
   Подзаголовки-комментарии под H2. Прижаты к левому краю,
   выровнены точно по вертикальной засечке заголовка (padding-left = 20px,
   как у H2 в SECTION HEADINGS).
*/
.c-sh__lead,
.c-advantages__head > p,
.c-stats__lead,
.c-process__lead,
.c-trust__lead,
.c-team__lead,
.c-articles-block__head > p,
.c-faq__head > p,
.c-cases__head > p {
  margin: 10px 0 0;
  padding-left: 20px;
  margin-left: 0;
  margin-right: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-text-mute);
  text-align: left;
  max-width: 780px;
}

/* Eyebrow в c-sh — метка над заголовком, тоже слева */
.c-sh__eyebrow {
  margin-left: 0;
}

/* ===== Адаптив ===== */
@media (max-width: 640px) {
  .c-sh__lead,
  .c-advantages__head > p,
  .c-stats__lead,
  .c-process__lead,
  .c-trust__lead,
  .c-team__lead,
  .c-articles-block__head > p,
  .c-faq__head > p,
  .c-cases__head > p {
    padding-left: 14px;
  }
}

/* ===== HEAD WITH ACTION ===== */
/*
   Шапки секций, в которых есть заголовок + кнопка-ссылка «Все X» справа.
   Раскладка: flex, заголовок слева, кнопка справа, в одну линию.
   Отступы у кнопки — только по горизонтали, никакого margin-top.
*/
.c-advantages__head,
.c-cases__head,
.c-team__head,
.c-articles-block__head,
.c-rc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  max-width: none;   /* снимаем ограничение 780px из SECTION HEADINGS */
  width: 100%;
  margin: 0 0 32px;
}

/* Заголовок занимает оставшееся место, но не растягивается на 100% */
.c-advantages__head > h2,
.c-cases__head > h2,
.c-team__head > h2,
.c-articles-block__head > h2,
.c-rc__head > h2 {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 780px;
}

/* Lead внутри head (c-team) — переносится на новую строку под заголовком */
.c-team__head > .c-team__lead,
.c-advantages__head > .c-advantages__lead {
  flex: 1 1 100%;
  order: 3;
  margin: 10px 0 0;
  padding-left: 20px;
}

/* Кнопка-ссылка «Все X» — своя, выровнена по центру вертикали с заголовком */
.c-advantages__all,
.c-cases__all,
.c-team__all,
.c-articles-block__all,
.c-rc__add-btn {
  flex: 0 0 auto;
  margin: 0;   /* никакого верхнего отступа */
  align-self: center;
}

/* Стиль кнопок «Все X» (общая часть для удобства) */
.c-advantages__all,
.c-cases__all,
.c-team__all,
.c-articles-block__all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: transparent;
  border: 2px solid var(--c-accent);
  color: var(--c-accent);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition:
    background-color .2s ease,
    color .2s ease,
    transform .2s ease;
}
.c-advantages__all:hover,
.c-cases__all:hover,
.c-team__all:hover,
.c-articles-block__all:hover {
  background: var(--c-accent);
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);
}
.c-advantages__all .arrow_s,
.c-cases__all .arrow_s,
.c-team__all .arrow_s,
.c-articles-block__all .arrow_s {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 2px;
  transition: transform .2s ease;
}
.c-advantages__all:hover .arrow_s,
.c-cases__all:hover .arrow_s,
.c-team__all:hover .arrow_s,
.c-articles-block__all:hover .arrow_s {
  transform: rotate(45deg) translate(2px, -2px);
}

/* Кнопка «Оставить отзыв» в c-rc__head — вертикально по центру с h2 */
.c-rc__add-btn {
  align-self: center;
}

/* Мобильный: кнопка переезжает под заголовок и растягивается на всю ширину */
@media (max-width: 640px) {
  .c-advantages__head,
  .c-cases__head,
  .c-team__head,
  .c-articles-block__head,
  .c-rc__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .c-advantages__head > h2,
  .c-cases__head > h2,
  .c-team__head > h2,
  .c-articles-block__head > h2,
  .c-rc__head > h2 {
    padding-left: 14px;
  }
  .c-team__head > .c-team__lead,
  .c-advantages__head > .c-advantages__lead {
    padding-left: 14px;
    order: 0;
  }
  .c-advantages__all,
  .c-cases__all,
  .c-team__all,
  .c-articles-block__all {
    align-self: stretch;
    justify-content: center;
  }
}