/*
 * Church single-listing page.
 *
 * Loaded only on `place` listings in the `church` category, behind the
 * `.mfv-church-page` body class, so nothing here can reach another listing type.
 *
 * Two theme-wide traps this file has to work around, both documented in the
 * child theme's own stylesheet:
 *
 *  1. Global `h1…h6 { font-size: … !important }` rules at (0,0,1). Every heading
 *     here is therefore sized through a class selector — (0,2,0) or better — and
 *     also marked !important, because an !important-vs-!important tie is decided
 *     on specificity and a bare element selector loses it.
 *  2. Global link-hover colour, likewise !important. Links inside cards restate
 *     their hover through a class chain for the same reason.
 *
 * Colours come from the palette variables so a palette change moves the page
 * with it; the few literals are neutrals the palette does not define.
 */

/*
 * ⚠️ The tokens live on BOTH scopes.
 *
 * `.mfv-ch` is the fork's page wrapper. The native rendering has no such
 * element — MyListing owns the page shell there — so every var(--ch-*) in the
 * skin resolved to nothing and the Plan Your Visit panel and its trigger both
 * rendered fully transparent. Naming the body class too gives the same palette
 * to both renderings from one place, which is the point: they are meant to be
 * one visual language, not two that drift.
 */
.mfv-ch,
body.mfv-church-native {
	--ch-bg: #f4f6f8;
	--ch-card: #ffffff;
	--ch-line: #e4eaef;
	--ch-line-soft: #eef2f5;
	--ch-ink: #17232e;
	--ch-ink-2: #35485a;
	--ch-muted: #6b7d8c;
	--ch-teal: var(--mfv-primary, #0e7490);
	--ch-teal-dark: var(--mfv-primary-dark, #0c6680);
	--ch-teal-wash: #e9f2f6;
	--ch-amber: #e3a04a;
	--ch-radius: 10px;
	--ch-shadow: 0 1px 2px rgba(23, 35, 46, .05), 0 1px 3px rgba(23, 35, 46, .04);
	--ch-gap: 18px;
}

/*
 * ⚠️ The fork's PAGE properties stay on `.mfv-ch` alone.
 *
 * The token block above is shared with the native rendering's body, but these
 * are layout, not palette: `padding-bottom: 48px` clears the fork's own fixed
 * bottom bar, and on the native body it simply added 48px of teal below the
 * footer — a strip with nothing in it that the page still scrolled through.
 * Tokens are safe to share; box properties are not.
 */
.mfv-ch {
	background: var(--ch-bg);
	color: var(--ch-ink);
	font-family: var(--mfl-font-body, inherit);
	padding-bottom: 48px;
}

.mfv-ch *,
.mfv-ch *::before,
.mfv-ch *::after { box-sizing: border-box; }

.mfv-ch .no-list-style { list-style: none; margin: 0; padding: 0; }

.mfv-ch .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap;
}

/* Icons inherit their colour from whatever they sit inside. */
.mfv-ch .mfv-ch-i { flex: none; vertical-align: middle; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.mfv-ch .mfv-ch-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;                 /* WCAG target size */
	padding: 10px 20px;
	border: 1px solid transparent;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.mfv-ch .mfv-ch-btn--primary,
.mfv-ch .mfv-ch-btn--primary:visited {
	background: var(--ch-teal);
	border-color: var(--ch-teal);
	color: #fff !important;
}
.mfv-ch .mfv-ch-btn--primary:hover,
.mfv-ch .mfv-ch-btn--primary:focus-visible {
	background: var(--ch-teal-dark) !important;
	border-color: var(--ch-teal-dark);
	color: #fff !important;
}

.mfv-ch .mfv-ch-btn--outline,
.mfv-ch .mfv-ch-btn--outline:visited {
	background: transparent;
	border-color: var(--ch-teal);
	color: var(--ch-teal) !important;
}
.mfv-ch .mfv-ch-btn--outline:hover,
.mfv-ch .mfv-ch-btn--outline:focus-visible {
	background: var(--ch-teal) !important;
	color: #fff !important;
}

.mfv-ch .mfv-ch-btn--wide { min-width: 210px; }
.mfv-ch .mfv-ch-btn--block { display: flex; width: 100%; }

.mfv-ch a:focus-visible,
.mfv-ch button:focus-visible {
	outline: 2px solid var(--ch-teal);
	outline-offset: 2px;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.mfv-ch-hero {
	position: relative;
	min-height: clamp(280px, 27vw, 380px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: #143642;
}

/* Three equal panes; a church with fewer photos simply gets fewer, and the
   flex fill keeps them edge to edge rather than leaving a gap. */
.mfv-ch-hero__collage {
	position: absolute;
	inset: 0;
	display: flex;
}
.mfv-ch-hero__pane {
	flex: 1 1 0;
	min-width: 0;
	background-size: cover;
	background-position: center;
}

/* Dark on the left where the name sits, lighter on the right so the collage
   still reads as photography rather than a flat colour field. */
.mfv-ch-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(11, 33, 42, .92) 0%, rgba(11, 33, 42, .72) 42%, rgba(11, 33, 42, .48) 100%),
		linear-gradient(0deg, rgba(11, 33, 42, .78) 0%, rgba(11, 33, 42, .12) 55%);
}
/* No photos: a shorter band rather than 380px of empty gradient, and the
   primary button flips to white — a teal button on a teal field disappears. */
.mfv-ch-hero.is-plain { min-height: clamp(200px, 17vw, 250px); }
.mfv-ch-hero.is-plain .mfv-ch-hero__scrim {
	background: linear-gradient(120deg, #10485c 0%, #0e7490 62%, #12849f 100%);
}
.mfv-ch-hero.is-plain .mfv-ch-btn--primary,
.mfv-ch-hero.is-plain .mfv-ch-btn--primary:visited {
	background: #fff;
	border-color: #fff;
	color: var(--ch-teal-dark) !important;
}
.mfv-ch-hero.is-plain .mfv-ch-btn--primary:hover,
.mfv-ch-hero.is-plain .mfv-ch-btn--primary:focus-visible {
	background: #eaf5f8 !important;
	border-color: #eaf5f8;
	color: var(--ch-teal-dark) !important;
}

.mfv-ch-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 32px 20px 30px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.mfv-ch-hero__identity {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
}

.mfv-ch-emblem {
	flex: none;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--ch-amber);
	color: #fff;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, .16);
}

.mfv-ch-hero__text { min-width: 0; }

.mfv-ch .mfv-ch-hero__name {
	margin: 0 0 4px !important;
	font-size: clamp(23px, 2.7vw, 36px) !important;
	font-weight: 700 !important;
	line-height: 1.15 !important;
	color: #fff !important;
	letter-spacing: -0.015em;
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
}

.mfv-ch-verified { display: inline-flex; color: #38bdf8; }

.mfv-ch .mfv-ch-hero__sub {
	margin: 0 0 9px !important;
	font-size: 14px;
	color: rgba(255, 255, 255, .86);
}

.mfv-ch-hero__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 18px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .9);
}
.mfv-ch-hero__rating { display: inline-flex; align-items: center; gap: 7px; }
.mfv-ch-hero__rating b { color: #fff; }
.mfv-ch-hero__src { font-style: normal; opacity: .7; font-size: 12.5px; }

/* A divider rule rather than a bullet: a "·" between a star row and a time
   reads as part of the time. */
.mfv-ch-hero__next {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-left: 18px;
	border-left: 1px solid rgba(255, 255, 255, .28);
}
.mfv-ch-hero__meta > :first-child.mfv-ch-hero__next {
	padding-left: 0;
	border-left: 0;
}
.mfv-ch-hero__next b { color: #fff; }

.mfv-ch-stars { display: inline-flex; gap: 1px; color: #f5a623; }
.mfv-ch-star.is-empty { opacity: .28; }
.mfv-ch-star.is-half { opacity: .62; }
.mfv-ch-star svg { fill: currentColor; }

.mfv-ch-hero__actions {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
}

.mfv-ch-hero__minor { display: flex; gap: 10px; }
.mfv-ch-hero__minor > li { flex: 1 1 0; }

/* MyListing's quick-action templates emit the <li> and the <a>; they are
   restyled here rather than duplicated, so bookmark state and the share modal
   keep their own behaviour. */
.mfv-ch .mfv-ch-qa > a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 42px;
	padding: 9px 16px;
	border: 1px solid rgba(255, 255, 255, .38);
	border-radius: 7px;
	background: rgba(12, 32, 41, .38);
	backdrop-filter: blur(3px);
	color: #fff !important;
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none !important;
	white-space: nowrap;
	transition: background-color .16s ease, border-color .16s ease;
}
.mfv-ch .mfv-ch-qa > a:hover,
.mfv-ch .mfv-ch-qa > a:focus-visible {
	background: rgba(12, 32, 41, .62) !important;
	border-color: rgba(255, 255, 255, .7);
	color: #fff !important;
}
.mfv-ch .mfv-ch-qa > a.bookmarked { color: #ffd6d6 !important; }
.mfv-ch .mfv-ch-qa > a.bookmarked .mfv-ch-i { fill: currentColor; }
.mfv-ch .mfv-ch-qa i:empty { display: none; }

.mfv-ch-hero__credit {
	position: absolute;
	right: 12px;
	bottom: 6px;
	z-index: 2;
	margin: 0;
	font-size: 10.5px;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .55);
}

/* ── Quick bar + visit strip ─────────────────────────────────────────────── */

.mfv-ch-quickbar,
.mfv-ch-strip {
	max-width: 1200px;
	margin: var(--ch-gap) auto 0;
	padding: 0 20px;
}

.mfv-ch-quickbar ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--ch-card);
	border: 1px solid var(--ch-line);
	border-radius: var(--ch-radius);
	box-shadow: var(--ch-shadow);
	overflow: hidden;
}
.mfv-ch-quickbar li { flex: 1 1 0; min-width: 0; }
.mfv-ch-quickbar li + li { border-left: 1px solid var(--ch-line-soft); }

/* Covers both plain cells and the Send Message cell, which is MyListing's own
   quick-action template rendered into the same bar. */
.mfv-ch .mfv-ch-quickbar a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 52px;
	padding: 14px 12px;
	color: var(--ch-ink) !important;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none !important;
	transition: background-color .14s ease;
}
.mfv-ch .mfv-ch-quickbar i:empty { display: none; }
.mfv-ch .mfv-ch-quickbar a .mfv-ch-i { color: var(--ch-teal); }
.mfv-ch .mfv-ch-quickbar a:hover,
.mfv-ch .mfv-ch-quickbar a:focus-visible {
	background: var(--ch-teal-wash);
	color: var(--ch-teal-dark) !important;
}

