/* =====================================================================
   02 · РАБОТЫ — компактный список строк.
   При наведении: название сдвигается, остальные строки гаснут,
   за курсором летит небольшое превью сайта. На телефоне — миниатюра в строке.
   ===================================================================== */
/* линия под заголовком секции служит верхней границей списка */
#works .sec-head { margin-bottom: 0; }
.works-list { border-top: 0; }

.work-row {
  position: relative;
  display: grid; grid-template-columns: 60px minmax(0, 1fr) auto auto; align-items: center;
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(18px, 2vw, 28px) 8px;
  border-bottom: 1px solid var(--line);
  transition: opacity .4s var(--ease-out);
}
.work-row:not([href]) { cursor: default; }

.work-row__num { font-family: var(--f-mono); font-size: 12px; color: var(--muted); }
.work-row__name {
  font-family: var(--f-display); font-weight: 700; font-size: clamp(20px, 2.4vw, 36px);
  line-height: 1.1; letter-spacing: -.01em; text-wrap: balance;
  transition: transform .5s var(--ease-out), color .3s;
}
.work-row__cat { font-size: 14px; color: var(--muted); white-space: nowrap; }
.work-row__go {
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 12px; font-weight: 800; white-space: nowrap;
  transition: background .3s, color .3s, border-color .3s;
}
.work-row__thumb { display: none; }

/* строка-приглашение «Ваш проект» */
.work-row--cta .work-row__name { color: var(--muted); }
.work-row--cta .work-row__num { color: var(--lime); font-size: 18px; }

/* ---------- летающее превью ---------- */
.works-preview {
  position: fixed; left: 0; top: 0; z-index: 60;
  width: clamp(260px, 24vw, 400px); aspect-ratio: 4 / 3;
  pointer-events: none;
  opacity: 0; transition: opacity .3s var(--ease-out);
}
.works-preview.is-visible { opacity: 1; }
.works-preview__slide {
  position: absolute; inset: 0; overflow: hidden; border-radius: 14px;
  border: 1px solid #ffffff1f; box-shadow: 0 30px 60px -20px #000;
  opacity: 0; transform: scale(.85);
  transition: opacity .3s, transform .5s var(--ease-out);
}
.works-preview.is-visible .works-preview__slide.is-active { opacity: 1; transform: none; }
.works-preview__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

@media (hover: hover) and (pointer: fine) {
  .works-list:hover .work-row { opacity: .35; }
  .works-list .work-row:hover { opacity: 1; }
  .work-row:hover .work-row__name { transform: translateX(12px); }
  .work-row[href]:hover .work-row__go { background: var(--lime); border-color: var(--lime); color: var(--on-accent); }
  .work-row--cta:hover .work-row__name { color: var(--lime); }
}

/* ---------- телефон: миниатюра справа вместо летающего превью ---------- */
@media (pointer: coarse), (width <= 800px) {
  .works-preview { display: none; }
}
@media (width <= 800px) {
  .work-row {
    grid-template-columns: 36px minmax(0, 1fr) 84px;
    grid-template-areas: "num name thumb" "num cat thumb" "num go thumb";
    gap: 6px 14px;
  }
  .work-row__num { grid-area: num; align-self: start; padding-top: 6px; }
  .work-row__name { grid-area: name; font-size: clamp(18px, 5vw, 24px); }
  .work-row__cat { grid-area: cat; white-space: normal; font-size: 13px; }
  .work-row__go { grid-area: go; justify-self: start; margin-top: 6px; }
  .work-row__thumb {
    grid-area: thumb; display: block; align-self: center;
    width: 84px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; border: 1px solid var(--line);
  }
  .work-row__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
  .work-row__thumb .art__bar, .work-row__thumb .art__body { display: none; }
  .work-row--cta { grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "num name" "num cat" "num go"; }
}