/* ============================================================
   Syntra Media — services.css
   Каркас services.html (одностраничный лендинг услуг, якоря).
   Масштаб общий с main.css: 1rem = 100px макета при ширине 1559px.

   Переиспользуемые классы шаблона (использует и этап 2 — блоки
   #design, #marketing, #production, #web, #consulting):
   .svc-block          — секция одной услуги (баннер + подразделы)
   .svc-banner         — полноэкранный баннер услуги
   .svc-banner-inner   — обёртка для абсолютного позиционирования текста
   .svc-banner-title   — H2 баннера
   .svc-banner-text    — абзац баннера
   .svc-scroll         — круглая кнопка-скролл вниз
   .svc-subsections    — блок подразделов под баннером
   .svc-section-title  — заголовок подразделов
   .svc-grid           — сетка карточек 2 колонки
   .svc-card           — карточка (фото + текст)
   .svc-card-img       — плитка-изображение карточки
   .svc-card-body      — текстовый блок карточки
   .svc-card-num       — номер карточки
   .svc-card-title     — заголовок карточки
   .svc-card-text      — описание карточки
   ============================================================ */

.svc-block { scroll-margin-top: var(--header-h); }

/* ================= БАННЕР (общий шаблон) ================= */
.svc-banner {
  position: relative;
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  min-height: 6.47rem;
  overflow: hidden;
  color: var(--white);
}
.svc-banner-inner { position: relative; height: 100%; }

.svc-banner-title {
  position: absolute;
  left: 1.131rem;
  top: .574rem;
  right: 1rem;
  font-size: .559rem;
  font-weight: 700;
  line-height: .624rem;
  margin: 0;
}
.svc-banner-text {
  position: absolute;
  left: 1.158rem;
  top: 2.813rem;
  max-width: 4.7rem;
  font-size: .22rem;
  line-height: .246rem;
  margin: 0;
}
.svc-scroll {
  position: absolute;
  left: 2.896rem;
  top: 5.473rem;
  width: .583rem;
  height: .583rem;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: svcScrollWobble 2.4s ease-in-out infinite;
  transition: box-shadow .25s ease;
}
.svc-scroll:hover { box-shadow: 0 .08rem .2rem rgba(17,36,56,.32); }
.svc-scroll svg { width: .22rem; height: .13rem; }
.svc-scroll svg path {
  fill: none;
  stroke: var(--navy);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes svcScrollWobble {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(.08rem); }
}

/* ---------- Баннер: Брендинг (фото, макет p6) ---------- */
/* Фон перерендерен из PDF: тёмно-синее поле #223183 слева под текст + коллаж справа.
   Затемняющий градиент не нужен — поле уже в самой картинке. */
#branding .svc-banner {
  background: #223183 url('../img/branding-hero.webp') center / cover no-repeat;
}

/* ---------- Баннеры: дизайн/маркетинг/продакшн/веб/консалтинг (SVG-арт, без фото) ---------- */
.svc-banner-shapes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.svc-banner-shapes svg { position: absolute; }
.bshape {
  animation-name: bshapeDrift;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes bshapeDrift {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(var(--dx, -14px), var(--dy, 12px)) rotate(var(--drot, 3deg)); }
}

