/*
 * Ministry pages, fact panels and the shared prose treatment.
 */

/* ---------- Prose --------------------------------------------------------- */

.cong-prose > :first-child { margin-top: 0; }
.cong-prose > :last-child  { margin-bottom: 0; }

.cong-prose p {
	margin-block: 0 1em;
	max-width: var(--wp--custom--measure--wide);
}

.cong-prose--large p {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.4;
}

/* ---------- Ministry hero -------------------------------------------------- */

.cong-ministry__hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(60vh, 34rem);
	padding: var(--wp--preset--spacing--70) clamp(1.25rem, 5vw, 3rem);
	overflow: hidden;
	color: #fff;
}

.cong-ministry__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.cong-ministry__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		100deg,
		rgba(4, 67, 106, 0.9) 0%,
		rgba(4, 67, 106, 0.66) 46%,
		rgba(4, 67, 106, 0.2) 100%
	);
}

.cong-ministry__hero-body {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 76rem;
	margin-inline: auto;
}

.cong-ministry__hero h1 {
	margin: 0;
	color: #fff;
	font-size: var(--wp--preset--font-size--huge);
	line-height: 1.03;
	text-wrap: balance;
}

.cong-ministry__lede {
	margin: var(--wp--preset--spacing--30) 0 0;
	max-width: 34rem;
	color: rgba(255, 255, 255, 0.92);
	font-size: var(--wp--preset--font-size--lg);
}

.cong-ministry__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--40) 0 0;
}

/* ---------- Bands inside a ministry page ---------------------------------- */

.cong-ministry > section {
	padding-block: var(--wp--preset--spacing--70);
	padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.cong-ministry > section > * {
	max-width: 76rem;
	margin-inline: auto;
}

.cong-ministry .cong-section-head {
	margin-bottom: var(--wp--preset--spacing--50);
}

.cong-ministry .cong-section-head .cong-prose {
	margin-inline: auto;
}

.cong-ministry .cong-section-head .cong-prose p {
	margin-inline: auto;
	color: var(--wp--preset--color--ink-muted);
}

.cong-ministry h2 {
	margin: 0;
	text-wrap: balance;
}

.cong-ministry__welcome-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

@media (max-width: 52rem) {
	.cong-ministry__welcome-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.cong-ministry__gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * The welcome photographs are a core gallery now rather than a hand-written
 * list, so the same two-up grid has to reach core's markup. Core lays a
 * gallery out with flex and sets a width on each figure; both have to go, or
 * the pictures stack in one column at half width.
 */
.cong-ministry__gallery.wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--20);
}

.cong-ministry__gallery.wp-block-gallery.has-nested-images > figure.wp-block-image {
	width: auto;
	margin: 0;
	flex: none;
}

.cong-ministry__gallery img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--md);
	display: block;
	/* WordPress prints width/height attributes on every image. Those are
	   presentational hints, so a definite height beats the aspect-ratio
	   above it and the crop silently stops working — height:auto hands
	   the sizing back to the ratio. */
	height: auto;
}

/* The same pictures in a row of their own, under the intro band. */
.cong-band.cong-ministry__pictures {
	padding-block: var(--wp--preset--spacing--40) !important;
}

.cong-ministry__gallery.cong-ministry__gallery--row.wp-block-gallery.has-nested-images {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	max-width: var(--wp--style--global--wide-size, 76rem);
	margin-inline: auto;
}

