/* =============================================================================
   KurdiCode 2.0 — the Projects page (/projects), plus the project-card pieces
   the project page (/projects/<slug>) shares (it loads this sheet too).
   Built on site.css: tokens, .card, .proj / .proj-cover / .proj-body, .badge,
   .chip, .tags, .link-arrow, .page-hero, .empty-state.

   CLASSES (printed by app/view_projects.php)
     .work-hero            the page hero (.page-hero)
     .work-filter          status filter: .work-chips > button.chip[data-filter]
                           (.chip-status.status-* adds the status dot); hidden
                           without script, when every card simply shows
     .work-grid            ul of cards (3 / 2 / 1 columns); li[data-status]
     .work-card            a .card.proj with a heading (h2.work-title with the
                           card's one .stretched-link), .work-summary,
                           .work-meta (release, platforms), .tags, .proj-foot
     .proj-cover.tone-1…5  colour-wash cover tones, chosen by list position
                           (same tones as the home page's featured cards)
     .shot-count           picture count on a cover
     .work-empty           the empty state
   ============================================================================= */

/* ---------- Hero ---------- */
.work-hero { padding-bottom: clamp(20px, 1rem + 2vw, 36px); }

/* ---------- Status filter ---------- */
.work-filter { margin-bottom: clamp(20px, 2.4vw, 32px); }
html:not(.js) .work-filter { display: none; }
.work-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.work-chips .chip { min-height: 44px; padding-inline: 18px; }
.work-chips .chip .count {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: var(--r-pill); background: var(--chip-bg); box-shadow: inset 0 0 0 1px var(--line);
  font: 600 0.74rem/1 var(--font-body); opacity: 1;
}
.work-chips .chip[aria-pressed="true"] .count { background: color-mix(in srgb, var(--bg) 16%, transparent); box-shadow: none; }
.chip-status::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--b-fg, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--b-fg, var(--accent)) 18%, transparent);
}
.chip-status[aria-pressed="true"]::before { background: currentColor; box-shadow: none; }

/* ---------- Card grid ---------- */
.work-list { padding-bottom: clamp(56px, 3rem + 4vw, 104px); }
.work-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.work-grid > li { display: flex; min-width: 0; }
.work-grid > li > .work-card { flex: 1; min-width: 0; }

.work-card .proj-cover { aspect-ratio: 2 / 1; min-height: 0; }
.work-card .proj-body { gap: 12px; }
.work-title { font-size: 1.2rem; font-weight: 700; line-height: 1.3; }
:root:lang(ckb) .work-title, :root:lang(ar) .work-title { line-height: 1.55; }
.work-title a:hover { color: var(--accent); }
.work-summary {
  font-size: 0.94rem; line-height: 1.65;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
}
:root:lang(ckb) .work-summary, :root:lang(ar) .work-summary { line-height: 1.85; }
.work-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.84rem; color: var(--muted); }
.work-meta li { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.work-meta i { color: var(--accent); font-size: 0.82rem; }

/* ---------- Covers (shared with the project page) ----------
   Same washes as the home page's featured cards, picked by list position,
   so a project wears the same colours wherever it appears. */
.proj-cover.tone-2 { --c1: rgba(169, 155, 255, 0.50); --c2: rgba(1, 181, 255, 0.30); --c3: rgba(255, 190, 220, 0.34); --cbase: var(--cover-base-2); }
.proj-cover.tone-3 { --c1: rgba(6, 255, 252, 0.45); --c2: rgba(52, 211, 153, 0.30); --c3: rgba(169, 155, 255, 0.34); --cbase: var(--cover-base-3); }
.proj-cover.tone-4 { --c1: rgba(254, 202, 8, 0.45); --c2: rgba(254, 154, 6, 0.26); --c3: rgba(1, 181, 255, 0.26); --cbase: var(--cover-base-4); }
.proj-cover.tone-5 { --c1: rgba(1, 181, 255, 0.34); --c2: rgba(169, 155, 255, 0.40); --c3: rgba(6, 255, 252, 0.26); --cbase: var(--cover-base-5); }
.proj-cover img { transition: transform 0.5s var(--ease); }
/* On a picture the status badge needs a solid backing: the dark theme's badge
   tints are see-through and would sit on whatever colours the picture has. */
.proj-cover.has-image .badge { background: linear-gradient(var(--b-bg), var(--b-bg)), var(--surface); }
.card.is-interactive:hover .proj-cover img { transform: scale(1.03); }
.shot-count {
  position: absolute; z-index: 1; bottom: 12px; inset-inline-end: 12px;
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill);
  font: 600 0.76rem/1.3 var(--font-body); color: var(--ink);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.proj-cover:not(.has-image) .shot-count { bottom: 16px; }

/* ---------- Empty state ---------- */
.work-empty { max-width: 640px; margin-inline: auto; }
.work-empty .btn { margin-top: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .work-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .work-card .proj-cover { aspect-ratio: 5 / 2; }
  .work-chips { gap: 8px; }
  .work-chips .chip { padding-inline: 14px; }
}

/* ---------- Motion and print ---------- */
@media (prefers-reduced-motion: reduce) {
  .proj-cover img, .card.is-interactive:hover .proj-cover img { transition: none; transform: none; }
}
@media print {
  .work-filter, .shot-count { display: none !important; }
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-grid > li[hidden] { display: flex !important; }
  .work-summary { -webkit-line-clamp: unset; line-clamp: unset; display: block; }
}