/* Season Checklist Item — блок WowVendor DS (файл Shop/Components
   MI2pse3AB2kUEI5bXJ4GDR, фрейм-витрина 11194:2239).

   Строка чек-листа сезона: арт цели, название и пояснение, награда, дедлайн и
   кнопка заказа буста.

   ДВЕ НОДЫ, ДВЕ РАСКЛАДКИ (оси вариантов у обеих одна — Property 1=Default):
     11194:2240  1222×72  — десктоп: одна строка, правая группа шириной 280;
     11194:2255  416×256  — мобайл: карточка в столбик, кнопка на всю ширину.

   ТОЧКА ПЕРЕКЛЮЧЕНИЯ — --bp-desktop (контейнер 1152), НЕ tablet. Промежуточной
   ноды в Figma нет, выбор обоснован арифметикой самой десктопной раскладки:
   48 (арт) + 20 + текст + 36 + 140 (награда) + 24 + 280 (действия) + 32 (поля)
   = 730 БЕЗ текста, то есть на планшетном контейнере 728 колонка описания
   схлопывается в ноль. Поэтому планшет получает карточную раскладку.

   ПЕРЕКЛЮЧЕНИЕ — АРИФМЕТИКОЙ НА ФЛАГЕ --bp-desktop, а не @container внутри
   блока: compare.mjs открывает страницу в окне 1280×720, и @media/@container от
   окна подменил бы раскладку в showcase-репликах. Чисел точек перелома здесь
   нет — они живут только в grid.css, блок читает готовый флаг.
   Перекладка ряда в столбик сделана flex-wrap'ом: элемент, который на мобиле
   уходит на свою строку, получает min-width: 100% × (1 − --bp-desktop).
   Носитель .bp-scope — .sci__inner, контейнер — сам .sci (объявить оба на одном
   элементе нельзя: @container опрашивает ближайшего ПРЕДКА-контейнер).

   Структурные px, которых нет в шкале токенов (габариты прямо из ноды, как 56px
   аватара в blockquote): 36 — арт, 12 — иконка часов, 140 — минимум колонки
   награды, 280 — ширина группы действий, 2 — толщина обводки арта. */

.sci {
  box-sizing: border-box;
  container-type: inline-size;
  padding: var(--spacing-12) var(--spacing-16);
  background: var(--color-gray-0);
  font-family: var(--font-family-base);
}

.sci * { box-sizing: border-box; }

/* Носитель флагов брейкпоинта и основной ряд.
   gap: 12 на мобиле → 36 на десктопе (12 + 24). */
.sci__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: calc(var(--spacing-12) + var(--spacing-24) * var(--bp-desktop));
}

/* ── Левая группа: арт + текст ─────────────────────────────────────────────
   gap: 12 → 20 (12 + 8). На мобиле .sci__text забирает всю ширину и уводит
   себя под арт — это и есть перекладка в столбик. */
.sci__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing-12) + var(--spacing-8) * var(--bp-desktop));
  /* flex-basis: 0 (в Figma flex-[1_0_0]) обязателен: при basis:auto длинный
     заголовок раздувает базовый размер, и ряд с flex-wrap ПЕРЕНОСИТ правую
     группу вниз вместо того, чтобы сжать колонку текста. На мобиле перенос всё
     равно обеспечивает min-width: 100%. */
  flex: 1 1 0;
  min-width: calc(100% * (1 - var(--bp-desktop)));
}

/* Обводка арта — именно border, а не inset box-shadow: в Figma stroke лежит
   СНАРУЖИ (замер эталона: 2 + 4 + 36 + 4 + 2 = 48px внешнего габарита, и ровно
   48 остаётся от строки 72 после полей 12). */
.sci__icon {
  display: flex;
  flex: none;
  align-items: center;
  padding: var(--spacing-4);
  border: 2px solid var(--color-gray-100);
  border-radius: var(--radius-8);
}

.sci__img {
  display: block;
  flex: none;
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-12);
}

.sci__text {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  /* на мобиле — своя строка под артом, на десктопе — сжимаемая колонка */
  min-width: calc(100% * (1 - var(--bp-desktop)));
  word-break: break-word;
}

.sci__title {
  margin: 0;
  color: var(--color-gray-900);
}

.sci__desc {
  margin: 0;
  color: var(--color-gray-500);
}

/* ── Правая группа: награда + дедлайн и кнопка ─────────────────────────────
   gap: 12 → 24 (12 + 12). */
/* flex-shrink: 1 + max-width: 100% — вопреки shrink-0 в Figma. В макете правая
   группа помещается всегда, но flex-basis: auto у неё считается по max-content
   (награда идёт nowrap), и при узком контейнере или длинном названии группа
   вылезала бы за край карточки: floor min-width'ом потолок не задаёт. На
   эталонных ширинах ни то ни другое не срабатывает — сверка не затронута. */
.sci__side {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--spacing-12) + var(--spacing-12) * var(--bp-desktop));
  min-width: calc(100% * (1 - var(--bp-desktop)));
  max-width: 100%;
}

/* Многоточие вместо переполнения — сверх макета: в ноде название награды
   короткое («Title»), но при длинном nowrap вынес бы текст за край карточки.
   На эталонной строке ничего не меняет. */
.sci__reward {
  margin: 0;
  /* десктоп — минимум колонки 140; мобайл — своя строка на всю ширину, иначе
     justify-end правой группы прижал бы короткое название к правому краю */
  min-width: calc(140px * var(--bp-desktop) + 100% * (1 - var(--bp-desktop)));
  overflow: hidden;
  color: var(--color-gray-900);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sci__actions {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-16);
  min-width: calc(280px * var(--bp-desktop) + 100% * (1 - var(--bp-desktop)));
  max-width: calc(280px * var(--bp-desktop) + 100% * (1 - var(--bp-desktop)));
}

.sci__deadline {
  display: flex;
  flex: 0 1 auto;
  max-width: 100%;
  align-items: center;
  gap: var(--spacing-8);
  margin: 0;
  /* на мобиле — своя строка, поэтому justify-end правой группы её не сдвигает */
  min-width: calc(100% * (1 - var(--bp-desktop)));
  color: var(--color-negative-500);
}

.sci__clock {
  display: block;
  flex: none;
  width: 12px;
  height: 12px;
  /* icon-circle-clock нарисована на сетке 24 с обводкой 1.6 (толщина для 24px),
     а в ноде стоит размером 12 и сохраняет АБСОЛЮТНУЮ толщину 1.6px (экспорт
     ноды: viewBox 11.6, stroke-width 1.6). В системе viewBox 24 это 3.2.
     CSS перебивает одноимённый presentation-атрибут в самом SVG. */
  stroke-width: 3.2;
}

/* Локальный модификатор кнопки — только под префиксом блока: на мобильной ноде
   кнопка растянута на всю ширину карточки, на десктопной — hug. */
.sci .btn {
  min-width: calc(100% * (1 - var(--bp-desktop)));
  max-width: 100%;
}

/* ══ Классы-варианты (showcase-реплики нод Figma) ═══════════════════════════
   Жёстко выставляют тот же флаг, что @container выставил бы по ширине. Чисел
   точек перелома здесь нет — только значение флага. Идут последними, поэтому
   перебивают @container-мост grid.css. */
.sci--desktop .bp-scope { --bp-desktop: 1; }
.sci--mobile  .bp-scope { --bp-desktop: 0; }