/* =========================================================
   Услуги
   Макет: Figma → Final → «Услуги» (1920 / 1200 / 640 / 320).

   Фрейм 1200 — уменьшенный 1920 (× 0.625), как «Контакты»: поля и гаттер 19 → 30 — общие токены.
   --s — пиксель фрейма 1920 на десктопе (токен в style.css). Картинки и отступы карточек — calc(N * var(--s)).
   Заголовки, подписи, тексты и отступы между секциями — общие классы и токены из style.css.
   ========================================================= */

.page-services {
  --c-deep: #060e21; /* плашки карточек и консультации — темнее фона страницы */
  background: var(--c-dark);
  color: #fff;
}

.page-services .text { color: var(--c-menu-text); }
.page-services .section-label { color: #fff; }

/* =========================================================
   Первый экран: заходит под прозрачную шапку, высота — окно (но не ниже минимума)
   ========================================================= */

.svc-hero {
  /* Затемнение сверху — под белый текст шапки, как во фрейме: чёрный 50% → 12% → 0 на трети высоты */
  --shade-mid: calc(248 * var(--s));
  --shade-end: calc(322 * var(--s));
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(var(--header-h) + max(var(--hero-min), var(--screen)));
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
  overflow: hidden;
  isolation: isolate;
  background: #e5e5e5; /* цвет верха кадра — на телефоне видео опущено ниже */
  color: var(--c-dark);
}

.svc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.124) var(--shade-mid), transparent var(--shade-end));
}

/* Линия по центру — продолжение средней границы шапки, идёт через первый экран и услуги */
.svc-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  top: var(--header-h);
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.svc-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.svc-hero__poster,
.svc-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--hero-pos, 50% 50%);
}
.svc-hero__video {
  opacity: 0;
  transition: opacity 0.6s;
}
.svc-hero.is-playing .svc-hero__video { opacity: 1; }

.svc-hero__head {
  position: relative;
  z-index: 1;
}

.svc-hero__intro {
  grid-column: 1 / span 8;
  padding-top: var(--head-pt); /* крошки — как на «Контактах» и «О компании» */
}

/* Ширина — как в макете, чтобы заголовок не заходил на кран (текст с сайта длиннее — строк больше) */
.svc-hero__title { max-width: calc(1005 * var(--s)); }

/* Стрелка вниз внизу слева. В макете белая, но видео с сайта светлее картинки макета — круг тёмный */
.svc-hero__down {
  position: absolute;
  z-index: 1;
  left: var(--margin);
  bottom: calc(75 * var(--s));
  width: var(--scroll-size);
  height: var(--scroll-size);
}
.svc-hero__down svg {
  width: 26%;
  transition: transform 0.3s var(--ease);
}
.svc-hero__down:hover svg { transform: translateY(3px); }

/* =========================================================
   Услуги: большая карточка и две пары
   ========================================================= */

.svc-list { position: relative; }

.svc-list::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--c-menu-line);
}

.svc-list__row {
  position: relative;
  padding: var(--margin);
  border-bottom: 1px solid var(--c-menu-line);
}

.svc-list__row--pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(2 * var(--margin));
}

/* Карточка: картинка сверху, текст и кнопка прижаты к низу */
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(521px, calc(521px + 256 * var(--k)), 777px);
  padding: calc(30 * var(--s)) calc(30 * var(--s)) calc(45 * var(--s));
  overflow: hidden;
  background: var(--c-deep);
}

/* Чертежи — рамки из фрейма 1920 (левый верхний угол и ширина от угла карточки), кадрированы как в макете */
.svc-card__img {
  position: absolute;
  left: calc(var(--x) * var(--s));
  top: calc(var(--y) * var(--s));
  width: calc(var(--w) * var(--s));
  height: auto;
  max-width: none;
  pointer-events: none;
}
.svc-card--transport  { --x: -12; --y: 0;  --w: 912; }
.svc-card--training   { --x: 129; --y: 20; --w: 624; }
.svc-card--inspection { --x: 30;  --y: 0;  --w: 860; }
.svc-card--repair     { --x: 4;   --y: 12; --w: 896; }

.svc-card__body { position: relative; }

