/* Лендинги «Терминалы для АЗС» и «Терминалы для моек»: правки архивной вёрстки 2024 года под макет Figma
   «To werstka» (разделы AZS и Moiki, кадр 1280 px, контент 1160 px). Архивный CSS лежит как есть
   (theme/werkstatt-child/css/main.css из content/landings/src/main.css), здесь — только расхождения с макетом.
   Картинки — tools/figma_landings.py. */

.page-content .container { max-width: 1190px; }
.btn-to-calc { font-weight: 600; z-index: 50; }

@media (min-width: 992px) {
  /* первый экран: справа колонка с терминалом из макета, по высоте баннера */
  .banner { background: #f3f8fe url("/theme/werkstatt-child/images/1/banner-img.png") no-repeat right top / auto 100%; }
  .banner.banner-mojki { height: 560px; margin-top: 60px; background: #f3f8fe; }
  .banner.banner-mojki:after { width: 360px; right: 124px; top: -52px; bottom: -37px; background-size: auto 100%; }
  .banner-bottom__img-block img { width: 437px; }
  .page-content-mojki .banner-bottom__img-block img { width: 489px; }

  /* «Способы установки»: карточки 863×429 (мойки 1000×490) лентой, следующая выглядывает справа */
  .owl-carousel.installation-carousel .scroll-slider__item { width: 863px; min-height: 429px; background-position: 0 0; background-size: 863px 429px; }
  .owl-carousel.installation-carousel-mojki .scroll-slider__item { width: 1000px; min-height: 490px; background-position: 0 0; background-size: 1000px 490px; }
  .owl-carousel.installation-carousel .scroll-slider__item-info { width: 340px; }
  .owl-carousel.installation-carousel-mojki .scroll-slider__item-info { width: 540px; }
  .installation-bottom { gap: 100px; }
  .installation-bottom .c-1 { padding: 0; }

  /* схема терминала: картинка одна на все языки, подписи — текстом разметки по координатам макета (кадр 1160×600) */
  .payment__img-block .p-labels { display: block; }
  .payment__img-block .p-label { left: auto; right: auto; }
  .payment__img-block .p-label:before, .payment__img-block .p-label > span:before { display: none; }
  .payment__img-block .p-label > span { display: block; position: static; padding: 0; background: none; border-radius: 0; color: #091035;
    font-size: clamp(14px, 1.55vw, 18px); font-weight: 300; line-height: 25px; white-space: nowrap; }
  .payment__img-block .p-label--1 { top: 26%; right: 73.448%; }
  .payment__img-block .p-label--2 { top: 56%; right: 74.224%; }
  .payment__img-block .p-label--3 { top: 80.5%; right: 82.931%; }
  .payment__img-block .p-label--4 { top: 27.333%; left: 74.828%; }
  .payment__img-block .p-label--5 { top: 56.833%; left: 73.362%; }
  .payment__img-block .p-label--6 { top: 82.5%; left: 76.638%; }
  .payment-mojki .payment__img-block .p-label { left: auto; right: auto; }
  .payment-mojki .payment__img-block .p-label--1 { top: 23%; right: 73.621%; }
  .payment-mojki .payment__img-block .p-label--2 { top: 56.667%; right: 74.569%; }
  .payment-mojki .payment__img-block .p-label--4 { top: 27.333%; left: 67.845%; }
  .payment-mojki .payment__img-block .p-label--5 { top: 54.167%; left: 78.19%; }
  .payment-mojki .payment__img-block .p-label--6 { top: 82.167%; left: 80.776%; }

  /* технические характеристики: колонка картинки 422 px (мойки 434), терминал выходит за плашку как в макете */
  .tech { grid-template-columns: 422px 1fr; gap: 70px; padding: 40px; }
  .tech > div:first-child img { left: -50px; top: -112px; transform: none; width: 522px; max-width: none; }
  .page-content-mojki .tech { grid-template-columns: 434px 1fr; }
  .page-content-mojki .tech > div:first-child img { left: -62px; top: -63px; width: 599px; }

  .program__img-block img { width: 590px; transform: none; }
  .web__img-block img { width: 280px; }
  .page-content-mojki .web__img-block img { width: 428px; }
  .cloud > div:last-child img { width: 543px; }
  .page-content-mojki .cloud > div:last-child img { width: 546px; }

  /* конструктор: терминал прижат к правому краю плашки и обрезан её скруглением */
  .calc, .calc-section-mojki .calc { grid-template-columns: 1fr 525px; padding: 30px 0 0 40px; overflow: hidden; }
  .calc > div:last-child, .calc-section-mojki .calc > div:last-child { margin-top: -30px; text-align: right; line-height: 0; }
  .calc__img-block img { width: 525px; max-width: none; }

  .about__img-block img { width: 560px; }
  .page-content-mojki .about__img-block img { width: 570px; }

  .cm-acc-wrap { background: url("/theme/werkstatt-child/images/1/bg-faq.png") no-repeat 42px -18px / 579px auto; }

  .consult:before { left: 61px; bottom: -54px; width: 622px; height: 332px; }
  .consult.consult--blue:before { left: 47px; bottom: -83px; width: 655px; height: 350px; }
}

.c-1__imb-block img { width: 60px; height: 60px; }
.get-cost > div:last-child img { width: 223px; }
.cm-acc__title:after, .cm-acc.cm-acc--blue .cm-acc__title:after { width: 24px; height: 24px; }

@media (max-width: 991px) {
  /* слайды: на телефоне — картинка-карточка без пустой левой части */
  .owl-carousel .scroll-slider__item img.dbm { width: 100% !important; max-width: 420px; aspect-ratio: 11 / 10; object-fit: cover; object-position: right bottom; margin: 0 auto; }
  /* схема терминала: маркеры на узлах терминала (кадр 344×448, у моек 344×520) */
  .payment__img-block { max-width: 344px; }
  .payment__img-block picture img { width: 100%; }
  .payment__img-block .p-label { right: auto; }
  .payment__img-block .p-label--1 { left: 17.44%; top: 49.11%; }
  .payment__img-block .p-label--2 { left: 32.56%; top: 57.14%; }
  .payment__img-block .p-label--3 { left: 17.44%; top: 68.3%; }
  .payment__img-block .p-label--4 { left: 38.95%; top: 20.98%; }
  .payment__img-block .p-label--5 { left: 54.36%; top: 58.04%; }
  .payment__img-block .p-label--6 { left: 54.36%; top: 68.3%; }
  .payment-mojki .payment__img-block .p-label { right: auto; }
  .payment-mojki .payment__img-block .p-label--1 { left: 22.38%; top: 64.62%; }
  .payment-mojki .payment__img-block .p-label--2 { left: 41.86%; top: 64.23%; }
  .payment-mojki .payment__img-block .p-label--4 { left: 46.22%; top: 33.46%; }
  .payment-mojki .payment__img-block .p-label--5 { left: 65.12%; top: 63.85%; }
  .payment-mojki .payment__img-block .p-label--6 { left: 65.12%; top: 73.27%; }
  .payment__img-block .p-label--5 > span, .payment__img-block .p-label--6 > span, .payment__img-block .p-label--4 > span { right: 0; left: auto; }
  .tech > div:first-child img { max-width: 100%; }
}