/* =========================================================
   blocks-services.min.css — сетка услуг на странице /uslugi
   (.c-services-grid) и встраиваемый блок услуг (.c-services).
   Опирается на токены из theme.min.css.
   ========================================================= */

/* ---------- Сетка услуг на странице /uslugi ---------- */
.c-services-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--c-gap);
}
.c-services-card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius:0;
  transition:
    transform var(--c-transition),
    box-shadow var(--c-transition),
    border-color var(--c-transition);
}
.c-services-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--c-shadow);
  border-color: transparent;
}
.c-services-card__link {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.c-services-card__title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-text);
}
.c-services-card__text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-text-mute);
  flex: 1;
}
.c-services-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-accent);
}

/* ---------- Встраиваемый блок услуг ---------- */
.c-services { margin: 48px 0; }

.c-services__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--c-gap);
}
.c-services--cols-2 .c-services__list { grid-template-columns: repeat(2, 1fr); }
.c-services--cols-3 .c-services__list { grid-template-columns: repeat(3, 1fr); }
.c-services--cols-4 .c-services__list { grid-template-columns: repeat(4, 1fr); }

.c-services__item { margin: 0; }
.c-services__link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  height: 100%;
  background: var(--c-bg-alt);
  border-radius:0;
  border: 1px solid var(--c-border);
  text-decoration: none;
  color: inherit;
  transition:
    transform var(--c-transition),
    box-shadow var(--c-transition),
    border-color var(--c-transition);
}
.c-services__link:hover {
  transform: translateY(-2px);
  box-shadow: var(--c-shadow);
  border-color: transparent;
}
.c-services__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--c-text);
}
.c-services__desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-text-mute);
  flex: 1;
}
.c-services__more {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-accent);
}

/* =========================================================
   SERVICES HOME — премиальный блок услуг на главной (.c-sh)
   ========================================================= */
.c-sh {
  /* Примыкает к hero-слайдеру сверху — нет верхнего отступа. */
  margin-top: 0;
  margin-bottom: 64px;
  /* Full-bleed: фон растягивается на всю ширину экрана,
     даже если родитель ограничен 1480px (.wrapper-top). */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
  background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%);
  padding: 64px 0 72px;
  position: relative;
  overflow: hidden;
}
.c-sh::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--c-border) 50%, transparent 100%);
}

.c-sh__head { max-width: 780px; margin: 0 0 44px; text-align: left; }
.c-sh__eyebrow {
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 14px;
  background: rgba(176, 10, 39, 0.08);
  color: var(--c-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 999px;
}
.c-sh__title { margin: 0 0 14px; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; font-weight: 700; color: var(--c-text); }
.c-sh__lead { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--c-text-mute); }

/* ---------- Сетка карточек ---------- */
.c-sh__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.c-sh-card {
  margin: 0;
  display: flex;
}
.c-sh-card__link {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 224px;
  padding: 18px 20px 14px;
  background: #ffffff;
  border: 1px solid #f0f0f0;
  color: inherit;
  text-decoration: none;
  isolation: isolate;
  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}
.c-sh-card__link:hover {
  transform: translateY(-4px);
  box-shadow: var(--c-shadow-lg);
  border-color: transparent;
}

/* Фоновое изображение с оверлеем */
.c-sh-card__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.c-sh-card__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  filter: brightness(1.06) saturate(105%) contrast(0.98);
  transform: scale(1.06);
  transition: transform .5s ease;
}
.c-sh-card__bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.72) 55%,
      rgba(255, 255, 255, 0.88) 100%);
}
.c-sh-card__link:hover .c-sh-card__bg img {
  transform: scale(1.12);
}

/* Иконка услуги */
.c-sh-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  background: rgba(176, 10, 39, 0.06);
  color: var(--c-accent);
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.c-sh-card--img .c-sh-card__icon {
  background: rgba(176, 10, 39, 0.10);
  color: var(--c-accent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.c-sh-card__icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
.c-sh-card__link:hover .c-sh-card__icon {
  background: var(--c-accent);
  color: #ffffff;
  transform: translateY(-2px);
}

/* Тело карточки */
.c-sh-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  margin-bottom: 12px;
}
.c-sh-card__title {
  font-size: 17px;
  line-height: 1.25;
  font-weight: 700;
  color: #1a1a1a;
  transition: color .3s ease;
}
.c-sh-card__desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: #444444;
  transition: color .3s ease;
}
.c-sh-card--img .c-sh-card__title { color: #1a1a1a; }
.c-sh-card--img .c-sh-card__desc  { color: #444444; }

/* Стрелка / «Подробнее» */
.c-sh-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-accent);
  transition: color .3s ease, gap .3s ease;
}
.c-sh-card--img .c-sh-card__more {
  color: var(--c-accent);
}
.c-sh-card__more svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s ease;
}
.c-sh-card__link:hover .c-sh-card__more svg {
  transform: translateX(4px);
}
.c-sh-card__link:hover .c-sh-card__more {
  gap: 12px;
}

