/*
 * Block styles.
 *
 * theme.json owns the design tokens; this file owns layout that tokens cannot
 * express — grids, cards, the header. Everything here reads from the same CSS
 * custom properties theme.json generates, so a color change stays a one-line
 * change in theme.json.
 */

/* ---------- Shared primitives ------------------------------------------- */

.cong-card {
	/* The card's own radius, less its border, for anything nesting inside. */
	--cong-card-inner-radius: calc(var(--wp--custom--radius--lg) - 1px);

	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	height: 100%;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--sky-mid) 55%, transparent);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--card);
	transition: box-shadow var(--wp--custom--transition--base),
		transform var(--wp--custom--transition--base);
}

.cong-card:hover,
.cong-card:focus-within {
	box-shadow: var(--wp--preset--shadow--lift);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.cong-card {
		transition: none;
	}
	.cong-card:hover,
	.cong-card:focus-within {
		transform: none;
	}
}

/*
 * The whole picture, never a crop of it — for artwork.
 *
 * Church artwork is mostly type. An event graphic is 16:9 with the date, the
 * room and the sign-up address set across it; a news masthead is wider still
 * and carries the wordmark down one side. Filling a 3:2 card with `cover`
 * sliced both ends off every one of them, which is how a card came to read
 * "er 8 | 6:00 - 8:00 p.m. | Youth Center".
 *
 * So the box is 16:9 — the shape 96% of the events are drawn at, so they fill
 * it exactly; event and news artwork of any other shape is shown whole, and
 * every other picture — photographs — fills the box and loses its edges
 * (below).
 *
 * This only works because `cong-card` no longer hard-crops when the file is
 * made. CSS cannot put back a strip that PHP already cut off.
 */
.cong-card__media {
	margin: calc(var(--wp--preset--spacing--30) * -1)
		calc(var(--wp--preset--spacing--30) * -1) 0;
	overflow: hidden;
	/*
	 * A pixel tighter than the card, because the card has a one-pixel border
	 * and this sits inside it. Two equal radii an inch apart do not nest: the
	 * media's arc bulges past the card's and leaves a square nub of artwork
	 * poking out of each top corner, which is what somebody circles in a
	 * screenshot and asks whether the cards are meant to be rounded at all.
	 */
	border-radius: var(--cong-card-inner-radius) var(--cong-card-inner-radius) 0 0;
	aspect-ratio: 16 / 9;
	background: var(--wp--preset--color--surface);
}

.cong-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* A little above centre: in a photograph of people, the faces are
	   usually in the upper half, and a 3:2 trimmed to 16:9 loses less of
	   them taken from the bottom. */
	object-position: 50% 40%;
}

/*
 * Every card picture fills its box.
 *
 * Pictures used to be shown whole, so that a poster with words on it was
 * never cut off — and then only odd shapes were. Both cost the photographs:
 * a 3:2 picture of people, or one of the 3:1 page banners that became
 * featured images in the move, sat shrunk inside its box with grey bars
 * around it. Looking at every program picture on the site, the wide ones
 * were photographs too (and the one logo is centred, so it survives). A
 * picture that genuinely needs showing whole wants a better picture.
 *
 * Except artwork: events and news. Those really are type — the date, the
 * room, a wordmark — and are still shown whole (above). An event drawn at
 * 16:9, as nearly all are, fills its box anyway.
 */
.cong-event .cong-card__media img,
.cong-newsgrid__item .cong-card__media img {
	object-fit: contain;
	object-position: 50% 50%;
}

/* Nearly 16:9 fills anyway: a graphic made at 1200 × 660 shown whole left a
   hairline of tint top and bottom that read as a broken border (site.js). */
.cong-event .cong-card__media img.is-nearly-wide,
.cong-newsgrid__item .cong-card__media img.is-nearly-wide {
	object-fit: cover;
}
.cong-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.25;
}

/* The whole card is clickable, but only the title is a real link — so the
   text stays selectable and the link keeps its accessible name. */
.cong-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.cong-card {
	position: relative;
}

.cong-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
}

.cong-card__meta > * {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.cong-card__excerpt {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
}

.cong-card__actions {
	position: relative;
	z-index: 1;
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--10);
}

/* ---------- Grids -------------------------------------------------------- */

/*
 * The column count is a ceiling, not a fixed grid.
 *
 * auto-fill lays down as many tracks as the row will hold and leaves the
 * spare ones empty, so three pastors in a four-column grid sat in three
 * quarters of the width with a hole on the end. auto-fit collapses the
 * empty tracks instead, and the track floor is the larger of a readable
 * minimum and an even share of the row — which caps the count at
 * --cong-cols while still letting fewer items spread out.
 */