.mfv-ch-strip {
	display: flex;
	align-items: center;
	gap: 20px;
}
.mfv-ch-strip__items {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 8px 26px;
	list-style: none;
	margin: 0;
	padding: 18px 22px;
	background: var(--ch-card);
	border: 1px solid var(--ch-line);
	border-radius: var(--ch-radius);
	box-shadow: var(--ch-shadow);
}
/* The strip's own button sits outside the panel in the mockup, so the panel
   keeps its full width and the button aligns to its right edge. */
.mfv-ch-strip > .mfv-ch-btn { flex: none; align-self: stretch; }

.mfv-ch-strip__items > li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	min-width: 0;
}
.mfv-ch-strip__ico {
	flex: none;
	color: var(--ch-teal);
	margin-top: 1px;
}
.mfv-ch-strip__text { min-width: 0; }
.mfv-ch-strip__label {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ch-muted);
	margin-bottom: 2px;
}
.mfv-ch-strip__value {
	display: block;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--ch-ink-2);
}
.mfv-ch-strip__value b { color: var(--ch-teal); font-weight: 700; }
.mfv-ch-strip__value span { color: var(--ch-muted); margin: 0 2px; }

/* ── Grid + card chrome ──────────────────────────────────────────────────── */

.mfv-ch-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 372px;
	align-items: start;
	gap: var(--ch-gap);
	max-width: 1200px;
	margin: var(--ch-gap) auto 0;
	padding: 0 20px;
}
.mfv-ch-col { display: flex; flex-direction: column; gap: var(--ch-gap); min-width: 0; }

