/* ==========================================================================
   Страница-кейс MC Intermark Auto — цветовая тема (красная).
   Подключается ПОСЛЕ styles.css и kassir-case.css: переиспользует всю
   структурную вёрстку (шапка, hero, intro, divider, cols, carousel,
   results, other-cases, final-cta) и переопределяет цвета/контент,
   специфичные для этого кейса, плюс уникальный hero из трёх ноутбуков
   (вместо телефонов у Kassir/Ванта) и широкие десктоп-скриншоты в каруселях.
   ========================================================================== */

:root {
  --case-divider-line: linear-gradient(
    90deg,
    rgba(63, 17, 17, 0) 0%,
    #5b1818 17%,
    #ff3e3e 34%,
    #ffffff 50.481%,
    #ff3e3e 67%,
    #5b1818 84%,
    rgba(63, 17, 17, 0) 100%
  );
  /* Уточнено попиксельно по рендеру Figma: светло-коралловый → насыщенный
     красный (без чистого белого) — иначе цвет был еле заметен на сайте. */
  --case-gold-text: linear-gradient(175deg, #f0b3b1 0%, #dd6a67 100%);
}

/* ---------- Hero: три ноутбука вместо телефонов ----------
   Координаты — точные проценты от банера 1320×458 (599:2269):
   центр (дашборд) 700×442 при x94/y50 → left 23.48%, top 10.92%, w 53.03%, h 96.51%
   белый (слева)   500×316 при x94/y193 → left 7.12%, top 42.14%, w 37.88%, h 68.99%
   тёмный (справа)  500×316 при x726/y193 → left 54.99%, top 42.14%, w 37.88%, h 68.99%
   Центральный дашборд визуально спереди — z-index выше боковых. */
.intermark-hero__laptops {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.intermark-hero__laptop {
  position: absolute;
  height: auto;
}

.intermark-hero__laptop--white {
  left: 7.12%;
  top: 42.14%;
  width: 37.88%;
  z-index: 2;
}

.intermark-hero__laptop--dark {
  left: 54.99%;
  top: 42.14%;
  width: 37.88%;
  z-index: 2;
}

.intermark-hero__laptop--center {
  left: 23.48%;
  top: 10.92%;
  width: 53.03%;
  z-index: 1;
}

/* Доп. градиент (599:2277) — самый передний слой, затемняет нижнюю часть
   баннера (в т.ч. поверх ноутбуков): top 193/458=42.14%, до самого низа. */
.intermark-hero__front-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 57.86%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(0deg, var(--bg) 0%, rgba(13, 13, 13, 0) 100%);
}

/* ---------- Ряд чипов после hero (599:2278) ---------- */
.case-chips {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px clamp(24px, 5.56vw, 80px);
}

.case-chips__row,
.case-chips__award {
  display: flex;
  width: min(843px, 100%);
}

.case-chips__row {
  gap: 12px;
}

.case-chips__row span,
.case-chips__award span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border: 1px solid transparent;
  border-radius: 20px;
  white-space: nowrap;
  /* градиентная обводка (тёмно-красный диагональный градиент) */
  background:
    linear-gradient(#0d0d0d, #0d0d0d) padding-box,
    linear-gradient(135deg, #581716 0%, #d22a25 100%) border-box;
}

/* у Intermark обычные чипы крупнее (16/20), чем у Ванты (12/16) — как в макете */
.case-chips__row--big span {
  color: #ffffff;
  font-size: 16px;
  line-height: 20px;
}

.case-chips__award span {
  color: var(--text-muted, #bcbcbc);
  font-size: 16px;
  line-height: 20px;
}

/* ---------- Широкие десктоп-скриншоты в каруселях ----------
   В отличие от телефонных мокапов Kassir/Ванта (242×524 fixed), здесь
   реальные скриншоты веб-интерфейса разной ширины (932 или 416 при высоте
   524) — сохраняем интринсик-пропорции, фиксируем только высоту. */
.case-screens--wide .case-screens__track img {
  width: auto;
  height: 524px;
  max-width: none;
  object-fit: contain;
}

/* ---------- Кнопки карусели — красный градиент вместо жёлтого ---------- */
.carousel-btn {
  background:
    linear-gradient(#0d0d0d, #0d0d0d) padding-box,
    linear-gradient(135deg, #ffb3b0 0%, #d22a25 100%) border-box;
}

/* ---------- Финальный блок (красная тема) ---------- */
.case-final .final-cta__text h2 {
  background-image: linear-gradient(167.353deg, #f2c0be 0%, #dd6f6c 100%);
}

/* Уточнено попиксельно по рендеру Figma (766:1694) — обводка карточки
   с фото на самом деле вертикальный градиент (белый сверху → насыщенный
   красный снизу), а не плоский розовый, как было раньше. */
.case-final__photo {
  border: 1px solid transparent;
  background:
    linear-gradient(#0d0d0d, #0d0d0d) padding-box,
    linear-gradient(180deg, #ffffff 0%, #d22a25 100%) border-box;
}

/* У Интермарка сдвиг фото на 1px отличается от общего (Kassir/Ванта):
   left:-18px, top:10px вместо -19px/9px (752:12821 / 766:1696). */
.case-final__photo img {
  top: 10px;
  left: -18px;
}

/* Уточнено попиксельно по рендеру Figma (599:2412) — обводка кнопки на
   самом деле диагональный градиент (светло-коралловый → насыщенный
   красный), а не плоский белый, как было раньше. */
.case-final .final-cta__button {
  border: 1px solid transparent;
  background:
    linear-gradient(#0d0d0d, #0d0d0d) padding-box,
    linear-gradient(135deg, #f5d3d1 0%, #d63e3a 100%) border-box;
}

/* ==========================================================================
   МОБИЛЬНАЯ ВЕРСИЯ (360–1279) — только СПЕЦИФИКА Интермарка.
   Диапазон совпадает с общим блоком в kassir-case.css (см. комментарий там):
   .site-shell зафиксирован на 768px с 768 до 1280px, поэтому мобильная
   вёрстка должна оставаться активной до 1279px, а не отключаться на 768px.
   Всё общее (шапка-бургер, чипы, интро-дропдауны, разделители, результаты,
   другие кейсы, финальный блок) вынесено в общий kassir-case.css. Здесь —
   лишь отличия Интермарка: герой из ноутбуков (вместо телефона) и широкие
   веб-скрины стопкой (вместо горизонтальной ленты телефонов). Файл грузится
   ПОСЛЕ kassir-case.css, поэтому переопределяет его значения по умолчанию.
   ========================================================================== */
@media (max-width: 1279px) {
  /* -------------------- Герой: один ноутбук, без боковых градиентов -------------------- */
  .case-hero__fade--left,
  .case-hero__fade--right,
  .intermark-hero__laptop--white,
  .intermark-hero__laptop--dark,
  .intermark-hero__front-fade {
    display: none;
  }

  .case-hero__fade--top {
    height: 15%;
  }

  .case-hero__fade--bottom {
    height: 33.4%;
  }

  .intermark-hero__laptop--center {
    left: 3.66%;
    top: 50%;
    width: 92.38%;
    transform: translateY(-50%);
  }

  /* -------------------- Экраны: широкие скрины стопкой, целиком --------------------
     переопределяем «телефонную ленту» из kassir-case.css: у Интермарка это
     реальные веб-скриншоты, показываем их полностью в столбик без свайпа. */
  .case-screens {
    padding-top: 12px;
    padding-bottom: 0;
  }

  .case-screens__head {
    padding: 4px 16px;
  }

  .case-screens--wide .case-screens__track {
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    overflow: visible;
  }

  .case-screens--wide .case-screens__track img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
  }

  /* -------------------- Финальный блок: свой градиент заголовка (766:1699) --------------------
     угол как в Figma (148.556deg), цвета сэмплированы попиксельно —
     светло-коралловый → насыщенный красный, темнее десктопного текста. */
  .case-final .final-cta__text h2 {
    background-image: linear-gradient(148.556deg, #c17b79 0%, #9b2c29 100%);
  }
}