/* ABOUTME: Styles for content tile cards with background images and overlays. */
/* ABOUTME: Handles tile layout, hover effects, and content positioning. */
section .tile {
	z-index: 1;
	overflow: hidden;
	position: relative;
	background-color: var(--card-bg-color);
	color: var(--card-text-color, currentColor);
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	height: auto;
	padding: 1rem;
	aspect-ratio: 9/12;
	border-radius: var(--rbr);
	background-image: linear-gradient(
			0deg,
			rgba(99, 199, 210, 1) 0%,
			rgba(99, 199, 210, 0.8) 50%,
			rgba(42, 123, 155, 0) 100%
		),
		var(--background-image);
}

.tile::before {
	position: absolute;
	content: "";
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(
		0deg,
		rgba(99, 199, 210, 1) 0%,
		rgba(99, 199, 210, 1) 100%
	);
	z-index: -1;
	transition: opacity 240ms linear;
	opacity: 0;
}

.tile-content {
	transform: translateY(calc(100% - var(--step-2)));
	transition: all 440ms ease-in-out;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.tile:hover .tile-content {
	transform: translateY(0%);
}

.tile-content-wrapper {
	overflow: hidden;
}

.tile .button {
	color: var(--text-color);
	border: 1px solid var(--text-color);
	padding: 0.4rem 0.6rem;
	display: inline-flex;
}
.tile .button:hover {
	color: white;
	background-color: var(--text-color);
	border: 1px solid var(--text-color);
	padding: 0.4rem 0.6rem;
	display: inline-flex;
}

.tile:hover::before {
	opacity: 1;
}