.mfv-ch-card {
	background: var(--ch-card);
	border: 1px solid var(--ch-line);
	border-radius: var(--ch-radius);
	box-shadow: var(--ch-shadow);
	overflow: hidden;
}

.mfv-ch-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 15px 18px;
	border-bottom: 1px solid var(--ch-line-soft);
}
.mfv-ch-card__title {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	color: var(--ch-teal);
}
.mfv-ch .mfv-ch-card__heading {
	margin: 0 !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--ch-ink) !important;
	letter-spacing: -0.005em;
}
.mfv-ch .mfv-ch-card__action {
	flex: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--ch-teal) !important;
	text-decoration: none !important;
}
.mfv-ch .mfv-ch-card__action:hover { text-decoration: underline !important; }

.mfv-ch-card__body { padding: 16px 18px 18px; }

/* ── Owner prompt ────────────────────────────────────────────────────────── */

.mfv-ch-prompt {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 16px 18px;
	background: #fbfcfd;
	border: 1px dashed #cfdae2;
	border-radius: var(--ch-radius);
}
.mfv-ch-prompt__ico { flex: none; color: var(--ch-teal); opacity: .75; }
.mfv-ch-prompt__text { flex: 1 1 auto; min-width: 0; }
.mfv-ch-prompt__text strong {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ch-ink-2);
}
.mfv-ch-prompt__text span {
	display: block;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--ch-muted);
	margin-top: 2px;
}
.mfv-ch .mfv-ch-prompt__cta {
	flex: none;
	min-height: 36px;
	display: inline-flex;
	align-items: center;
	padding: 8px 15px;
	border: 1px solid var(--ch-teal);
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ch-teal) !important;
	text-decoration: none !important;
}
.mfv-ch .mfv-ch-prompt__cta:hover {
	background: var(--ch-teal);
	color: #fff !important;
}

/* ── Welcome ─────────────────────────────────────────────────────────────── */