.svc-card__title { max-width: calc(693 * var(--s)); }
.svc-card--repair .svc-card__title { max-width: calc(533 * var(--s)); } /* перенос после «обслуживание», как в макете */

.svc-card__text {
  max-width: calc(630 * var(--s));
  margin-top: 12px;
}

.svc-card__btn { margin-top: clamp(15px, calc(15px + 15 * var(--k)), 30px); }

/* Большая карточка: текст слева по центру высоты, чертёж крана справа у края */
.svc-card--wide {
  justify-content: center;
  min-height: calc(724 * var(--s));
  padding: calc(70 * var(--s)) calc(34 * var(--s)) calc(30 * var(--s)); /* текст чуть ниже середины, как в макете */
}
.svc-card--wide .svc-card__img {
  left: auto;
  right: 0;
  --y: 108;
  --w: 1241;
}
.svc-card--wide .svc-card__title { max-width: calc(560 * var(--s)); }
.svc-card--wide .svc-card__text {
  max-width: clamp(313px, calc(313px + 85 * var(--k)), 398px);
  margin-top: var(--gap-title);
}
.svc-card--wide .svc-card__btn { margin-top: var(--gap-title); }

/* =========================================================
   Парк техники: четыре группы по 3 колонки, линии — по середине гаттера.
   1-я и 3-я карточки сверху, 2-я и 4-я — ниже (лесенкой)
   ========================================================= */

.svc-fleet {
  padding-top: var(--gap-section);
  align-items: start;
}

.svc-fleet__label { grid-column: 1 / span 3; }
.svc-fleet__title { grid-column: 4 / span 5; }
.svc-fleet__btn {
  grid-column: 10 / -1;
  justify-self: end;
}

.svc-fleet__grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  margin: var(--gap-title) calc(-1 * var(--margin)) 0;
  padding: 0 var(--margin);
  list-style: none;
  border-top: 1px solid var(--c-menu-line);
  border-bottom: 1px solid var(--c-menu-line);
}

.crane {
  position: relative;
  grid-column: span 3;
  padding: calc(30 * var(--s)) calc(var(--gutter) / 2) calc(31 * var(--s));
}
.crane:first-child { padding-left: 0; }
.crane:nth-child(2n) { padding-top: calc(617 * var(--s)); }

.crane + .crane::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--gutter) / -2);
  width: 1px;
  background: var(--c-menu-line);
}

.crane__link { display: block; }

.crane__img {
  display: block;
  height: calc(433 * var(--s));
  overflow: hidden;
  background: var(--c-deep);
}
.crane__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.crane__img--right img { object-position: right top; } /* как на сайте */
.crane__link:hover .crane__img img { transform: scale(1.04); }

.crane__name {
  display: block;
  margin-top: calc(14 * var(--s));
  transition: color 0.2s;
}
.crane__link:hover .crane__name { color: var(--c-accent); }

.crane__cap {
  display: block;
  margin-top: 10px;
  font-size: var(--fs-xs);
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
}

/* =========================================================
   Консультация — тёмная плашка темнее фона, по полям страницы
   ========================================================= */

.page-services .consult-block { --box-bg: var(--c-deep); }

/* =========================================================
   Планшет 640–1024 (фрейм 640)
   ========================================================= */
