/* =============================================================================
   Кейси — секція 07.

   Ритм за art-direction §7: панель, три повношині блоки. Текст займає п'ять
   колонок, медіа — сім і вилітає за правий край вікна. Проти сусідів: 06 —
   закріплена горизонтальна шкала, 08 — світлий bento. Виліт за край тут
   єдиний на сторінці після героя, тому пара 06/07 не читається однаково.

   Кожен другий кейс дзеркалиться: медіа ліворуч, текст праворуч. Інакше три
   однакові блоки підряд дають той самий штамп, від якого ми пішли.
   ============================================================================= */

.work__list {
  display: grid;
  gap: var(--space-3xl);
}

.case {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

/* Нижче --bp-lg скріншот іде ПЕРЕД текстом. У розмітці він після нього, бо на
   десктопі так лягає сітка, але в одну колонку це ставило доказ після заклику
   до дії: спершу «Read the case», і лише потім те, про що йдеться. */
@media not all and (min-width: 64rem) {
  .case__media { order: -1; }
}

.case__text {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
}

/* Галузь і спеціалізація клієнта: «Automotive · Van rental, Warsaw». Це не
   показник — нічого не вимірює й не має розрядки по знаках, — тому накреслення
   звичайне. Моно на цій сторінці лишається мовою чисел: ціни, терміни, номери
   поділок, лічильник у шапці.

   Кегль виписаний явно, хоч він і збігається з тим, що дає .mono в розмітці.
   Клас там лишився, але від нього тут не діє вже нічого, крім кегля, — і той,
   хто прибере клас, що більше нічого не означає, мовчки отримав би успадковані
   16px замість 14px (заміряно 2026-09-14). Правило самодостатнє: зняття .mono
   його не міняє. */
.case__meta {
  display: flex;
  gap: var(--space-md);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-normal);
  color: var(--text-muted);
}

/* Результат — показник приладу, тому моноширинний і бурштиновий. */
/* Показник кейса: число і, поруч, чим воно виміряне. Без підпису число
   читається як рекламна цифра; з підписом — як показання. */
.case__result {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  flex-wrap: wrap;
  font-family: var(--font-readout);
  font-size: var(--fs-readout);
  font-weight: var(--fw-readout);
  line-height: var(--lh-readout);
  letter-spacing: var(--tracking-numeric);
  color: var(--accent);
}

.case__result-label {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-normal);
  color: var(--text-muted);
}

.case__title {
  font-size: var(--fs-h2);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
}

.case__desc { color: var(--text-secondary); }

.case__stack {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.case__chip {
  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-muted);
}

.case__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  transition: color var(--dur-fast) var(--ease-out);
}

.case__more:hover { color: var(--accent); }

/* Медіа тепер справжній скріншот, а не сірий бокс: розміри лишаються
   зарезервованими атрибутами width/height, тому CLS не з'являється. */
.case__media {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  border: var(--border-hairline);
  border-radius: var(--radius-block);
}

@media (min-width: 64rem) {
  .case {
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    gap: var(--gutter);
  }

  /* Рядок задається явно обом. Без цього дзеркальний кейс ламається: медіа
     стоїть у розмітці після тексту, а сітка не розміщує назад — тож блок,
     якому призначені ліві колонки, падає в наступний рядок. */
  .case__text { grid-column: 1 / 6; grid-row: 1; }

  /* Секція знімає обмеження ширини контейнера: поки .wrap автоцентрується,
     між ним і краєм вікна лишається змінне поле, і виліт медіа доводиться
     вгадувати. Без обмеження поле дорівнює нулю, і --wrap-pad назад дає
     рівно край вікна — праворуч, і рівно кромку шасі рейки ліворуч.
     Ширину тексту тримає власний max-inline-size, а не контейнер. */
  .work > .wrap { max-inline-size: none; }
  /* Виліт робить ширина, а не сам від'ємний margin: у зображення задано
     inline-size, тому воно лишається завширшки з комірку сітки, і margin лише
     зсував би його всередині неї. Ширина росте на --wrap-pad, margin забирає
     цю ж величину назад із потоку — комірка не розпирається.

     max-inline-size знімається навмисно: базове `img { max-width: 100% }`
     обрізало щойно додану ширину назад до комірки, і виліт не відбувався
     взагалі — зображення просто зупинялося на краю контейнера. */
  .case__media {
    grid-column: 6 / -1;
    grid-row: 1;
    inline-size: calc(100% + var(--wrap-pad));
    max-inline-size: none;
    margin-inline-end: calc(var(--wrap-pad) * -1);
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }

  /* Дзеркальний кейс: медіа ліворуч, текст праворуч. Вліво блок їде рівно
     так само — і зупиняється на кромці шасі рейки. Заїхати на рейку він не
     може: вона навігація, і перекривати її картинкою не можна. */
  .case:nth-child(even) .case__text { grid-column: 8 / -1; grid-row: 1; }
  .case:nth-child(even) .case__media {
    grid-column: 1 / 7;
    grid-row: 1;
    inline-size: calc(100% + var(--wrap-pad));
    max-inline-size: none;
    margin-inline: calc(var(--wrap-pad) * -1) 0;
    border-radius: var(--radius-block);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }
}

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

