/* ==========================================================================
   work.css — work page: stats, featured spotlight, sticky toolbar,
   bento grid + editorial list views, list hover preview
   ========================================================================== */

.wk-head { padding-block-end: var(--sp-8); }
.wk-stats { display: flex; gap: clamp(1.25rem, 3vw, 3rem); }
.wk-stats div { display: grid; gap: 4px; }
.wk-stats b { font-size: clamp(2rem, 1.4rem + 2vw, 3.2rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.wk-stats div:first-child b { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wk-stats .t-mono { color: var(--fg-3); }

/* featured spotlight */
.wk-feature {
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  min-block-size: clamp(320px, 20rem + 12vw, 500px);
  margin-block-start: var(--sp-6);
  border-radius: var(--r-xl);
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}
.wk-feature__media { position: relative; overflow: hidden; }
.wk-slide { position: absolute; inset: 0; opacity: 0; transform: scale(1.12); filter: blur(14px); transition: opacity 0.9s var(--ease-out), transform 1.4s var(--ease-out), filter 1s var(--ease-out); }
.wk-slide.is-on { opacity: 1; transform: none; filter: none; }
.wk-slide .vf { --vf-inset: 22px; color: rgba(255, 255, 255, 0.6); }
.wk-feature:hover .wk-slide.is-on { transform: scale(1.03); }
.wk-feature__info {
  position: relative;
  display: grid;
  align-content: end;
  gap: var(--sp-3);
  padding: clamp(1.5rem, 3vw, 2.6rem);
  background: linear-gradient(180deg, rgba(20, 8, 50, 0.55), rgba(10, 4, 28, 0.85));
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
}
.wk-feature__kicker { display: flex; gap: var(--sp-3); align-items: center; color: rgba(255, 255, 255, 0.7); }
.wk-feature__title { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; }
.wk-feature__sum { color: rgba(255, 255, 255, 0.72); max-width: 40ch; }
.wk-feature__cta { font-weight: 600; margin-block-start: var(--sp-2); }
.wk-feature__cta i { display: inline-block; font-style: normal; transition: transform 0.5s var(--ease-out); }
.wk-feature:hover .wk-feature__cta i { transform: translateX(6px); }
.wk-feature__bars { display: flex; gap: 6px; margin-block-start: var(--sp-4); }
.wk-feature__bars span { flex: 1; block-size: 14px; display: grid; align-items: center; cursor: pointer; }
.wk-feature__bars span::before { content: ""; grid-area: 1 / 1; block-size: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.2); }
.wk-feature__bars i { grid-area: 1 / 1; block-size: 3px; border-radius: 3px; background: linear-gradient(90deg, #b44dff, #ff5fd2); transform-origin: left; transform: scaleX(0); }
@media (max-width: 860px) {
  .wk-feature { grid-template-columns: 1fr; }
  .wk-feature__media { aspect-ratio: 16 / 10; }
}

/* sticky toolbar */
.wk-index { padding-block-start: var(--sp-8); }
.wk-bar {
  position: sticky;
  inset-block-start: 92px;
  z-index: var(--z-raised);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  padding: 6px;
  border-radius: var(--r-pill);
  margin-block-end: var(--sp-4);
}
.wk-filters { position: relative; display: flex; flex-wrap: wrap; gap: 2px; }
.wk-filters button { position: relative; z-index: 1; display: inline-flex; align-items: baseline; gap: 6px; padding: 10px 16px; border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: 500; color: var(--fg-2); transition: color 0.3s; }
.wk-filters button sup { font-family: var(--f-mono); font-size: 0.6rem; opacity: 0.7; }
.wk-filters button[aria-pressed="true"] { color: #fff; }
.wk-filters__pill { position: absolute; z-index: 0; inset-block-start: 0; inset-inline-start: 0; block-size: 100%; border-radius: var(--r-pill); background: var(--btn-solid); box-shadow: 0 8px 20px -8px rgba(140, 70, 255, 0.8); transition: transform 0.55s var(--ease-out), inline-size 0.55s var(--ease-out); }
.wk-tools { display: flex; gap: 6px; align-items: center; }
.wk-sort, .wk-view { display: flex; padding: 3px; border-radius: var(--r-pill); background: var(--line); }
.wk-sort button, .wk-view button { display: grid; place-items: center; padding: 7px 12px; border-radius: var(--r-pill); font-size: 0.78rem; color: var(--fg-2); transition: background-color 0.3s, color 0.3s; }
.wk-sort button[aria-pressed="true"], .wk-view button[aria-pressed="true"] { color: var(--fg); background: var(--bg-2); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12); }
.wk-count { color: var(--fg-3); margin-block-end: var(--sp-5); padding-inline-start: var(--sp-3); }
@media (max-width: 760px) {
  .wk-bar { border-radius: var(--r-lg); inset-block-start: 84px; flex-wrap: nowrap; flex-direction: column; align-items: stretch; gap: 6px; }
  .wk-tools { inline-size: 100%; justify-content: space-between; }
  /* one sideways-scrolling row of chips instead of three wrapped rows */
  .wk-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .wk-filters::-webkit-scrollbar { display: none; }
  .wk-filters button { flex: none; padding: 9px 14px; white-space: nowrap; }
}

/* bento grid view */
.work-grid--all[data-view="grid"] {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(300px, 20rem + 9vw, 520px);
  align-items: stretch;
}
.work-grid--all[data-view="grid"] .wcard { grid-column: span 6; grid-template-rows: minmax(0, 1fr) auto; }
.work-grid--all[data-view="grid"] .wcard.is-wide { grid-column: span 7; }
.work-grid--all[data-view="grid"] .wcard.is-narrow { grid-column: span 5; }
.work-grid--all[data-view="grid"] .wcard__media { aspect-ratio: auto; block-size: 100%; min-block-size: 0; transform-style: preserve-3d; --gx: 50%; --gy: 30%; }
.work-grid--all[data-view="grid"] .wcard__media::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(40% 40% at var(--gx) var(--gy), rgba(255, 255, 255, 0.22), transparent 70%); opacity: 0; transition: opacity 0.4s; }
.work-grid--all[data-view="grid"] .wcard__media:hover::after { opacity: 1; }
.work-grid--all .wcard.is-hidden { display: none; }
.wcard__num, .wcard__cat, .wcard__go { display: none; }

/* editorial list view */
.work-grid--all[data-view="list"] { grid-template-columns: 1fr; gap: 0; border-block-start: 1px solid var(--line-2); }
.work-grid--all[data-view="list"] .wcard { position: relative; display: block; border-block-end: 1px solid var(--line-2); }
.work-grid--all[data-view="list"] .wcard__media { position: absolute; inset: 0; z-index: 2; aspect-ratio: auto; border-radius: 0; opacity: 0; }
.work-grid--all[data-view="list"] .wcard__media:focus-visible { opacity: 1; outline: 2px solid var(--accent); background: transparent; }
.work-grid--all[data-view="list"] .wcard__media > * { display: none; }
.work-grid--all[data-view="list"] .wcard__info {
  display: grid;
  grid-template-columns: 60px 1fr 160px 100px 40px;
  align-items: center;
  gap: var(--sp-4);
  padding: clamp(1.1rem, 2vw, 1.8rem) var(--sp-3);
  transition: padding 0.5s var(--ease-out), background-color 0.4s;
}
.work-grid--all[data-view="list"] .wcard__num, .work-grid--all[data-view="list"] .wcard__cat, .work-grid--all[data-view="list"] .wcard__go { display: block; }
.work-grid--all[data-view="list"] .wcard__num { color: var(--fg-3); }
.work-grid--all[data-view="list"] .wcard__title { font-size: clamp(1.4rem, 1rem + 1.8vw, 2.6rem); letter-spacing: -0.035em; transition: transform 0.6s var(--ease-out), color 0.4s; }
.work-grid--all[data-view="list"] .wcard__cat { color: var(--fg-2); }
.work-grid--all[data-view="list"] .wcard__meta { text-align: end; }
.work-grid--all[data-view="list"] .wcard__go { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%; border: 1px solid var(--line-2); transition: background 0.4s, color 0.4s, transform 0.5s var(--ease-out); }
.work-grid--all[data-view="list"] .wcard:hover .wcard__info { padding-inline: var(--sp-6) var(--sp-3); background: var(--line); }
.work-grid--all[data-view="list"] .wcard:hover .wcard__title { color: var(--accent); }
.work-grid--all[data-view="list"] .wcard:hover .wcard__go { background: var(--grad-brand); color: #fff; border-color: transparent; transform: rotate(-45deg); }

/* list hover preview (follows the pointer) */
.wk-preview {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: var(--z-nav);
  inline-size: clamp(240px, 22vw, 340px);
  aspect-ratio: 4 / 3;
  margin: calc(clamp(240px, 22vw, 340px) * -0.375) 0 0 calc(clamp(240px, 22vw, 340px) * -0.5);
  border-radius: var(--r-lg);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  scale: 0.6;
  box-shadow: 0 30px 60px -20px rgba(30, 10, 80, 0.6);
  transition: opacity 0.35s, scale 0.55s var(--ease-out);
}
.wk-preview.is-on { opacity: 1; scale: 1; }

@media (max-width: 860px) {
  .work-grid--all[data-view="grid"] { grid-auto-rows: auto; }
  .work-grid--all[data-view="grid"] .wcard,
  .work-grid--all[data-view="grid"] .wcard.is-wide,
  .work-grid--all[data-view="grid"] .wcard.is-narrow { grid-column: 1 / -1; }
  .work-grid--all[data-view="grid"] .wcard__media { aspect-ratio: 4 / 3.4; block-size: auto; }
  .work-grid--all[data-view="list"] .wcard__info { grid-template-columns: 34px 1fr 40px; }
  .work-grid--all[data-view="list"] .wcard__cat, .work-grid--all[data-view="list"] .wcard__meta { display: none; }
}