@media (max-width: 1024px) {
  /* Первый экран: кран справа, затемнение — только под шапкой */
  .svc-hero {
    --hero-pos: 30% 100%;
    --shade-mid: calc(var(--header-h) + 10px);
    --shade-end: calc(var(--header-h) + 60px);
  }
  .svc-hero::after,
  .svc-hero__down { display: none; }
  .svc-hero__intro { grid-column: 1 / span 5; }
  .svc-hero__title { max-width: 330px; }

  /* Карточки: без линий, зазор 15; картинка в потоке сверху */
  .svc-list {
    display: grid;
    row-gap: var(--margin);
    padding: var(--margin) var(--margin) 0;
  }
  .svc-list::before { display: none; }
  .svc-list__row {
    padding: 0;
    border: 0;
  }
  .svc-list__row--pair { column-gap: var(--gutter); }

  /* Сверху — поле под чертёж (заголовок на 290 от верха карточки, как во фреймах), ниже текст */
  .svc-card {
    justify-content: space-between;
    min-height: 0;
    padding: 15px 15px 30px;
  }
  .svc-card__img {
    position: static;
    width: calc(100% + 30px);
    height: 250px;
    margin: 0 -15px 25px;
    object-fit: contain;
  }
  .svc-card__title,
  .svc-card__text { max-width: none; }
  .svc-card__btn { margin-top: 20px; }

  /* Большая карточка: текст слева, чертёж справа */
  .svc-card--wide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    min-height: 329px;
    padding: 30px 0 30px 15px;
  }
  .svc-card--wide .svc-card__img {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    width: 100%;
    height: auto;
    margin: 0;
  }
  .svc-card--wide .svc-card__body { grid-column: 1; grid-row: 1; }
  .svc-card--wide .svc-card__title { max-width: 264px; }
  .svc-card--wide .svc-card__text { max-width: 264px; margin-top: 15px; }
  .svc-card--wide .svc-card__btn { margin-top: 15px; }

  /* Парк техники: 2 × 2, линии между рядами на всю ширину */
  .svc-fleet__label,
  .svc-fleet__title { grid-column: 1 / -1; }
  .svc-fleet__title { max-width: 420px; margin-top: var(--gap-label); }
  .svc-fleet__btn {
    grid-column: 1 / -1;
    justify-self: start;
    order: 1;
    margin-top: 30px;
  }
  .svc-fleet__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0;
    margin-top: var(--gap-title);
    padding: 0;
    border-bottom: 0;
  }
  .crane,
  .crane:first-child,
  .crane:nth-child(2n) {
    grid-column: auto;
    padding: 15px calc(var(--gutter) / 2) 30px var(--margin);
    border-bottom: 1px solid var(--c-menu-line);
  }
  .crane::before { display: none; }
  /* Ряд 1: 1-я и 3-я, ряд 2: 2-я и 4-я — как во фрейме */
  .crane:nth-child(1) { grid-area: 1 / 1; }
  .crane:nth-child(3) { grid-area: 1 / 2; }
  .crane:nth-child(2) { grid-area: 2 / 1; }
  .crane:nth-child(4) { grid-area: 2 / 2; }
  .crane:nth-child(3),
  .crane:nth-child(4) { padding: 15px var(--margin) 30px calc(var(--gutter) / 2); }
  .crane__img { height: auto; aspect-ratio: 296 / 310; }
  .crane__name { margin-top: 15px; }
  .crane__cap { margin-top: 8px; }
}

/* Вертикальный экран (телефон, планшет 1024 × 1366): видео ниже заголовка, верх кадра растворяется в фоне —
   кран целиком в кадре и не заходит под текст */
@media (max-width: 1024px) and (orientation: portrait) {
  .svc-hero { --hero-pos: 96% 50%; }
  .svc-hero__media {
    top: auto;
    height: 70%;
    -webkit-mask-image: linear-gradient(transparent, #000 20%);
    mask-image: linear-gradient(transparent, #000 20%);
  }
}

/* =========================================================
   Мобильный ≤639 (фрейм 320)
   ========================================================= */
@media (max-width: 639px) {
  .svc-hero__intro { grid-column: 1 / -1; }
  .svc-hero__title { max-width: 290px; }

  /* Карточки — в одну колонку, зазор 30 */
  .svc-list { row-gap: 30px; }
  .svc-list__row--pair {
    grid-template-columns: 1fr;
    row-gap: 30px;
  }

  .svc-card--wide {
    display: flex;
    min-height: 0;
    padding: 15px 15px 30px;
  }
  .svc-card--wide .svc-card__img {
    width: calc(100% + 30px);
    height: 250px;
    margin: 0 -15px 25px;
  }

  /* Парк техники: в одну колонку, без линий */
  .svc-fleet__grid {
    grid-template-columns: 1fr;
    margin-inline: 0;
    border-top: 0;
  }
  .crane,
  .crane:first-child,
  .crane:nth-child(2n),
  .crane:nth-child(3),
  .crane:nth-child(4) {
    grid-area: auto;
    padding: 0 0 30px;
    border-bottom: 0;
  }
  .crane:last-child { padding-bottom: 0; }
}