/* ============================================================
   B13 · CTA3 Меню на рік
   figma: node-id=15:138
   ============================================================ */

.sc-bonus {
  --bonus-min-h: 600px; /* высота плиты в макете (15:138) */

  box-sizing: border-box;
  /* Секция — только поля полосы, без вертикальных: в макете (496:401) плита
     стоит встык к соседним блокам, а по бокам тёмный фон.
     Фон глубже темы: кадр на плите почти чёрный, и --background рядом с ним
     выглядел подложкой (правка 2026-09-13) */
  padding-inline: var(--sc-pad-x);
  background: var(--sc-ink-deep);
  color: var(--foreground);
}

/* Плита 1280×600 в контентной полосе */
.sc-bonus__frame {
  position: relative;
  min-block-size: var(--bonus-min-h);
  display: flex;
  overflow: hidden;
}

.sc-bonus *,
.sc-bonus *::before,
.sc-bonus *::after { box-sizing: border-box; }

.sc-bonus__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--muted);
  z-index: 0;
}

.sc-bonus__bg img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Скрима нет: в макете плита идёт с чистым кадром (правка 2026-09-08).
   Исключение из правила «текст на фото всегда со скримом» держится на том,
   что финальный кадр тёмный в зоне копии. При замене фото проверить контраст. */

.sc-bonus__inner {
  position: relative;
  z-index: 1;
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--section-gap);
  /* По горизонтали полей нет: плита и так стоит в контентной полосе, и
     вторые 80 внутри уводили текст на 160 от края экрана — на полстраницы
     правее, чем в соседних блоках. В макете отступ нарисован внутри плиты,
     но там она лежит на светлом фоне и её край виден, а у нас фон секции
     такой же тёмный, и смещение читалось как сбитая вёрстка
     (правка 2026-09-14). По вертикали отступ прежний. */
  padding: var(--section-padding-y-tight) 0;
  min-inline-size: 0;
}

.sc-bonus__copy {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap-sm);
}

.sc-bonus__kicker {
  margin: 0;
  color: var(--accent-foreground);
}

.sc-bonus__title {
  margin: 0;
  max-inline-size: var(--sc-measure);
}

/* Конверсионная кнопка — на общем токене заливки, как все кнопки проекта
   (2026-09-13: была --sc-action, единственная синяя кнопка на сайте) */
.sc-bonus__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--control-padding-y) var(--control-padding-x);
  border: var(--sc-line) solid transparent;
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--primary-foreground);
  text-decoration: none;
  text-transform: uppercase;
  font: var(--button-weight) var(--button-size) / var(--button-lh) var(--font-headings);
  letter-spacing: var(--button-ls);
  transition: opacity var(--sc-dur) var(--sc-ease);
}

/* В Figma состояний нет — обязательны по CLAUDE.md */
.sc-bonus__cta:hover { opacity: 0.85; }

.sc-bonus__cta:focus-visible {
  outline: var(--sc-focus-w) solid var(--ring);
  outline-offset: var(--sc-focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  .sc-bonus__cta { transition: none; }
}

@media (max-width: 640px) {
  /* Вертикальный кадр 432×768: пропорция кадра, копия у нижнего края */
  .sc-bonus__frame {
    min-block-size: 0;
    aspect-ratio: 432 / 768;
  }

  .sc-bonus__inner { justify-content: flex-end; }

  .sc-bonus__cta { inline-size: 100%; }
}

/* ---------- Копия не заходит на тарелку ----------
   Кадр 2078×866 при высоте плиты 600 всегда масштабируется по высоте и
   режется по бокам поровну, поэтому край тарелки стоит чуть правее середины
   плиты на любой ширине. Ниже 1280 заголовок в одну строку доходил до тарелки
   и ложился на неё (планшет, правка 2026-11-09). Копия держится в левой части
   плиты и переносится; от 1280 заголовок короче этой доли и не меняется.
   При замене кадра долю проверить заново. */

@media (min-width: 641px) {
  .sc-bonus__copy {
    --bonus-copy-w: 48%; /* доля плиты слева от тарелки, из кадра */
    max-inline-size: var(--bonus-copy-w);
  }
}

/* ---------- Тарелка целиком (641–1279) ----------
   Кадр 2078×866 по высоте плиты 600 режется по бокам, и ниже 1280 правый край
   тарелки уходил за плиту, на вертикальном планшете — заметно (замечание 2026-11-10).
   Здесь кадр масштабируется от ширины плиты, а не от высоты: тарелка занимает
   половину плиты и стоит у правого края с полем 5%, сверху и снизу — чёрный фон
   самого кадра. Цифры из кадра: тарелка в нём от 1080 до 1740 px по горизонтали.
   157% — ширина кадра к ширине плиты; −36.5% — сдвиг, ставящий край тарелки на 95%.
   Копия держится левее 42% (край тарелки ~45%). При замене кадра пересчитать. */
@media (min-width: 641px) and (max-width: 1279px) {
  .sc-bonus__bg { background: var(--sc-ink-deep); }

  .sc-bonus__bg img {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: -36.5%;
    inline-size: 157%;
    block-size: auto;
    max-inline-size: none;
    object-fit: fill;
    transform: translateY(-50%);
  }

  .sc-bonus__copy { --bonus-copy-w: 42%; }
}