/* ============================================================================
   Banner Countdown — баннер с таймером обратного отсчёта (нода 2822:12434,
   файл Shop/Components MI2pse3AB2kUEI5bXJ4GDR).

   ОСИ component set: Size (Large/Medium/Small) × Interaction (Default /
   Hover & Focus) = 6 вариантов.

   Size = состояния ОДНОЙ адаптивной раскладки (тот же приём, что у
   banner-benefits — оси Breakpoint в Figma нет, но Small подписан «Используется
   на мобильных разрешениях», Large/Medium — «в теле контента или статьи»):
     Large  (2822:16003, 960×96)  — один ряд: [спейсер][текст][таймер+кнопка],
             иллюстрация в левой четверти.
     Medium (2822:16035, 560×154) — текст сверху, ряд [таймер][кнопка] снизу,
             иллюстрация в правой половине.
     Small  (2822:16063, 280×330) — мобайл: иллюстрация сверху, текст, таймер,
             кнопка на всю ширину.

   Раскладку переключают флаги из grid.css (числа точек перелома живут ТОЛЬКО
   там; свой @container блок НЕ пишет):
     --bp-desktop (≥1152) = 1        → Large
     --bp-tablet  (≥728)  = 1, d=0   → Medium
     --bp-tablet  = 0 (<728)         → Small
   Локальные алиасы: --d (Large), --t (Large+Medium). Medium = (t − d),
   Small = (1 − t). В showcase-репликах раскладку ФИКСИРУЮТ модификаторы
   .bcd--large/--medium/--small.

   ПЕРЕКЛЮЧЕНИЕ РЯД↔СТОЛБИК — без смены flex-direction (её нельзя вычислить в
   calc, а флаги — числа): раскладка одна (ряд с переносом), а «столбик» на
   Medium/Small получается сам, потому что текст там занимает всю строку
   (flex-basis 100%) и группа переносится под него. Тот же приём внутри группы:
   на Small кнопка не помещается рядом с таймером (210 + 12 + 74 > 232) и уходит
   на свою строку, где растягивается (flex-grow на флаге). Спейсер на узких
   ширинах убирает display: var(--only-desktop) — штатная утилита grid.css;
   именно display:none, а не нулевая ширина, иначе column-gap оставил бы от него
   зазор 24px и сдвинул текст.

   Interaction=Hover & Focus — зум иллюстрации. В Figma это увеличенный бокс
   картинки, центрированный в той же ячейке (L 384×115.2 при ячейке 240×96,
   M 336×168 при 280×154, S 336×192 при 280×165). При object-fit:cover и
   квадратном исходнике 500×500 это ровно изотропный зум ×1.6 (L) и ×1.2 (M/S),
   поэтому реализовано transform: scale от центра, а не фикс. px-боксом —
   иначе в резиновой ячейке живого демо зум поехал бы.

   Значения — только var(--token). Фон #044960 = --color-teal-700 (токен заведён
   по решению пользователя: в Figma захардкожен). Подписи таймера — .text-body-8m
   (тоже новый токен, см. компонент timer).
   Сырые px — структурные величины самой ноды, не имеющие токенов: 120px (резерв
   места под иллюстрацию сверху у Small — по решению пользователя оставлен
   числом), 280/400px (max/min-width колонок Large), зумы 1.6/1.2.
   ========================================================================== */

.bcd {
  --d: var(--bp-desktop, 1);
  --t: var(--bp-tablet, 1);
  /* Зум иллюстрации в Hover & Focus: Large ×1.6, Medium/Small ×1.2 */
  --bcd-zoom: calc(var(--d) * 1.6 + (1 - var(--d)) * 1.2);

  position: relative;
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-12);
  background: var(--color-teal-700);
  font-family: var(--font-family-base);
  font-optical-sizing: none; /* Inter, ось opsz: браузер поджимает глифы, Figma — нет */
  text-decoration: none;
  cursor: pointer; /* баннер кликабелен целиком (описание Figma) */

  /* Large/Medium — 24 со всех сторон; Small — сверху резерв под иллюстрацию.
     120px — структурная величина ноды (24 + 120 + 186 = 330), токена нет. */
  padding: calc(var(--t) * var(--spacing-24) + (1 - var(--t)) * 120px)
           var(--spacing-24)
           var(--spacing-24);
}
.bcd, .bcd *, .bcd *::before, .bcd *::after { box-sizing: border-box; }
.bcd p { margin: 0; }

/* Модификаторы фиксируют флаги (showcase-реплики + пиксельная сверка). */
.bcd--large  { --bp-desktop: 1; --bp-tablet: 1; --only-desktop: flex; }
.bcd--medium { --bp-desktop: 0; --bp-tablet: 1; --only-desktop: none; }
.bcd--small  { --bp-desktop: 0; --bp-tablet: 0; --only-desktop: none; }

/* ---------- Фон: ячейка с иллюстрацией + градиент-затухание ---------- */

