/* Work page (builder P). Prefix wk-.
   Uses the kit: .phero, .fchips/.fchip/.fcount (filters), .tags, .link, .spot, .mono-l, .dot.
   Added here (could be promoted into the kit): the client cover card (.wk__card, dot cover + generated motif),
   the scatter pill and the "Your business?" band. */

/* ---------- hero art: the nine tiles ---------- */
.phero--work .phero__art { aspect-ratio: 300 / 240; max-width: 500px; }
@media (max-width: 899px) { .phero--work .phero__art { aspect-ratio: 300 / 240; max-width: 340px; } }

/* ---------- filter bar ---------- */
.wk { padding-block: clamp(48px, 6vw, 88px) clamp(96px, 12vw, 180px); }
.wk__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; margin-bottom: clamp(28px, 3.4vw, 44px); }
.wk__tools { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.wk__scatter { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 11px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(255, 255, 255, .02); cursor: pointer; font: 400 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(245, 245, 244, .78); transition: color .3s, border-color .3s, background .3s; }
.wk__scatter:hover { color: #fff; border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .06); }
.wk__scatter .ic { width: 14px; height: 14px; transition: transform .6s var(--ease); }
.wk__scatter:hover .ic { transform: rotate(-200deg); }

/* ---------- grid + cards ---------- */
.wk__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.wk__grid > li { display: flex; min-width: 0; }
.wk__card { display: flex; flex-direction: column; width: 100%; border: 1px solid var(--line); border-radius: 20px; background: var(--bg-2); overflow: hidden; transition: border-color .4s, transform .6s var(--ease); }
.wk__card:hover, .wk__card:focus-within { border-color: var(--line-2); }

.wk__cover { position: relative; aspect-ratio: 16 / 11; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line);
  background: radial-gradient(70% 80% at var(--gx, 50%) var(--gy, 40%), rgba(255, 255, 255, .06), transparent 70%), #0a0a0a; }
.wk__motif { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .75; transition: opacity .6s, transform 1.2s var(--ease); }
.wk__card:hover .wk__motif { opacity: 1; transform: scale(1.04); }
.wk__motif :is(path, circle, ellipse, line, polyline) { fill: none; stroke: rgba(255, 255, 255, .13); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wk__motif .m-pt { fill: rgba(255, 255, 255, .5); stroke: none; }
.wk__motif .m-lime { stroke: var(--lime); stroke-opacity: .9; }
.wk__motif .m-limef { fill: var(--lime); stroke: none; filter: drop-shadow(0 0 5px rgba(198, 244, 50, .9)); }
.wk__motif .m-halo { fill: rgba(198, 244, 50, .14); stroke: none; }
.wk__dots { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.wk__idx { position: absolute; left: 18px; top: 17px; z-index: 2; font: 400 11px/1 var(--mono); letter-spacing: .06em; color: var(--muted); transition: color .4s; }
.wk__card:hover .wk__idx { color: var(--lime); }
.wk__state { position: absolute; right: 14px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 24px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(5, 5, 5, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 400 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(245, 245, 244, .82); }
.wk__state .dot { width: 5px; height: 5px; }
.wk__state--off { color: var(--muted); }

.wk__body { display: flex; flex-direction: column; flex: 1; padding: 22px clamp(20px, 2vw, 28px) 24px; }
.wk__name { font: 500 clamp(24px, 2.2vw, 30px)/1.1 var(--sans); letter-spacing: -.04em; }
.wk__did { display: grid; gap: 7px; margin-top: 14px; font-size: 16px; line-height: 1.45; color: rgba(245, 245, 244, .78); }
.wk__tags { margin-top: 16px; }
.wk__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: auto; padding-top: 24px; }
.wk__visit { font-size: 15px; }
.wk__dom { font: 400 11px/1 var(--mono); letter-spacing: .02em; color: var(--muted); }
.wk__soon { font: 400 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* motion: the lime star in each motif breathes; cards lift a touch on hover */
html[data-motion="on"] .wk__motif .m-limef { animation: wk-breathe 3.2s ease-in-out infinite; }
html[data-motion="on"] .wk__motif .m-halo { animation: wk-halo 3.2s ease-in-out infinite; }
@keyframes wk-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes wk-halo { 0%, 100% { opacity: .9; } 50% { opacity: .25; } }
html[data-motion="on"] .wk__card:hover { transform: translateY(-3px); }

/* ---------- "Your business?" band ---------- */
.wk__next { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 18px; margin-top: clamp(12px, 1.4vw, 18px); padding: clamp(26px, 3.2vw, 44px) clamp(20px, 2.6vw, 36px); border: 1px dashed var(--line-2); border-radius: 20px; transition: border-color .4s, background .4s; }
.wk__next-i { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: 50%; font: 300 22px/1 var(--mono); color: #fff; transition: border-color .3s, color .3s, transform .6s var(--ease); }
.wk__next-t b { display: block; font: 500 clamp(28px, 3.4vw, 52px)/1.02 var(--sans); letter-spacing: -.045em; }
.wk__next-t small { display: block; margin-top: 10px; font: 400 12px/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.wk__next-arr { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .5; transition: transform .5s var(--ease), opacity .3s; }
.wk__next:hover, .wk__next:focus-visible { border-color: rgba(198, 244, 50, .55); background: rgba(198, 244, 50, .03); }
.wk__next:hover .wk__next-i, .wk__next:focus-visible .wk__next-i { border-color: var(--lime); color: var(--lime); transform: rotate(90deg); }
.wk__next:hover .wk__next-arr, .wk__next:focus-visible .wk__next-arr { transform: translateX(8px); opacity: 1; }

/* ---------- responsive ---------- */
@media (max-width: 1023px) { .wk__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .wk__grid { grid-template-columns: 1fr; }
  .wk__tools { width: 100%; justify-content: space-between; margin-left: 0; }
  .wk__next { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; }
  .wk__next-arr { width: 22px; height: 22px; }
}