@media (max-width: 40rem) {
	.cong-ministry__gallery.cong-ministry__gallery--row.wp-block-gallery.has-nested-images {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.cong-ministry__gallery li:first-child:nth-last-child(3) {
	grid-column: span 2;
}

/*
 * The "Who we are" band under a ministry's header: the same room above and
 * below on every ministry page. Bands otherwise take the large default above
 * and a smaller one below when another band follows (layout.css, which uses
 * !important for that), and a page edited by hand could carry its own
 * padding too — so this is the one place that decides, and it wins.
 */
.cong-band.cong-ministry__mission {
	padding-block: var(--wp--preset--spacing--50) !important;
}

/* A short practical note — where to check in, when it meets — set apart
   from the programs above it, and quieter than the intro. */
.cong-band.cong-ministry__practical {
	padding-block: var(--wp--preset--spacing--40) !important;
}

.cong-band.cong-ministry__practical > .cong-ministry__practical-body {
	box-sizing: border-box;
	/* The intro's 46rem column plus this box's own padding, so the box's text
	   lines up with the intro's text above it. !important for the same
	   reason as the intro: the constrained layout's own margins and padding
	   win otherwise, and the box spans the page with its text adrift. */
	max-width: calc(46rem + 2 * var(--wp--preset--spacing--40)) !important;
	margin-inline: auto !important;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) !important;
	border-inline-start: 4px solid var(--wp--preset--color--lime, #aebc21);
	border-radius: var(--wp--custom--radius--md, 12px);
	background: var(--wp--preset--color--sky-soft, #eef6fb);
}

.cong-ministry__practical-body > * {
	max-width: none !important;
	margin-inline: 0 !important;
}

.cong-ministry__practical-body > p {
	margin-block: 0;
}

.cong-ministry__practical-body > p + p {
	margin-block-start: 0.5rem;
}

/*
 * One column, everything in the band left-aligned to it: the label, the
 * intro, and anything after it such as "Follow along".
 *
 * The group is a constrained layout, so WordPress centres each child at the
 * content width with !important margins and adds the page's side padding —
 * which left the label at the band's edge, the text in a column of its own,
 * and the social links back at the edge again. These rules take that over
 * for this band only.
 */
.cong-band.cong-ministry__mission > .cong-ministry__mission-body,
.cong-band.cong-ministry__mission > .cong-social {
	box-sizing: border-box;
	max-width: 46rem !important;
	margin-inline: auto !important;
	padding-inline: 0 !important;
	text-align: start;
}

.cong-ministry__mission-body > * {
	max-width: none !important;
	margin-inline: 0 !important;
}

/* Left-aligned, so the label keeps its short rule like every other eyebrow. */
.cong-ministry__mission-body .cong-eyebrow {
	justify-content: flex-start;
}

.cong-band.cong-ministry__mission > .cong-social {
	margin-block-start: var(--wp--preset--spacing--40) !important;
}

.cong-ministry__split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}

/*
 * Two classes deep, to out-specify the band rule in layout.css that centres
 * and caps every direct child of a band. A split section is a two-column grid
 * and its halves are the columns — they must not be centred inside a reading
 * measure, or the layout quietly becomes one narrow column in the middle.
 */
.cong-ministry__split.cong-band > *,
.cong-ministry__split > * {
	margin-inline: 0;
	max-width: none;
}

.cong-ministry__split .cong-ministry__split-body {
	max-width: 34rem;
}

.cong-ministry__split.is-reversed .cong-ministry__split-media {
	order: 2;
}

.cong-ministry__split-media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--lg);
	display: block;
	/* WordPress prints width/height attributes on every image. Those are
	   presentational hints, so a definite height beats the aspect-ratio
	   above it and the crop silently stops working — height:auto hands
	   the sizing back to the ratio. */
	height: auto;
}

@media (max-width: 52rem) {
	.cong-ministry__split {
		grid-template-columns: minmax(0, 1fr);
	}
	.cong-ministry__split.is-reversed .cong-ministry__split-media {
		order: 0;
	}
}

.cong-ministry__roles {
	display: grid;
	gap: 0.3rem;
	margin: var(--wp--preset--spacing--30) 0;
	padding: 0;
	list-style: none;
}

.cong-ministry__roles a {
	color: inherit;
	text-underline-offset: 0.16em;
}

.cong-ministry__more {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	justify-content: center;
	margin-top: var(--wp--preset--spacing--50);
}

/* ---------- Fact panels ---------------------------------------------------- */

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

.cong-facts-panel--inline {
	margin-bottom: var(--wp--preset--spacing--50);
}

.cong-facts-panel .cong-facts + .cong-facts__actions,
.cong-facts-panel .cong-facts + .cong-downloads {
	margin-top: var(--wp--preset--spacing--40);
}

.cong-facts__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
}

.cong-downloads {
	display: grid;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cong-downloads a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--wp--preset--color--ink);
	font-weight: 500;
	text-decoration: none;
}

