/*----------------- Отраслевой лендинг (шаблон industry.tpl) START -----------------*/
/* Подключается после real-estate.css: блоки страницы — с лендинга «Недвижимость» (классы re-*),
   здесь только новое (классы ind-*) и отличия макета отраслевой страницы */

/* Подводка под заголовком блока — справа, в колонке шириной 1003px, как вопросы FAQ (.re-faq__inner) */
.ind-lead {
  max-width: 1003px;
  margin: 0 0 60px auto;
  color: #303035;

  @media (max-width: 991px) {
    max-width: none;
    margin-bottom: 35px;
  }

  p {
    margin: 0;
  }

  /* абзацы разделены пустой строкой */
  p + p {
    margin-top: 1.43478em;
  }
}

/*----------------------------*/

/* Первый экран: вместо видео — картинка, текст шире, чем у «Недвижимости» */
.ind-hero {
  @media (min-width: 992px) {
    min-height: 787px;
  }

  .re-hero__desc {
    max-width: 961px;
  }

  /* Затемнение по макету: чёрный 60% слева сверху, к правому нижнему углу сходит на нет
     (у «Недвижимости» — 50% строго слева направо) */
  .re-hero__video:before {
    background: linear-gradient(111.17deg, rgba(0, 0, 0, 0.6) 31.69%, rgba(0, 0, 0, 0) 100%);
  }

  .re-hero__video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
  }
}

/*----------------------------*/

/* Стыки блоков, когда соседа нет (блок без текста в поле не выводится). Панель «Вопрос в Telegram» наезжает
   на «Разбор сайта», второе «Персональное КП» — на «Стоимость»: у нижнего блока отрицательный отступ сверху,
   у верхнего — большой отступ снизу под наезд. Классы *--solo ставит шаблон */

/* «Разбор сайта» без Telegram: отступ снизу — как сверху (на телефоне панель и так не наезжает) */
.ind-audit--solo {
  @media (min-width: 992px) {
    padding-bottom: 120px;
  }
}

/* Telegram без «Разбора сайта»: панели не на что наезжать */
.ind-tgask--solo .re-tgask__panel {
  margin-top: 0;
}

/* «Стоимость» без второго КП: отступ снизу — как сверху */
.ind-cost--solo {
  padding-bottom: 110px;

  @media (max-width: 991px) {
    padding-bottom: 50px;
  }
}

/* Второе КП без «Стоимости» */
.ind-offer--solo {
  margin-top: 0;
}

/*----------------------------*/

/* Кейсы: заголовок с «Смотреть все» и подводка — как у «Недвижимости», карточки — портфолио с главной
   (чанк list_work_first_row_v2.tpl), но сетка по макету: 6 колонок с шагом 34px, карточки на 4 + 2, 3 + 3, 2 + 4 колонки
   и одна высота картинок в ряду — квадрат узкой карточки. На телефоне карточки идут столбиком, как на главной */
.ind-cases {
  padding: 90px 0 100px;

  @media (max-width: 991px) {
    padding: 50px 0 60px;
  }

  /* название работы иногда заведено с <p> (menutitle из визуального редактора) — без его отступа */
  .works-list .title p {
    margin: 0;
  }
}

@media (min-width: 769px) {
  /* отступ между рядами — у подписи карточки (последняя строка сетки), поэтому под сеткой его забираем назад */
  .dsgn_v2 .ind-cases .works-list {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0 34px;
    margin: 0 0 -60px;
    container-type: inline-size;
  }

  /* карточка — три строки общей сетки (теги, картинка, подпись): в ряду картинки стоят на одной линии,
     даже если у соседней карточки теги перенеслись на вторую строку */
  .dsgn_v2 .ind-cases .works-list .item:nth-child(n) {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    grid-column: span 3;
    row-gap: 0;
    width: auto;
    margin: 0;
    padding: 0;
  }

  .dsgn_v2 .ind-cases .works-list .item:nth-child(n) .item-type {
    flex-wrap: wrap;
  }

  .dsgn_v2 .ind-cases .works-list .item:nth-child(n) .title {
    margin-bottom: 60px;
  }

  .dsgn_v2 .ind-cases .works-list .item:nth-child(6n + 1),
  .dsgn_v2 .ind-cases .works-list .item:nth-child(6n) {
    grid-column: span 4;
  }

  .dsgn_v2 .ind-cases .works-list .item:nth-child(6n + 2),
  .dsgn_v2 .ind-cases .works-list .item:nth-child(6n + 5) {
    grid-column: span 2;
  }

  /* высота картинки = ширине узкой карточки: (ширина сетки − 2 промежутка) / 3 */
  .dsgn_v2 .ind-cases .works-list .item:nth-child(n) .card-img {
    padding-bottom: calc((100cqw - 68px) / 3);
  }
}

/*----------------------------*/

/* Структура: заголовок в одну строку */
.ind-structure .re-structure__title {
  max-width: none;
}

/*----------------------------*/

/* Стоимость: между заголовком и тарифами — подводка; колонка описания шире, чем у «Недвижимости» */
.ind-cost {
  .re-cost__title {
    max-width: 1449px;
    margin-bottom: 60px;

    @media (max-width: 991px) {
      margin-bottom: 35px;
    }
  }

  .ind-lead {
    margin-bottom: 20px;
    color: inherit;

    @media (max-width: 991px) {
      margin-bottom: 15px;
    }
  }

  .re-cost__item {
    @media (min-width: 992px) {
      grid-template-columns: 32% 1fr 23.5%;
    }
  }
}

/*----------------- Отраслевой лендинг (шаблон industry.tpl) END -----------------*/