.bcd__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Ячейка иллюстрации — точный бокс из Figma:
   L — левая четверть (240 из 960), M — правая половина (280 из 560),
   S — верхняя половина (165 из 330) во всю ширину. */
.bcd__cell {
  position: absolute;
  top: 0;
  left: calc((var(--t) - var(--d)) * 50%);
  width: calc(
    var(--d) * 25% +
    (var(--t) - var(--d)) * 50% +
    (1 - var(--t)) * 100%
  );
  height: calc(var(--t) * 100% + (1 - var(--t)) * 50%);
  overflow: hidden;
}

.bcd__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: transform 0.2s ease-out;
}

/* Затухание в цвет фона. В Figma «Shadow» — flex-половина ячейки, поэтому
   градиент идёт от середины ячейки к её краю. Активен ровно один скрим —
   через opacity на флаге. Transparent-конец без чёрного канта: CSS
   интерполирует по premultiplied alpha. */
.bcd__scrim { position: absolute; inset: 0; }

.bcd__scrim--l {
  opacity: var(--d);
  background: linear-gradient(to right, transparent 50%, var(--color-teal-700) 100%);
}
.bcd__scrim--m {
  opacity: calc(var(--t) - var(--d));
  background: linear-gradient(to right, var(--color-teal-700) 0%, transparent 50%);
}
.bcd__scrim--s {
  opacity: calc(1 - var(--t));
  background: linear-gradient(to bottom, transparent 50%, var(--color-teal-700) 100%);
}

/* ---------- Interaction = Hover & Focus ---------- */

.bcd--hover .bcd__art,
.bcd:hover .bcd__art,
.bcd:focus-visible .bcd__art {
  transform: scale(var(--bcd-zoom));
}
@media (prefers-reduced-motion: reduce) {
  .bcd__art { transition: none; }
}

.bcd:focus-visible {
  outline: 2px solid var(--color-gray-0);
  outline-offset: 2px;
}

/* ---------- Контент ---------- */

.bcd__content {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--spacing-24);
  /* Вертикальный зазор строк: Medium 16, Small 24 (на Large строка одна) */
  row-gap: calc(
    (var(--t) - var(--d)) * var(--spacing-16) +
    (1 - var(--t)) * var(--spacing-24)
  );
  /* Medium: правый отступ под иллюстрацию */
  padding-right: calc((var(--t) - var(--d)) * var(--spacing-80));
}

/* Large: резерв места под иллюстрацию слева. На Medium/Small его нет вовсе
   (display:none из grid.css), иначе column-gap оставил бы от него зазор. */
.bcd__spacer {
  display: var(--only-desktop, flex);
  flex: 1 1 0;
  max-width: 280px;
  align-self: stretch;
}

.bcd__text {
  /* Large — колонка в ряду (basis 0, прижимает спейсер своим min-width 400);
     Medium/Small — занимает всю строку, из-за чего группа переносится вниз. */
  flex: 1 1 calc((1 - var(--d)) * 100%);
  min-width: calc(var(--d) * 400px);
  display: flex;
  flex-direction: column;
  /* Small: зазор заголовок↔подпись 4; L/M — 0 (обе строки leading 24) */
  gap: calc((1 - var(--t)) * var(--spacing-4));
  color: var(--color-gray-0);
}

/* Группа «таймер + кнопка». max-width — чтобы на Small (232px) кнопка не
   помещалась рядом с таймером (210) и уходила на свою строку. */
.bcd__group {
  flex: none;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  /* По верху — как в Figma у Medium (таймер там 42, кнопка 32). На Large обе
     высоты равны 32, поэтому flex-start и center там неразличимы, а на Small
     таймер и кнопка стоят в разных строках. */
  align-items: flex-start;
  justify-content: center;
  gap: var(--spacing-12);
}

/* Кнопка «Buy now» — переиспользован button (Secondary, Size=Small).
   На Small растягивается на всю ширину, на Large/Medium — по содержимому. */
.bcd__group .btn { flex-grow: calc(1 - var(--t)); }

/* Высота инстанса таймера в Figma задана по-разному, и от неё зависят и высота
   баннера, и вертикальный центр ряда: Large — 32 (габарит мастера, подписи
   разрядов свисают ниже), Medium/Small — 42 (hug: боксы 32 + gap 2 + подпись 8).
   Оставить всюду 32 — Medium/Small становятся на 10px ниже эталона; сделать
   всюду 42 — в Large боксы уезжают вверх при align-items:center. */
.bcd__group .timer {
  height: calc(var(--d) * 32px + (1 - var(--d)) * 42px);
}

/* ЛОКАЛЬНОЕ ОТСТУПЛЕНИЕ: в баннере у кнопки НЕТ рамки-кольца gray-100
   (проверено пикселями эталона: за фоном сразу белая заливка). Кольцо гасим
   только под префиксом блока, чтобы не протекло на всё, где подключён
   button.css. */
.bcd .btn--secondary { box-shadow: var(--shadow-4); }