/**
 * Events list
 *
 * Typography follows the supplied spec:
 *   Title       Alexandria  28px / 30px / 400
 *   Date        Passion One 18px / 26px / 400
 *   Description Passion One 14px / 20px / 400
 *   Time        Passion One 18px / 26px / 400
 *
 * Everything else is exposed as a custom property on .cme-events so it can be
 * adjusted from the theme without editing this file.
 */

.cme-events {
	--cme-color: #ffffff;
	--cme-divider: rgba(255, 255, 255, 0.35);
	--cme-divider-width: 1px;

	--cme-event-gap: 90px;
	--cme-title-gap: 28px;
	--cme-line-gap: 34px;

	--cme-title-font: "Alexandria", sans-serif;
	--cme-body-font: "Passion One", sans-serif;

	width: 100%;
	text-align: center;
	color: var(--cme-color);
}

/* --------------------------------------------------------------------------
   Event + divider
   -------------------------------------------------------------------------- */

.cme-events .cme-event {
	padding: 0 0 var(--cme-event-gap);
}

.cme-events .cme-event + .cme-event {
	padding-top: var(--cme-event-gap);
	border-top: var(--cme-divider-width) solid var(--cme-divider);
}

.cme-events .cme-event:last-child {
	padding-bottom: 0;
}

/* --------------------------------------------------------------------------
   Title
   -------------------------------------------------------------------------- */

.cme-events .cme-event__title {
	margin: 0 0 var(--cme-title-gap);
	padding: 0;
	color: var(--cme-color);
	font-family: var(--cme-title-font);
	font-size: 28px;
	font-weight: 400;
	line-height: 30px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Date, description, time
   -------------------------------------------------------------------------- */

.cme-events .cme-event__date,
.cme-events .cme-event__time {
	margin: 0;
	padding: 0;
	color: var(--cme-color);
	font-family: var(--cme-body-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 26px;
}

.cme-events .cme-event__date {
	margin-bottom: var(--cme-line-gap);
}

.cme-events .cme-event__desc {
	margin: 0 0 var(--cme-line-gap);
	color: var(--cme-color);
	font-family: var(--cme-body-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}

.cme-events .cme-event__desc p {
	margin: 0 0 8px;
	font: inherit;
	color: inherit;
}

.cme-events .cme-event__desc p:last-child {
	margin-bottom: 0;
}

.cme-events .cme-event__desc a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.cme-events {
		--cme-event-gap: 55px;
		--cme-title-gap: 20px;
		--cme-line-gap: 24px;
	}

	.cme-events .cme-event__title {
		font-size: 24px;
		line-height: 28px;
	}
}