/* ==========================================================================
   THE NEXT PROJECT - one card, every case study.

   The foot of each case study hands the reader to the next one, round a loop
   that gives every project exactly one way in:

     VOLA -> Google Pay -> Marketplace -> AI Website Builder -> VOLA

   The whole card is one link - label, film and name - so there is nothing
   inside it to miss. The film is that project's 960px preview (the same file
   the projects page hovers with), looping muted only while on screen; see
   assets/js/next.js. Reduced motion keeps the poster.

   THEMING: like nav.css, this file owns the shape and each page re-tints it
   through the --next-* tokens in its own stylesheet. Layout - which column
   the card sits in, how it stacks - belongs to the page, not here.
   ========================================================================== */
.next-proj{
  display:flex;flex-direction:column;gap:14px;
  width:100%;max-width:560px;
  text-decoration:none;
}
/* (0,2,1), so a page's `.band a{color:...}` cannot re-colour the name. */
a.next-proj[href]{color:var(--next-ink,currentColor)}

.next-k{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--next-label-font,inherit);
  font-weight:700;font-size:12.5px;line-height:1.25;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--next-muted,currentColor);
}
.next-k::before{
  content:'';flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--next-accent,currentColor);
}

.next-media{
  position:relative;display:block;aspect-ratio:16/9;
  border-radius:var(--next-r,0);overflow:hidden;
  background:#0B0B08;
  border:1px solid var(--next-line,rgba(128,128,128,.3));
  transition:border-color .25s var(--next-ease,ease);
}
.next-v{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform .6s var(--next-ease,ease);
}

.next-meta{display:flex;align-items:baseline;gap:12px}
.next-meta b{
  font-family:var(--next-name-font,inherit);
  font-weight:var(--next-name-weight,300);
  font-size:clamp(22px,2vw,28px);line-height:1.1;letter-spacing:-.01em;
}
.next-meta span{
  font-family:var(--next-label-font,inherit);
  font-weight:600;font-size:13px;color:var(--next-muted,currentColor);
}
.next-meta svg{
  margin-left:auto;align-self:center;flex:none;
  color:var(--next-accent,currentColor);
  transition:transform .22s var(--next-ease,ease);
}

.next-proj:hover .next-media{border-color:var(--next-line-hi,currentColor)}
.next-proj:hover .next-v{transform:scale(1.025)}
.next-proj:hover .next-meta svg{transform:translate(3px,-2px)}
.next-proj:focus-visible{
  outline:2px solid var(--next-accent,currentColor);outline-offset:6px;
  border-radius:var(--next-r,0);
}

@media (prefers-reduced-motion:reduce){
  .next-v,.next-meta svg,.next-media{transition:none}
  .next-proj:hover .next-v{transform:none}
}
@media print{.next-proj{display:none !important}}
@media (forced-colors:active){.next-media{border:1px solid CanvasText}}