.mfv-ch-welcome {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 22px;
}
.mfv-ch-welcome__mark {
	flex: none;
	width: 74px;
	height: 74px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: var(--ch-teal-wash);
	color: var(--ch-teal);
}
.mfv-ch-welcome__text { min-width: 0; }
.mfv-ch .mfv-ch-welcome__eyebrow {
	margin: 0 0 3px !important;
	font-size: 14px;
	font-style: italic;
	color: var(--ch-amber);
	font-family: var(--mfl-font-heading, inherit);
}
.mfv-ch .mfv-ch-welcome__heading {
	margin: 0 0 9px !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	color: var(--ch-ink) !important;
}
.mfv-ch .mfv-ch-welcome__body {
	margin: 0 !important;
	font-size: 14px;
	line-height: 1.65;
	color: var(--ch-ink-2);
}
.mfv-ch .mfv-ch-welcome__note {
	margin: 10px 0 0 !important;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--ch-muted);
	font-style: italic;
}

/* ── Events ──────────────────────────────────────────────────────────────── */

.mfv-ch-events__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 12px;
}
.mfv-ch .mfv-ch-event__link {
	display: flex;
	align-items: center;
	gap: 11px;
	height: 100%;
	padding: 11px 13px;
	border: 1px solid var(--ch-line-soft);
	border-radius: 8px;
	color: inherit !important;
	text-decoration: none !important;
	transition: border-color .14s ease, background-color .14s ease;
}
.mfv-ch a.mfv-ch-event__link:hover {
	border-color: var(--ch-teal);
	background: var(--ch-teal-wash);
}
.mfv-ch-event__date {
	flex: none;
	width: 42px;
	padding: 5px 0;
	border-radius: 6px;
	background: var(--ch-teal-wash);
	color: var(--ch-teal);
	text-align: center;
	line-height: 1.1;
}
.mfv-ch-event__month {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
}
.mfv-ch-event__day { display: block; font-size: 17px; font-weight: 700; }
.mfv-ch-event__text { min-width: 0; }
.mfv-ch-event__title {
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ch-ink);
	line-height: 1.35;
}
.mfv-ch-event__when {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	color: var(--ch-muted);
}

/* ── Ministries ──────────────────────────────────────────────────────────── */

/* auto-FILL, not auto-fit: a church with one ministry gets one tile, not a
   single tile stretched across the whole card. */
.mfv-ch-ministries__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 112px), 1fr));
	gap: 11px;
}
.mfv-ch-ministry {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	padding: 15px 8px;
	border: 1px solid var(--ch-line-soft);
	border-radius: 8px;
	text-align: center;
	transition: border-color .14s ease, background-color .14s ease;
}
.mfv-ch-ministry:hover { border-color: var(--ch-teal); background: var(--ch-teal-wash); }
.mfv-ch-ministry__ico { color: var(--ch-teal); }
.mfv-ch-ministry__name {
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ch-ink-2);
}
.mfv-ch-ministry__when { font-size: 11px; color: var(--ch-muted); }

/* ── Gallery ─────────────────────────────────────────────────────────────── */

/* The mockup's mosaic is one tall photo beside a 2×2 block — a shape that only
   works at exactly five. Each smaller count gets a layout that fills its own
   grid completely, because a mosaic with a hole in it reads as a broken image
   rather than as a deliberate arrangement. */
.mfv-ch-gallery__mosaic {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 104px;
}
.mfv-ch-gallery__cell {
	display: block;
	border-radius: 7px;
	background-color: var(--ch-line-soft);
	background-size: cover;
	background-position: center;
	min-height: 0;
}

/* 5 — the mockup shape: tall left, 2×2 right. */
.mfv-ch-gallery__mosaic--5 .mfv-ch-gallery__cell:first-child { grid-row: span 2; }

/* 4 — a square quad; spanning one cell would leave the fourth track empty. */
.mfv-ch-gallery__mosaic--4 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 124px; }

/* 3 — one wide, two beneath. */
.mfv-ch-gallery__mosaic--3 { grid-auto-rows: 112px; }
.mfv-ch-gallery__mosaic--3 .mfv-ch-gallery__cell:first-child { grid-column: span 3; }
.mfv-ch-gallery__mosaic--3 .mfv-ch-gallery__cell:nth-child(2) { grid-column: span 2; }

/* 2 — side by side. */
.mfv-ch-gallery__mosaic--2 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }

/* ── Leadership ──────────────────────────────────────────────────────────── */

.mfv-ch-team__list > li + li { border-top: 1px solid var(--ch-line-soft); }

.mfv-ch .mfv-ch-person__row {
	display: flex;
	align-items: center;
	gap: 13px;
	width: 100%;
	padding: 13px 2px;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
	color: inherit;
	font: inherit;
}
.mfv-ch .mfv-ch-person__row.is-static { cursor: default; }

.mfv-ch-person__avatar {
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background-color: var(--ch-teal-wash);
	background-size: cover;
	background-position: center;
	color: var(--ch-teal);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .02em;
}
.mfv-ch-person__id { flex: none; width: 168px; min-width: 0; }
.mfv-ch-person__name {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ch-ink);
}
.mfv-ch-person__role {
	display: block;
	margin-top: 1px;
	font-size: 12px;
	color: var(--ch-muted);
}
.mfv-ch-person__teaser {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ch-ink-2);
}
.mfv-ch-person__chev {
	flex: none;
	color: var(--ch-muted);
	transition: transform .18s ease;
}
.mfv-ch-person__row[aria-expanded="true"] .mfv-ch-person__chev { transform: rotate(180deg); }
.mfv-ch-person__row[aria-expanded="true"] + .mfv-ch-person__bio { display: block; }