/* =============================================================================
   Решта роботи — компактні рядки.

   Три повних блоки це межа: четвертий і п'ятий уже не читаються, а гортаються.
   Тому решта кейсів стоїть рядками — номер, назва, вертикаль, показник,
   стрілка. Це та сама шкала приладу, що й рейка ліворуч, тільки покладена
   горизонтально: пронумерована поділка з підписом і значенням.

   Проти сусідніх блоків працює контраст щільності, а не нова мова: після
   трьох розворотів на пів екрана йде щільний список, який видно цілком.
   ============================================================================= */

.work__more {
  margin-block-start: var(--space-3xl);
  padding-block-start: var(--space-lg);
  border-block-start: var(--border-hairline);
}

.work__more-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  align-items: baseline;
  justify-content: space-between;
  margin-block-end: var(--space-md);
}

.work__more-title {
  font-family: var(--font-readout);
  font-size: var(--fs-readout-label);
  font-weight: var(--fw-readout);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

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

.work__more-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-row { border-block-end: var(--border-hairline); }

.case-row__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "num title arrow"
    "num meta arrow"
    "num result arrow";
  gap: var(--space-3xs) var(--space-md);
  align-items: center;
  padding-block: var(--row-pad);
  color: var(--text-primary);
  transition: color var(--dur-fast) var(--ease-out);
}

.case-row__num {
  grid-area: num;
  font-size: var(--fs-readout-label);
  font-weight: var(--fw-readout);
  letter-spacing: var(--tracking-numeric);
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}

/* Назва рядка — заголовок, а не абзац, тому й інтерлін'яж заголовковий. Доти
   span успадковував --lh-body від body (18px × 1.55), і назва в два рядки
   займала 56px замість 40: та сама мова, що в .service-row__title. */
.case-row__title {
  grid-area: title;
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-tight);
}

/* Те саме, що .case__meta: галузь і спеціалізація, а не дані приладу. */
.case-row__meta {
  grid-area: meta;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-normal);
  color: var(--text-muted);
}

.case-row__result {
  grid-area: result;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

/* Показник кейса — те саме бурштинове число, що в повному блоці, тільки на
   щабель менше: рядок не має перетягувати увагу з трьох головних. */
.case-row__value {
  font-family: var(--font-readout);
  font-size: var(--fs-h4);
  font-weight: var(--fw-readout);
  line-height: var(--lh-readout);
  letter-spacing: var(--tracking-numeric);
  color: var(--accent);
}

.case-row__label {
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.case-row__arrow {
  grid-area: arrow;
  color: var(--text-muted);
  transition:
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.case-row__link:hover .case-row__arrow,
.case-row__link:focus-visible .case-row__arrow {
  color: var(--accent);
  transform: translateX(var(--space-3xs));
}

.case-row__link:hover .case-row__num,
.case-row__link:focus-visible .case-row__num { color: var(--accent); }

@media (min-width: 64rem) {
  /* На широкому екрані рядок стає таблицею: назва, вертикаль, показник і
     стрілка на своїх колонках — очима читається зверху вниз, як реєстр. */
  .case-row__link {
    grid-template-columns: auto minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.2fr) auto;
    grid-template-areas: "num title meta result arrow";
    gap: var(--space-lg);
  }

  .case-row__result { justify-content: flex-end; }
}

/* ---- телефон: рядок мусить лишатися рядком -------------------------------------
   Блок «Also delivered» коштував 1.3 екрана на 390 — третину всієї секції — і
   кожен його рядок був заввишки 201px, тобто карткою, а не рядком.

   Причина була в сітці, а не в обсязі тексту. Номер стояв окремою колонкою на
   всі три рядки, тому назва, вертикаль і показник жили в колонці 253px замість
   307: назва ламалася на три рядки замість двох, а показник не вміщався поруч
   зі своїм підписом і з'їжджав на окремий рядок флексу.

   Тепер номер стоїть у рядку з назвою, а вертикаль і показник займають усю
   ширину під ними. Жодного кейса, жодного підпису й жодного показника не
   прибрано — змінилася тільки розкладка і поле рядка. */
@media not all and (min-width: 48rem) {
  .work__list { gap: var(--space-xl); }

  .case { gap: var(--space-md); }

  .case__text { gap: var(--space-xs); }

  .work__more {
    margin-block-start: var(--space-xl);
    padding-block-start: var(--space-md);
  }

  .case-row__link {
    grid-template-areas:
      "num    title  arrow"
      "meta   meta   arrow"
      "result result arrow";
    column-gap: var(--space-2xs);
    align-items: baseline;
    padding-block: var(--space-sm);
  }

  /* Число і його підпис в одному рядку флексу. Доти підпис мав ширину власного
     тексту, поруч зі значенням не вміщався і переносився цілим блоком на другий
     рядок — 26px висоти на кожен рядок реєстру ні за що. */
  .case-row__label {
    flex: 1 1 0;
    min-inline-size: 0;
  }

  .case-row__arrow { align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .case-row__link,
  .case-row__num,
  .case-row__arrow { transition: none; }
}