---
const { item, routeName } = Astro.props;
---

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

<style scoped>
	.card {
		padding: 2.4rem 1.6rem;
		position: relative;
		display: block;
		height: 100%;
		cursor: pointer;
		box-shadow: var(--shadow-elevation-medium);
		background-color: var(--white);
	}
	.card:hover {
		box-shadow: var(--shadow-elevation-high);
	}
	.card:focus-within {
		box-shadow: var(--shadow-elevation-high);
	}
	.card:hover h3::after,
	.card:focus-within h3::after {
		transform: translateX(0);
		opacity: 1;
	}
	.card:hover h3,
	.card:focus-within h3 {
		color: var(--brique);
	}
	.card::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		height: 100%;
		width: 2px;
		transform: scaleY(0);
		transform-origin: bottom;
		background-color: var(--brique);
	}
	.card:hover::before,
	.card:focus-within::before {
		transform: scaleY(1);
		transform-origin: top;
	}

	h3 {
		padding-right: 3rem;
		position: relative;
		font-size: clamp(2.4rem, 2.2222rem + 0.5556vw, 2.8rem);
		font-weight: bold;
		text-transform: none;
	}
	h3::after {
		content: url("~assets/svg/arrow-right.svg");
		position: absolute;
		width: 30px;
		top: 0;
		right: 0;
		opacity: 0;
		transform: translateX(1rem);
	}
	@media (prefers-reduced-motion: no-preference) {
		.card {
			transition: box-shadow 0.2s ease;
		}
		.card::before {
			transition: transform 0.2s ease-in-out;
		}
		h3 {
			transition: color ease 0.2s;
		}
		h3::after {
			transition: opacity ease 0.2s, transform ease 0.2s;
		}
	}

	.card h4 {
		margin-top: 0.8rem;
		font-size: 2rem;
		font-weight: 500;
		color: var(--darkBlue);
	}

	@media screen and (min-width: 768px) {
		h3 {
			margin-top: 0;
			margin-bottom: 0.8rem;
		}
		.card {
			padding: 3.2rem 2.4rem;
		}
	}
	@media screen and (min-width: 1060px) {
		.card {
			margin: 0;
		}
	}
</style>