.mfv-ch-person__bio {
	padding: 0 2px 14px 55px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--ch-ink-2);
}

/* ── Reviews ─────────────────────────────────────────────────────────────── */

.mfv-ch-reviews__inner {
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr);
	gap: 22px;
	align-items: start;
}
.mfv-ch-reviews__summary { text-align: left; }
.mfv-ch .mfv-ch-reviews__score {
	margin: 0 !important;
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	color: var(--ch-ink);
}
.mfv-ch-reviews__summary .mfv-ch-stars { margin-top: 7px; }
.mfv-ch .mfv-ch-reviews__basis {
	margin: 6px 0 13px !important;
	font-size: 12.5px;
	color: var(--ch-muted);
}
.mfv-ch .mfv-ch-reviews__all {
	display: inline-block;
	margin-top: 10px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ch-teal) !important;
	text-decoration: none !important;
}
.mfv-ch .mfv-ch-reviews__all:hover { text-decoration: underline !important; }

.mfv-ch-reviews__list { display: flex; flex-direction: column; gap: 15px; }
.mfv-ch-review__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 5px;
}
.mfv-ch-review__avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.mfv-ch-review__author { font-size: 12.5px; font-weight: 700; color: var(--ch-ink); }
.mfv-ch-review__ago { font-size: 11.5px; color: var(--ch-muted); margin-left: auto; }
.mfv-ch .mfv-ch-review__text {
	margin: 0 !important;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--ch-ink-2);
}

.mfv-ch-reviews__empty { text-align: center; padding: 12px 8px 8px; }
.mfv-ch-reviews__empty-ico { display: inline-flex; color: var(--ch-line); }
.mfv-ch .mfv-ch-reviews__empty-lead {
	margin: 6px 0 3px !important;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--ch-ink);
}
.mfv-ch .mfv-ch-reviews__empty-sub {
	margin: 0 auto 14px !important;
	max-width: 380px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--ch-muted);
}
.mfv-ch .mfv-ch-reviews__attrib {
	margin: 14px 0 0 !important;
	font-size: 11px;
	color: var(--ch-muted);
}

/* ── Service times ───────────────────────────────────────────────────────── */

/* Churches run as many as eight services a week, so rows are compact — a
   sidebar list that outruns the main column stops reading as a summary. */
.mfv-ch-time {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 0;
}
.mfv-ch-time + .mfv-ch-time { border-top: 1px solid var(--ch-line-soft); }
.mfv-ch-time__what { flex: 1 1 auto; min-width: 0; }
.mfv-ch-time__name {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--ch-ink);
}
.mfv-ch-time__day {
	display: block;
	margin-top: 1px;
	font-size: 11.5px;
	color: var(--ch-muted);
}
.mfv-ch-time__at {
	flex: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--ch-ink-2);
	font-variant-numeric: tabular-nums;
}
.mfv-ch-time.is-next .mfv-ch-time__at { color: var(--ch-teal); }
.mfv-ch-time__flag {
	flex: none;
	padding: 2px 7px;
	border-radius: 20px;
	background: var(--ch-teal-wash);
	color: var(--ch-teal);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.mfv-ch .mfv-ch-times__note {
	margin: 12px 0 0 !important;
	padding-top: 11px;
	border-top: 1px solid var(--ch-line-soft);
	font-size: 12px;
	line-height: 1.5;
	color: var(--ch-muted);
}

/* ── Watch live ──────────────────────────────────────────────────────────── */

.mfv-ch-live__poster {
	position: relative;
	display: block;
	height: 152px;
	margin-bottom: 12px;
	border-radius: 8px;
	background-color: #16323d;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.mfv-ch-live__poster::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(11, 33, 42, .5), rgba(11, 33, 42, .12));
}
.mfv-ch-live__play {
	position: absolute;
	inset: 0;
	z-index: 2;
	margin: auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, .92);
	color: var(--ch-teal);
	transition: transform .16s ease;
}
.mfv-ch-live__poster:hover .mfv-ch-live__play { transform: scale(1.07); }
.mfv-ch-live__play svg { fill: currentColor; margin-left: 3px; }
.mfv-ch-live__pill {
	position: absolute;
	z-index: 2;
	top: 10px;
	left: 10px;
	padding: 3px 9px;
	border-radius: 20px;
	background: #dc2626;
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/*
 * The livestream module's card, moved into `.mfv-ch-live-slot` at load.
 *
 * It keeps its own markup — the LIVE/Offline badge, the viewer count and the
 * player JS all key off `#mfv-ls-card` and its `.pf-head` — so the church card
 * chrome is painted onto that markup rather than wrapped around it. The module
 * ships `#mfv-ls-card`-scoped !important padding for phones, hence the id in
 * these selectors: an !important tie is decided on specificity.
 */

.mfv-ch-live-slot #mfv-ls-card {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	float: none;
}
.mfv-ch-live-slot #mfv-ls-card .element.content-block {
	margin: 0;
	padding: 0;
	background: var(--ch-card);
	border: 1px solid var(--ch-line);
	border-radius: var(--ch-radius);
	box-shadow: var(--ch-shadow);
	overflow: hidden;
}
.mfv-ch-live-slot #mfv-ls-card .pf-head {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 15px 18px;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--ch-line-soft);
}
.mfv-ch-live-slot #mfv-ls-card .pf-head .title-style-1 {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.mfv-ch-live-slot #mfv-ls-card .pf-head .title-style-1 > i {
	flex: none;
	font-size: 18px;
	line-height: 1;
	color: var(--ch-teal);
}
.mfv-ch .mfv-ch-live-slot #mfv-ls-card .pf-head h5 {
	margin: 0 !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: -0.005em;
	color: var(--ch-ink) !important;
	text-transform: none !important;
}
/* The card body's padding lives on the tile, so the block wrapper gives none. */
.mfv-ch .mfv-ch-live-slot #mfv-ls-card .pf-body { padding: 0 !important; }
.mfv-ch .mfv-ch-live-slot #mfv-ls-card .mfv-ls-tile-body { padding: 16px 18px 18px !important; }
.mfv-ch .mfv-ch-live-slot #mfv-ls-card[data-ls-live="1"] .mfv-ls-tile-body { padding-bottom: 14px !important; }

