/* ==========================================================================
   Главный экран страницы объекта-кейса (Figma: Страница объекта → Главный экран).
   Mobile-first: база 375, далее 1024 / 1440 / 1820.

   Картинка-подложка отбита от краёв страницы (5px на 375, 10px с 1024) — как
   и остальные секции-карточки проекта. Высота — экран минус отбивка (svh для
   мобильных, где динамическая адресная строка ломает vh).
   ========================================================================== */

.case-hero {
  padding: 5px 5px 0;
  background-color: var(--color-white-bg);
}

.case-hero__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: calc(100vh - 10px);
  min-height: calc(100svh - 10px);
  padding: 20px 15px 15px;
  overflow: hidden;
  border-radius: 10px;
  background-color: var(--color-black);
}

.case-hero__bg {
  display: block;
  /* перебиваем picture { display: contents } из base.css */
  position: absolute;
  inset: 0;
}

.case-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Затемнение снизу: заголовок и пилюли читаются на любом кадре.
   Отдельный элемент, а не ::after — участвует в переходе с разводящей. */
.case-hero__veil {
  position: absolute;
  inset: 0;

  background: linear-gradient(270deg, rgba(31, 33, 38, 0.00) 0%, rgba(31, 33, 38, 0.03) 48.56%, rgba(31, 33, 38, 0.48) 100%), linear-gradient(180deg, rgba(31, 33, 38, 0.10) 0%, rgba(31, 33, 38, 0.01) 38.94%, rgba(31, 33, 38, 0.10) 72.12%, rgba(31, 33, 38, 0.10) 100%);
}

/* --- Хлебные крошки -------------------------------------------------------
   Лежат поверх картинки сразу под шапкой (шапка страницы — overlay/fixed).
   Картинка отбита от верха на 5px (10 с 1024) — вычитаем отбивку, чтобы строка
   встала вплотную под шапку. Высота шапки в макете: 84 до 1820 и 96 с 1820. */
.case-crumbs {
  position: absolute;
  top: calc(84px - 5px);
  left: 0;
  right: 0;
  z-index: 2;
  padding: 12px 15px;
}

.case-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  align-items: center;
  font-size: var(--fs-xxs);
  color: var(--color-white);
}

.case-crumbs__item:not(.case-crumbs__item--current) {
  color: var(--color-white-bg-opacity);
}

.case-crumbs__item a:hover {
  color: var(--color-white);
}

/* Разделитель из макета — не «/», а маленький белый квадрат со скруглением */
.case-crumbs__sep {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background-color: var(--color-white-bg-opacity);
}

.case-crumbs__sep--last {
  background-color: var(--color-white);
}

/* --- Контент --------------------------------------------------------------*/
.case-hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.case-hero__text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--color-white);
}

.case-hero__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
  text-transform: uppercase;
}

.case-hero__lead {
  font-size: var(--fs-s);
  line-height: 22px;
}

.case-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* --- Промо категории оборудования -----------------------------------------
   До 1024 карточка переезжает в [data-case-promo-slot] под «Картой объекта»
   (см. case-hero.js) и выглядит там как обычная секция на белом фоне. */
.case-promo {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  background-color: var(--color-white-bg);
  border-radius: 10px;
}

/* «content» из макета: у самого текстового столбца есть собственные поля 12,
   поэтому суммарный отступ до края карточки = padding карточки + 12. */
.case-promo__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Заголовок + описание собраны в группу: у неё свой зазор, отличный от
   расстояния до кнопки (в макете 12/20/24 против 20/20/24). */
.case-promo__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.case-promo__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--color-dark-blue);
}

.case-promo__text {
  font-size: var(--fs-s);
  color: var(--text-muted);
}

.case-promo__link {
  align-self: flex-start;
}

/* Фото оборудования лежит в серой плашке (Primary Grey #EEEFF1 в макете).
   overflow нужен под ховер: увеличенная картинка не должна вылезать за плашку. */
.case-promo__media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
  background-color: var(--color-grey);
  border-radius: var(--radius-sm);
}

