.church-calendar {
	--calendar-accent: #c89814;
	--calendar-ink: #111518;
	--calendar-muted: #6f685e;
	--calendar-line: #c8981459;
	margin: 1.5rem 0;
	color: var(--calendar-ink);
}

.church-calendar-event {
	margin: 0 0 1.25rem;
	padding: 1rem 1.15rem;
	border: 1px solid var(--calendar-line);
	border-left: 4px solid var(--calendar-accent);
	border-radius: 0.4rem;
	background: #fffdfa;
	box-shadow: 0 2px 8px rgb(48 41 31 / 5%);
}

.church-calendar-event h3 {
	margin: 0 0 0.5rem;
	color: var(--calendar-ink);
	font-size: 1.08rem;
	line-height: 1.45;
}

.church-calendar-event time {
	display: inline-block;
	margin: 0 0 0.65rem;
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	background: #f5eddf;
	color: var(--calendar-accent);
	font-weight: 600;
	font-size: 0.9rem;
}

.church-calendar-content > :last-child {
	margin-bottom: 0;
}

.church-calendar-content {
	line-height: 1.7;
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin: 0;
}

.bg-church-event-date {
	display: block;
	flex: 0 0 auto;
	margin: 0;
	padding: 0.2rem 0.6rem;
	border: 1px solid #e8dcc8;
	border-radius: 5px;
	background: #f7f0e5;
	color: var(--calendar-accent);
	font-size: 0.86rem;
	font-weight: 700;
	white-space: nowrap;
}

.bg-church-event-text {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	color: var(--calendar-ink);
}

.church-calendar-list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.church-calendar-list .church-calendar-event {
	padding: 1rem 1.15rem;
	transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.church-calendar-list .church-calendar-event:hover {
	border-color: #d8c7aa;
	box-shadow: 0 5px 16px rgb(48 41 31 / 9%);
	transform: translateY(-1px);
}

.church-calendar-empty {
	padding: 1rem 1.15rem;
	border: 1px solid var(--calendar-line);
	border-radius: 0.4rem;
	background: #fffdfa;
	color: var(--calendar-muted);
}

.church-calendar-empty time {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--calendar-accent);
	font-weight: 700;
}

.church-calendar-empty p {
	margin: 0;
}

@media (max-width: 600px) {
	.church-calendar-event,
	.church-calendar-list .church-calendar-event {
		padding: 0.85rem 0.9rem;
	}

	.church-calendar-content {
		flex-direction: column;
		gap: 0.35rem;
	}
}