/* ============================================================
   B10 · Економія
   figma: node-id=15:91
   ============================================================ */

.sc-saving {

  box-sizing: border-box;
  padding: var(--section-padding-y) var(--sc-pad-x);
  background: var(--background);
  color: var(--foreground);
}

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

.sc-saving__inner {
  display: grid;
  /* Те же колонки, что у формы B11 ниже: левый край таблицы встаёт на одну
     линию с полями формы (правка 2026-09-13; было 420fr 804fr) */
  grid-template-columns: 473fr 743fr;
  gap: var(--sc-space-16);
  align-items: start;
}

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

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

.sc-saving__title { margin: 0; }

.sc-saving__note {
  margin: 0;
  max-inline-size: var(--sc-measure);
  color: var(--muted-foreground);
}

/* Таблица и строка программы — два отдельных блока в одной колонке */
.sc-saving__table {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-6); /* 24: строка программы оторвана от списка */
}

/* Строки идут таблицей: рамки соседей схлопнуты, линия между ними одинарная */
.sc-saving__rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border: var(--sc-line) solid var(--border); /* рамка таблицы — 1px, линии строк волосяные */
  background: var(--card);
}

.sc-saving__row {
  display: flex;
  align-items: center;
  gap: var(--grid-gap);
  padding: var(--control-padding-y) var(--card-padding);
  border-block-end: var(--hairline) solid var(--border);
  color: var(--card-foreground);
}

.sc-saving__row:last-child { border-block-end: 0; }

/* Итоговая строка отделена жирной чертой: 0.7 и 1 браузер округляет
   одинаково, поэтому берём 2 — черта под списком, а не ещё одна строка
   (2026-09-23) */
.sc-saving__rows { --saving-total-line: var(--sc-space-0_5); }

.sc-saving__row:last-child {
  border-block-start: var(--saving-total-line) solid var(--border);
}

/* Две цены стоят рядом: слева вход, справа сама программа — выбор из двух,
   а не продолжение списка. Колонки равные, шаг тот же, что у сетки (2026-09-23) */
.sc-saving__prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: stretch;
}

/* Плиты в колонках — подпись сверху, цена под ней: в строку они не влезают
   и цена липла бы к подписи */
.sc-saving__prices .sc-saving__total {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--stack-gap-sm);
}

/* Ответ на список: та же строка, но сама по себе — без рамки таблицы.
   Плита чернильная, не синяя: правило «traces of blue» — синий остаётся
   акцентом на одном объекте, а не заливкой блока (2026-09-13). */
.sc-saving__total {
  display: flex;
  align-items: center;
  gap: var(--grid-gap);
  padding: var(--control-padding-y) var(--card-padding);
  background: var(--background);
  color: var(--foreground);
}

/* Обе плиты чернильные (2026-09-23): вход и программа — один ответ на список,
   разной заливкой они читались как разные по важности вещи */

.sc-saving__label {
  flex: 1 0 0;
  min-inline-size: 0;
  margin: 0;
}

.sc-saving__value {
  margin: 0;
  white-space: nowrap;
}

/* В плитах цена стоит под подписью и может переноситься: «132 500 грн ·
   фіксована ціна» в половину колонки одной строкой не входит уже с 1280
   и уезжала за край страницы (2026-11-09) */
.sc-saving__prices .sc-saving__value { white-space: normal; }

/* ---------- Планшет ----------
   Копия над таблицей: в две колонки таблице оставалось меньше 400px */

@media (max-width: 1023px) {
  .sc-saving__inner { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Мобильный ----------
   Строка складывается: подпись сверху, сумма под ней. */

@media (max-width: 640px) {

  .sc-saving__row,
  .sc-saving__total {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--stack-gap-sm);
  }

  /* На телефоне две цены — одна под другой: рядом они ужимают и подпись, и сумму */
  .sc-saving__prices {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sc-space-2);
  }
}