/* FB Page Events — inherits your theme's fonts and colors; only layout is opinionated. */
/* Optional: set --fbpe-accent in your theme's CSS to color the month label. */
.fbpe {
	list-style: none;
	margin: 0 0 1.5em;
	padding: 0;
}
.fbpe__event {
	display: grid;
	grid-template-columns: 4.25rem 1fr auto;
	gap: 1rem 1.25rem;
	align-items: start;
	padding: 1.25rem 0;
	border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.fbpe__event:last-child {
	border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

/* Tear-off calendar date block */
.fbpe__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 2px solid currentColor;
	border-radius: 6px;
	overflow: hidden;
	line-height: 1;
	text-align: center;
}
.fbpe__month {
	display: block;
	width: 100%;
	padding: .35em 0 .3em;
	border-bottom: 2px solid currentColor;
	font-size: .8rem;
	font-weight: 700;
	color: var(--fbpe-accent, inherit);
}
.fbpe__day {
	display: block;
	padding: .2em 0 .25em;
	font-size: 1.9rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.fbpe__body { min-width: 0; }
.fbpe__title {
	margin: 0 0 .3em;
	font-size: 1.15em;
	line-height: 1.3;
}
.fbpe__title a { text-decoration: none; }
.fbpe__title a:hover,
.fbpe__title a:focus-visible { text-decoration: underline; }

.fbpe__meta {
	margin: 0 0 .5em;
	font-size: .92em;
	opacity: .8;
}
.fbpe__meta span { display: block; }

.fbpe__desc {
	margin: 0 0 .6em;
	max-width: 65ch;
}
.fbpe__links { margin: 0; font-size: .92em; }
.fbpe__links a + a { margin-left: 1em; }

.fbpe__cover {
	width: 9rem;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 4px;
}

.fbpe__event--canceled .fbpe__title a,
.fbpe__event--canceled .fbpe__meta { text-decoration: line-through; opacity: .6; }
.fbpe__badge {
	display: inline-block;
	margin-left: .4em;
	padding: .1em .45em;
	border: 1px solid currentColor;
	border-radius: 3px;
	font-size: .7em;
	vertical-align: middle;
}

.fbpe--error {
	padding: .75em 1em;
	border-left: 4px solid #d63638;
	background: color-mix(in srgb, #d63638 8%, transparent);
}

@media (max-width: 600px) {
	.fbpe__event { grid-template-columns: 3.5rem 1fr; }
	.fbpe__cover {
		grid-column: 1 / -1;
		width: 100%;
	}
	.fbpe__day { font-size: 1.5rem; }
}