.cong-grid {
	--cong-cols: 3;
	--cong-min: 18rem;
	--cong-gap: var(--wp--preset--spacing--40);

	display: grid;
	gap: var(--cong-gap);
	grid-template-columns: repeat(
		/*
		 * auto-fill, not auto-fit.
		 *
		 * auto-fit collapses the tracks nothing landed in, so a section with
		 * one item stretched that one card across the entire row — which is
		 * how the Worship ministry ended up with a single programme tile the
		 * width of the page and about as tall. auto-fill keeps the empty
		 * tracks, so a card is the same size whether there are one of them
		 * or nine.
		 */
		auto-fill,
		minmax(
			min(
				100%,
				max(
					var(--cong-min),
					calc( ( 100% - ( var(--cong-cols) - 1 ) * var(--cong-gap) ) / var(--cong-cols) )
				)
			),
			1fr
		)
	);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Fewer items than columns.
 *
 * auto-fill keeps the empty tracks, which is what stops a lone card being
 * stretched across the page — but it also leaves that card marooned on the
 * left under a centred heading, with two thirds of the row empty. So the row
 * is laid out explicitly and centred.
 *
 * Two or more of them simply share the width: three pastors under a heading
 * that says "meet our pastors" are the row, and holding them to a four-column
 * track just to prove a fourth was possible makes them smaller for no reason.
 */
.cong-grid[data-few] {
	grid-template-columns: repeat( var(--cong-shown, 1), minmax(0, 1fr) );
	justify-content: center;
}

/*
 * One, though, keeps its original width. A single card stretched the whole
 * page is not a row of one, it is a mistake — and that is what this rule set
 * existed to stop in the first place.
 */
.cong-grid[data-few="1"] {
	grid-template-columns: calc(
		( 100% - ( var(--cong-cols) - 1 ) * var(--cong-gap) ) / var(--cong-cols)
	);
}

@media (max-width: 52rem) {
	/* Narrow enough that the full grid would have collapsed to one column
	   anyway, so the explicit tracks would overflow. */
	.cong-grid[data-few] {
		grid-template-columns: minmax(0, 1fr);
	}
}

.cong-grid--cols-1 { --cong-cols: 1; --cong-min: 100%; }
.cong-grid--cols-2 { --cong-cols: 2; --cong-min: 22rem; }
.cong-grid--cols-3 { --cong-cols: 3; --cong-min: 18rem; }
.cong-grid--cols-4 { --cong-cols: 4; --cong-min: 14rem; }
.cong-grid--cols-5 { --cong-cols: 5; --cong-min: 11rem; }

.cong-grid > li {
	margin: 0;
}

/* ---------- Eyebrow ------------------------------------------------------ */

.cong-eyebrow {
	display: inline-flex;
	margin: 0 0 var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--leaf);
	font-size: var(--wp--preset--font-size--xs);
	/* Small caps need the extra weight to hold up at 13px. */
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/*
 * In a column layout (a constrained group), a block that lines up with the
 * heading and text below it. As an inline box it ignored the column every
 * other child follows and sat at the container's padding edge — the label
 * 200px to the left of its own heading.
 */
.is-layout-constrained > .cong-eyebrow {
	display: flex;
}

.is-layout-constrained > .cong-eyebrow.has-text-align-center {
	justify-content: center;
}

/* No leading rule: the eyebrow is its colour and its capitals. */

/* ---------- Events ------------------------------------------------------- */

.cong-event__date {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 3.75rem;
	padding: 0.4rem 0;
	background: var(--wp--preset--color--sky-soft);
	border-radius: var(--wp--custom--radius--md);
	color: var(--wp--preset--color--ink);
	line-height: 1;
	text-align: center;
}

.cong-event__month {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cong-event__day {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 600;
}

.cong-events--list .cong-card {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
}

.cong-events--list .cong-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	min-width: 0;
}

/* ---------- Header / footer ---------------------------------------------- */

.cong-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
	backdrop-filter: saturate(180%) blur(12px);
	transition: box-shadow var(--wp--custom--transition--base);
}

.cong-header.is-scrolled {
	box-shadow: 0 1px 0 color-mix(in srgb, var(--wp--preset--color--sky-mid) 70%, transparent);
}

.cong-utility {
	font-size: var(--wp--preset--font-size--xs);
}

/* ---------- Empty states -------------------------------------------------- */

.cong-empty {
	padding: var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
	color: var(--wp--preset--color--ink-muted);
	text-align: center;
}

/* ---------- Event facts panel -------------------------------------------- */

.cong-event-facts {
	margin-top: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--sky-soft);
	border-radius: var(--wp--custom--radius--lg);
}

/* ---------- Links inside cards -------------------------------------------
 *
 * The global link style is underlined-and-green, which is right for links in
 * running prose and wrong for a card whose whole surface is already the
 * affordance. Card titles and contact details opt out and reserve the
 * underline for hover and focus.
 * ------------------------------------------------------------------------- */

.cong-card__title a,
.cong-card__meta a,
.cong-staff__contact a,
.cong-facts a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	text-underline-offset: 0.18em;
}

.cong-card__title a:hover,
.cong-card__title a:focus-visible,
.cong-card__meta a:hover,
.cong-card__meta a:focus-visible,
.cong-staff__contact a:hover,
.cong-staff__contact a:focus-visible,
.cong-facts a:hover,
.cong-facts a:focus-visible {
	color: var(--wp--preset--color--leaf);
	text-decoration: underline;
}

/* ---------- Church details -------------------------------------------------
 *
 * Rendered by the Congregation plugin's blocks and shortcodes. The plugin
 * supplies the markup and the class names; the look belongs to the theme.
 * ------------------------------------------------------------------------- */

