.activity-card {
	position: relative;
	background-color: white;
	border: 1px solid lightgray;
	border-radius: 0.375rem;
	display: grid;
	grid-template-rows: auto 1fr;
	grid-template-areas:
		"title date"
		"info status"
	;
	padding: 1rem;
	gap: 0.5rem;
	transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;

	&:hover {
		box-shadow: 0 4px 12px hsl(0 0% 0% / 0.1);
		border-color: var(--color-1);
		transform: translateY(-2px);
	}

	&:focus-within {
		box-shadow: 0 0 0 3px var(--color-1-desaturated);
		border-color: var(--color-1);
	}

	a {
		outline: none;

		&::after {
			content: "";
			position: absolute;
			inset: 0;
		}

		&:focus-visible { color: var(--color-1-desaturated); }
	}

	&[data-state="past"] { background-color: dimgray; }

	h2 {
		grid-area: title;
		margin: 0;
		font-size: 1rem;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	time, .info, .status { font-size: 0.75rem; }
	.info { grid-area: info; }

	time {
		grid-area: date;
		justify-self: end;
		font-weight: 700;
	}

	.status {
		grid-area: status;
		justify-self: end;
	}
}