/*
 * em-events: styles for the [em_list] event card list.
 * Own em-* classes, no The Events Calendar dependency.
 * Ports the old tribe-list look (child CSS) + the minimal tribe base rules:
 * a 3-column card grid with rounded images, mg12 typography and a
 * full-card "weiter" ghost link.
 */

.em-list {
	width: 100%;
	margin: 0 auto;
}

.em-list a {
	text-decoration: none !important;
}

.em-list__container {
	padding: 0 !important;
}

/* the grid: three columns of event cards */
.em-list__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, 32%);
	justify-content: space-between;
	max-width: 1140px !important;
	margin: auto;
	padding: 0;
	list-style: none;
}

.em-list__row {
	margin: 0 !important;
	margin-top: 40px !important;
	padding: 0 !important;
	width: 100%;
}

.em-list__event {
	width: 100%;
	margin: 0;
	padding-bottom: 5px;
	border-radius: 0 0 0 3px;
	margin-bottom: 20px;
	position: relative;
}

/* card image */
.em-list__image {
	width: 100%;
}

.em-list__image img {
	width: 100%;
	height: 270px;
	object-fit: cover;
	margin-bottom: 10px;
	object-position: center center;
	border-radius: 20px;
}

.em-list__event:hover img {
	height: 290px !important;
	margin-top: -20px;
}

/* card details */
.em-list__event-header {
	min-height: 200px;
}

.em-list__datetime {
	font-family: 'mg12', sans-serif;
	color: var(--color-lightgray) !important;
	font-size: 120%;
}

h4.em-list__event-title {
	margin: 8px 0 0 0;
}

/* scoped under .em-list so the site's body.home a{} rule
   (orange links on the homepage) can never win the cascade here */
.em-list h4.em-list__event-title a.em-list__event-title-link {
	font-family: 'mg12', sans-serif;
	font-size: 32px !important;
	color: var(--color-lightgray) !important;
	text-decoration: none;
	line-height: 110%;
	border-bottom-style: none !important;
}

.em-list h4.em-list__event-title a.em-list__event-title-link:hover {
	border-bottom-style: none !important;
	color: var(--color-orange) !important;
}

ul.em-list__categories {
	color: var(--color-lightgray) !important;
	font-family: 'mg12', sans-serif;
	list-style: none;
	padding: 0;
	margin: 8px 0 0 0;
}

/* category variants */
.em-list__event.em-cat-festival {
	border-top: 6px solid var(--color-lightgray) !important;
	background: url(hirsch.png) 95% 99% no-repeat;
	background-size: 50px;
	margin-top: -6px !important;
}

.em-list__event.em-cat-festival .em-list__event-header {
	padding-left: 5px;
}

.em-list__event.em-cat-kundk {
	background: url(kundk.png) 95% 90% no-repeat;
	background-size: 150px;
}

/* card CTA button: 40% white, orange border/text; solid orange with white
   text on hover (scoped with main#content so homepage-wide link rules can
   never override it) */
main#content .em-list .em-list__btn {
	display: inline-block;
	margin-top: 16px;
	padding: 8px 16px;
	font-family: 'mg12', sans-serif;
	font-size: 15px;
	background-color: var(--color-white-20);
	border: 1px solid var(--color-orange);
	color: var(--color-orange) !important;
	text-decoration: none !important;
}

main#content .em-list .em-list__btn:hover {
	background-color: var(--color-orange);
	color: var(--color-white) !important;
}

/* Breakpoints (ported from the old list design) */
@media only screen and (max-width: 1255px) {
	.em-list__image img {
		height: 350px;
	}

	.em-list__event:hover img {
		height: 370px !important;
	}
}

@media only screen and (max-width: 960px) {
	.em-list__datetime {
		font-size: 110%;
	}
}

@media only screen and (max-width: 1200px) {
	.em-list__list {
		grid-template-columns: repeat(auto-fill, 49%);
	}
}

@media only screen and (max-width: 700px) {
	.em-list__image img {
		height: 250px;
	}

	.em-list__event:hover img {
		height: 270px !important;
	}
}

@media only screen and (max-width: 600px) {
	.em-list__list {
		grid-template-columns: repeat(auto-fill, 100%);
	}

	.em-list__datetime {
		font-size: 4.5vw !important;
	}

	.em-list__image img {
		height: 100%;
	}

	.em-list__event:hover img {
		height: 100% !important;
		margin-top: 0;
	}

	.em-list__event-header {
		min-height: 40px;
	}

	.em-list__event.em-cat-kundk {
		background-position: 95% 85%;
	}
}