/* ══════════════════════════════════════════════════════════
   v2-work.css — акт «Что делаем» на v2.html и v3.html.

   База (.work, .work__kicker, .row, .row__in, .row__name, .row__img
   и заливка красным по ховеру) живёт в main.css и переиспользуется.
   Пять строк вместо четырёх ничего в базе не ломают: там нет ни
   счётчиков, ни nth-child, ни высот, завязанных на количество.

   Здесь — три вещи:
   1. светлая версия акта (класс act-light из базы даёт бумагу и чернила,
      а .work--paper — только волосяные линии под бумагу);
   2. строка тегов .row__tags вместо описания (07.09) и трёхколоночная
      сетка строки: имя · картинка ховера · теги;
   3. посадка имени под Commissioner — только для v2 (.page-v2).
   Новых размеров и цветов не вводим — всё var() из tokens.css.
   ══════════════════════════════════════════════════════════ */

/* v2 (Commissioner, см. v2.css): 900 у него не подключён, плотная
   посадка литер ему не идёт — повторяем решение v2.css для h1/h2.
   На v3 дисплейный шрифт — Unbounded, правило туда не доходит
   (аудит 07.09, п. 4): имена идут базовыми 900 / −.015em. */
.page-v2 .work .row__name{font-weight:800;letter-spacing:.005em}

/* ── бумага: фон и чернила даёт .act-light (main.css), здесь только линии ── */
.work--paper .row{border-top-color:var(--ink-hair)}
.work--paper .row:last-of-type{border-bottom-color:var(--ink-hair)}
.work--paper .row__name{color:var(--ink)}

/* ── теги: кегль и вес кикера, тихим цветом ──
   Разрядка .12em, а не кикерные .18em: строка тегов длиннее кикера
   в пять раз, при .18em она разваливалась на четыре строки. Разделитель
   « · » в разметке привязан к предыдущему слову ( ·), перенос идёт
   после точки — тег не отрывается от своей точки. Чипы с обводкой
   пробовали 07.09 — сняты. */
.row__tags{
  margin:0;
  font-size:var(--fs-kicker);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;line-height:1.7;color:var(--ink-mid);
  transition:color .35s var(--ease);
}
@media (hover:hover){
  .row:hover .row__tags{color:var(--dim-strong)}
}

/* ── сетка строки на десктопе: имя · картинка · теги ──
   База даёт 7fr/4fr; здесь 5/3/4 из 12: имени хватает на самое длинное
   «Продакшн» (≈460px при 60px), средняя колонка — слот картинки ховера,
   теги справа (≈410px на 1440) ложатся в одну-две строки — ниже высоты
   имени, ритм списка не рвётся. */
@media (min-width:820px){
  .work--paper .row__in{
    grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);
    align-items:center;gap:40px;
  }
  .work--paper .row__tags{grid-column:3}
}

/* ── картинка ховера: во второй колонке, с наклоном, поверх сетки ──
   Абсолютно позиционированный потомок grid-контейнера берёт за
   containing block свою grid-область — картинка сидит в среднем слоте
   и не заходит на теги. Обе линии заданы явно (2 / 3): у absolute-элемента
   auto-линия — это край контейнера.
   07.09 (вечер, Никита): вернуть как в самом первом варианте — картинка
   чуть под наклоном и выходит за пределы строки, поверх соседних.
   Поэтому на v3 у .row снимается overflow:hidden (база режет), картинка
   крупнее строки и лежит над соседями (z-index у строки на ховере). */
.page-v3 .work--paper .row{overflow:visible}
.page-v3 .work--paper .row:hover{z-index:3}
@media (min-width:820px) and (pointer:fine){
  .work--paper .row__img{
    grid-column:2 / 3;z-index:2;
    right:auto;left:50%;top:50%;
    width:clamp(280px,27vw,400px);
    transform:translate(-50%,-50%) rotate(-3deg) scale(.92);
  }
  .work--paper .row:hover .row__img{transform:translate(-50%,-50%) rotate(-1.5deg) scale(1)}
  .row__img--top{object-position:50% 12%}   /* вертикальный кадр в горизонтальном окне: держим лицо */
}

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