/* Offline copy reads as the card's own muted note, not as leftover block text. */
.mfv-ch-live-slot #mfv-ls-card .mfv-ls-tile-sub {
	font-size: 13px;
	line-height: 1.55;
	color: var(--ch-muted);
}

/* ── Contact ─────────────────────────────────────────────────────────────── */

.mfv-ch-contact__map {
	display: block;
	margin: -16px -18px 14px;
	border-bottom: 1px solid var(--ch-line-soft);
}
.mfv-ch-contact__map img { display: block; width: 100%; height: 150px; object-fit: cover; }

.mfv-ch-contact__rows > li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ch-ink-2);
}
.mfv-ch-contact__ico { flex: none; color: var(--ch-teal); margin-top: 2px; }
.mfv-ch .mfv-ch-contact__rows a {
	color: var(--ch-ink-2) !important;
	text-decoration: none !important;
	word-break: break-word;
}
.mfv-ch .mfv-ch-contact__rows a:hover { color: var(--ch-teal) !important; text-decoration: underline !important; }

.mfv-ch-contact__social { display: flex; gap: 8px; padding-top: 10px; }
.mfv-ch .mfv-ch-contact__social a {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--ch-line);
	border-radius: 50%;
	color: var(--ch-muted) !important;
}
.mfv-ch .mfv-ch-contact__social a:hover {
	border-color: var(--ch-teal);
	color: var(--ch-teal) !important;
}

.mfv-ch .mfv-ch-contact__directions {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ch-teal) !important;
	text-decoration: none !important;
}
.mfv-ch .mfv-ch-contact__directions:hover { text-decoration: underline !important; }

/* ── Details ─────────────────────────────────────────────────────────────── */

.mfv-ch-details__list { margin: 0; }
.mfv-ch-details__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
	font-size: 13px;
}
.mfv-ch-details__row + .mfv-ch-details__row { border-top: 1px solid var(--ch-line-soft); }
.mfv-ch-details__row dt { flex: none; color: var(--ch-muted); font-weight: 500; margin: 0; }
.mfv-ch-details__row dd {
	margin: 0;
	text-align: right;
	color: var(--ch-ink-2);
	font-weight: 600;
}
.mfv-ch-details .mfv-ch-prompt { margin-top: 14px; }

/* ── Related churches ────────────────────────────────────────────────────── */

.mfv-ch-related {
	max-width: 1200px;
	margin: 34px auto 0;
	padding: 0 20px;
}
.mfv-ch .mfv-ch-related__heading {
	margin: 0 0 18px !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	text-align: center;
	color: var(--ch-ink) !important;
}
.mfv-ch-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}
.mfv-ch .mfv-ch-rel__link {
	display: block;
	background: var(--ch-card);
	border: 1px solid var(--ch-line);
	border-radius: var(--ch-radius);
	box-shadow: var(--ch-shadow);
	overflow: hidden;
	color: inherit !important;
	text-decoration: none !important;
	transition: transform .16s ease, box-shadow .16s ease;
}
.mfv-ch .mfv-ch-rel__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(23, 35, 46, .1);
}
/* The brand gradient, not a flat charcoal, so a church with no photo reads as
   a card that has none rather than a card whose image failed to load. */
