---
// 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">
    <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">The argument: {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;
    border-bottom: 1px solid rgba(63, 186, 245, 0.12);
  }
  :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__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>