/**
 * services: loaded only on pages that show it.
 *
 * The two Sunday service cards on the home page and the worship page, drawn
 * to match the church's existing site: a pale blue card, the photograph with
 * rounded corners, "9:30 a.m. Contemporary worship" as one heading, and a
 * short list of facts each with its own small icon. The cards are ordinary
 * blocks (a group of an image, a heading and a list), so the wording is edited
 * in place on the page.
 */

.cong-service-cards {
	gap: var(--wp--preset--spacing--30) !important;
}

.cong-service-card {
	height: 100%;
	padding: 20px;
	background: var(--wp--preset--color--sky-soft);
	border-radius: 32px;
}

.cong-service-card > * {
	max-width: none !important;
}

.cong-service-card__photo {
	margin: 0;
}

.cong-service-card__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 24px;
}

.cong-service-card__title {
	margin: 20px 0 10px !important;
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--wp--preset--color--ink);
}

.cong-service-card__facts {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.cong-service-card__facts li {
	display: flex;
	align-items: baseline;
	gap: 0.55em;
	margin: 0;
	padding: 6px 0;
	border-block-end: 1px solid rgb(4 67 106 / 0.12);
	font-size: 1.125rem;
	color: var(--wp--preset--color--ink);
}

.cong-service-card__facts li:last-child {
	border-block-end: 0;
}

.cong-service-card__facts a {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.cong-service-card__facts li::before {
	content: "";
	flex: 0 0 auto;
	inline-size: 0.85em;
	block-size: 0.85em;
	transform: translateY(0.08em);
	background: var(--wp--preset--color--sky);
	-webkit-mask: var(--cong-icon) center / contain no-repeat;
	mask: var(--cong-icon) center / contain no-repeat;
}

/* Where: a map arrow. */
.cong-service-card__facts .is-place::before {
	--cong-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 3 3 10.5l7.5 3L13.5 21z'/%3E%3C/svg%3E");
}

/* When: a clock. */
.cong-service-card__facts .is-time::before {
	--cong-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 5v5.4l3.6 2.1-1 1.7L11 13.6V7z'/%3E%3C/svg%3E");
}

/* What it is like: a note of music. */
.cong-service-card__facts .is-about::before {
	--cong-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h12v13.5a3.5 3.5 0 1 1-2-3.2V8h-8v10.5a3.5 3.5 0 1 1-2-3.2z'/%3E%3C/svg%3E");
}

/*
 * This week's order of worship: a button, so it stands out from the facts
 * above it. The block draws nothing on a week with no order to link to.
 */
.cong-service-card .cong-worship-plan {
	margin: 16px 0 0 !important;
}

.cong-service-card .cong-worship-plan .wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: var(--wp--preset--font-size--sm);
}

/*
 * A Sunday when one service replaces both (body class from church.php).
 *
 * The regular cards stay, so nobody concludes the church only has the one
 * service, but they step back: no photographs, smaller, under a label
 * saying they are the usual pattern. The notice above them, with this
 * week's service and its order of worship, leads.
 */
.cong-sunday-replaced .cong-service-cards {
	flex-wrap: wrap !important;
	max-width: 52rem;
	margin-inline: auto !important;
}

.cong-sunday-replaced .cong-service-cards::before {
	content: "Regular Sunday worship schedule";
	flex-basis: 100%;
	color: var(--wp--preset--color--leaf);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-align: center;
	text-transform: uppercase;
}

.cong-sunday-replaced .cong-service-cards > .wp-block-column {
	flex: 1 1 18rem !important;
}

.cong-sunday-replaced .cong-service-card {
	padding: 16px 20px;
	border-radius: 20px;
}

.cong-sunday-replaced .cong-service-card__photo {
	display: none;
}

.cong-sunday-replaced .cong-service-card__title {
	margin: 0 0 6px !important;
	font-size: 1.2rem;
}

.cong-sunday-replaced .cong-service-card__facts {
	font-size: var(--wp--preset--font-size--sm);
}