/* ==========================================================================
   Главный экран страницы типа насосной станции (Figma: Главный экран).
   Mobile-first: база 375, далее 1024 / 1440 / 1820.

   Картинка-подложка отбита от краёв страницы (5px на 375, 10px с 1024) —
   так же, как секции-карточки на главной. Снизу отбивки нет: в макете
   картинка вплотную стыкуется с переключателем.

   Высота — как у hero главной: экран минус отбивка (svh для мобильных, где
   динамическая адресная строка ломает vh). Фиксированных высот из макета
   (748 / 763 / 1060) здесь нет — они бы расходились с реальным экраном.
   ========================================================================== */

.pump-hero {
  padding: 5px 5px 0;
  background-color: var(--color-white-bg);
}

.pump-hero__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(100vh - 10px);
  min-height: calc(100svh - 10px);
  padding: 20px 15px 15px;
  overflow: hidden;
  border-radius: 10px;
  background-color: var(--color-black);
}

/* Подложка + затемняющий градиент из макета: текст читается на любом кадре. */
.pump-hero__bg {
  display: block;   /* перебиваем picture { display: contents } из base.css */
  position: absolute;
  inset: 0;
}

.pump-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.pump-hero__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    180deg,
    rgba(31, 33, 38, 0) 0%,
    rgba(31, 33, 38, 0) 54.76%,
    rgb(31, 33, 38) 70.87%,
    rgb(23, 24, 25) 100%
  );
}

/* --- Хлебные крошки -------------------------------------------------------
   Лежат поверх картинки сразу под шапкой (шапка страницы — overlay/fixed). */
/* Крошки лежат внутри картинки, а та отбита от верха страницы на 5px (10 с
   1024) — вычитаем отбивку, чтобы строка встала вплотную под шапку.
   Высоту шапки меряет pump-nav.js (--pump-header-h), она разная по брейкпоинтам. */
.pump-crumbs {
  position: absolute;
  top: calc(var(--pump-header-h, 84px) - 5px);
  left: 0;
  right: 0;
  z-index: 2;
  padding: 15px 10px;
}

.pump-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  font-size: var(--fs-xxs);
  color: var(--color-white);
}

.pump-crumbs__item:not(.pump-crumbs__item--current) {
  color: var(--color-white-bg-opacity);
}

.pump-crumbs__item a:hover { color: var(--color-white); }

/* Разделитель из макета — не «/», а маленький белый квадрат со скруглением */
.pump-crumbs__sep {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background-color: var(--color-white);
}

/* --- Контент --------------------------------------------------------------*/
.pump-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pump-hero__main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.pump-hero__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  color: var(--color-white);
}

.pump-hero__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
  text-transform: uppercase;
}

.pump-hero__lead {
  font-size: var(--fs-s);
  line-height: 22px;
  color: var(--color-white);
}

/* Слайдер подзаголовка — только до 1024 (см. pump-hero.js) */
.pump-hero__slider { width: 100%; }
.pump-hero__slide { display: flex; }

/* Вариант «оба абзаца сразу» включается с 1024 */
.pump-hero__leads { display: none; }

/* Точки hero: трек тёмно-серый, активная заполняется белым (как на главной) */
.pump-hero__dots.swiper-pagination {
  --swiper-pagination-color: var(--color-white);
  --swiper-pagination-bullet-inactive-color: rgba(87, 95, 112, 0.8);

  justify-content: flex-start;
  margin-top: 0;
}

/* Подпись кнопки в макете разная: 375 — «Заказать расчёт», с 1024 — «Получить ТКП» */
.pump-hero__cta { flex: 0 0 auto; }
.pump-hero__cta .pump-hero__cta-text { display: none; }
.pump-hero__cta .pump-hero__cta-text--mobile { display: inline; }

/* --- Параметры станции («Info tab») ---------------------------------------
   На 375 карточки живут отдельной строкой под картинкой (см. pump-hero.js). */
.pump-hero__params,
.pump-hero__params-row {
  display: flex;
  gap: 8px;
}

.pump-hero__params-row {
  padding: 0 5px;
  background-color: var(--color-white-bg);
}

.pump-hero__params-row:empty { display: none; }

/* Переехавший узел .pump-hero__params — единственный ребёнок строки, тянем его
   на всю ширину, иначе карточки внутри не разделят её пополам. */
.pump-hero__params-row .pump-hero__params { flex: 1 1 auto; min-width: 0; }

/* Тот же узел переезжает сюда из картинки, но лежит уже на белом фоне —
   поэтому «прозрачный» вид из hero меняем на серый вариант из макета. */
.pump-hero__params-row .info-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 16px 12px;
  color: var(--color-dark-blue);
  background-color: var(--color-grey);
}

/* --- Планшет 1024 ---------------------------------------------------------*/
@media (min-width: 768px) {
  .pump-hero { padding: 10px 10px 0; }

  .pump-hero__card {
    min-height: max(calc(100vh - 20px), 700px);
    min-height: max(calc(100svh - 20px), 700px);
    padding: 20px 30px 40px;
  }

  /* С 1024 подложка снова затемняется сверху — под хлебные крошки */
  .pump-hero__card::after {
    background-image: linear-gradient(
      180deg,
      rgba(31, 33, 38, 0.48) 0%,
      rgba(31, 33, 38, 0.034) 38.94%,
      rgba(31, 33, 38, 0.48) 72.12%,
      rgba(31, 33, 38, 0.48) 100%
    );
  }

  .pump-hero__bg img { object-position: center; }

  .pump-crumbs {
    top: calc(var(--pump-header-h, 96px) - 30px);
    padding: 16px 30px;
  }

  .pump-crumbs__list { font-size: var(--fs-xs); }

  /* Параметры возвращаются в картинку — колонкой справа от текста */
  .pump-hero__content {
    flex-direction: row;
    gap: 40px;
    align-items: flex-start;
    justify-content: space-between;
  }

  .pump-hero__main {
    gap: 32px;
    max-width: 748px;
  }

  .pump-hero__text { gap: 20px; }

  .pump-hero__slider,
  .pump-hero__dots { display: none; }

  .pump-hero__cta .pump-hero__cta-text { display: inline; }
  .pump-hero__cta .pump-hero__cta-text--mobile { display: none; }

  .pump-hero__leads {
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: var(--color-white);
  }

  .pump-hero__leads .pump-hero__lead { line-height: 26px; }

  .pump-hero__params {
    flex-direction: column;
    gap: 13px;
    align-items: flex-end;
    width: 155px;
  }

  .pump-hero__params .info-tab { width: 100%; }
}

/* --- Ноутбук 1440 ---------------------------------------------------------*/
@media (min-width: 1025px) {
  .pump-hero__card { padding: 20px 40px 50px; }
  .pump-crumbs { padding: 16px 10px; }
  .pump-hero__main { gap: 40px; }
}

/* --- Десктоп 1920 ---------------------------------------------------------*/
@media (min-width: 1441px) {
  .pump-hero__leads .pump-hero__lead { line-height: 30px; }
}