.mfv-ch-rel__shot {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 138px;
	padding: 12px;
	background-color: #16323d;
	background-image: linear-gradient(130deg, #10485c 0%, #0e7490 100%);
	background-size: cover;
	background-position: center;
}
.mfv-ch-rel__shot::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(11, 33, 42, .82) 0%, rgba(11, 33, 42, .06) 62%);
}
.mfv-ch-rel__emblem {
	position: relative;
	z-index: 2;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--ch-amber);
	color: #fff;
}
.mfv-ch-rel__name {
	position: relative;
	z-index: 2;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}
.mfv-ch-rel__foot {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 13px;
	font-size: 12px;
	color: var(--ch-muted);
}
.mfv-ch-rel__rating { display: inline-flex; align-items: center; gap: 4px; color: #f5a623; }
.mfv-ch-rel__rating svg { fill: currentColor; }
.mfv-ch-rel__rating b { color: var(--ch-ink); }
.mfv-ch-rel__rating span { color: var(--ch-muted); }
.mfv-ch-rel__rating--when { color: var(--ch-teal); }
.mfv-ch-rel__rating--when svg { fill: none; }
.mfv-ch-rel__place {
	margin-left: auto;
	text-align: right;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ── Plan Your Visit panel ───────────────────────────────────────────────── */

.mfv-ch-visit { position: fixed; inset: 0; z-index: 10050; }
.mfv-ch-visit[hidden] { display: none; }
.mfv-ch-visit__scrim {
	position: absolute;
	inset: 0;
	background: rgba(11, 33, 42, .55);
	opacity: 0;
	transition: opacity .22s ease;
}
.mfv-ch-visit.is-open .mfv-ch-visit__scrim { opacity: 1; }

.mfv-ch-visit__panel {
	position: absolute;
	top: 0;
	right: 0;
	width: min(430px, 100%);
	height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--ch-card);
	box-shadow: -8px 0 32px rgba(11, 33, 42, .22);
	transform: translateX(100%);
	transition: transform .26s cubic-bezier(.22, .61, .36, 1);
}
.mfv-ch-visit.is-open .mfv-ch-visit__panel { transform: none; }

.mfv-ch-visit__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px;
	border-bottom: 1px solid var(--ch-line);
}
.mfv-ch .mfv-ch-visit__head h2 {
	margin: 0 !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	color: var(--ch-ink) !important;
}
.mfv-ch .mfv-ch-visit__close {
	flex: none;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	background: none;
	border: 0;
	border-radius: 6px;
	color: var(--ch-muted);
	cursor: pointer;
}
.mfv-ch .mfv-ch-visit__close:hover { background: var(--ch-bg); color: var(--ch-ink); }

/* Phones: a drawer, not a takeover. The panel is min(430px, 100%) wide, so on
   a 390px phone it covered the page edge to edge and read as a new screen.
   Operator: the site should stay visible behind it, X at the top-left, the
   left corners rounded — the same treatment the explore filter drawer got.
   48px of page shows at the left, blurred under a light scrim; the panel keeps
   its slide-in from the right. The close button is DOM-last for tab order and
   drawn first with row-reverse, so it lands at the top-left with the title
   beside it. */
@media (max-width: 767px) {
	.mfv-ch-visit__scrim {
		background: rgba(15, 23, 42, .18);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
	}
	.mfv-ch-visit__panel {
		left: 48px;
		right: 0;
		width: auto;
		border-radius: 18px 0 0 18px;
		box-shadow: -12px 0 32px rgba(15, 23, 42, .22);
		overflow: hidden;   /* the scrolling body keeps to the rounded corners */
	}
	.mfv-ch-visit__head {
		flex-direction: row-reverse;
		justify-content: flex-end;
		padding: 12px 18px 12px 10px;
	}
	.mfv-ch .mfv-ch-visit__close {
		width: 40px;
		height: 40px;
		border-radius: 999px;
		background: var(--ch-bg);
		color: var(--ch-ink);
	}
	/* The app nav (z 99999) and the chatbot button (99998) sit above the
	   drawer (10050) and covered its last section. A drawer is modal: the
	   chrome steps aside while it is open, as it does for the explore filter
	   drawer. `visibility` leaves their layout and scripts alone. */
	body.mfv-ch-visit-open #mfl-mobile-nav,
	body.mfv-ch-visit-open #mfv-chatbot-stub,
	body.mfv-ch-visit-open .mfl-fab-scrim,
	body.mfv-ch-visit-open .mfl-fab-backdrop {
		visibility: hidden !important;
	}
}