.cong-downloads a:hover {
	color: var(--wp--preset--color--leaf);
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

/*
 * The arrow, drawn by the stylesheet rather than written into the markup.
 *
 * The downloads used to come from a repeater field that rendered its own
 * <span class="cong-downloads__icon">. They are an ordinary list now, written
 * in the editor, so the icon has to come from the link itself — otherwise a
 * download somebody adds next year looks different from the ones migrated.
 * The old class is kept working for anything still rendering it.
 */
.cong-downloads li > a::before {
	content: "\2193";
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 1.6rem;
	height: 1.6rem;
	background: var(--wp--preset--color--lime-soft);
	border-radius: 50%;
	color: var(--wp--preset--color--leaf);
	font-size: 0.85rem;
}

.cong-downloads li > a:has(.cong-downloads__icon)::before {
	content: none;
}

.cong-downloads__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 1.6rem;
	height: 1.6rem;
	background: var(--wp--preset--color--lime-soft);
	border-radius: 50%;
	color: var(--wp--preset--color--leaf);
	font-size: 0.85rem;
}

.cong-apply h2 {
	margin-top: 0;
}

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

/* ---------- Buttons used outside the block editor -------------------------- */

a.wp-element-button.is-ghost,
a.wp-element-button.is-ghost-dark {
	background: transparent;
	border: 2px solid currentColor;
}

a.wp-element-button.is-ghost {
	color: #fff;
}

a.wp-element-button.is-ghost:hover {
	background: #fff;
	color: var(--wp--preset--color--ink);
}

a.wp-element-button.is-ghost-dark {
	color: var(--wp--preset--color--ink);
}

a.wp-element-button.is-ghost-dark:hover {
	background: var(--wp--preset--color--ink);
	color: #fff;
}

a.wp-element-button.is-lime {
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--ink);
}

/* ---------- Full story ----------------------------------------------------- */

.cong-story-full {
	max-width: 46rem;
	margin: 0 auto;
	text-align: center;
	color: #fff;
}

.cong-story-full__photo img {
	width: 7.5rem;
	height: 7.5rem;
	object-fit: cover;
	border-radius: 50%;
	margin: 0 auto var(--wp--preset--spacing--40);
	display: block;
}

.cong-story-full__quote {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.45;
}

.cong-story-full__who {
	margin-top: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--sky-mid);
	font-size: var(--wp--preset--font-size--sm);
}

.cong-story-full__who strong,
.cong-story-full__who h1 {
	display: block;
	margin: 0;
	color: #fff;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 700;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
}

/* ---------- Inverted bands -------------------------------------------------
 *
 * theme.json colors headings with `--wp--preset--color--ink`, which is the
 * same deep blue these bands use as a background. Anything inside one has to
 * be re-colored explicitly or it disappears.
 * ------------------------------------------------------------------------- */

.cong-band--ink,
.cong-band--ink p,
.cong-band--ink li,
.cong-band--ink dd {
	color: rgba(255, 255, 255, 0.92);
}

.cong-band--ink :is(h1, h2, h3, h4, h5, h6),
.cong-band--ink .cong-ministry__split-body h2,
.cong-band--ink strong {
	color: #fff;
}

/*
 * The footer is a dark band too.
 *
 * theme.json styles every link olive with a solid underline, at a specificity
 * of one element — fine against white, unreadable on navy, and its hover goes
 * to the ink blue the footer is painted with, so the link vanished under the
 * cursor. Named here alongside the ink bands because it is the same problem
 * and should stay the same answer.
 */
