/*
 * 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.
 *
 * 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 — and anything else sits inside it against the page tint. The
 * band that leaves on a square photograph is a margin; the band it leaves on a
 * tall masthead is the reason you can still read it.
 *
 * 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: contain;
}

/*
 * Nearly 16:9 fills the box. A graphic made at 1200 × 660, or one whose
 * thumbnail rounded a pixel, shown whole left a hairline of the grey tint
 * across its top and bottom edge — which looked like a broken border on
 * the card. Within a few percent of the box, filling it trims a sliver
 * nobody would miss (site.js marks those); anything really another shape is
 * still shown whole.
 */
.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);
}

/* ---------- 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 {
	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;
}

.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;
}

/* 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. */
.cong-page-head + .cong-band,
.cong-band + .cong-band {
	margin-block-start: 0;
}

/* 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);
}