/* Очищение — макеты Figma: 1920, планшет, 600, узкая мобилка */

.ochischenie-lineika-page {
  position: relative;
}

/* ——— Главный баннер ——— */
.ochischenie-lineika-main-banner {
  background: #829995;
  overflow: hidden;

  & .ochischenie-lineika-main-banner__container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
  }

  & .ochischenie-lineika-main-banner__content {
    position: relative;

    display: flex;
    padding: 160px 0 105px;
    padding-right: 80px;
    flex-direction: column;
    gap: 20px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 460px;
    max-width: 730px;
    box-sizing: border-box;
  }

  & .ochischenie-lineika-main-banner__image {
    position: relative;

    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 300px;
    align-items: flex-end;
    justify-content: flex-end;
    min-height: 0;
    min-width: 0;

    & img {
      display: block;
      max-height: 438px;
      min-height: 0;
      width: auto;
      max-width: 100%;
      object-fit: contain;
      object-position: center bottom;
    }
  }

  & .ochischenie-lineika-main-banner__header {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  & .ochischenie-lineika-main-banner__title {
    color: #ffffff;
  }

  & .ochischenie-lineika-main-banner__subtitle {
    color: #ffffff;
  }

  & .ochischenie-lineika-main-banner__body {
    display: flex;
    flex-direction: column;
    gap: 20px;

    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;

    color: #ffffff;

    & b {
      font-weight: 700;
    }
  }
}

/* ——— Баннер + картинка (липкий на десктопе) ——— */
.ochischenie-lineika-banner-image {
  position: sticky;
  top: 0;

  background: #f9fafa;
  overflow: hidden;

  & .ochischenie-lineika-banner-image__container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: stretch;
  }

  & .ochischenie-lineika-banner-image__col {
    position: relative;

    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 460px;
    min-height: 0;

    & img {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;

      display: block;
      height: 100%;
      width: 50dvw;
      max-width: unset;
      min-width: unset;
      object-fit: cover;
      object-position: center;
    }
  }

  & .ochischenie-lineika-banner-image__content {
    display: flex;
    padding: 105px 0;
    padding-right: 80px;
    flex-direction: column;
    gap: 20px;
    box-sizing: border-box;
  }

  & .ochischenie-lineika-banner-image__header {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  & .ochischenie-lineika-banner-image__title {
    color: #5a5b6c;
  }

  & .ochischenie-lineika-banner-image__body {
    display: flex;
    flex-direction: column;
    gap: 20px;

    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 22px;

    color: #5a5b6c;

    & b {
      font-weight: 700;
    }
  }

  &.ochischenie-lineika-banner-image--reverse {

    & .ochischenie-lineika-banner-image__container {
      flex-direction: row-reverse;
    }

    & .ochischenie-lineika-banner-image__col {
      & img {
        left: unset;
        right: 0;
      }
    }

    & .ochischenie-lineika-banner-image__content {
      padding-left: 80px;
      padding-right: 0;
    }
  }
}

/* ——— Средний серый блок ——— */
.ochischenie-lineika-banner {
  position: sticky;
  top: 0;

  background: #e6e7ed;
  overflow: hidden;

  & .ochischenie-lineika-banner__container {
    display: flex;
    padding: 105px 0;
    flex-direction: column;
    gap: 40px;
    box-sizing: border-box;
  }

  & .ochischenie-lineika-banner__header {
    max-width: 900px;

    color: #5a5b6c;
  }

  & .ochischenie-lineika-banner__body {
    max-width: 500px;
    margin-left: auto;
    box-sizing: border-box;

    color: #5a5b6c;

    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 22px;
  }
}

