/* =========================================================
   Доп. стили ТОЛЬКО для страницы "Опорные части".
   Подключены отдельным файлом, чтобы не трогать общий
   styles-ovm.css и не влиять на остальные страницы сайта.
   ========================================================= */

/* --- Подстраховка центрирования контента ---
   Если по какой-то причине сетка Bootstrap не отработает
   (например, файл vendor/bootstrap/css/bootstrap.min.css
   не найден), .container всё равно останется по центру
   с адекватной шириной, а не "прижатым" к левому краю. */
html, body {
  overflow-x: hidden;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* =========================================================
   КАРТОЧКИ КАТЕГОРИЙ (5 шт. вверху страницы)
   Сделаны на чистом flexbox — раскладка в 3 колонки (десктоп),
   2 колонки (планшет), 1 колонка (телефон) НЕ зависит от того,
   загрузился Bootstrap или нет.
   Подпись и кнопка "Перейти" показаны сразу, без наведения
   (раньше были скрыты в hover-панели и не видны на тач-экранах).
   ========================================================= */

.bearing-cards-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: -80px;      /* сохраняем "наплыв" карточек на хиро-баннер, как в оригинальном дизайне */
  margin-bottom: 60px;
  position: relative;
  z-index: 2;
}

.bearing-card {
  flex: 1 1 calc(33.333% - 20px);
  max-width: calc(33.333% - 20px);
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bearing-card .thumb {
  width: 100%;
}

.bearing-card .thumb img.bearing-icon {
  width: 100%;
  height: 220px;
  object-fit: contain;      /* картинка не обрезается и не искажается */
  background-color: #f5f7fa;
  padding: 30px;
  box-sizing: border-box;
  display: block;
  border-radius: 0;
}

.bearing-card-caption {
  padding: 20px 25px 25px;
  text-align: center;
}

.bearing-card-caption h5 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #1f1f1f;
}

.bearing-card-caption .border-button {
  margin: 0;
}

.bearing-card-caption .border-button a {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

/* Планшет: 2 карточки в ряд */
@media screen and (max-width: 991px) {
  .bearing-card {
    flex: 1 1 calc(50% - 15px);
    max-width: calc(50% - 15px);
  }
}

/* Телефон: 1 карточка в ряд */
@media screen and (max-width: 575px) {
  .bearing-cards-grid {
    margin-top: 20px;
    gap: 20px;
  }
  .bearing-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* =========================================================
   Схемы и таблицы внутри разделов (было: max-width:850px,
   из-за чего квадратные картинки становились "гигантскими"
   по высоте).
   ========================================================= */
.major-details .main-content img.bearing-diagram {
  width: auto;               /* убираем растягивание на 100% из styles-ovm.css */
  max-width: 100%;
  max-height: 560px;         /* не даём картинке "разъехаться" по высоте */
  object-fit: contain;
  margin: 15px auto 25px;
  display: block;
}

@media screen and (max-width: 768px) {
  .major-details .main-content img.bearing-diagram {
    max-height: 380px;
  }
}