/* ════════════════════════════════════════════
   СТРАНИЦА «ОТРАСЛЕВЫЕ РЕШЕНИЯ»
   ════════════════════════════════════════════ */

/* ─── Основной блок (белый) ─── */
.industries-page {
  background: var(--white);
  padding: 80px 50px 100px;
}

.industries-page__title {
  font-size: 48px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 40px;
  line-height: 1;
}

/* ─── Сетка карточек ─── */
/* Переиспользуем .industries-grid и .ind-card из index.css
   Добавляем модификаторы для стиля бейджей на этой странице */

/* Светлый бейдж (серый фон, чёрный текст) — по умолчанию на этой странице */
.ind-card--light .ind-card__badge {
  background: var(--gray);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--dark);
}
.ind-card--light:hover .ind-card__badge {
  background: var(--orange);
  color: var(--white);
}

/* Оранжевый бейдж (активная / первая карточка) */
.ind-card--orange .ind-card__badge {
  background: var(--orange);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--white);
}
.ind-card--orange:hover .ind-card__badge {
  background: var(--orange);
  color: var(--white);
}

/* ─── Кнопка «Смотреть все» внизу ─── */
/* Higher specificity than .ind-card{display:block} so it wins regardless of CSS chunk load order */
.ind-card.ind-card--extra {
  display: none;
}

.industries-page__more {
  display: flex;
  justify-content: center;
  margin-top: 60px;
}

/* «Смотреть все» button */
.industries-all-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 60px;
  background: transparent;
  border: 2px solid #111;
  border-radius: 14px;
  font-family: 'Sansation', Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #111;
  cursor: pointer;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}

/* .industries-all-btn::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: border-color .2s;
} */

/* ─── Блок с формой (без собственного фона — страница серая) ─── */
.industries-contact {
  padding: 100px 50px ;
}

/* ─── Адаптив ─── */
@media (max-width: 1400px) {
  .industries-page {
    padding: 60px 30px 80px;
  }
  .industries-contact {
    padding: 80px 30px;
  }
}

@media (max-width: 900px) {
  .industries-page {
    padding: 50px 24px 60px;
  }
  .industries-page__title {
    font-size: 36px;
    margin-bottom: 28px;
  }
  .industries-contact {
    padding: 60px 24px;
  }
  .industries-page__more {
    margin-top: 40px;
  }

}

@media (max-width: 600px) {
  .industries-page {
    padding: 40px 16px 50px;
  }
  .industries-page__title {
    font-size: 28px;
    margin-bottom: 20px;
  }
  .industries-contact {
    padding: 50px 16px;
  }
  .industries-page__more {
    margin-top: 28px;
  }
}