/* =============================================================================
   Результати — секція 08.

   Ритм за art-direction §7: циферблат, bento на дванадцять колонок — сім
   карток різної висоти з радіусом --radius-instrument. Це єдина асиметрична
   сітка на сторінці; сусіди — повношині блоки кейсів і рівні колонки тарифів.

   Клітинки НЕ картки. Сім обведених заокруглених прямокутників читалися як
   коробки, і в кожній було замало ваги. Тепер це одна суцільна панель, поділена
   волосяними рисками — приладова панель, а не набір плиток. Риски малюються
   проміжком сітки завширшки з волосину поверх кольору тла: так вони лягають
   правильно між клітинками будь-якого прольоту, без ручного керування
   рамками на краях.

   --radius-instrument лишається, але тепер на самій панелі, а не на кожній
   клітинці: механізм F1 з fulcrum, перенесений на інший об'єкт.

   Дві клітинки з семи темні. Рівне світле поле читалося монотонно; шахівниця
   ваги розбиває його, не додаючи ні кольору, ні графіки.
   ============================================================================= */

.outcomes__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--border-width-hair);
  background: var(--surface-invert-hairline);
  border: var(--border-invert-hairline);
  border-radius: var(--radius-instrument);
  overflow: hidden;
}

.outcome {
  display: grid;
  gap: var(--space-2xs);
  align-content: start;
  min-block-size: var(--bento-row);
  padding: var(--card-pad);
  background: var(--surface-invert);
  transition: background-color var(--dur-base) var(--ease-out);
}

.outcome:hover { background: var(--surface-invert-raised); }

/* Дві темні клітинки. Токени перевизначаються всередині, тому вміст не знає,
   на якій поверхні стоїть, і працює однаково. */
.outcome--dark {
  /* Приватна шкала панелі, а не --surface-page: усередині .section--invert
     той токен уже перевизначений на світлий, і клітинка лишалася б білою. */
  background: var(--_panel-950);
  /* Світлий текст на темній клітинці. --text-primary на :root саме такий,
     але всередині .section--invert він уже перевизначений на темний, і
     повернути кореневе значення посиланням не можна — тому найближчий
     наявний токен палітри. */
  --text-primary: var(--_dial-50);
  --text-secondary: var(--_grey-300);
  --text-muted: var(--_grey-400);
  --accent-ink: var(--accent);
  color: var(--text-primary);
}

.outcome--dark:hover { background: var(--_panel-850); }

.outcome__glyph {
  inline-size: var(--icon-size-md);
  block-size: var(--icon-size-md);
  fill: currentColor;
  stroke: none;
  color: var(--text-muted);
  margin-block-end: var(--space-2xs);
}

.outcome__title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.outcome__text {
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* ---- показник у провідній картці ---------------------------------------------
   Реальні бюджети проєкту, за якими його перевіряє QA: вони записані в
   art-direction і виміряні в reports/qa-001.md. Не рекламні цифри, а норма,
   під якою працює прилад. */

/* Три колонки поміщаються лише від 48rem: на 390px картка має 174px, а три
   показники просять 198 — значення затиралося сусіднім. */
/* Одна колонка нижче 48rem. Дві по auto з проміжком --space-md просять
   ~198px, а картка на 390px має 174 — і після того, як значенню заборонили
   переноситись, «< 200ms» просто вилазило за кромку картки на 11px. Тобто
   nowrap правильний, помилкою була сітка під ним. */
.outcome__spec {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: start;
  gap: var(--space-2xs) var(--space-md);
  margin: 0;
  margin-block-start: auto;
  padding-block-start: var(--space-sm);
  border-block-start: var(--border-hairline);
  font-family: var(--font-readout);
}

.outcome__spec div { display: grid; gap: var(--space-3xs); }

.outcome__spec dt {
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}

.outcome__spec dd {
  margin: 0;
  /* Показник не переносимо. У колонці 60px «< 2.5s» ламалося так, що знак
     лишався на своєму рядку, а число падало нижче — рядок виростав з 40 до
     78px, і сусідня картка тягнулася за ним. Порогове значення без свого
     знака ще й читається як інше число. */
  white-space: nowrap;
  font-size: var(--fs-h4);
  font-weight: var(--fw-readout);
  letter-spacing: var(--tracking-numeric);
  color: var(--accent-ink);
}

/* ---- перелік підключень -------------------------------------------------------
   Там, де зміст сам є переліком, речення тільки маскує його. Чипи читаються
   швидше й дають картці інший тип вмісту, ніж у сусідів. */

.outcome__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-block-start: auto;
  padding-block-start: var(--space-sm);
}

.outcome__chips li {
  padding: var(--pill-pad);
  border: var(--border-hairline);
  border-radius: var(--radius-chip);
  font-family: var(--font-readout);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
}

@media (min-width: 48rem) {
  .outcome__spec { grid-template-columns: repeat(3, auto); }
}

@media (min-width: 64rem) {
  .outcomes__grid {
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    grid-auto-rows: minmax(var(--bento-row), auto);
  }

  /* Сім карток різної ваги: перша — головна, дві широкі знизу, решта вузькі.
     Висоти різні навмисно, інакше bento вироджується в рівну сітку. */
  /* Провідна картка стоїть на крок вище за решту — не розміром, а поверхнею:
     біла проти заглибленої. Розмір тут уже працює, додавати ще й колір було б
     подвійним наголосом. */
  /* Провідна клітинка стоїть на крок вище — не розміром, а поверхнею:
     біла проти тла панелі. Розмір тут уже працює, колір був би подвійним. */
  .outcome:nth-child(1) {
    grid-column: span 5;
    grid-row: span 2;
    background: var(--surface-invert-raised);
    padding: var(--space-lg);
  }
  /* Базовий проліт для БУДЬ-ЯКОЇ картки. Без нього сітка була розписана рівно
     на сім штук, і восьма отримувала grid-column: auto — 95px завширшки,
     заголовок у три рядки й бежева пляма на 11 колонок поруч. Ряд правил
     nth-child нижче лише уточнює цей проліт, а не замінює його. */
  .outcome { grid-column: span 4; }

  /* Ряд 1: 5 + 4 + 3 = 12, перша картка тягнеться на два ряди.
     Ряд 2: (перша) + 4 + 3 = 12.
     Ряд 3: 4 + 4 + 4 = 12. */
  .outcome:nth-child(2) { grid-column: span 4; }
  .outcome:nth-child(3) { grid-column: span 3; }
  .outcome:nth-child(4) { grid-column: span 4; }
  .outcome:nth-child(5) { grid-column: span 3; }

  .outcome:nth-child(1) .outcome__title { font-size: var(--fs-h2); }
  .outcome:nth-child(1) .outcome__glyph {
    inline-size: var(--icon-size-lg);
    block-size: var(--icon-size-lg);
  }
}

/* ---- телефон ------------------------------------------------------------------
   Вісім клітинок по 20px поля з чотирьох боків: панель на 390 стає на 64px
   вищою тільки через поля. --card-pad-tight — той самий токен, яким живуть
   щільні картки, і на 16px текст усе ще не торкається волосяної риски. */
@media not all and (min-width: 48rem) {
  .outcome { padding: var(--card-pad-tight); }
}

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