/* =========================
   CARD
   ========================= */

.card {
	border: 3px solid white;
	box-shadow: 6px 6px 0 rgb(153, 0, 255);
	width: min(65vw, 280px);
	min-height: auto;
	padding: 1rem;

	display: flex;
	flex-direction: column;
	gap: 1rem;

	transition:
		box-shadow 0.2s,
		transform 0.2s;
}

.card[data-link] {
	cursor: pointer;
}

.card[data-link]:hover {
	box-shadow: 10px 10px 0 rgb(153, 0, 255);
	transform: translate(-2px, -2px);
}

.card-status {
	font-size: 0.6rem;
	color: rgb(153, 0, 255);
	letter-spacing: 0.1em;
}

.card-thumbnail {
	width: 100%;
	aspect-ratio: 4 / 3;

	display: flex;
	align-items: center;
	justify-content: center;

	border: 2px solid white;
	overflow: hidden;
}

.card-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-thumbnail-placeholder {
	font-size: 0.6rem;
	color: rgba(255, 255, 255, 0.3);
	letter-spacing: 0.05em;
}

.card-title {
	font-size: 0.9rem;
	margin: 0;
	letter-spacing: 0.05em;
}

.card-description {
	font-size: 0.7rem;
	margin: 0;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.7);
}

.card-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: auto;
}

.tag {
	font-size: 0.5rem;
	color: rgb(153, 0, 255);
	letter-spacing: 0.05em;
}

.card-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-self: flex-start;
}

.project-link {
	background: none;
	border: 2px solid white;
	color: white;
	font-family: "Press Start 2P", system-ui;
	font-size: 0.6rem;
	padding: 0.5rem 1rem;

	display: inline-block;
	text-decoration: none;
	cursor: pointer;

	transition:
		background 0.2s,
		color 0.2s;

	align-self: flex-start;
}

.project-link:hover {
	background: white;
	color: rgb(17, 17, 17);
}

.project-link.secondary {
	border-color: rgb(153, 0, 255);
	color: rgb(153, 0, 255);
}

.project-link.secondary:hover {
	background: rgb(153, 0, 255);
	color: white;
}

.project-link.pending {
	border-color: rgba(255, 255, 255, 0.3);
	color: rgba(255, 255, 255, 0.3);
	cursor: default;
}

.project-link.pending:hover {
	background: none;
	color: rgba(255, 255, 255, 0.3);
}


/* =========================
   ARROWS
   ========================= */

.arrow {
	font-size: 3rem;
	cursor: pointer;
	transition: transform 0.2s, color 0.2s;
	user-select: none;
}

.arrow:hover {
	color: rgb(153, 0, 255);
	transform: scale(1.2);
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 600px) {

	.card {
		width: min(65vw, 280px);
		min-height: auto;
		padding: 1rem;
	}

	.arrow {
		font-size: 2rem;
	}

	.card-title {
		font-size: 0.7rem;
	}

	.card-description {
		font-size: 0.55rem;
		line-height: 1.6;
	}

	.card-status {
		font-size: 0.5rem;
	}

	.tag {
		font-size: 0.45rem;
	}

	.project-link {
		font-size: 0.5rem;
		padding: 0.4rem 0.7rem;
	}
}