/**
 * Eventixa Pro event listing Grid view.
 *
 * Uses the design tokens and components supplied by Eventixa Core.
 */

.evx-grid-view {
	width: 100%;
}

.evx-grid-view__items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--evx-space-20);
}

.evx-grid-card {
	position: relative;
	display: flex;
	min-width: 0;
	height: 100%;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--evx-radius-5);
}

.evx-grid-card:hover {
	border-color: color-mix(in srgb, var(--evx-event-color) 35%, var(--evx-border));
}

.evx-grid-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 8;
	overflow: hidden;
	background: var(--evx-surface-soft);
	text-decoration: none;
}


.evx-grid-card:hover .evx-grid-card__media img {
	transform: scale(1.035);
}

.evx-grid-card__media:focus-visible,
.evx-grid-card__title a:focus-visible,
.evx-grid-card__button:focus-visible {
	outline: none !important;
}


.evx-grid-card__media .evx-grid-card__category {
	position: absolute;
	top: var(--evx-space-20);
	inset-inline-start: var(--evx-space-20);
	z-index: 1;
	box-shadow: var(--evx-shadow-sm);
}

.evx-grid-card__category-row {
	padding: var(--evx-space-20) var(--evx-space-20) 0;
}

.evx-grid-card__body {
	display: flex;
	min-width: 0;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 10px 15px;
}

.evx-grid-card__datetime,
.evx-grid-card__meta {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: var(--evx-space-5);
	color: var(--evx-text-muted);
	font-size: var(--evx-font-size-14);
	line-height: var(--evx-line-height-md);
}

.evx-grid-card__datetime {
	margin-bottom: var(--evx-space-5);
	color: var(--evx-event-color);
	font-weight: var(--evx-font-weight-600);
}

.evx-grid-card__datetime .evx-icon,
.evx-grid-card__meta .evx-icon {
	width: var(--evx-icon-size-sm);
	height: var(--evx-icon-size-sm);
	flex: 0 0 var(--evx-icon-size-sm);
}

.evx-grid-card__datetime span,
.evx-grid-card__meta span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.evx-grid-card__title {
	margin: 0;
	font-size: var(--evx-font-card-title);
	font-weight: var(--evx-font-weight-700);
	line-height: var(--evx-line-height-sm);
}

.evx-grid-card__title a {
	display: -webkit-box;
	overflow: hidden;
	text-decoration: none;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color:inherit;
}

.evx-grid-card__title a:hover {
	color: var(--evx-primary);
}

.evx-grid-card__badges {
	flex-wrap: wrap;
	margin-top: var(--evx-space-12);
}

.evx-grid-card__meta-list {
	display: grid;
	gap: var(--evx-space-8);
	margin-top: var(--evx-space-5);
}

.evx-grid-card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	margin: var(--evx-space-10) 0 0;
	color: var(--evx-text-muted);
	font-size: var(--evx-font-size-14);
	line-height: var(--evx-line-height-lg);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.evx-grid-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--evx-space-15);
	margin-top: auto;
	padding-top: var(--evx-space-15);
}

.evx-grid-card__price {
	min-width: 0;
	font-size: var(--evx-font-size-14);
}

.evx-grid-card__button {
	flex: 0 0 auto;
	white-space: nowrap;
}

.evx-grid-card--no-media .evx-grid-card__body {
	padding-top: var(--evx-space-20);
}

.evx-grid-view > .evx-pagination {
	margin-top: var(--evx-space-32);
}

@media (min-width: 769px) and (max-width: 1024px) {
	.evx-grid-view__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.evx-grid-view__items {
		grid-template-columns: minmax(0, 1fr);
	}

	.evx-grid-card__body {
		padding: var(--evx-space-15);
	}
	.evx-grid-card__footer {
		align-items: stretch;
		flex-direction: column;
	}
	.evx-grid-card__button {
		width: 100%;
		justify-content: center;
	}
	.evx-grid-card__title{
		font-size: var(--evx-font-size-14);
	}
	.evx-grid-card__datetime, .evx-grid-card__excerpt{
		font-size: var(--evx-font-size-12);
	}
}