---
import ListTags from "./ListTags.astro";
const { item, routeName } = Astro.props;
---

<div class="card">
	<div>
		<h3>
			<a class="clean-link card__link" href={`/${routeName}/${item.slug}`}
				>{item.data.title}</a
			>
		</h3>
		<h4>{item.data.subtitle}</h4>
		<ListTags list={item.data.tags} />
	</div>
</div>

<style scoped>
	.card {
		padding: var(--space-s-m) var(--space-xs-s);
		position: relative;
		display: block;
		block-size: 100%;
		overflow: hidden;
		cursor: pointer;
		box-shadow: var(--shadow-elevation-medium);
		background-color: white;
	}
	.card:hover {
		box-shadow: var(--shadow-elevation-high);
	}
	.card:focus-within {
		box-shadow: var(--shadow-elevation-high);
	}
	.card::after {
		content: "";
		position: absolute;
		inline-size: 30px;
		block-size: 30px;
		top: var(--space-m);
		right: var(--space-s);
		opacity: 0;
		background-image: url("/assets/svg/arrow-right.svg");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		transform: translateX(1rem);
	}
	.card:hover::after,
	.card:focus-within::after {
		transform: translateX(0);
		opacity: 1;
	}
	.card:hover h3 a {
		text-decoration: underline;
	}
	.card:hover h3 a,
	.card:focus-within h3 a {
		color: var(--color-brique);
	}
	.card::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		block-size: 100%;
		inline-size: 2px;
		transform: scaleY(0);
		transform-origin: bottom;
		background-color: var(--color-brique);
	}
	.card:hover::before,
	.card:focus-within::before {
		transform: scaleY(1);
		transform-origin: top;
	}

	h3 {
		padding-inline-end: var(--space-s-m);
		font-size: var(--size-2);
		font-weight: bold;
		text-transform: none;
	}
	.card__link {
		color: var(--color-blue);
	}
	.card__link::after {
		content: "";
		position: absolute;
		inset: 0;
	}
	@media (prefers-reduced-motion: no-preference) {
		.card {
			transition: box-shadow 0.2s ease;
		}
		.card::before {
			transition: transform 0.2s ease-in-out;
		}
		.card::after {
			transition: opacity ease 0.2s, transform ease 0.2s;
		}
		h3 a {
			transition: color ease 0.2s;
		}
	}

	.card h4 {
		margin-block-start: var(--space-2xs);
		font-size: var(--size-0);
		font-weight: 500;
		color: var(--darkBlue);
	}
</style>