---
import type { CollectionEntry } from 'astro:content';

interface Props {
	project: CollectionEntry<'work'>;
}

const { data, id } = Astro.props.project;
---

<a class="card" href={`/work/${id}`}>
	<span class="title">{data.title}</span>
	<img src={data.img} alt={data.img_alt || ''} loading="lazy" decoding="async" />
</a>

<style>
	.card {
		display: grid;
		grid-template: auto 1fr / auto 1fr;
		height: 11rem;
		background: var(--gradient-subtle);
		border: 1px solid var(--gray-800);
		border-radius: 0.75rem;
		overflow: hidden;
		box-shadow: var(--shadow-sm);
		text-decoration: none;
		font-family: var(--font-brand);
		font-size: var(--text-lg);
		font-weight: 500;
		transition: box-shadow var(--theme-transition);
	}

	.card:hover {
		box-shadow: var(--shadow-md);
	}

	.title {
		grid-area: 1 / 1 / 2 / 2;
		z-index: 1;
		margin: 0.5rem;
		padding: 0.5rem 1rem;
		background: var(--gray-999);
		color: var(--gray-200);
		border-radius: 0.375rem;
	}

	img {
		grid-area: 1 / 1 / 3 / 3;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	@media (min-width: 50em) {
		.card {
			height: 22rem;
			border-radius: 1.5rem;
		}

		.title {
			border-radius: 0.9375rem;
		}
	}
</style>