.mfv-ch-visit__body { flex: 1 1 auto; overflow-y: auto; padding: 20px; }
.mfv-ch .mfv-ch-visit__intro {
	margin: 0 0 18px !important;
	font-size: 13px;
	line-height: 1.55;
	color: var(--ch-muted);
}
.mfv-ch-visit__block { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--ch-line-soft); }
.mfv-ch-visit__block--last, .mfv-ch-visit__block:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.mfv-ch .mfv-ch-visit__block h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 9px !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ch-muted) !important;
}
.mfv-ch .mfv-ch-visit__block h3 .mfv-ch-i { color: var(--ch-teal); }
.mfv-ch .mfv-ch-visit__block p { margin: 0 0 11px !important; font-size: 13.5px; line-height: 1.6; color: var(--ch-ink-2); }
.mfv-ch .mfv-ch-visit__lead { font-size: 15px !important; font-weight: 600; color: var(--ch-ink) !important; }

.mfv-ch-visit__times > li,
.mfv-ch-visit__facts > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 6px 0;
	font-size: 12.5px;
	color: var(--ch-muted);
	border-top: 1px solid var(--ch-line-soft);
}
.mfv-ch-visit__times b, .mfv-ch-visit__facts dd { color: var(--ch-ink-2); font-weight: 600; margin: 0; text-align: right; }
.mfv-ch-visit__facts dt { margin: 0; }
.mfv-ch-visit__contact { display: flex; flex-direction: column; gap: 6px; }
.mfv-ch .mfv-ch-visit__contact a { font-size: 13.5px; color: var(--ch-teal) !important; text-decoration: none !important; }
.mfv-ch .mfv-ch-visit__contact a:hover { text-decoration: underline !important; }

body.mfv-ch-visit-open { overflow: hidden; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
	.mfv-ch-grid { grid-template-columns: minmax(0, 1fr) 320px; }
	.mfv-ch-person__id { width: 148px; }
}

@media (max-width: 900px) {
	/* One column: the side cards carry the visit facts, so they follow the
	   welcome and events rather than sinking below the reviews. */
	.mfv-ch-grid { grid-template-columns: minmax(0, 1fr); }
	.mfv-ch-col--side { order: -1; }

	.mfv-ch-hero__inner { flex-direction: column; align-items: flex-start; gap: 18px; }
	.mfv-ch-hero__actions { width: 100%; }
	.mfv-ch-hero__minor { width: 100%; }
	.mfv-ch .mfv-ch-btn--wide { width: 100%; }

	.mfv-ch-strip { flex-direction: column; align-items: stretch; }
	.mfv-ch-strip > .mfv-ch-btn { width: 100%; }

	.mfv-ch-reviews__inner { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

@media (max-width: 700px) {
	.mfv-ch { --ch-gap: 12px; }

	/* Two panes read as a collage at phone width; three become slivers. */
	.mfv-ch-hero__pane:nth-child(3) { display: none; }
	.mfv-ch-hero__inner { padding: 24px 16px 20px; }
	.mfv-ch-emblem { width: 52px; height: 52px; }

	.mfv-ch-quickbar, .mfv-ch-strip, .mfv-ch-grid, .mfv-ch-related { padding: 0 14px; }

	/* The quick bar becomes a 2×2 grid rather than four squeezed columns. */
	.mfv-ch-quickbar ul { flex-wrap: wrap; }
	.mfv-ch-quickbar li { flex: 1 1 50%; min-width: 50%; }
	.mfv-ch-quickbar li:nth-child(odd) { border-left: 0; }
	.mfv-ch-quickbar li:nth-child(n+3) { border-top: 1px solid var(--ch-line-soft); }
	.mfv-ch .mfv-ch-quickbar a { font-size: 13px; gap: 7px; }

	.mfv-ch-welcome { flex-direction: column; gap: 14px; padding: 18px; }
	.mfv-ch-welcome__mark { width: 56px; height: 56px; }

	/* Two columns on a phone. Only the odd counts need a full-width lead cell;
	   spanning it at 4 would push the last photo onto a row of its own and
	   leave a hole beside it. */
	.mfv-ch-gallery__mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 108px; }
	.mfv-ch-gallery__mosaic--4 .mfv-ch-gallery__cell:first-child { grid-row: span 1; grid-column: span 1; }
	.mfv-ch-gallery__mosaic--5 .mfv-ch-gallery__cell:first-child,
	.mfv-ch-gallery__mosaic--3 .mfv-ch-gallery__cell:first-child { grid-row: span 1; grid-column: span 2; }
	.mfv-ch-gallery__mosaic--3 .mfv-ch-gallery__cell:nth-child(2) { grid-column: span 1; }

	/* The teaser is the first thing to go when the row runs out of width. */
	.mfv-ch-person__teaser { display: none; }
	.mfv-ch-person__id { flex: 1 1 auto; width: auto; }
	.mfv-ch-person__bio { padding-left: 2px; }

	/* width comes from left:48px + right:0 in the drawer block above; a fixed
	   100% here pushed the panel 48px past the right edge and cut the content. */
	.mfv-ch-visit__panel { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.mfv-ch *,
	.mfv-ch *::before,
	.mfv-ch *::after { transition-duration: .01ms !important; }
	.mfv-ch-visit__panel { transition: none; }
}