/* ==== Works page only ==== */

/* mini tag (light blue) + pager + category list */
:root{ --brand:#2563eb; --accent:#60a5fa; }
.btn--brand{ background:var(--brand); }

.tag-mini{ display:inline-flex; align-items:center; gap:8px; font-size:12px }
.tag-mini .tag{ display:inline-block; padding:4px 10px; border-radius:999px; background:#eaf2ff; color:#1d4ed8; border:1px solid #dbe7ff; font-weight:700; }
.tag-mini .date{ color:var(--muted); }

.pager{ display:flex; gap:10px; justify-content:center; align-items:center; padding:24px 0; }
.page-btn{ min-width:36px; height:36px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:10px; background:#fff; font-weight:700; transition:all .15s; }
.page-btn.is-active{ background:var(--brand); color:#fff; border-color:var(--brand); }
.page-btn.is-ellipsis{ pointer-events:none; opacity:.6 }
.page-btn:hover{ border-color:var(--brand); }

.cat-wrap{ background:#fafafa; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.cat-grid{ display:grid; gap:12px; grid-template-columns:repeat(1,minmax(0,1fr)); }
@media(min-width:900px){ .cat-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.cat-item{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }
.cat-item .name{ font-weight:700; }
.cat-item .chev{ opacity:.5; }

/* Works refinements */
.page-hero{ background:linear-gradient(180deg, var(--hero-from), transparent 60%), #fff; border-top:1px solid var(--line); }
.crumbs{ color:var(--muted); font-size:12px; }
.toolbar{ position:sticky; top:64px; z-index:10; background:#fff; border-bottom:1px solid var(--line); }
.toolbar__inner{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:12px 0; }
.tool-input{ flex:1; min-width:220px; }

.pill-tab{ padding:6px 10px; border-radius:999px; border:1px solid var(--line); background:#fff; font-size:12px; }
.pill-tab.is-active{ background:var(--brand); border-color:var(--brand); color:#fff; }

.works-grid{ display:grid; gap:20px; grid-template-columns:repeat(1,minmax(0,1fr)); }
@media(min-width:900px){ .works-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.work-card{ background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; }
.work-media{ aspect-ratio:16/9; background:linear-gradient(135deg,#e9f1ff,#eef6ff); border-bottom:1px solid var(--line); position:relative; display:block; }
.work-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.work-body{ padding:14px 16px; }
.meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.meta .chip{ background:#eef6ff; }
.work-title{ font-size:16px; font-weight:800; line-height:1.4; margin:6px 0 4px; }
.work-desc{ font-size:13px; color:var(--muted); }
.work-cta{ display:flex; gap:10px; padding:12px 16px; border-top:1px solid var(--line); }

.container--narrow{ max-width:900px; }
@media(min-width:1200px){ .container--narrow{ max-width:920px; } }
@media(min-width:1400px){ .container--narrow{ max-width:960px; } }