/* ==========================================================================
   WORK CARD — карточка работы в сетке (015б, 08.11.2026). Галерея; в 015в — основа новой страницы.
   Ряды по настоящим пропорциям (как в «Фото»): ширина карточки ∝ ширина/высота картинки
   (--ar), ряд добирается до края, последний — не растягивается. Порядок — слева направо, по дате.
   Без текстового блока: тип — сверху, название и время — поверх нижнего края. Серия — «стопка» ×N.
   ========================================================================== */
.wc-grid{--wc-h:230px;--wc-gap:12px;position:relative;z-index:0;display:flex;flex-wrap:wrap;gap:var(--wc-gap)}
.wc-grid::after{content:"";flex-grow:1e9} /* последний ряд — без растяжения */
.wc{
  --ar:1;position:relative;flex:calc(var(--ar) * 100) 1 calc(var(--ar) * var(--wc-h));
  max-width:calc(var(--ar) * var(--wc-h) * 1.9);min-width:0;padding:0;border:0;border-radius:16px;
  background:#111a2e;cursor:pointer;text-align:left;color:inherit;font:inherit;
  outline:1px solid rgba(148,163,184,.12);outline-offset:-1px;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,outline-color .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.wc__media{position:relative;display:block;width:100%;aspect-ratio:var(--ar);border-radius:16px;overflow:hidden;background:#0d1322}
.wc__media img,.wc__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.wc:hover{transform:translateY(-2px);outline-color:rgba(251,113,133,.45);box-shadow:0 18px 40px -22px rgba(236,72,153,.55)}
.wc:hover .wc__media img,.wc:hover .wc__media video{transform:scale(1.035)}
.wc:focus-visible{outline:2px solid #fecdd3;outline-offset:2px}

/* затемнение сверху и снизу — под подписи */
.wc__shade{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(5,8,16,.55) 0%,rgba(5,8,16,0) 26%,rgba(5,8,16,0) 52%,rgba(5,8,16,.82) 100%)}
.wc__tag{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:8px;
  font-size:11.5px;font-weight:700;letter-spacing:.01em;color:#f1f5f9;background:rgba(8,11,21,.55);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);white-space:nowrap;pointer-events:none}
.wc__tag svg{width:13px;height:13px;flex:none}
.wc__meta{position:absolute;left:12px;right:12px;bottom:10px;display:flex;flex-direction:column;gap:2px;pointer-events:none}
.wc__name{font-size:13.5px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.wc__sub{font-size:12px;font-weight:600;color:rgba(226,232,240,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc__sub.is-warn{color:#fcd34d}

/* избранное — звезда справа сверху; видна при наведении или если отмечено */
.wc__fav{position:absolute;top:8px;right:8px;z-index:2;display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:10px;cursor:pointer;
  color:#e2e8f0;background:rgba(8,11,21,.55);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .2s,background .2s,color .2s}
.wc__fav svg{width:17px;height:17px}
.wc:hover .wc__fav,.wc:focus-within .wc__fav,.wc__fav.is-on{opacity:1}
.wc__fav.is-on{color:#fcd34d;border-color:rgba(245,158,11,.5)}
.wc__fav:hover{background:rgba(8,11,21,.8)}
.wc__fav:focus-visible{outline:2px solid #fecdd3;outline-offset:2px}
@media (hover:none){.wc__fav{opacity:1}}

/* видео: значок play, пропадает при наведении (превью играет) */
.wc__play{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  color:#fff;background:rgba(8,11,21,.55);border:1px solid rgba(255,255,255,.2);pointer-events:none;transition:opacity .2s}
.wc__play svg{width:20px;height:20px;margin-left:3px}
.wc:hover .wc__play{opacity:0}

/* серия — «стопка»: два листа над карточкой + метка ×N (под звездой, слева от неё) */
.wc--stack{margin-top:10px}
.wc--stack::before,.wc--stack::after{content:"";position:absolute;left:9px;right:9px;top:-6px;height:20px;border-radius:13px 13px 0 0;
  background:#2a3555;border:1px solid rgba(148,163,184,.28);border-bottom:0;z-index:-1}
.wc--stack::after{left:19px;right:19px;top:-11px;background:#1d2640;border-color:rgba(148,163,184,.18);z-index:-2}
.wc--stack:hover::before{border-color:rgba(251,113,133,.45)}
.wc__count{position:absolute;bottom:10px;right:10px;z-index:1;display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border-radius:8px;
  font-size:12px;font-weight:800;color:#fff;background:linear-gradient(120deg,#db2777,#ea580c);box-shadow:0 6px 16px -6px rgba(236,72,153,.8);pointer-events:none}
.wc__count svg{width:12px;height:12px}
.wc--stack .wc__meta{right:64px}

/* недоступный файл */
.wc__gone{position:absolute;inset:0;display:grid;place-items:center;padding:12px;text-align:center;font-size:12.5px;font-weight:600;color:#94a3b8;background:#0d1322}

/* вид «Список»: превью слева, текст справа */
.wc-grid[data-view="list"]{flex-direction:column;flex-wrap:nowrap}
.wc-grid[data-view="list"]::after{display:none}
.wc-grid[data-view="list"] .wc{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:center;max-width:none;padding:8px;flex:none}
.wc-grid[data-view="list"] .wc--stack{margin-top:0}
.wc-grid[data-view="list"] .wc--stack::before,.wc-grid[data-view="list"] .wc--stack::after{display:none}
.wc-grid[data-view="list"] .wc__media{aspect-ratio:1;border-radius:12px}
.wc-grid[data-view="list"] .wc__meta,.wc-grid[data-view="list"] .wc__shade{display:none}
.wc-grid[data-view="list"] .wc__fav{top:14px;right:14px;opacity:1}
.wc-grid[data-view="list"] .wc__count{position:static;justify-self:start}
.wc__info{display:none}
.wc-grid[data-view="list"] .wc__info{display:flex;flex-direction:column;gap:6px;min-width:0;padding-right:52px}
.wc__info-title{font-size:15px;font-weight:700;color:#f1f5f9}
.wc__info-prompt{font-size:13.5px;line-height:1.5;color:#cbd5e1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wc__info-facts{font-size:12.5px;color:#94a3b8}

@media (max-width:768px){
  .wc-grid{--wc-h:150px;--wc-gap:8px}
  .wc,.wc__media{border-radius:12px}
  .wc__name{font-size:12.5px}
  .wc__sub{display:none}
  .wc__tag{top:7px;left:7px;height:22px;padding:0 7px;font-size:11px}
  .wc__tag-t{display:none}
  .wc__count{bottom:7px;right:7px;height:22px}
  .wc--stack .wc__meta{right:56px}
  .wc__meta{left:9px;right:9px;bottom:7px}
  .wc__fav{top:5px;right:5px;width:32px;height:32px}
  .wc-grid[data-view="list"] .wc{grid-template-columns:92px minmax(0,1fr);gap:12px}
}
@media (max-width:380px){.wc-grid{--wc-h:120px}}
@media (prefers-reduced-motion:reduce){.wc,.wc__media img,.wc__media video{transition:none}.wc:hover{transform:none}}

/* переключатель «Серии» (стопки) — рядом с видом сетки/списка (в 015в уйдёт в новую панель фильтров) */
.series-toggle{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border-radius:9px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;
  color:#94a3b8;background:rgba(15,23,42,.6);border:1px solid rgba(148,163,184,.22);transition:color .2s,border-color .2s,background .2s}
.series-toggle svg{width:16px;height:16px}
.series-toggle:hover{color:#f1f5f9}
.series-toggle.active{color:#fecdd3;background:rgba(251,113,133,.1);border-color:rgba(251,113,133,.45)}
.series-toggle:focus-visible{outline:2px solid #fecdd3;outline-offset:2px}