website-astro/src/components/CardEditorial.astro

---
import ListTags from "./ListTags.astro";
import { l, t } from "astro-i18n";

const { item, routeName } = Astro.props;

// no link on references cards
const isReference = routeName === t("references.slug");
---

<div class:list={["card", { "card--link": !isReference }]}>
	<div>
		<h3>
			{
				!isReference ? (
					<a
						class="clean-link card__link"
						href={`${l(`/${routeName}`)}/${item.slug}`}
					>
						{item.data.title}
					</a>
				) : (
					<span>{item.data.title}</span>
				)
			}
		</h3>
		<h4>{item.data.subtitle}</h4>
		<ListTags list={item.data.tags} />
		{
			isReference && (
				<a href={item.data.url} rel="noopener noreferer">
					{t("references.cta")}
					<span class="sr-only"> {item.data.title}</span>
				</a>
			)
		}
	</div>
</div>

<style scoped>
	.card {
		padding: var(--space-s-m) var(--space-xs-s);
		position: relative;
		display: block;
		block-size: 100%;
		overflow: hidden;
		box-shadow: var(--shadow-elevation-medium);
		background-color: white;
	}
	/*
	* to be replaced with .card:has(a)
	* when firefox supports it
	*/
	.card--link:hover {
		box-shadow: var(--shadow-elevation-high);
	}
	.card--link:focus-within {
		box-shadow: var(--shadow-elevation-high);
	}
	.card--link::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--link:hover::after,
	.card--link:focus-within::after {
		transform: translateX(0);
		opacity: 1;
	}
	.card--link:hover h3 a {
		text-decoration: underline;
	}
	.card--link:hover h3 a,
	.card--link:focus-within h3 a {
		color: var(--color-brique);
	}
	.card--link::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--link:hover::before,
	.card--link: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>