/* =========================================================================
   Selected Work: cards, filters spacing and lightbox (loaded after style.css).
   Uses the colour variables from style.css.
   ========================================================================= */

/* Masonry-style grid: 2 columns on phones, 3 on tablets, 4 on desktop */
.wk-grid { list-style: none; margin: 0; padding: 0; column-count: 2; column-gap: clamp(10px, 2vw, 24px); }
@media (min-width: 720px) { .wk-grid { column-count: 3; } }
@media (min-width: 1100px) { .wk-grid { column-count: 4; } }

.wk { display: block; break-inside: avoid; margin: 0 0 clamp(10px, 2vw, 24px); }
.wk[hidden] { display: none; }
.wk--pop { animation: wkpop .5s var(--ease-out); }
@keyframes wkpop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

.wk__btn {
  display: block; width: 100%; padding: 0; margin: 0; text-align: left; cursor: pointer;
  font: inherit; color: inherit;
  border-radius: 18px; overflow: hidden;
  background: linear-gradient(165deg, rgba(30, 23, 64, .7), rgba(12, 10, 26, .85));
  border: 1px solid var(--border);
  transition: transform .4s var(--ease-out), border-color .3s, box-shadow .3s;
}
.wk__btn:hover { border-color: rgba(180, 170, 255, .45); box-shadow: 0 20px 50px -22px rgba(108, 99, 255, .7); transform: translateY(-3px); }
.wk__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.wk__media { position: relative; display: block; aspect-ratio: var(--ar, 4 / 3); overflow: hidden; background: #0E0B1E; }
.wk__media > img,
.wk__media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.wk__vid { opacity: 0; transition: opacity .3s; }
.wk.is-playing .wk__vid { opacity: 1; }

.wk__chip, .wk__badge {
  position: absolute; z-index: 2; max-width: calc(100% - 20px);
  padding: .35em .75em; border-radius: 999px;
  background: rgba(8, 9, 22, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2;
}
.wk__chip { top: 10px; left: 10px; color: var(--violet-soft); }
.wk__badge { top: 10px; right: 10px; left: auto; color: var(--blue-soft); }
.wk__media--reel .wk__badge, .wk__media--tall .wk__badge { top: auto; bottom: 10px; right: auto; left: 10px; }

.wk__play {
  position: absolute; z-index: 2; right: 10px; bottom: 10px;
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--grad); color: #fff;`r`n  box-shadow: 0 6px 18px -4px rgba(139, 92, 246, .7);
  transition: transform .3s var(--ease-out);
}
.wk__play svg { width: 18px; height: 18px; fill: currentColor; margin-left: 2px; }
.wk__btn:hover .wk__play { transform: scale(1.12); }
.wk.is-playing .wk__play { opacity: .0; }

.wk__body { display: block; padding: 12px 14px 14px; }
.wk__title { display: block; font: 700 clamp(.78rem, 1.4vw, .95rem)/1.35 var(--font-display); color: #fff; overflow-wrap: anywhere; }

.wk-noscript { color: var(--text-2); }

/* ---------- Lightbox ---------- */
html.lb-open { overflow: hidden; }
html.lb-open .hnav { visibility: hidden; }   /* the fixed top menu must not sit over the viewer */
.lb {
  position: fixed; inset: 0; z-index: 1500;   /* above the fixed top menu (1000) */
  display: flex; align-items: center; justify-content: center;
  padding: clamp(6px, 2vw, 28px);
  background: rgba(5, 4, 12, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.lb[hidden] { display: none; }
.lb__panel {
  display: flex; flex-direction: column; width: min(1100px, 100%); max-height: 100%;
  border-radius: 22px; overflow: hidden;
  border: 1px solid var(--border-strong);
  background: linear-gradient(165deg, #1a1338, #0c0a1a);
  box-shadow: 0 30px 90px -20px rgba(108, 99, 255, .5);
}
.lb__top { display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--border); }
.lb__titles { flex: 1; min-width: 0; }
.lb__cat { margin: 0 0 .2em; color: var(--violet-soft); font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.lb__title { margin: 0; font: 700 clamp(.9rem, 2.4vw, 1.2rem)/1.3 var(--font-display); color: #fff; overflow-wrap: anywhere; }
.lb__btn {
  flex: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--border); background: rgba(18, 14, 38, .8); color: #fff;
  font: 400 1.7rem/1 var(--font-body);
  transition: background-color .25s, border-color .25s, color .25s;
}
.lb__btn:hover { border-color: rgba(170, 160, 255, .5); background: rgba(40, 30, 90, .8); }
.lb__btn--close:hover { background: var(--grad); color: #fff; border-color: transparent; }
.lb__btn:focus-visible, .lb__video:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.lb__btn[hidden] { display: none; }

.lb__scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 18px 20px 24px; outline: none; }
.lb__fig { margin: 0 0 20px; text-align: center; }
.lb__cap { margin: 0 0 10px; color: var(--blue-soft); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.lb__video { display: block; margin: 0 auto; max-width: 100%; max-height: 68vh; width: auto; height: auto; border-radius: 12px; background: #000; object-fit: contain; }
.lb__img { display: block; width: 100%; height: auto; border-radius: 12px; background: #0E0B1E; }
.lb__toggle { display: flex; justify-content: center; gap: 10px; margin: 0 0 16px; }
.lb__text { max-width: 46rem; margin: 6px auto 0; color: var(--text-2); font-size: .98rem; line-height: 1.65; }

@media (max-width: 520px) {
  .lb { padding: 0; }
  .lb__panel { border-radius: 0; height: 100%; width: 100%; }
  .lb__top { padding-left: 14px; gap: 6px; }
  .lb__btn { width: 40px; height: 40px; }
  .lb__scroll { padding: 14px 14px 22px; }
  .wk__btn { border-radius: 14px; }
  .wk__chip { font-size: .55rem; }
}

@media (prefers-reduced-motion: reduce) {
  .wk--pop { animation: none; }
  .wk__btn, .wk__play, .wk__vid { transition: none; }
  .wk__btn:hover { transform: none; }
}