/* ==== 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); }
.work-meta{ display:flex; gap:10px; align-items:center; font-size:12px; margin:0 0 6px; flex-wrap:wrap; row-gap:4px; }
.work-meta .meta-cat{ font-weight:700; color:inherit; padding:0; border:0; background:transparent; }
.work-meta .meta-tag{ color:var(--muted); font-weight:600; }
.work-meta .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:static; top:auto; z-index:auto; 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:transparent; border:0; border-radius:0; box-shadow:none; overflow:visible; display:block; text-decoration:none; color:inherit; }
.work-media{ aspect-ratio:16/9; background:transparent; border:0; position:relative; display:block; overflow:hidden; }
.work-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; transform:translateZ(0); transition:transform .18s ease, filter .18s ease; }
.work-body{ padding:10px 0 0; }
.meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.meta .chip{ background:#eef6ff; }
.work-title{ font-size:15px; font-weight:800; line-height:1.45; margin:0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.work-desc{ font-size:13px; color:var(--muted); margin-top:6px; }
.work-cta{ display:none; }

@media (hover:hover){
  .works-grid .work-card:hover .work-media img{
    transform: scale(1.02);
    filter: contrast(1.03);
  }
  .works-grid .work-card:hover .work-title{
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

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