.cong-band--ink a:not(.wp-element-button),
.cong-poster a:not(.wp-element-button),
.cong-footer a:not(.wp-element-button) {
	color: var(--wp--preset--color--sky-mid);
	/* A quieter rule than the text it sits under: present enough to read as a
	   link, not so present that three stacked contact lines look like a list
	   of corrections. */
	text-decoration-color: rgb(255 255 255 / 0.35);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.cong-band--ink a:not(.wp-element-button):hover,
.cong-band--ink a:not(.wp-element-button):focus-visible,
.cong-poster a:not(.wp-element-button):hover,
.cong-poster a:not(.wp-element-button):focus-visible,
.cong-footer a:not(.wp-element-button):hover,
.cong-footer a:not(.wp-element-button):focus-visible {
	color: #fff;
	text-decoration-color: currentColor;
}

.cong-band--ink dt,
.cong-poster .cong-poster__label,
.cong-band--ink .cong-eyebrow {
	color: var(--wp--preset--color--lime);
}

.cong-band--ink .cong-facts-panel {
	background: rgba(255, 255, 255, 0.07);
}

/* Event cards in a ministry page carry no image, so they need a little more
   presence than an empty white box. */
.cong-ministry__events .cong-card {
	border-left: 3px solid var(--wp--preset--color--lime);
}

.cong-ministry__events .cong-card__meta {
	color: var(--wp--preset--color--ink-muted);
}

/* Program cards without a featured image should not collapse. */
.cong-ministry__programs .cong-card__title {
	margin-top: auto;
}

/*
 * Prose a ministry wrote itself, between the automatic sections.
 *
 * These paragraphs used to be meta fields rendered inside a block, so they
 * inherited its width. Moved into the page they became top-level blocks
 * sitting between full-bleed bands, with no container of their own — which is
 * why they ran wider than everything around them and the gaps either side
 * looked like a mistake. The band gives them the same measure as the rest of
 * the page.
 */
/*
 * `.wp-block-group` on the front of the selector so this outranks the layout
 * system, which gives any constrained group the theme's wide measure — 1216px
 * here, which is a fine width for a grid of cards and far too wide for a
 * paragraph somebody has to read.
 */
.wp-block-group.cong-ministry__prose {
	max-inline-size: 46rem;
	margin-inline: auto;
}

/*
 * And a band around two sentences does not need a band's padding.
 *
 * The default is right for a section with a heading, a grid and a button; on
 * one paragraph it was 101px above and below 57px of text, which is what the
 * gap in the middle of these pages actually was.
 */
.cong-band:has( > .cong-ministry__prose ) {
	padding-block: var(--wp--preset--spacing--50);
}

.cong-ministry__prose > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.cong-ministry__prose img {
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--wp--custom--radius--lg, 0.75rem);
}

/* ---------- Ways to help, on the ministry's own page ---------------------- */

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

.cong-serve__role {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--lg, 0.75rem);
	border-top: 2px solid var(--wp--preset--color--lime);
}

.cong-serve__name { margin: 0; font-size: var(--wp--preset--font-size--md); line-height: 1.25; }
.cong-serve__name a { color: inherit; text-decoration: none; }
.cong-serve__name a:hover { color: var(--wp--preset--color--leaf); }

.cong-serve__meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; }

.cong-serve__days,
.cong-serve__gift {
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--xs, 0.75rem);
}

.cong-serve__days { background: var(--wp--preset--color--sky-soft); color: var(--wp--preset--color--ink); }
.cong-serve__gift { background: var(--wp--preset--color--lime-soft); color: var(--wp--preset--color--leaf); }

.cong-serve__signup { margin: auto 0 0; padding-block-start: 0.3rem; font-size: var(--wp--preset--font-size--sm); }
.cong-serve__signup a { color: var(--wp--preset--color--leaf); font-weight: 600; text-decoration: none; }
.cong-serve__signup a:hover { text-decoration: underline; }

.cong-serve__more { margin-block-start: var(--wp--preset--spacing--40); text-align: center; }

/* ---------- Voices, on a ministry's own page ------------------------------ */

.cong-voices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--40);
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	list-style: none;
}

.cong-voice {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--lg, 0.75rem);
}

.cong-voice__face img {
	inline-size: 4.5rem;
	block-size: 4.5rem;
	object-fit: cover;
	border-radius: 50%;
}

.cong-voice__quote {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.45;
}

/*
 * The quote marks are drawn rather than typed, so the church writes the
 * sentence and not the punctuation around it.
 */
.cong-voice__quote p::before { content: "\201C"; }
.cong-voice__quote p::after { content: "\201D"; }

.cong-voice__who { margin: auto 0 0; font-size: var(--wp--preset--font-size--sm); }
.cong-voice__who a { color: inherit; text-decoration: none; }
.cong-voice__who a:hover .cong-voice__name { color: var(--wp--preset--color--leaf); }
.cong-voice__name { display: block; font-weight: 700; }
.cong-voice__where { color: var(--wp--preset--color--ink-muted); }

.cong-ministry__faq-list { max-inline-size: 48rem; margin-inline: auto; margin-block-start: var(--wp--preset--spacing--40); }

/* "Follow along" inside the intro is a line, not a section: the label and
   the links sit together, at the size of the text above them. */
.cong-band.cong-ministry__mission > .cong-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
}

.cong-band.cong-ministry__mission .cong-social__heading {
	inline-size: auto;
	margin: 0;
	font-size: var(--wp--preset--font-size--base, 1rem);
	font-weight: 700;
}

.cong-band.cong-ministry__mission .cong-social__list {
	inline-size: auto;
	margin: 0;
}