/* Work: sample-project cards and live-demo cards (Home #work and /projects/) */
.wk-cases { display: grid; gap: clamp(2rem, 4vw, 3rem) var(--s-6); }
@media (min-width: 700px) { .wk-cases { grid-template-columns: 1fr 1fr; } }
.wk-case { display: grid; gap: var(--s-5); align-content: start; color: inherit; text-decoration: none; }
.wk-case__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--radius); }
.wk-case__media .photo { position: absolute; inset: 0; height: 100%; }
.wk-case__media .photo img { transition: transform var(--t-slow) var(--ease-out); }
.wk-case:hover .wk-case__media .photo img, .wk-case:focus-visible .wk-case__media .photo img { transform: scale(1.04); }
.wk-flag { position: absolute; top: .9rem; left: .9rem; z-index: 3; padding: .3rem .65rem; border-radius: 999px; background: rgba(8, 13, 20, .72); color: #fff; font-size: .74rem; font-weight: 650; letter-spacing: .02em; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.wk-case .wk-flag { top: 2.25rem; left: 2.25rem; }
.wk-flag--live { background: var(--accent); color: var(--accent-ink); }
.wk-demo__media .wk-flag--live { top: auto; left: auto; right: .6rem; bottom: .6rem; padding: .25rem .55rem; font-size: .7rem; }
.wk-flag--live::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: .4rem; border-radius: 50%; background: currentColor; vertical-align: .1em; }
@media (prefers-reduced-motion: no-preference) { .wk-flag--live::before { animation: wk-pulse 1.8s ease-in-out infinite; } }
@keyframes wk-pulse { 50% { opacity: .25; } }
.wk-case__body { display: grid; gap: .55rem; align-content: start; }
.wk-case__title { font-size: var(--step-2); line-height: 1.15; }
.wk-case__title span, .wk-demo__title { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--t-med) var(--ease-out); }
.wk-case:hover .wk-case__title span, .wk-demo:hover .wk-demo__title, .wk-case:focus-visible .wk-case__title span, .wk-demo:focus-visible .wk-demo__title { background-size: 100% 1px; }
.wk-case__sum { color: var(--fg-soft); max-width: 38rem; }
.wk-case__meta { font-size: var(--step--1); color: var(--fg-soft); }
.wk-cta { display: inline-flex; align-items: center; gap: .45rem; margin-top: .35rem; font-weight: 650; font-size: .95rem; color: var(--link, var(--fg)); }
.wk-cta .icon { width: 1.1em; height: 1.1em; transition: transform var(--t-med) var(--ease-out); }
.wk-case:hover .wk-cta .icon, .wk-demo:hover .wk-cta .icon { transform: translateX(4px); }

.wk-demos-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: .75rem 2rem; margin: clamp(3.5rem, 7vw, 5.5rem) 0 var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.wk-demos-head h3 { font-size: var(--step-2); }
.wk-demos-head p { color: var(--fg-soft); max-width: 34rem; }
.wk-demos { display: grid; gap: var(--s-6); }
@media (min-width: 700px) { .wk-demos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .wk-demos { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) and (max-width: 959px) {
  .wk-demos:not(:has(> [hidden])) > .wk-demo:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr; column-gap: var(--s-6); }
  .wk-demos:not(:has(> [hidden])) > .wk-demo:last-child:nth-child(odd) .wk-demo__media { grid-row: 1 / span 3; margin-bottom: 0; }
  .wk-demos:not(:has(> [hidden])) > .wk-demo:last-child:nth-child(odd) .wk-cta { align-self: start; }
}
.wk-demo { display: grid; gap: .5rem; align-content: start; color: inherit; text-decoration: none; }
.wk-demo__media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: .6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--proj-ground, #0B1522); }
.wk-demo__media img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform var(--t-slow) var(--ease-out); }
.wk-demo:hover .wk-demo__media img, .wk-demo:focus-visible .wk-demo__media img { transform: scale(1.03); }
.wk-demo__title { justify-self: start; font-size: var(--step-1); line-height: 1.2; }
.wk-demo__try { color: var(--fg-soft); font-size: .95rem; }

.wk-honesty { display: flex; gap: .7rem; align-items: flex-start; max-width: 52rem; margin-top: var(--s-7); font-size: var(--step--1); color: var(--fg-soft); }
.wk-honesty .icon { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .1rem; }
.filters { margin-bottom: var(--s-7); align-items: center; }
.no-js .filters { display: none; }
.wk-empty { margin-top: var(--s-5); color: var(--fg-soft); }
[data-filter-grid] [hidden] { display: none !important; }
@media (min-width: 600px) { .expect--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .expect--4 { grid-template-columns: repeat(4, 1fr); } }
.filters .filters__status { width: auto; margin-left: auto; }
@media (max-width: 599px) { .filters .filters__status { width: 100%; margin-left: 0; } }

/* Card links line up across a row */
.wk-case { grid-template-rows: auto 1fr; }
.wk-case__body { grid-template-rows: auto auto auto 1fr; }
.wk-case__body .wk-cta { align-self: end; }