/*
Targets Events Manager list output like:
<div class="em pixelbones em-list em-events-list"> ... <div class="em-event em-item"> ...
*/

/* Grid layout: 1 col mobile, 2 col tablet, 4 col desktop */
.horz-ubz .em.em-list.em-events-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 700px) {
	.horz-ubz .em.em-list.em-events-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.horz-ubz .em.em-list.em-events-list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Event card: image on the left, info on the right */
.horz-ubz .em.em-list.em-events-list > .em-event.em-item {
	display: flex;
	flex-direction: row;
	gap: 0px;
	align-items: flex-start;
	padding: 0;
	border-top: 0px;
}

/* Image: fixed 80px wide */
.horz-ubz .em.em-list.em-events-list .em-item-image {
	flex: 0 0 80px;
	width: 80px;
	min-width: 80px;
}

.horz-ubz .em.em-list.em-events-list .em-item-image img {
	display: block;
	width: 80px;
	height: auto;
}

/* Info stack */
.horz-ubz .em.em-list.em-events-list .em-item-info {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0px 0px 0px 10px;
	border: 0px;
}

/* Title size */
.horz-ubz .em.em-list.em-events-list .em-item-title {
	font-size: 20px !important;
	line-height: 1.2 !important;
	margin: 0 0 6px !important;
}

/* Show only date + time lines; hide location and any other meta lines */
.horz-ubz .em.em-list.em-events-list .em-item-meta .em-item-meta-line {
	display: none;
}

.horz-ubz .em.em-list.em-events-list .em-item-meta .em-event-date,
.horz-ubz .em.em-list.em-events-list .em-item-meta .em-event-time {
	display: block;
}

/* Suppress description text and More Info button */
.horz-ubz .em.em-list.em-events-list .em-item-desc,
.horz-ubz .em.em-list.em-events-list .em-item-actions {
	display: none;
}

/*
Single event page: constrain template sections.
If you wrap your single-event format in <div class="uzb-em-single"> ... </div>,
this will apply cleanly.
*/
.horz-ubz .uzb-em-single {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 16px;
	padding-right: 16px;
	box-sizing: border-box;
}

/* Fallback: constrain common single-event sections even without wrapper */
.horz-ubz .em-item-header,
.horz-ubz .em-event-location,
.horz-ubz .em-event-content,
.horz-ubz .em-event-bookings {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 16px;
	padding-right: 16px;
	box-sizing: border-box;
}