/* Сторінка робіт. Пігулки й випадні списки — за Mobbin, сітка/список — за
   Дімою Дюгом; палітра сайту: білий, сіро-блакитний, ink. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wk-title { margin: clamp(40px, 8vh, 90px) 0 0; font-size: clamp(2.4rem, 5.6vw, 5rem); font-weight: 500; letter-spacing: -0.05em; line-height: 0.98; }
.wk-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin: clamp(32px, 6vh, 56px) 0 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.wk-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wk-dd { position: relative; }
.wk-pill { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 1px solid #d6d9e0; border-radius: 999px; background: #fff; font: inherit; font-size: 15.5px; font-weight: 500; color: var(--ink-2); cursor: pointer; transition: border-color 0.2s ease; }
.wk-pill span { font-size: 11px; }
.wk-pill:hover, .wk-pill[aria-expanded="true"] { border-color: var(--ink); }
.wk-pill.is-set { border-color: var(--ink); color: var(--ink); }
.wk-menu { position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; min-width: 240px; padding: 8px; border-radius: 16px; background: #fff; box-shadow: 0 20px 50px rgba(14, 14, 16, 0.14), 0 0 0 1px rgba(14, 14, 16, 0.06); }
.wk-menu[hidden] { display: none; }
.wk-menu label { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: 15px; font-weight: 500; cursor: pointer; }
.wk-menu label:hover { background: #f1f3f7; }
.wk-menu input { accent-color: var(--ink); width: 16px; height: 16px; }
.wk-menu em { margin-left: auto; font-style: normal; font-size: 13px; color: var(--muted); }
.wk-chips { display: contents; }
.wk-chip { display: inline-flex; align-items: center; gap: 10px; padding: 9px 10px 9px 16px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer; }
.wk-chip span:first-of-type { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 14px; line-height: 1; }
.wk-right { display: flex; align-items: center; gap: 22px; }
.wk-count { margin: 0; font-size: 14px; line-height: 1.25; text-align: right; color: var(--muted); }
.wk-count span { display: block; }
.wk-count b { font-weight: 500; color: var(--ink-2); }
.wk-view { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: #f1f3f7; }
.wk-view button { padding: 9px 16px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 15px; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.wk-view button[aria-pressed="true"] { background: var(--ink); color: #fff; }

.wk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 40px); padding-bottom: clamp(80px, 14vh, 150px); }
.wk-card { display: grid; gap: 16px; align-content: start; }
.wk-img { display: block; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: #eef0f3; }
.wk-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform 0.6s ease; }
a.wk-card:hover .wk-img img { transform: scale(1.03); }
.wk-nda { position: relative; display: grid; place-items: center; width: 100%; height: 100%; background: #14151a; container-type: inline-size; }
/* Знаки в один ряд з однаковою оптичною вагою: площа стала, ширина ∝ √пропорції. */
.wk-nda-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4cqi 8cqi; padding: 0 8cqi; }
.wk-nda .logo { width: calc(12.5cqi * var(--a, 1.7)); height: calc(12.5cqi / var(--a, 1.7)); background: #f3f1ec; opacity: .92; }
.wk-nda em { position: absolute; left: 5cqi; bottom: 4.5cqi; font-style: normal; font-size: 13px; color: rgba(255, 255, 255, 0.5); }
.wk-meta { display: grid; gap: 6px; }
.wk-name { display: flex; align-items: center; gap: 10px; font-size: clamp(1.3rem, 2vw, 1.7rem); font-weight: 500; letter-spacing: -0.035em; }
.wk-go { font-size: 0.8em; color: var(--muted); transition: transform 0.25s ease; }
a.wk-card:hover .wk-go { transform: translateX(4px); color: var(--ink); }
.wk-tags { font-size: 14px; color: var(--muted); }
.wk-line { margin-top: 6px; font-size: 16.5px; font-weight: 500; letter-spacing: -0.01em; }
.wk-body { font-size: 15px; line-height: 1.45; color: var(--ink-2); max-width: 56ch; }

/* Список: рядок = мініатюра + текст у три колонки. */
.wk-grid[data-view="list"] { grid-template-columns: minmax(0, 1fr); gap: 0; }
.wk-grid[data-view="list"] .wk-card { grid-template-columns: 220px minmax(0, 1fr); gap: 28px; padding: 22px 0; border-top: 1px solid var(--line); }
.wk-grid[data-view="list"] .wk-img { aspect-ratio: 16 / 10; border-radius: 12px; }
.wk-empty { padding-bottom: 120px; font-size: 16px; color: var(--muted); }
.wk-clear { margin-left: 8px; padding: 0; border: 0; background: none; font: inherit; text-decoration: underline; cursor: pointer; color: var(--ink); }

@media (max-width: 800px) {
  .wk-grid { grid-template-columns: minmax(0, 1fr); }
  .wk-grid[data-view="list"] .wk-card { grid-template-columns: 110px minmax(0, 1fr); gap: 16px; }
  .wk-grid[data-view="list"] .wk-body { display: none; }
  .wk-right { width: 100%; justify-content: space-between; }
  .wk-count { text-align: left; }
}

.wk-status { padding: 4px 10px; border-radius: 999px; background: #f1f3f7; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }