---
// Dossier card - thumbnail diagram, DOSSIER/00N corner tag, title, "the argument",
// tag chips, mono meta footer. Facelift shape from the design handoff.
import type { CollectionEntry } from "astro:content";
import DossierThumb from "./DossierThumb.astro";

interface Props {
  entry: CollectionEntry<"projects">;
  /** 1-based position → the DOSSIER / 00N corner tag. */
  index?: number;
}
const { entry, index = 1 } = Astro.props;
const p = entry.data;
const href = `/projects/${entry.id}/`;
const dossierNo = String(index).padStart(3, "0");
---

<a class="dossier" href={href} data-reveal>
  <div class="dossier__thumb">
    {p.cover
      ? <img
          class="dossier__cover"
          src={`/covers/thumb/${p.cover}.webp`}
          alt=""
          width="640"
          height="429"
          loading="lazy"
          decoding="async"
        />
      : <DossierThumb kind={p.diagram} />}
    <span class="dossier__tag mono">DOSSIER / {dossierNo}</span>
  </div>
  <div class="dossier__body">
    <h3 class="dossier__title">
      {p.title} <span class="dossier__arrow" aria-hidden="true">→</span>
    </h3>
    <p class="dossier__argument"><span class="dossier__outcome-label">Outcome</span> {p.outcome}</p>
    <ul class="dossier__chips mono" role="list">
      {p.stack.map((s) => <li class="dchip">{s}</li>)}
    </ul>
    <p class="dossier__meta mono">{p.role} · {p.period}</p>
  </div>
</a>

<style>
  .dossier {
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--border-accent);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    backdrop-filter: var(--panel-blur);
    -webkit-backdrop-filter: var(--panel-blur);
    transition:
      border-color 180ms var(--ease),
      box-shadow 180ms var(--ease),
      transform 180ms var(--ease);
  }
  .dossier:hover {
    text-decoration: none;
    border-color: rgba(63, 186, 245, 0.55);
    box-shadow: 0 0 32px rgba(63, 186, 245, 0.15);
    transform: translateY(-3px);
  }
  @media (prefers-reduced-motion: reduce) {
    .dossier:hover { transform: none; }
  }

  .dossier__thumb {
    height: 180px;
    background: #0b101c;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(63, 186, 245, 0.12);
  }
  /* Cover art fills the thumb; the corner tag sits over it, so a scrim keeps
     the tag legible against the brighter parts of the art. */
  .dossier__cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 320ms var(--ease);
  }
  .dossier:hover .dossier__cover {
    transform: scale(1.04);
  }
  .dossier__thumb:has(.dossier__cover)::after {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 60%;
    height: 46px;
    background: linear-gradient(160deg, rgba(9, 12, 20, 0.85), transparent 78%);
    pointer-events: none;
  }
  :global([data-theme="light"]) .dossier__thumb {
    background: var(--surface-2);
    border-bottom-color: var(--border-accent);
  }
  .dossier__tag {
    position: absolute;
    top: 12px;
    left: 14px;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--text-faint);
  }

  .dossier__body {
    position: relative;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
  }
  /* a faint on-theme grid fills the idle space above the chips/meta (the
     margin-top:auto gap on shorter "argument" text) instead of a flat void */
  .dossier__body::before {
    content: "";
    position: absolute;
    inset: 68px 24px 64px;
    background-image:
      linear-gradient(var(--grid-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, black, transparent 85%);
    pointer-events: none;
  }
  .dossier__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--text-strong);
  }
  .dossier__arrow {
    color: var(--accent);
    display: inline-block;
    transition: transform 0.2s var(--ease);
  }
  .dossier:hover .dossier__arrow {
    transform: translateX(4px);
  }
  .dossier__outcome-label {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent, #3fbaf5);
    margin-right: 6px;
  }
  .dossier__argument {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
    text-wrap: pretty;
  }
  .dossier__chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: auto 0 0;
    padding: 0;
  }
  .dchip {
    font-size: 11px;
    color: var(--text-secondary);
    background: rgba(63, 186, 245, 0.08);
    border-radius: 3px;
    padding: 4px 8px;
  }
  .dossier__meta {
    margin: 0;
    font-size: 11px;
    color: var(--text-faint);
    border-top: 1px solid rgba(63, 186, 245, 0.1);
    padding-top: 12px;
  }
</style>
