/*
Ability Esports — Card component + card grid layout.
One reusable card for News today, and for every future esports entity
card per /docs/DESIGN-TOKENS.md §5.2.
*/

.ae-card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ae-space-xl);
	margin-block: var(--ae-space-xl);
}

@media (min-width: 768px) {
	.ae-card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.ae-card-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ae-card {
	display: flex;
	flex-direction: column;
	background: var(--ae-color-surface-1);
	border-radius: var(--ae-card-radius);
	overflow: hidden;
	transition: box-shadow var(--ae-duration-fast) var(--ae-ease-standard),
		transform var(--ae-duration-fast) var(--ae-ease-standard);
}

.ae-card:hover {
	box-shadow: var(--ae-shadow-floating);
	transform: translateY(-2px);
}

.ae-card__media {
	position: relative;
	aspect-ratio: var(--ae-card-image-ratio);
}

.ae-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ae-card__status {
	position: absolute;
	top: var(--ae-space-sm);
	left: var(--ae-space-sm);
}

.ae-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--ae-card-gap);
	padding: var(--ae-card-padding);
}

.ae-card__title {
	font-size: var(--ae-text-h4);
	margin: 0;
}

.ae-card__title a {
	color: var(--ae-color-text-primary);
	text-decoration: none;
}

.ae-card__title a:hover {
	color: var(--ae-color-brand-primary-bright);
}

.ae-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ae-space-sm);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--ae-text-caption);
	color: var(--ae-color-text-muted);
}

.ae-card__excerpt {
	font-size: var(--ae-text-body-sm);
	color: var(--ae-color-text-secondary);
	margin: 0;
}

.ae-card__cta {
	margin-top: auto;
}