.cong-field__label {
	color: var(--wp--preset--color--ink-muted);
	font-weight: 600;
}

/*
 * A church's own list. Same shape as the office hours, because it is the same
 * idea — a label and a value on each row — and a church that adds "Campuses"
 * or "Who to call about what" should get something that already looks like it
 * belongs on the page.
 */
.cong-detail-list,
.cong-hours,
.cong-worship {
	display: grid;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * On navy, coral reads as an error rather than as news.
 *
 * "One service today" is a helpful notice, not a warning, and the footer is
 * where most people will meet it — so on the dark bands it takes the lime the
 * rest of the site uses for "pay attention to this".
 */
.cong-footer .cong-worship__item.is-special .cong-worship__time,
.cong-footer .cong-worship__item.is-special .cong-worship__note,
.cong-band--ink .cong-worship__item.is-special .cong-worship__time,
.cong-band--ink .cong-worship__item.is-special .cong-worship__note {
	color: var(--wp--preset--color--lime);
}

.cong-band--ink .cong-worship__time,
.cong-footer .cong-worship__time {
	color: var(--wp--preset--color--lime);
}

.cong-footer .cong-worship__where,
.cong-footer .cong-worship__note,
.cong-footer__contact {
	color: var(--wp--preset--color--sky-mid);
}

/* The Sunday note on navy: the title in white, the sentence in the footer's sky. */
.cong-footer .cong-sunday-note__title,
.cong-band--ink .cong-sunday-note__title,
.cong-band--ink .cong-worship-notice__message {
	color: #fff;
}

.cong-footer .cong-sunday-note__message,
.cong-band--ink .cong-sunday-note__message {
	color: var(--wp--preset--color--sky-mid);
}

/* ---------- Component isolation --------------------------------------------
 *
 * These blocks get dropped into imported markup whose ancestors carry their
 * own typography — a heading's negative tracking, a wrapper's font size. A
 * component should look the same wherever it lands, so it restates the few
 * properties that inherit and would otherwise deform it.
 * ------------------------------------------------------------------------- */

.cong-staff,
.cong-events,
.cong-programs,
.cong-stories,
.cong-faq,
.cong-facts-panel {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 450;
	letter-spacing: normal;
	word-spacing: normal;
	line-height: 1.65;
	text-transform: none;
	text-align: start;
	color: var(--wp--preset--color--ink);
}

.cong-staff :is(h1, h2, h3, h4),
.cong-events :is(h1, h2, h3, h4),
.cong-programs :is(h1, h2, h3, h4),
.cong-stories :is(h1, h2, h3, h4) {
	letter-spacing: -0.015em;
}

/* Card titles are the card's own affordance, not prose links. */
.cong-card__title a,
.cong-staff__card .cong-card__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.cong-card__title a:hover,
.cong-card__title a:focus-visible {
	color: var(--wp--preset--color--leaf);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* On a dark band the tinted panel disappears, so it becomes a translucent
   one and the label takes the lime the rest of the band's eyebrows use. */
.cong-band--ink .cong-worship-notice,
.cong-footer .cong-worship-notice {
	background: rgb(255 255 255 / 0.08);
}

.cong-band--ink .cong-worship-notice__time,
.cong-footer .cong-worship-notice__time {
	color: #fff;
}

/* ---------- Archive pages ------------------------------------------------- */

/*
 * Category, tag and taxonomy pages.
 *
 * These are the pages nobody designs, and they are where the search engines
 * send people: a term archive is often somebody's first page on the site. One
 * block draws them all, so one set of rules dresses them all — including the
 * taxonomies a church invents later.
 */
:root {
	/* The hairline every bordered control on an archive shares. */
	--cong-line: rgb(11 42 66 / 0.18);
}

.cong-archive {
	margin-block-start: 0;
}

/*
 * The other categories, along the top.
 *
 * A term page is a dead end otherwise. These sit above the cards because the
 * useful move after landing on the wrong category is to change it, and that
 * choice should not be below a screenful of things you did not want.
 */
.cong-archive__siblings {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-block-end: var(--wp--preset--spacing--50);
}

.cong-chip {
	display: inline-block;
	padding: 0.4em 0.9em;
	border: 1px solid var(--cong-line);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.3;
	text-decoration: none;
}

.cong-chip:hover,
.cong-chip:focus-visible {
	border-color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--sky-soft);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

/* The page you are on, stated rather than merely implied by the URL. */
.cong-chip.is-current {
	border-color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

/* The block sits inside post content, where every link is underlined. A row
   of underlined pills reads as a paragraph that has come apart. */
.cong-leaders__nav .cong-chip,
.cong-leaders__nav .cong-chip:hover {
	text-decoration: none;
}

/* The years are the secondary question, and reading at the same weight as the
   services they made the bar look twice as important as the archive. */
.cong-sermon-filters__row--years .cong-chip {
	font-size: var(--wp--preset--font-size--xs);
	padding: 0.3em 0.8em;
}

.cong-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--60);
}

.cong-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.5rem;
	padding: 0.45em 0.7em;
	border: 1px solid var(--cong-line);
	border-radius: 8px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.cong-pagination .page-numbers:hover,
.cong-pagination .page-numbers:focus-visible {
	background: var(--wp--preset--color--sky-soft);
	text-decoration: none;
}

.cong-pagination .page-numbers.current {
	border-color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

.cong-pagination .page-numbers.dots {
	border-color: transparent;
}

/* ---------- Card icons ---------------------------------------------------- */

/*
 * A card's icon.
 *
 * Sized in ems so it tracks the card's own type, and drawn in the accent
 * rather than the body colour so it reads as a marker rather than as a very
 * small picture. On a dark band it inherits the band's text colour instead,
 * because the accent green on navy is the one combination in this palette
 * that stops being legible.
 */
.cong-card__icon {
	display: block;
	inline-size: 1.75em;
	block-size: 1.75em;
	margin-block-end: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--leaf);
}

.cong-band--ink .cong-card__icon,
.has-ink-background-color .cong-card__icon {
	color: currentColor;
	opacity: 0.85;
}

/* The way-finding variant leads with its title, so the icon sits beside it
   rather than above, and the row stays one line tall. */
.cong-way .cong-card__icon {
	margin-block-end: var(--wp--preset--spacing--10);
}

/* ---------- The player it opens into -------------------------------------- */

.cong-lightbox {
	inline-size: min(64rem, 92vw);
	max-inline-size: none;
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

.cong-lightbox::backdrop {
	background: rgb(6 24 38 / 0.82);
}

.cong-lightbox__inner {
	padding: var(--wp--preset--spacing--30);
}

.cong-lightbox__title {
	margin-block: 0 var(--wp--preset--spacing--20);
	font-weight: 600;
	text-wrap: balance;
}

.cong-lightbox__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 10px;
	background: #000;
}

.cong-lightbox__frame iframe {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}

.cong-lightbox__close {
	margin-block-start: var(--wp--preset--spacing--30);
	padding: 0.5em 1.4em;
	border: 2px solid rgb(255 255 255 / 0.5);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.cong-lightbox__close:hover,
.cong-lightbox__close:focus-visible {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
}

/*
 * Two things side by side.
 *
 * The two Sunday services are a comparison — same message, two rooms — and a
 * comparison read one above the other is not a comparison. Grid rather than
 * columns so both cards are the same height whatever length the descriptions
 * run to.
 */
.cong-two-up {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 52rem) {
	.cong-two-up {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.cong-two-up > * {
	margin-block: 0;
}

/*
 * A heading and the things it introduces are not the same thing.
 *
 * Most bands set a top margin on their grid by hand; the ones that were never
 * given one ran the first row of cards straight into the heading above it.
 * One rule, so a card grid dropped under a section head is spaced whether or
 * not whoever built the page remembered.
 */
.cong-section-head + .cong-grid,
.cong-section-head + .cong-cards,
.cong-section-head + .cong-archive,
.cong-section-head + .cong-staff,
.cong-section-head + .cong-programs,
.cong-section-head + .cong-course-list__grid {
	margin-block-start: var(--wp--preset--spacing--50);
}

/*
 * A long room list, on a phone.
 *
 * A booking can hold seven rooms, and spelled out in full that is seven lines
 * of grey under a two-line event name — the room drowning the thing happening
 * in it. Two lines is enough to know where to go; the rest is still in the
 * markup for anyone reading with a screen reader.
 */
@media (max-width: 48rem) {
	.cong-day__where {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* ---------- The date tile on an event card -------------------------------- */

/*
 * A little calendar block, hanging off the artwork.
 *
 * It overlaps the image rather than sitting under it so the eye finds the
 * date in the same place on every card, whatever the poster behind it is
 * doing — and so the card reads as one object rather than a picture with a
 * caption. Hidden from screen readers: the full date is in the text below,
 * and hearing "Oct 3" twice helps nobody.
 */
.cong-event {
	/* Shared by the tile's overhang and the body's top padding below. */
	--cong-tile-drop: 26px;
}

.cong-event .cong-card__media {
	position: relative;
	/*
	 * The date tile hangs below the artwork, so this box cannot clip its
	 * children. Nothing was rounding the picture itself, so on an event card
	 * — and only on an event card — the image painted its square corners
	 * straight over the card's rounded ones.
	 */
	overflow: visible;
}

.cong-event .cong-card__media img {
	border-radius: var(--cong-card-inner-radius) var(--cong-card-inner-radius) 0 0;
}

/*
 * The picture fills the 16:9 box and cannot make it taller. With the box
 * left unclipped for the date tile, its minimum height is its content's,
 * and Safari sized a tall photograph by its own height — a card two
 * screens high on an iPhone, growing as each picture arrived.
 */
.cong-event .cong-card__media {
	min-block-size: 0;
}

.cong-event .cong-card__media > img {
	position: absolute;
	inset: 0;
}

.cong-event__tile {
	position: absolute;
	/*
	 * Mostly below the artwork, hooked over its edge.
	 *
	 * Sitting inside the image it covered whatever the poster had in that
	 * corner — on the class flyer, the words "sign up at". Hanging it into
	 * the white body keeps the overlap that ties the card together and gives
	 * the design back its own bottom third.
	 *
	 * How far it hangs is a variable because the body's top padding is the
	 * same measurement seen from the other side. Written as two numbers they
	 * drifted apart, and the tile came to rest on the event's name.
	 */
	inset-block-end: calc(var(--cong-tile-drop) * -1);
	inset-inline-start: 16px;
	z-index: 2;
	display: grid;
	place-items: center;
	inline-size: 3rem;
	padding-block: 0.3rem 0.4rem;
	margin: 0;
	border-radius: 10px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 4px 14px rgb(11 42 66 / 0.28);
	line-height: 1;
	text-align: center;
}

/* A ruled cap, the way a desk calendar has one. */
.cong-event__tile::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 5px;
	border-start-start-radius: 10px;
	border-start-end-radius: 10px;
	background: var(--wp--preset--color--lime);
}

.cong-event__tile .cong-event__month {
	margin-block-start: 0.2rem;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cong-event__tile .cong-event__day {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 900;
}

/* A run of days, "DEC 23–24": wider, and the numbers a size down to fit. */
.cong-event__tile.is-range {
	inline-size: auto;
	min-inline-size: 3rem;
	padding-inline: 0.55rem;
}

.cong-event__tile.is-range .cong-event__day {
	font-size: var(--wp--preset--font-size--md, 1.125rem);
	white-space: nowrap;
}

/* Enough room for the part of the tile that hangs into the body, and no more
   — measured from the same variable, so the two cannot drift apart again. */
.cong-event .cong-card__media + .cong-card__body {
	padding-block-start: calc(var(--cong-tile-drop, 26px) + 0.25rem);
}

/* ---------- The hover preview on a calendar ------------------------------- */

/*
 * A floating card, absolutely placed on the page rather than inside the cell.
 *
 * A month grid clips its own cells, so a preview drawn inside one would be
 * cut off at the edge of the day it belongs to.
 */
.cong-peek {
	position: absolute;
	z-index: 40;
	inline-size: 260px;
	padding: 8px;
	border-radius: 12px;
	background: var(--wp--preset--color--base);
	box-shadow: 0 12px 34px rgb(11 42 66 / 0.3);
	opacity: 0;
	visibility: hidden;
	translate: 0 4px;
	transition: opacity 0.14s ease-out, translate 0.14s ease-out, visibility 0.14s;
	pointer-events: none;
}

.cong-peek.is-open {
	opacity: 1;
	visibility: visible;
	translate: 0 0;
}

.cong-peek img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: 7px;
	background: var(--wp--preset--color--sky-soft);
}

.cong-peek__label {
	margin: 7px 2px 2px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.3;
}

@media (prefers-reduced-motion: reduce) {
	.cong-peek {
		transition: none;
	}
}

/*
 * A section whose grid came back empty is not a section.
 *
 * The heading and the grid are siblings inside one group, so the block cannot
 * hide its own title — it leaves an empty marker instead and the group goes
 * with it. A program with nothing related then simply ends, rather than
 * ending with "More to explore" over blank space.
 */
.wp-block-group:has( > .cong-programs--empty ),
.wp-block-group:has( > .wp-block-columns > .wp-block-column > .cong-programs--empty ) {
	display: none;
}

/* Two full-bleed bands in a row are one surface. The page head and the
   booking band underneath it were separated by the main column's block gap,
   which showed as a stripe of white between two tinted panels. Important,
   because "More to explore" on every program page carries its own inline
   top margin, and an inline style beats any rule without it. */
.cong-page-head + .cong-band,
.cong-band + .cong-band {
	margin-block-start: 0 !important;
}

/* Two tinted bands in a row would otherwise run together as one panel. */
.cong-band--tint + .cong-band--tint {
	border-block-start: 1px solid color-mix( in srgb, var(--wp--preset--color--ink) 8%, transparent );
}

/* A hidden card must not leave a gap in the grid. */
.cong-staff .cong-grid > li[hidden] {
	display: none !important;
}

/*
 * The live band while the stream is still starting.
 *
 * `cong-band` carries hero-sized vertical padding, which around a short card
 * left most of the screen as empty colour. Tightened to the size of what is
 * in it — it is a notice, not a section.
 */
.cong-ministry__live:has( .cong-live.is-pending ) {
	padding-block: var(--wp--preset--spacing--50);
}

/* The number is a hint, not a second word: it must never compete with the
   name of the ministry beside it. */
.cong-program-filters .cong-chip__count {
	margin-inline-start: 0.35em;
	/* 0.7 is as faint as it can go and still be read (4.5:1). */
	opacity: 0.75;
	font-size: 0.85em;
	font-variant-numeric: tabular-nums;
}

/* The label goes above its row on a phone — at 5.5rem it would leave barely
   enough width for one chip per line. */
@media (max-width: 38rem) {
	.cong-program-filters__row > .cong-chip { margin-block-start: 0; }
}

/* A choice with nothing behind it, given what else is chosen. Visible so the
   row stays still as you filter, obviously not a link. */
.cong-chip.is-empty {
	opacity: 0.35;
	cursor: default;
}

/* The narrow shape lays each card out sideways: a small square of artwork
   with the words beside it, which reads as a list rather than a gallery. */
.cong-newsgrid__list .cong-card {
	display: grid;
	grid-template-columns: 7rem minmax(0, 1fr);
	gap: var(--wp--preset--spacing--30);
	align-items: center;
}

.cong-newsgrid__list .cong-card__media {
	aspect-ratio: 1;
	border-radius: var(--wp--custom--radius--md, 12px);
	overflow: hidden;
}

.cong-newsgrid__list .cong-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.cong-newsgrid__list .cong-card__title { font-size: var(--wp--preset--font-size--md); }

@container (max-width: 26rem) {
	.cong-newsgrid__list .cong-card { grid-template-columns: 4.5rem minmax(0, 1fr); }
}

/* ---------- Who to ask, under a ministry's news -------------------------- */

.cong-post-team {
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 2px solid var(--wp--preset--color--lime);
}

.cong-post-team .cong-eyebrow {
	margin: 0;
}

.cong-post-team__title {
	margin: 0.2em 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--xl);
}

.cong-post-team__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cong-post-team__person {
	display: flex;
	gap: 0.9rem;
	align-items: center;
}

.cong-post-team__photo {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--wp--preset--color--sky-soft);
}

.cong-post-team__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cong-post-team__who {
	display: grid;
	gap: 1px;
	min-width: 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.35;
}

.cong-post-team__name {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
	text-decoration: none;
}

.cong-post-team__name:hover {
	text-decoration: underline;
}

.cong-post-team__role {
	color: var(--wp--preset--color--ink-muted);
}

.cong-post-team__email {
	overflow-wrap: anywhere;
	color: var(--wp--preset--color--leaf);
}

/* ---------- An archive copy of an email --------------------------------- */

/*
 * In place of the date on a post that came from a newsletter: says it was an
 * email, when it went out, and offers the email as people received it.
 */
.cong-emailed {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	margin-block: var(--wp--preset--spacing--30) 0;
	padding: var(--wp--preset--spacing--30);
	border-radius: 14px;
	background: var(--wp--preset--color--sky-soft);
}

.cong-emailed__icon {
	flex: 0 0 2.5rem;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--base) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b2a42' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") center / 1.3rem no-repeat;
}

.cong-emailed__text {
	flex: 1 1 16rem;
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.4;
}

.cong-emailed__text strong {
	display: block;
}

.cong-emailed__button.wp-element-button {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* ---------- Where an event belongs: its program and ministry ------------- */

.cong-belongs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--30);
}

.cong-belongs__card {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--cong-line, #dde5ea);
	border-radius: 16px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cong-belongs__card:hover,
.cong-belongs__card:focus-visible {
	border-color: var(--wp--preset--color--ink);
	box-shadow: 0 4px 14px rgb(11 42 66 / 0.08);
}

.cong-belongs__photo {
	flex: 0 0 88px;
	width: 88px;
	height: 88px;
	overflow: hidden;
	border-radius: 12px;
	background: var(--wp--preset--color--sky-soft);
}

.cong-belongs__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cong-belongs__words {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.cong-belongs__label {
	color: var(--wp--preset--color--leaf);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cong-belongs__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: 1.2;
}

.cong-belongs__about {
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
}

.cong-belongs__more {
	margin-block-start: 4px;
	color: var(--wp--preset--color--leaf);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

/* The calendar page, narrowed to one ministry (includes/calendar-filter.php). */
.cong-events__filter {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size, 1200px);
	padding: var(--wp--preset--spacing--40, 1.5rem) var(--wp--style--root--padding-left, 16px) 0;
	box-sizing: border-box;
}

.cong-events__showing {
	margin: 0;
	text-align: center;
	color: var(--wp--preset--color--ink-muted, #4a6a7e);
}

.cong-events__showing a {
	margin-inline-start: 4px;
	color: var(--wp--preset--color--navy, #04436a);
	font-weight: 600;
}

/* A question's own page, and every question (blocks/faq-page, blocks/faq-index). */
.cong-faq-page,
.cong-faq-index {
	max-width: 46rem;
	margin-inline: auto;
}

.cong-faq-page__answer {
	font-size: var(--wp--preset--font-size--lg, 1.15rem);
	line-height: 1.65;
}

.cong-faq-page__about {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-top: var(--wp--preset--spacing--40, 1.5rem);
}

.cong-faq-page__about span { color: var(--wp--preset--color--ink-muted, #4a6a7e); }

.cong-faq-page__about a {
	padding: 6px 14px;
	border: 1px solid var(--wp--preset--color--line, #dbe6ed);
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
}

.cong-faq-page__more { margin-top: var(--wp--preset--spacing--60, 3rem); font-size: var(--wp--preset--font-size--xl, 1.5rem); }
.cong-faq-page__list { padding-left: 1.1em; line-height: 1.8; }
.cong-faq-page__all { margin-top: var(--wp--preset--spacing--50, 2rem); }

.cong-faq-index__find input {
	width: 100%;
	min-height: 52px;
	padding: 0 18px;
	border: 1px solid var(--wp--preset--color--line, #dbe6ed);
	border-radius: 999px;
	font: inherit;
	box-sizing: border-box;
}

.cong-faq-index__group { margin-top: var(--wp--preset--spacing--50, 2rem); }
.cong-faq-index__topic { font-size: var(--wp--preset--font-size--xl, 1.5rem); margin-bottom: 0.5em; }
.cong-faq-index__link { margin-top: 0.75em; font-size: 0.9em; }
.cong-faq-index__none { margin-top: 1.5rem; color: var(--wp--preset--color--ink-muted, #4a6a7e); }

/* ---------- Show times (blocks/event-times) ------------------------------ */

/* Each performance a ticket stub: the day small, the date big, the time
   under it. In a row while they fit, wrapping on a phone. */
.cong-times {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	list-style: none;
}

.cong-times__stub {
	display: grid;
	justify-items: center;
	gap: 0.15rem;
	min-inline-size: 7.5rem;
	padding: 0.7rem 1.1rem 0.8rem;
	border-radius: 14px;
	background: #fff;
	color: var(--wp--preset--color--ink);
	box-shadow: 0 6px 22px rgb(11 42 66 / 0.18);
	text-align: center;
	line-height: 1.1;
}

.cong-times__day {
	color: var(--wp--preset--color--leaf);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.cong-times__date {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 900;
}

.cong-times__time {
	font-size: var(--wp--preset--font-size--md, 1.05rem);
	font-weight: 700;
}

/* Glass on a photograph. */
.cong-times.is-dark .cong-times__stub {
	background: rgb(11 42 66 / 0.55);
	color: #fff;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35), 0 6px 22px rgb(0 0 0 / 0.2);
}

.cong-times.is-dark .cong-times__day {
	color: var(--wp--preset--color--lime);
}

/* Cover text shadows are for words straight on a picture, not inside these. */
.wp-block-cover .cong-times :where(span) {
	text-shadow: none;
}

/* Three performances fit across a phone. */
@media (max-width: 30rem) {
	.cong-times {
		gap: 0.5rem;
	}

	.cong-times__stub {
		flex: 1 1 0;
		min-inline-size: 0;
		max-inline-size: 7.5rem;
		padding: 0.6rem 0.4rem 0.7rem;
	}

	.cong-times__day {
		letter-spacing: 0.04em;
	}

	.cong-times__date {
		font-size: var(--wp--preset--font-size--lg);
	}
}

/*
 * "Where we stand" on About: two statements as two matching panels, each
 * with its own way to read the whole thing at the foot, level with its
 * neighbour's whatever the length of the quote.
 */
.cong-stands > .cong-stand {
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--50);
	border: 1px solid rgb(255 255 255 / 0.16);
	border-radius: 20px;
	background: rgb(255 255 255 / 0.06);
	text-align: start;
}

.cong-stand .cong-stand__quote {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	line-height: 1.35;
	text-wrap: pretty;
}

.cong-stand .cong-stand__source {
	margin: var(--wp--preset--spacing--30) 0 0;
	color: var(--wp--preset--color--sky-mid, #aed4e3);
}

.cong-stand .cong-stand__go {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--40);
}

/* Under the article, inside its column, with room above it. */
.wp-block-post-content + .cong-emailed--after,
.cong-emailed--after {
	max-inline-size: var(--wp--style--global--content-size, 44rem);
	margin: var(--wp--preset--spacing--50) auto var(--wp--preset--spacing--60);
}

/*
 * A post's picture, at the top, in its own shape: a banner stays a banner,
 * a square stays square, nothing cropped. The template asks for 16:9 (and
 * the copy saved in the Site Editor keeps asking), so the shape is undone
 * here; the height is capped so a tall logo can't fill the screen.
 */
.single-post .wp-block-post-featured-image,
.single-post .wp-block-post-featured-image img {
	aspect-ratio: auto !important;
}

.single-post .wp-block-post-featured-image {
	/* The article's width, not wider: a banner sits over the words it heads. */
	max-inline-size: var(--wp--style--global--content-size, 44rem);
	margin-inline: auto !important;
	margin-block: var(--wp--preset--spacing--30) 0 !important;
}

/*
 * Across the article's column, whatever the picture's own size: a 600px
 * email banner was a small strip in the middle of the page. A tall picture
 * is capped and shown whole.
 */
.single-post .wp-block-post-featured-image img {
	display: block;
	inline-size: 100% !important;
	block-size: auto !important;
	max-block-size: 70vh;
	object-fit: contain;
	border-radius: 16px;
}

/* Less air between the title, the picture, the words and the box. */
.single-post .wp-block-post-content {
	padding-block: var(--wp--preset--spacing--40) 0 !important;
}

.single-post .wp-block-post-content > :last-child {
	margin-block-end: 0;
}

/*
 * A full-width section inside a news post (the podcast band under a Weekly
 * Update) reaches the edges of the window. A post's column is narrow, and
 * "full width" inside it only filled the column.
 */
.single-post .wp-block-post-content > .alignfull {
	inline-size: 100vw;
	max-inline-size: none;
	margin-inline: calc(50% - 50vw);
}

/*
 * The pastor's card under a news post: part of the article, not a band of
 * its own, so a little room above it and none below, and a smaller photo.
 */
.single-post .wp-block-post-content > .cong-ask {
	padding-block: var(--wp--preset--spacing--40) 0 !important;
	padding-inline: 0 !important;
}

.single-post .wp-block-post-content > .cong-ask .cong-ask__portrait {
	flex: 0 0 9rem;
	max-inline-size: 9rem;
}

.single-post .wp-block-post-content > .cong-ask .cong-ask__inner {
	gap: var(--wp--preset--spacing--40);
	justify-content: flex-start;
}

/* The podcast under a Weekly Update reaches the edges of the window. */
.single-post .cong-post-podcast > .alignfull {
	inline-size: 100vw;
	max-inline-size: none;
	margin-inline: calc(50% - 50vw);
	margin-block: 0;
}

/* Cards side by side in a row (Join the Church steps, Student Leadership teams) are the same height; a button lines up at the bottom. */
.cong-join-step,
.cong-team-card {
	block-size: 100%;
	display: flex;
	flex-direction: column;
}

.cong-join-step > .wp-block-buttons,
.cong-team-card > .wp-block-buttons {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--30);
}

/* A day's service times: one row each, the time first, notes in small type under it. */
.cong-service-times {
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
}

.cong-service-times > li {
	padding-block: var(--wp--preset--spacing--20);
	border-block-start: 1px solid color-mix( in srgb, var(--wp--preset--color--ink) 10%, transparent );
}

.cong-service-times > li:first-child {
	border-block-start: 0;
}

.cong-service-times strong {
	color: var(--wp--preset--color--ink);
	margin-inline-end: 0.35em;
}

.cong-service-times__note {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink-muted);
}

/* Short names in a grid of pills: the shops at the Holiday Marketplace. */
.cong-chip-list {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 13rem, 1fr ) );
	gap: var(--wp--preset--spacing--20);
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--40);
	padding: 0;
}

.cong-chip-list > li {
	margin: 0;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--sky-mid);
	border-radius: 14px;
	background: var(--wp--preset--color--base);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.cong-chip-list > li em {
	font-weight: 400;
	color: var(--wp--preset--color--ink-muted);
}

/* A list of costs: the name, the amount at the far end of the line, a note under it. */
.cong-costs {
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
}

.cong-costs > li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--20);
	border-block-start: 1px solid color-mix( in srgb, var(--wp--preset--color--ink) 10%, transparent );
}

.cong-costs > li:first-child { border-block-start: 0; }
.cong-costs > li > br { display: none; }

.cong-costs strong { color: var(--wp--preset--color--ink); }

.cong-costs__amount {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}

.cong-costs__note {
	flex-basis: 100%;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink-muted);
}

/* A campaign goal: one large number. */
.cong-goal__number {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp( 2.75rem, 7vw, 4.5rem );
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
	font-variant-numeric: tabular-nums;
}

/* What the number counts, right under it rather than a paragraph's gap away. */
.cong-goal__number + p {
	margin-block-start: var(--wp--preset--spacing--10);
	font-weight: 600;
}

/* Scripture at the head of a section: the words, then the reference, no bar. */
.wp-block-quote.cong-scripture {
	margin-block: var(--wp--preset--spacing--30);
	padding: 0;
	border: 0;
	font-style: italic;
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--ink);
}

.wp-block-quote.cong-scripture cite {
	display: block;
	margin-block-start: var(--wp--preset--spacing--20);
	font-style: normal;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--leaf);
}

/* ---------- The homepage, on a phone -------------------------------------
 *
 * Twenty-one screens on a phone: every row of cards stacked one under the
 * next, so six events, six pastors and three stories were each a screen or
 * two. On a phone those rows become one line you swipe along, with the next
 * card showing at the edge to say there is more, and the ministries go two
 * across. Wider screens are unchanged.
 * ------------------------------------------------------------------------- */
@media (max-width: 48rem) {
	body.home .cong-events--grid .cong-grid,
	body.home .cong-staff .cong-grid,
	body.home .cong-stories .cong-grid {
		display: flex;
		/* From the left, always. The staff grid centres its cards, and a
		   centred row wider than the screen spills off the left edge where
		   no scroll reaches: the first pastor could not be seen at all. */
		justify-content: flex-start;
		gap: var(--wp--preset--spacing--30);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		/* A thin scrollbar, not none: a phone swipes, but a mouse or a
		   trackpad in a narrow window has nothing else to move it by. */
		scrollbar-width: thin;
		scrollbar-color: rgb(11 42 66 / 0.3) transparent;
		padding-block: 0.25rem 1rem;
	}

	body.home .cong-events--grid .cong-grid > li,
	body.home .cong-staff .cong-grid > li,
	body.home .cong-stories .cong-grid > li {
		flex: 0 0 80%;
		/* Its share of the row and no more: Safari let a card's picture
		   widen the card to the picture's own width. */
		min-inline-size: 0;
		max-inline-size: 80%;
		scroll-snap-align: start;
	}

	body.home .cong-events--grid .cong-grid > li > *,
	body.home .cong-staff .cong-grid > li > *,
	body.home .cong-stories .cong-grid > li > * {
		min-inline-size: 0;
	}

	body.home .cong-staff .cong-grid > li {
		flex-basis: 62%;
		max-inline-size: 62%;
	}

	.cong-ministries.cong-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--20);
	}

	.cong-ministries .cong-card__title {
		font-size: var(--wp--preset--font-size--sm);
	}
}