/* Футер блока — кнопка «Все услуги» */
.c-sh__foot {
  margin: 44px 0 0;
  text-align: center;
}

/* Адаптив */
@media (max-width: 1024px) {
  .c-sh__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .c-sh { padding: 40px 0 48px; margin: 32px 0 40px; }
  .c-sh__grid { grid-template-columns: 1fr; gap: 16px; }
  .c-sh__head { margin-bottom: 28px; }
  .c-sh-card__link { min-height: 182px; padding: 16px 16px 14px; }
  .c-sh-card__icon { width: 38px; height: 38px; margin-bottom: 12px; }
  .c-sh-card__icon svg { width: 18px; height: 18px; }
  .c-sh-card__title { font-size: 16px; }
  .c-sh__foot { margin-top: 28px; }
}

/* Дополнительные отступы для контента внутри .c-sh на очень узких экранах.
   padding-left/right НЕ добавляем — уже даёт .percent (обёртка .c-sh). */
@media (max-width: 480px) {
  .c-sh__head { margin-bottom: 24px; }
  .c-sh__title { font-size: clamp(22px, 6vw, 28px); }
  .c-sh__lead { font-size: 15px; }
}

/* ===== SAFETY NET ===== */
.c-sh__grid,
.c-sh__grid li,
.c-services__list,
.c-services__list li,
.c-services-grid,
.c-services-grid li {
  list-style: none !important;
}

/*
   Убираем возможный внешний зазор между баннером и первой секцией .c-sh.
   Проблема: main.c-page внутри .wrapper-top наследует padding-top
   из .wrapper-top { padding: 10px 10px 0 } — это даёт полосу 10px.
   Обнуляем верхние отступы для первого блока на главной.
*/

/* (удалено @media с padding-top:0 у wrapper-top) */

/*
   Внутренние отступы блока «Чем мы можем помочь» (.c-sh):
   - padding-top/bottom — воздух от баннера сверху и до следующей секции снизу
   - padding-left/right — из .wrapper > .percent (20px в базовой сетке)
   Для мобильных — меньше.
*/

/*
   Внутренний отступ у блока «Чем мы можем помочь» на главной.
   margin-top: 0 — блок прижат к баннеру сверху.
   padding-top/bottom — воздух внутри блока (перед заголовком и после).
   padding-left/right — 0, потому что внутри .wrapper > .percent (20px по бокам).
*/

/*
   Убираем внешний зазор между hero-слайдером и блоком услуг «Чем мы можем помочь».
   Правило применяется ТОЛЬКО на главной (body.homepage), поэтому на /uslugi,
   /en/, /about и других страницах поведение .c-sh остаётся прежним.
*/
body.homepage .c-sh {
  margin-top: 0 !important;
  padding-top: 0 !important;       /* убран внешний зазор сверху */
  padding-bottom: 64px !important;
}

/* Внутренний «воздух» даём контенту блока, а не самому .c-sh */
body.homepage .c-sh .wrapper > .percent {
  padding-top: 48px;
}

@media (max-width: 640px) {
  body.homepage .c-sh {
    padding-top: 0 !important;
    padding-bottom: 48px !important;
  }
  body.homepage .c-sh .wrapper > .percent {
    padding-top: 32px;
  }
}

/* ===================================================================
   HOMEPAGE: no gap (slider → services block)
   ===================================================================
   Убираем зазор между hero-слайдером и блоком «Чем мы можем помочь»
   на главной странице.

   Зазор создают:
   1. `.c-page { padding: 32px 0 64px; }` из theme.min.css
   2. `.c-page { padding: 24px 0 48px; }` из responsive.min.css (≤600px)
   3. `.wrapper-top { padding: 10px 10px 0; }` из legacy-epam.min.css (≤1023.98px)

   Все три перебиваем ТОЛЬКО для главной (body.homepage).
   На /uslugi, /en/... других страницах поведение не меняется.
   =================================================================== */

/* Базовый сброс (перебивает theme + responsive — оба ниже специфичностью) */
body.homepage main.c-page--home,
body.homepage main.c-page--home.c-page--home,
body.homepage .c-page--home {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Мобильные — сбрасываем и .c-page и .wrapper-top */
@media (max-width: 1023.98px) {
  body.homepage .wrapper-top {
    padding-top: 0 !important;
  }
  body.homepage main.c-page--home,
  body.homepage .c-page--home {
    padding-top: 0 !important;
  }
}
@media (max-width: 640px) {
  body.homepage main.c-page--home,
  body.homepage .c-page--home {
    padding-top: 0 !important;
  }
}

/* Внутренний «воздух» — на контент блока, а не на .c-sh */
body.homepage .c-sh > .wrapper > .percent {
  padding-top: 56px;
}
@media (max-width: 640px) {
  body.homepage .c-sh > .wrapper > .percent {
    padding-top: 40px;
  }
}

/* Сам .c-sh на главной: без верхнего отступа, только нижний */
body.homepage .c-sh {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 64px !important;
}
@media (max-width: 640px) {
  body.homepage .c-sh {
    padding-bottom: 48px !important;
  }
}