/* =========================================================
   pages-service.min.css — стили страницы услуги (.c-page--service).
   - единый контейнер .c-service-container
   - hero full-bleed с frosted-glass
   - parallax-эффект для фонового изображения
   - breadcrumbs без .wrapper/.percent
   - CTA-кнопка с бегущим бликом
   ========================================================= */

/* ---------- Единый контейнер для всей страницы услуги ---------- */
.c-service-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
  box-sizing: border-box;
}

/* ---------- Убираем вертикальные зазоры у страницы услуги ---------- */
/* padding-top: 0 — чтобы hero встал вплотную под шапкой.
   padding-bottom: 0 — чтобы финальный CTA встал вплотную к футеру. */
.c-page--service {
  padding-top: 0;
  padding-bottom: 0;
}
.c-page--service > .c-service-container {
  padding-top: 0;
  padding-bottom: 0;
}

/* =========================================================
   HERO — ОБЫЧНЫЙ (без фото)
   ========================================================= */
.c-service-hero {
  margin: 0 0 32px;
  padding: 32px;
  background: linear-gradient(180deg, #fafbfc 0%, #f3f5f7 100%);
  border-radius: 0;
  border: 1px solid var(--c-border);
}
.c-service-hero__title {
  margin: 0 0 12px;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.15;
  font-weight: 700;
  color: var(--c-text);
}
.c-service-hero__lead {
  margin: 0 0 24px;
  max-width: 780px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--c-text-mute);
}
.c-service-hero__cta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.c-service-hero__phone {
  font-size: 17px;
  font-weight: 600;
  color: var(--c-text);
  text-decoration: none;
  transition: color var(--c-transition);
}
.c-service-hero__phone:hover { color: var(--c-accent); }

/* =========================================================
   HERO С ФОНОВЫМ ИЗОБРАЖЕНИЕМ (.c-service-hero--image)
   Full-bleed сразу под шапкой, без зазора
   ========================================================= */
.c-service-hero--image {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  background: none;
  border: 0;
  overflow: hidden;
  isolation: isolate;
  min-height: 520px;
  display: flex;
  align-items: center;
}

/* --- Фон --- */
.c-service-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Фото с сильным блюром — эффект «мутного стекла» на всём изображении.
   transform: translate3d(0, 0, 0) будет обновляться JS-параллаксом. */
.c-service-hero__bg-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  filter: blur(6px) saturate(130%) brightness(0.75);
  transform: scale(1.06) translate3d(0, 0, 0);
  will-change: transform;
  transition: transform 0.05s linear;
}

/* Дополнительный слой увеличения для запаса при параллаксе:
   когда фон уезжает вверх/вниз, его края должны оставаться за границами. */
.c-service-hero--image[data-hero-parallax="1"] .c-service-hero__bg-img {
  transform: scale(1.14) translate3d(0, 0, 0);
}

/* Тонкий затемняющий градиент поверх */
.c-service-hero__bg-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg,
      rgba(20, 22, 26, 0.42) 0%,
      rgba(20, 22, 26, 0.28) 60%,
      rgba(176, 10, 39, 0.12) 100%);
}

/* --- Контент поверх --- */
.c-service-hero__content {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 80px 24px;
  width: 100%;
  box-sizing: border-box;
}

/* --- Подложка под заголовком — прозрачная --- */
.c-service-hero__glass {
  display: block;
  padding: 0;
  max-width: 720px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  box-shadow: none;
}

/* --- Текст — белый, с тенью --- */
.c-service-hero--image .c-service-hero__title {
  color: #ffffff;
  max-width: none;
  text-shadow:
    0 2px 24px rgba(0, 0, 0, 0.55),
    0 1px 4px rgba(0, 0, 0, 0.4);
}
.c-service-hero--image .c-service-hero__lead {
  color: rgba(255, 255, 255, 0.94);
  max-width: none;
  margin-bottom: 28px;
  text-shadow:
    0 2px 16px rgba(0, 0, 0, 0.5),
    0 1px 3px rgba(0, 0, 0, 0.35);
}
.c-service-hero--image .c-service-hero__cta { gap: 24px; }
.c-service-hero--image .c-service-hero__phone {
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 2px;
  transition: border-color var(--c-transition);
}
.c-service-hero--image .c-service-hero__phone:hover {
  color: #ffffff;
  border-color: #ffffff;
}

/* =========================================================
   CTA-КНОПКА С БЕГУЩИМ БЛИКОМ
   ========================================================= */
.c-service-hero__cta .button--red {
  position: relative;
  overflow: hidden;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 10px 24px -10px rgba(176, 10, 39, 0.55);
  transition:
    background-color var(--c-transition),
    transform var(--c-transition),
    box-shadow var(--c-transition);
}
.c-service-hero__cta .button--red:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgba(176, 10, 39, 0.65);
}
.c-service-hero__cta .button--red::before {
  content: '';
  position: absolute;
  top: 0;
  left: -140%;
  width: 140%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 70%
  );
  pointer-events: none;
  animation: c-hero-shine 3.2s ease-in-out infinite;
  animation-delay: 0.8s;
}
@keyframes c-hero-shine {
  0%   { left: -140%; }
  35%  { left: 140%; }
  100% { left: 140%; }
}
.c-service-hero__cta .button--red:hover::before {
  animation-duration: 1.1s;
}

/* =========================================================
   ОСТАЛЬНЫЕ СЕКЦИИ
   ========================================================= */
.c-service-intro { margin: 40px 0 32px; }
.c-service-intro p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-text);
  max-width: 900px;
}
.c-service-intro p:last-child { margin-bottom: 0; }

.c-service-tasks,
.c-service-stages,
.c-service-cases,
.c-service-faq { margin: 40px 0; }

.c-service-tasks__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 24px;
}
.c-service-tasks__item {
  position: relative;
  padding: 10px 0 10px 32px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border);
}
.c-service-tasks__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(176, 10, 39, 0.1);
  border: 2px solid var(--c-accent);
  box-sizing: border-box;
}
.c-service-tasks__item::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 19px;
  width: 6px;
  height: 4px;
  border-left: 2px solid var(--c-accent);
  border-bottom: 2px solid var(--c-accent);
  transform: rotate(-45deg);
}

.c-service-stages__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--c-gap);
}
.c-service-stages__item {
  position: relative;
  padding: 24px 20px 20px;
  background: var(--c-bg-alt);
  border-radius: 0;
  border: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.c-service-stages__num {
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
  color: var(--c-accent);
  opacity: 0.35;
}
.c-service-stages__title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-text);
}
.c-service-stages__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-text-mute);
}

/* =========================================================
   АДАПТИВ
   ========================================================= */
@media (max-width: 900px) {
  .c-service-container { padding: 0 20px; }
  .c-service-hero--image { min-height: 420px; }
  .c-service-hero__content { padding: 60px 20px; }
  .c-service-hero--image .c-service-hero__lead { font-size: 16px; }
  .c-service-tasks__list { grid-template-columns: 1fr; }
  .c-service-stages__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .c-service-container { padding: 0 16px; }
  .c-service-hero--image { min-height: 380px; }
  .c-service-hero__content { padding: 48px 16px; }
  .c-service-hero--image .c-service-hero__cta {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .c-service-hero--image .c-service-hero__cta .button { width: 100%; }
  .c-service-stages__list { grid-template-columns: 1fr; }
}

/* Уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .c-service-hero__cta .button--red::before { animation: none; }
  .c-service-hero__bg-img { transition: none; }
}