/* ——— Каталог ——— */
.ochischenie-lineika-section-list {
  margin: 105px 0;
  background: #ffffff;

  & .index-block-header {
    display: flex;
    justify-content: center;
    padding-bottom: 40px;
  }

  & .index-block-header__title {
    text-align: center;
  }

  & .catalog-section-list__group {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ——— Навигация линий (Figma 7061:12629) ——— */
.lines-navigation {
  width: 100%;

  & .lines-navigation__container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  & .lines-navigation__prev,
  & .lines-navigation__next {
    position: relative;

    display: flex;
    flex: 1 1 0;
    min-width: 0;
  }

  & .lines-navigation__prev {
    background: #6b1734;
  }

  & .lines-navigation__next {
    background: #1c3c6f;
  }

  & .lines-navigation__item {
    display: flex;
    width: 100%;
    min-height: 100%;
    padding: 20px;
    align-items: center;
    gap: 12px;

    text-decoration: none;
    color: #ffffff;

    box-sizing: border-box;
  }

  & .lines-navigation__next .lines-navigation__item {
    justify-content: flex-end;
  }

  & .lines-navigation__label {
    flex: 1 1 0;
    min-width: 0;

    font-size: 20px;
    font-weight: 400;
    line-height: 27px;
  }

  & .lines-navigation__next .lines-navigation__label {
    text-align: right;
  }

  & .lines-navigation__item-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;

    &>svg {
      display: block;
      height: 100%;
      width: 100%;
      object-fit: contain;
      object-position: center;
    }
  }

  & .lines-navigation__item-icon--prev {
    transform: rotate(-90deg);
  }

  & .lines-navigation__item-icon--next {
    transform: rotate(-90deg) scaleY(-1);
  }
}

.lines-navigation--single .lines-navigation__container {
  display: block;
}

.lines-navigation--single .lines-navigation__prev,
.lines-navigation--single .lines-navigation__next {
  width: 100%;
}

/* ——— Текст в блоках: как в макете des_3 (16px / 22) ——— */
.ochischenie-lineika-banner-image .text.text--3,
.ochischenie-lineika-banner .text.text--3 {
  font-size: 16px;
  line-height: 22px;
}

/* ——— Планшет ~1200 ——— */
@media (max-width: 1200px) {
  .ochischenie-lineika-main-banner {
    & .ochischenie-lineika-main-banner__content {
      padding: 160px 0 105px;
      padding-right: 40px;
      max-width: none;
    }

    & .ochischenie-lineika-main-banner__image {
      & img {
        max-height: 444px;
      }
    }
  }

  .ochischenie-lineika-banner-image {
    & .ochischenie-lineika-banner-image__content {
      padding-right: 40px;
    }

    &.ochischenie-lineika-banner-image--reverse .ochischenie-lineika-banner-image__content {
      padding-left: 40px;
      padding-right: 0;
    }
  }

  .ochischenie-lineika-banner {
    & .ochischenie-lineika-banner__container {
      padding-left: 0;
      padding-right: 0;
    }

    & .ochischenie-lineika-banner__body {
      padding-left: 0;
      max-width: 500px;
    }
  }

  .ochischenie-lineika-section-list {
    & .catalog-section-list__group {
      grid-template-columns: repeat(2, minmax(240px, 1fr));
    }
  }

}

/* ——— Узкий планшет (макет 7057:11502): описание барьера со сдвигом ——— */
@media (max-width: 900px) {
  .ochischenie-lineika-banner {
    & .ochischenie-lineika-banner__body {
      margin-left: 0;
      max-width: none;
      padding-left: min(460px, 20vw);
    }
  }
}

/* ——— Мобилка ≤768 ——— */
@media (max-width: 768px) {
  .ochischenie-lineika-main-banner {
    & .ochischenie-lineika-main-banner__container {
      flex-direction: column;
      justify-content: flex-start;
    }

    & .ochischenie-lineika-main-banner__content {
      order: 2;

      padding: 20px 0 40px;
      padding-left: 0;
      padding-right: 0;
      flex-basis: auto;
      max-width: none;
      gap: 0;
    }

    & .ochischenie-lineika-main-banner__header {
      gap: 40px;
    }

    & .ochischenie-lineika-main-banner__image {
      order: 1;

      flex: none;
      width: 100%;
      min-height: 517px;
      justify-content: center;
      align-items: flex-end;

      & img {
        position: relative;
        left: auto;
        bottom: auto;
        max-height: 444px;
        width: auto;
        max-width: 100%;
      }
    }

    & .ochischenie-lineika-main-banner__title.title--1 {
      font-size: 58px;
      line-height: 58px;
    }

    & .ochischenie-lineika-main-banner__subtitle.title--3 {
      font-size: 20px;
      line-height: 24px;
    }
  }

  .ochischenie-lineika-banner-image {
    position: static;
    top: auto;

    & .ochischenie-lineika-banner-image__container {
      flex-direction: column;
    }

    & .ochischenie-lineika-banner-image__col {
      flex-basis: auto;
      width: 100%;

      & img {
        position: relative;
        left: auto;
        right: auto;
        width: 100%;
        height: 400px;
        object-fit: cover;
      }
    }

    & .ochischenie-lineika-banner-image__content {
      padding: 60px 0;
      padding-right: 0;
      padding-left: 0;
      gap: 20px;
    }

    & .ochischenie-lineika-banner-image__title.title--2 {
      font-size: 36px;
      line-height: 44px;
    }

    &.ochischenie-lineika-banner-image--reverse {
      & .ochischenie-lineika-banner-image__container {
        flex-direction: column;
      }

      /* В макете: сначала фото, затем текст */
      & .ochischenie-lineika-banner-image__col:first-child {
        order: 2;
      }

      & .ochischenie-lineika-banner-image__col:last-child {
        order: 1;

        & img {
          right: auto;
        }
      }

      & .ochischenie-lineika-banner-image__content {
        padding-left: 0;
      }
    }
  }

  .ochischenie-lineika-banner {
    position: static;
    top: auto;

    & .ochischenie-lineika-banner__container {
      padding: 60px 0;
      gap: 20px;
    }

    & .ochischenie-lineika-banner__header .title--2 {
      font-size: 36px;
      line-height: 44px;
    }

    & .ochischenie-lineika-banner__body {
      margin-left: 0;
      max-width: none;
      padding-left: 0;
    }
  }

  /* Третий блок без reverse: в макете текст сверху, картинка снизу (как в DOM) */
  .ochischenie-lineika-banner-image:not(.ochischenie-lineika-banner-image--reverse) {
    & .ochischenie-lineika-banner-image__container {
      flex-direction: column;
    }

    & .ochischenie-lineika-banner-image__col:last-child img {
      height: 470px;
    }
  }

  .ochischenie-lineika-section-list {
    margin: 60px 0;

    & .index-block-header__title.title--2 {
      font-size: 36px;
      line-height: 44px;
    }
  }

}

/* ——— Каталог: одна колонка на узких экранах ——— */
@media (max-width: 599px) {
  .ochischenie-lineika-section-list {
    & .catalog-section-list__group {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}