/* =========================================================================
   Event list pages (The Events Calendar list view: /events/category/...)
   Templates: tribe/events/v2/list.php and list/event/*.php
   Lines the list up with the site's 1200px column (it was inset 42px) and
   evens out the frame (it was 10px on top, 160px below). Token colors.
   ========================================================================= */

.post-type-archive-tribe_events .tribe-common-l-container.tribe-events-l-container,
.tax-tribe_events_cat .tribe-common-l-container.tribe-events-l-container {
	min-height: 0;
	padding: 40px 0 64px;
}

@media (max-width: 1240px) {
	.post-type-archive-tribe_events .tribe-common-l-container.tribe-events-l-container,
	.tax-tribe_events_cat .tribe-common-l-container.tribe-events-l-container {
		padding: 32px 20px 48px;
	}
}

/* [tribe_events] shortcode on a regular page: the page column already sets
   the width and gutters, so drop the plugin's frame (96px top, 160px bottom,
   42px sides, 700px min-height) and sit flush with the page content.
   Extra classes: the plugin's stylesheet prints after this one on these pages. */
.tribe-common.tribe-events.tribe-events-view--shortcode .tribe-common-l-container.tribe-events-l-container {
	min-height: 0;
	padding: 0 0 32px;
}

/* The Events Calendar's header is a wrapping flex row on wider screens;
   without a full-width basis the heading sits beside the events bar. */
.tribe-events .tribe-events-header > :is(.umbc-events-heading, .umbc-events-intro) {
	flex: 0 0 100%;
}

.tribe-events .umbc-events-heading {
	margin: 12px 0 8px;
	color: var(--umbc-color-heading, var(--umbc-text));
	font-size: clamp(32px, 4vw, 46px);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.tribe-events .umbc-events-intro {
	max-width: 72ch;
	margin: 0 0 8px;
	color: var(--umbc-text-muted);
	font-size: 18px;
}

.tribe-events .tribe-events-header {
	margin-bottom: 8px;
}

/* Category pills: size to their text (they stretched full width on phones) */
.tribe-events .category-links {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

.tribe-events .category-links li {
	width: auto;
	margin: 0;
}

.tribe-events .tribe-events-calendar-list__event-description p {
	margin: 0;
	color: var(--umbc-text);
}

.tribe-events .umbc-events-more {
	margin: 12px 0 0;
}

/* Rows: even spacing between events */
.tribe-events .tribe-events-calendar-list__event-row {
	margin-top: 32px;
	margin-bottom: 32px;
}
