/**
 * TM Event Calendar - Event List shortcode styles.
 *
 * Depends on design-system.css (--tec-* tokens, .tec-btn/.tec-input/.tec-card
 * primitives), loaded first via TMEC_Assets::enqueue_frontend_assets().
 */

/* ---------------------------------------------------------------------- */
/* Header bar: Upcoming/Past toggle + List/Grid/Calendar view switch      */
/* ---------------------------------------------------------------------- */

.tmec-event-list__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tec-space-4);
	margin-bottom: var(--tec-space-5);
	flex-wrap: wrap;
}

.tmec-event-list__view-switch {
	display: inline-flex;
	border: 1px solid var(--tec-border-strong);
	border-radius: var(--tec-radius-sm);
	overflow: hidden;
}

.tmec-event-list__view-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--tec-space-1);
	padding: var(--tec-space-2) var(--tec-space-3);
	border: none;
	border-right: 1px solid var(--tec-border-strong);
	background: var(--tec-bg);
	color: var(--tec-muted);
	font-size: var(--tec-font-size-sm);
	cursor: pointer;
	transition: background var(--tec-transition-fast), color var(--tec-transition-fast);
}

.tmec-event-list__view-btn:last-child {
	border-right: none;
}

.tmec-event-list__view-btn:hover {
	color: var(--tec-primary);
}

.tmec-event-list__view-btn.is-active {
	background: var(--tec-primary);
	color: var(--tec-on-primary);
}

.tmec-event-list__mode {
	position: relative;
}

.tmec-event-list__mode-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--tec-space-1);
	border: none;
	background: transparent;
	color: var(--tec-text);
	font-size: var(--tec-font-size-lg);
	font-weight: var(--tec-font-weight-semibold);
	cursor: pointer;
}

.tmec-event-list__mode-menu {
	position: absolute;
	top: calc(100% + var(--tec-space-2));
	right: 0;
	z-index: var(--tec-z-dropdown);
	background: var(--tec-bg);
	border: 1px solid var(--tec-border);
	border-radius: var(--tec-radius-md);
	box-shadow: var(--tec-shadow-md);
	padding: var(--tec-space-2);
	min-width: 220px;
}

.tmec-event-list__mode-option {
	display: block;
	width: 100%;
	text-align: left;
	padding: var(--tec-space-2) var(--tec-space-3);
	border: none;
	background: transparent;
	border-radius: var(--tec-radius-sm);
	cursor: pointer;
	font-size: var(--tec-font-size-sm);
	color: var(--tec-text);
}

.tmec-event-list__mode-option:hover,
.tmec-event-list__mode-option[aria-pressed="true"] {
	background: var(--tec-primary-soft);
	color: var(--tec-primary);
}

/* ---------------------------------------------------------------------- */
/* Results: list rows / grid cards / empty state / past-events fallback  */
/* ---------------------------------------------------------------------- */

.tmec-event-list__section-title {
	font-size: var(--tec-font-size-lg);
	font-weight: var(--tec-font-weight-bold);
	margin: var(--tec-space-5) 0 var(--tec-space-3);
}

.tmec-event-list__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--tec-space-3);
}

.tmec-event-list__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--tec-space-5);
}

@media (max-width: 480px) {
	.tmec-event-list__grid {
		grid-template-columns: 1fr;
	}
}

.tmec-event-list__item-link {
	display: flex;
	align-items: center;
	gap: var(--tec-space-4);
	padding: var(--tec-space-4);
	border: 1px solid var(--tec-border);
	border-radius: var(--tec-radius-md);
	background: var(--tec-bg);
	text-decoration: none;
	color: inherit;
	transition: box-shadow var(--tec-transition-fast), transform var(--tec-transition-fast);
}

.tmec-event-list__item-link:hover {
	box-shadow: var(--tec-shadow-sm);
	transform: translateY(-1px);
}

.tmec-event-list__date-badge {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	padding: var(--tec-space-2) 0;
	border: 2px solid var(--tec-primary);
	border-radius: var(--tec-radius-md);
	line-height: 1.1;
}

.tmec-event-list__date-month {
	font-size: var(--tec-font-size-xs);
	font-weight: var(--tec-font-weight-semibold);
	text-transform: uppercase;
	color: var(--tec-muted);
}

.tmec-event-list__date-day {
	font-size: var(--tec-font-size-xl);
	font-weight: var(--tec-font-weight-extrabold);
	color: var(--tec-text);
}

.tmec-event-list__date-year {
	font-size: var(--tec-font-size-xs);
	color: var(--tec-subtle);
}

.tmec-event-list__item-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--tec-space-1);
}

.tmec-event-list__item-meta {
	font-size: var(--tec-font-size-sm);
	color: var(--tec-muted);
}

.tmec-event-list__item-title {
	font-size: var(--tec-font-size-base);
	font-weight: var(--tec-font-weight-bold);
	color: var(--tec-text);
}

.tmec-event-list__item-thumbnail {
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	border-radius: var(--tec-radius-md);
	overflow: hidden;
}

.tmec-event-list__item-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 480px) {
	.tmec-event-list__item-thumbnail {
		display: none;
	}
}

.tmec-event-list__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--tec-space-4);
	margin-top: var(--tec-space-6);
}

.tmec-event-list__pagination-status {
	font-size: var(--tec-font-size-sm);
	color: var(--tec-muted);
}

.tmec-event-list__results[aria-busy="true"] {
	opacity: 0.6;
	pointer-events: none;
}