#design .svc-banner {
  background:
    radial-gradient(circle at 82% 20%, rgba(0,123,255,.32) 0%, rgba(0,123,255,0) 45%),
    radial-gradient(circle at 95% 78%, rgba(0,123,255,.22) 0%, rgba(0,123,255,0) 50%),
    radial-gradient(circle at 40% 102%, rgba(0,123,255,.12) 0%, rgba(0,123,255,0) 60%),
    var(--navy);
}
#marketing .svc-banner {
  background:
    radial-gradient(circle at 88% 55%, rgba(0,123,255,.34) 0%, rgba(0,123,255,0) 42%),
    radial-gradient(circle at 66% 22%, rgba(0,123,255,.2) 0%, rgba(0,123,255,0) 55%),
    radial-gradient(circle at 100% 95%, rgba(0,123,255,.16) 0%, rgba(0,123,255,0) 50%),
    var(--navy);
}
#production .svc-banner {
  background:
    radial-gradient(circle at 78% 15%, rgba(0,123,255,.3) 0%, rgba(0,123,255,0) 45%),
    radial-gradient(circle at 92% 64%, rgba(0,123,255,.26) 0%, rgba(0,123,255,0) 48%),
    radial-gradient(circle at 45% 100%, rgba(0,123,255,.14) 0%, rgba(0,123,255,0) 55%),
    var(--navy);
}
#web .svc-banner {
  background:
    radial-gradient(circle at 85% 28%, rgba(0,123,255,.3) 0%, rgba(0,123,255,0) 46%),
    radial-gradient(circle at 60% 84%, rgba(0,123,255,.22) 0%, rgba(0,123,255,0) 52%),
    radial-gradient(circle at 98% 94%, rgba(0,123,255,.16) 0%, rgba(0,123,255,0) 46%),
    var(--navy);
}
#consulting .svc-banner {
  background:
    radial-gradient(circle at 90% 42%, rgba(0,123,255,.22) 0%, rgba(0,123,255,0) 48%),
    radial-gradient(circle at 66% 78%, rgba(0,123,255,.14) 0%, rgba(0,123,255,0) 55%),
    var(--navy);
}

/* ================= ПОДРАЗДЕЛЫ (общий шаблон, p7/extra-7) ================= */
.svc-subsections {
  position: relative;
  padding: .6rem .615rem .8rem 1.215rem;
}
.svc-section-title {
  margin: 0 -1.215rem .6rem -.615rem;
  text-align: center;
  font-size: .563rem;
  font-weight: 700;
  color: var(--navy);
}
.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: .65rem;
  /* фиксированный шаг рядов = макет 281.2px (img 233.4 + промежуток 47.8),
     чтобы разное число строк текста не сдвигало последующие ряды */
  grid-auto-rows: 2.812rem;
  row-gap: 0;
}
.svc-card {
  display: flex;
  align-items: flex-start;
  gap: .385rem;
}
.svc-card-img {
  flex: none;
  width: 3.502rem;
  height: 2.334rem;
  background: var(--navy);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transition: transform .35s ease;
}
.svc-card-img svg { width: 100%; height: 100%; display: block; }
.svc-card:hover .svc-card-img { transform: scale(1.02); }
.svc-card-body { flex: 1; min-width: 0; }
.svc-card-num {
  display: block;
  font-size: .259rem;
  color: var(--navy);
  margin-bottom: .12rem;
}
.svc-card-title {
  font-size: .36rem;
  font-weight: 700;
  color: var(--navy);
  line-height: .42rem;
  margin: 0 0 .18rem;
}
.svc-card-text {
  font-size: .18rem;
  color: var(--grey-2);
  line-height: .241rem;
  max-width: 3rem;
  margin: 0;
}

/* ================= МОБИЛЬНАЯ ВЕРСИЯ (< 900px) ================= */
@media (max-width: 899px) {
  .svc-banner { height: auto; min-height: 0; }
  .svc-banner-inner {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 88px 24px 56px;
  }
  .svc-banner-title,
  .svc-banner-text,
  .svc-scroll { position: static; right: auto; }

  .svc-banner-title { font-size: 34px; line-height: 1.16; margin-bottom: 20px; }
  .svc-banner-text  { font-size: 16px; line-height: 1.5; max-width: none; margin-bottom: 32px; }
  .svc-banner-text br { display: none; }
  /* на мобиле баннер брендинга — сплошной синий, коллаж скрыт (не налезает на текст) */
  #branding .svc-banner { background: #223183; }
  .svc-scroll {
    width: 52px;
    height: 52px;
    animation: none;
  }
  .svc-scroll svg { width: 20px; height: 12px; }

  .svc-subsections { padding: 56px 24px; }
  .svc-section-title {
    margin: 0 0 32px;
    text-align: left;
    font-size: 28px;
  }
  .svc-grid { grid-template-columns: 1fr; column-gap: 0; grid-auto-rows: auto; row-gap: 36px; }
  .svc-card { flex-direction: column; gap: 16px; }
  .svc-card-img { width: 100%; height: 220px; }
  .svc-card-num { font-size: 15px; }
  .svc-card-title { font-size: 22px; line-height: 1.25; }
  .svc-card-text { font-size: 15px; line-height: 1.5; max-width: none; }
}