.case-promo__media img {
  width: 100%;
  max-width: 260px;
  height: auto;
  object-fit: contain;
  transition: transform var(--transition);
  -webkit-transition: transform var(--transition);
  -moz-transition: transform var(--transition);
  -ms-transition: transform var(--transition);
  -o-transition: transform var(--transition);
}

/* Аннотация макета (вариант Hover компонента «Промо-блок white»):
   «При ховере на блок чуть увеличивается фотка х1.1-1.2» */
@media (hover: hover) {
  .case-promo:hover .case-promo__media img {
    transform: scale(1.1);
    -webkit-transform: scale(1.15);
    -moz-transform: scale(1.15);
    -ms-transform: scale(1.15);
    -o-transform: scale(1.15);
  }
}

/* Приёмник для промо до 1024 */
.case-promo-slot {
  padding: 0 5px;
  background-color: var(--color-white-bg);
}

.case-promo-slot:empty {
  display: none;
}

/* --- Планшет 1024 ---------------------------------------------------------*/
@media (min-width: 768px) {
  .case-hero {
    padding: 10px 10px 0;
  }

  .case-hero__title {
    max-width: 430px;
  }

  .case-hero__lead {
    max-width: 430px;
  }

  .case-hero__card {
    min-height: max(calc(100vh - 20px), 700px);
    min-height: max(calc(100svh - 20px), 700px);
    padding: 20px 20px 40px;
  }

  .case-crumbs {
    top: calc(84px - 10px);
    padding: 16px 20px;
  }

  .case-crumbs__list {
    font-size: var(--fs-xs);
  }

  /* С 1024 промо возвращается в картинку: текст слева, карточка справа снизу */
  .case-hero__content {
    flex-direction: row;
    gap: 40px;
    align-items: flex-start;
    justify-content: space-between;
  }

  .case-hero__text {
    flex: 1 1 auto;
    gap: 16px;
    max-width: 620px;
  }

  /* Размеры из макета: карточка 482, поля 12, зазор до плашки 10,
     текстовый столбец фиксированной ширины 282 (+ свои поля 12). */
  .case-promo {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    width: 482px;
    padding: 12px;
  }

  .case-promo__body {
    flex: 0 0 auto;
    width: 282px;
    padding: 12px;
  }

  .case-promo__title {
    font-size: var(--fs-h3);
  }

  /* Плашка с фото тянется по остатку ширины и на всю высоту карточки —
     фиксированного квадрата в макете нет. */
  .case-promo__media {
    flex: 1 1 0;
    align-self: stretch;
    min-width: 0;
    padding: 0;
  }

  .case-promo__media img {
    width: 100%;
    height: 100%;
    max-width: none;
  }
}

/* --- Ноутбук 1440 ---------------------------------------------------------*/
@media (min-width: 1025px) {
  .case-hero__title {
    max-width: 530px;
  }

  .case-hero__lead {
    max-width: 530px;
  }

  .case-hero__card {
    padding: 20px 40px 50px;
  }

  .case-crumbs {
    padding: 16px 20px;
  }

  .case-hero__text {
    max-width: 700px;
  }

  .case-promo {
    width: 578px;
  }

  .case-promo__body {
    width: 360px;
  }

  .case-promo__head {
    gap: 20px;
  }
}

/* --- Десктоп 1920 ---------------------------------------------------------*/
@media (min-width: 1441px) {

  .case-hero__title {
    max-width: 750px;
  }

  .case-hero__lead {
    max-width: 670px;
  }

  .case-crumbs {
    top: calc(96px - 10px);
  }

  .case-hero__text {
    max-width: 900px;
  }

  .case-hero__lead {
    line-height: 30px;
  }

  .case-promo {
    width: 707px;
    padding: 20px;
  }

  .case-promo__body {
    width: 423px;
    gap: 24px;
  }

  .case-promo__head {
    gap: 24px;
  }

  /* В макете у заголовка промо стиль Desktop 1920/L/Bold (32), а не H3 (48) */
  .case-promo__title {
    font-size: var(--fs-l);
  }
}