/*
 * Despre noi: the page as it is on bisericabetania.ro today.
 * Sections in order: origin steps, program box, confession, history box, pastor's message,
 * team cards, music groups (photo strip + text, zig-zag), closing "Te așteptăm" box.
 */

/* UI-10: one colour per role, all from theme.json. The page had its own near-twins: a second light peach
   (#fdf4ea) for the pastor's quote and "Te așteptăm" right under the #fdf1e4 labels, a second grey
   (#3a4a5c) and a second hairline (#e3e7ee, #e9e9e9). */
body.is-page-despre-noi {
	--about-navy: var(--wp--preset--color--navy);
	--about-peach: var(--wp--preset--color--gold);
	--about-peach-light: var(--wp--preset--color--peach-light);
	/* UI-29: the border of the peach-light boxes is the palette peach ("linii"), not a shade without a token. */
	--about-peach-line: var(--wp--preset--color--gold);
	--about-brown: var(--wp--preset--color--brown);
	/* Secondary copy sits on the peach veil of the schedule, where grey-text is only about 4:1, so it is navy,
	   as the Acasă schedule note (UI-13). */
	--about-text-2: var(--wp--preset--color--navy);
	--about-line: var(--wp--preset--color--line);
}

/* Section rhythm: the live rows are separated by generous white space, no bands. */
body.is-page-despre-noi .betania-content > .wp-block-group.alignfull {
	margin-block-start: 3.5rem;
}

body.is-page-despre-noi .betania-content > .about-origin {
	margin-block-start: 2.5rem;
}

/* Section titles: left-aligned Dosis capitals with a short peach rule under them. */
body.is-page-despre-noi .about-title {
	margin: 0 0 1.25rem;
	/* UI-49: the one section-title style (theme.json h2). */
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.3;
	text-align: left;
	color: var(--about-navy);
	/* Added to html's 6rem scroll-padding (style.css): 6rem here put jumped-to titles 12rem down. */
	scroll-margin-top: 1rem;
}

body.is-page-despre-noi .about-title::after {
	content: "";
	display: block;
	width: 50px;
	margin-top: 1.125rem;
	border-bottom: 3px solid var(--about-peach);
}

/* Small box titles (Program, Evenimente, Istoric). */
body.is-page-despre-noi :is(.about-schedule__title, .about-history__title) {
	margin: 0 0 1.125rem;
	color: var(--about-navy);
	/* UI-49: the Program title is an H2, so it takes the section-title style; the box H3s match it. */
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: 0.12em;
	text-align: left;
}

/* ---- 0. Jump links under the hero (UI-42): the longest page of the site, 4-7 phone screens ----
 * Labels are the section titles verbatim; chips reuse the light-peach look of the page's other labels. */

body.is-page-despre-noi .betania-content > .about-toc {
	margin-block-start: 2rem;
}

body.is-page-despre-noi .betania-content > .about-toc + .about-origin {
	margin-block-start: 2.5rem;
}

body.is-page-despre-noi .about-toc__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.is-page-despre-noi .about-toc__list > li {
	margin: 0;
	padding: 0;
}

body.is-page-despre-noi .about-toc__list > li::before {
	content: none;
}

body.is-page-despre-noi .about-toc__list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	box-sizing: border-box;
	padding: 6px 14px;
	border: 1px solid var(--about-peach-line);
	border-radius: 4px;
	background: var(--about-peach-light);
	color: var(--about-brown);
	font-family: var(--wp--preset--font-family--dosis);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 1.5px;
	line-height: 1.3;
	text-decoration: none;
	text-transform: uppercase;
}

body.is-page-despre-noi .about-toc__list a:hover {
	border-color: var(--about-peach);
	background: var(--about-peach);
	color: var(--about-navy);
}

/* Jump target inside the program box: same landing spot as the .about-title targets. */
body.is-page-despre-noi .about-schedule__title[id] {
	scroll-margin-top: 1rem;
}

@media (prefers-reduced-motion: no-preference) {
	body.is-page-despre-noi .about-toc__list a {
		transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	}
}

/* ---- 1. Origin: large pencil sketches beside the text, alternating sides like the music groups (UI-20) ----
 * The drawings are the one visual nobody else has, so they get illustration size, not icon size.
 * Phones: drawing first, text full width under it (a 230px text column beside it broke every 2-3 words, UI-48). */

body.is-page-despre-noi .about-origin__steps {
	display: grid;
	gap: 2.5rem;
}

body.is-page-despre-noi .about-origin__step {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

body.is-page-despre-noi .about-origin__steps > *,
body.is-page-despre-noi .about-origin__step > *,
body.is-page-despre-noi .about-origin__text > * {
	margin: 0;
}

body.is-page-despre-noi .about-origin__text {
	display: grid;
	gap: 0.625rem;
}

/* 320px cap: the source files are 440px, so on phones they stay close to native sharpness. */
body.is-page-despre-noi .about-origin__art {
	align-self: center;
	width: min(100%, 320px);
}

body.is-page-despre-noi .about-origin__art img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	opacity: 1;
}

body.is-page-despre-noi .about-origin__lead {
	font-family: var(--wp--preset--font-family--dosis);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.4;
	color: var(--about-navy);
}

body.is-page-despre-noi .about-origin strong {
	font-weight: 600;
	color: var(--about-navy);
}

body.is-page-despre-noi .about-origin em {
	color: var(--about-brown);
}

body.is-page-despre-noi .about-origin__cite {
	white-space: nowrap;
}

/* The Bible reference is a label, not a link. */
body.is-page-despre-noi .about-origin__ref {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 3px;
	background: var(--about-peach-light);
	color: var(--about-brown);
	font-family: var(--wp--preset--font-family--dosis);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.3px;
	line-height: 1.5;
}

/* ---- 2. Program + Evenimente: the church photo under a peach veil ---- */

body.is-page-despre-noi .about-schedule__box {
	padding: 22px 18px;
	border-radius: 5px;
	background:
		linear-gradient(rgb(245 230 208 / 90%), rgb(245 230 208 / 90%)),
		url("../../img/betania-church-building.jpg") center 35% / cover no-repeat;
	/* WebP is about a third of the bytes; browsers without image-set() keep the JPG above. */
	background-image:
		linear-gradient(rgb(245 230 208 / 90%), rgb(245 230 208 / 90%)),
		image-set(url("../../img/betania-church-building.webp") type("image/webp"), url("../../img/betania-church-building.jpg") type("image/jpeg"));
	color: var(--about-navy);
	text-align: left;
}

body.is-page-despre-noi .about-schedule__box > * {
	margin-block: 0;
}

body.is-page-despre-noi .about-schedule__box > .about-schedule__title {
	margin-bottom: 18px;
}

body.is-page-despre-noi .about-schedule .betania-program--grid {
	grid-template-columns: 1fr;
	gap: 20px 32px;
	border: 0;
}

body.is-page-despre-noi .about-schedule .betania-program__group {
	padding: 0;
}

body.is-page-despre-noi .about-schedule .betania-program--grid .betania-program__day {
	margin: 0 0 10px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: none;
}

body.is-page-despre-noi .about-schedule .betania-program__sessions {
	gap: 12px;
	color: var(--about-text-2);
}

body.is-page-despre-noi .about-schedule .betania-program--grid .betania-program__time {
	color: var(--about-navy);
	font-family: var(--wp--preset--font-family--roboto, inherit);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
}

body.is-page-despre-noi .about-schedule .betania-program--grid .betania-program__note {
	max-width: none;
	margin: 2px 0 0;
	padding: 14px 0 0;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--navy) 15%, transparent);
	color: var(--about-text-2);
	text-align: left;
}

body.is-page-despre-noi .about-schedule__events {
	margin-top: 28px;
	padding: 16px 16px 18px;
	border-radius: 5px;
	background: rgb(255 255 255 / 50%);
}

body.is-page-despre-noi .about-schedule__events .about-schedule__title {
	margin-bottom: 10px;
}

body.is-page-despre-noi .about-schedule__events p {
	margin: 0;
	color: var(--about-text-2);
	line-height: 1.55;
}

body.is-page-despre-noi .about-schedule a:not(.wp-element-button) {
	color: var(--about-brown);
	text-decoration-color: currentColor;
}

/* Facebook / Instagram logos before the inline links, as on the live page. */
body.is-page-despre-noi .about-social::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-inline-end: 0.3em;
	vertical-align: -0.15em;
	background: currentColor;
	-webkit-mask: var(--ico) center / contain no-repeat;
	mask: var(--ico) center / contain no-repeat;
}

body.is-page-despre-noi .about-social--facebook { --ico: var(--betania-ico-facebook); }
body.is-page-despre-noi .about-social--instagram { --ico: var(--betania-ico-instagram); }

/* ---- 3. Confession: numbers in a peach ring, "Noi credem" set off ---- */

/* UI-19: fourteen uniform points in a row. No new text: the list is split after point 7 only so the church
 * drawing can break the run on phones and tablets (decorative: alt="", aria-hidden). */
body.is-page-despre-noi .about-confession__layout,
body.is-page-despre-noi .about-confession__groups {
	display: grid;
	gap: 16px;
}

body.is-page-despre-noi .about-confession__layout > *,
body.is-page-despre-noi .about-confession__groups > * {
	margin: 0;
}

/* The global ol rule restarts the counter on every list; `start` is what screen readers announce, the counter has to match it. */
body.is-page-despre-noi .about-confession__list[start="8"] {
	counter-reset: betania 7;
}

/* Phones and tablets: the church drawing breaks the run after point 7. */
body.is-page-despre-noi .about-confession__pause {
	justify-self: center;
	width: min(100%, 260px);
	margin-block: 0.5rem;
}

body.is-page-despre-noi .about-confession__pause img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
}

body.is-page-despre-noi .about-confession__list {
	display: grid;
	gap: 16px;
	max-width: 820px;
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.65;
	color: var(--about-navy);
}

body.is-page-despre-noi .about-confession__list > li {
	margin: 0;
	padding-inline-start: 44px;
}

body.is-page-despre-noi .about-confession__list > li::before {
	top: 1px;
	width: 30px;
	height: 30px;
	border: 2px solid var(--about-peach);
	background: #fff;
	color: var(--about-navy);
	font-weight: 700;
}

body.is-page-despre-noi .about-confession__lead {
	font-weight: 500;
}

/* ---- 4. History: solid peach box ---- */

body.is-page-despre-noi .about-history__box {
	padding: 24px 20px;
	border-radius: 5px;
	background: var(--about-peach);
	color: var(--about-navy);
}

body.is-page-despre-noi .about-history__box > * {
	margin-block: 0 1rem;
}

body.is-page-despre-noi .about-history__box > :last-child {
	margin-bottom: 0;
}

body.is-page-despre-noi .about-history .wp-block-buttons {
	justify-content: flex-start;
}

/* ---- 5. Pastor: round photo, then the message in a peach quote box ---- */

body.is-page-despre-noi .about-pastor__body {
	display: grid;
	gap: 20px;
	align-items: start;
}

body.is-page-despre-noi .about-pastor__person {
	text-align: center;
}

body.is-page-despre-noi .about-pastor__person > * {
	margin: 0;
}

body.is-page-despre-noi .about-pastor__photo {
	margin-bottom: 0.75rem;
}

/* The source photo is 300x200; shown as a 140px circle centred on the face. */
body.is-page-despre-noi .about-pastor__photo img {
	width: 140px;
	height: 140px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	object-fit: cover;
	object-position: center 25%;
}

body.is-page-despre-noi .about-pastor__quote {
	position: relative;
	padding: 30px 20px 24px;
	border: 1px solid var(--about-peach-line);
	border-radius: 5px;
	background: var(--about-peach-light);
	color: var(--about-navy);
}

body.is-page-despre-noi .about-pastor__quote::before {
	content: "\201E";
	position: absolute;
	left: 16px;
	top: -30px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 4rem;
	line-height: 1;
	color: #e9a96a;
}

body.is-page-despre-noi .about-pastor__quote > :first-child {
	margin-top: 0;
}

body.is-page-despre-noi .about-pastor__quote > :last-child {
	margin-bottom: 0;
}

/* ---- 6. Team: a list with small round photos on phones, cards of 4 from 768px ---- */

body.is-page-despre-noi .about-team__grid {
	display: grid;
	grid-template-columns: 1fr;
}

body.is-page-despre-noi .about-team__card {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 14px;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--about-line);
}

body.is-page-despre-noi .about-team__card,
body.is-page-despre-noi .about-team__card > * {
	margin: 0;
}

body.is-page-despre-noi .about-team__photo {
	grid-row: 1 / span 2;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border-radius: 50%;
}

body.is-page-despre-noi .about-team__photo img {
	width: 64px;
	height: 64px;
	padding: 0;
	border: 0;
	object-fit: cover;
	object-position: center top;
}

body.is-page-despre-noi .about-team__name {
	align-self: end;
	margin-bottom: 3px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--about-navy);
}

body.is-page-despre-noi .about-team__role {
	align-self: start;
	justify-self: start;
	padding: 4px 10px;
	border-radius: 3px;
	background: var(--about-peach);
	color: var(--about-navy);
	font-family: var(--wp--preset--font-family--dosis);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 1.5px;
	line-height: 1.35;
	text-transform: uppercase;
}

/* Phones (UI-22): the global passe-partout for photos (style.css, .betania-content .wp-block-image img)
 * outranked the padding/border reset above, so the face shrank to a 50px square inside the 64px circle,
 * and sizes="auto" then picked the 200px file for a 50px box. Same specificity plus the page class wins.
 * From 768px the cards keep the passe-partout, as before. */
@media (max-width: 767px) {
	body.is-page-despre-noi .betania-content .wp-block-image.about-team__photo img {
		padding: 0;
		border: 0;
		border-radius: 50%;
	}
}

/* ---- 7. Music groups: photo strip (swipe, click to enlarge) beside the text ---- */

body.is-page-despre-noi .about-groups__intro {
	margin: 0 0 2rem;
}

body.is-page-despre-noi .about-groups__row {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	/* Phones (UI-59): the section gap, so each group's photo clearly opens its own group. 44px from 768px. */
	margin: 0 0 3.5rem;
}

body.is-page-despre-noi .about-groups__row > * {
	margin: 0;
}

/* One photo per view, like the live carousel; the strip scrolls sideways. */
body.is-page-despre-noi .wp-block-gallery.has-nested-images.about-groups__gallery {
	flex-wrap: nowrap;
	gap: 0;
	min-width: 0;
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--about-peach) transparent;
}

body.is-page-despre-noi .wp-block-gallery.has-nested-images.about-groups__gallery figure.wp-block-image {
	flex: 0 0 100%;
	width: 100%;
	margin: 0;
	scroll-snap-align: start;
}

body.is-page-despre-noi .wp-block-gallery.has-nested-images.about-groups__gallery figure.wp-block-image img {
	aspect-ratio: 525 / 323;
	width: 100%;
	height: auto;
	padding: 0;
	border: 0;
	object-fit: cover;
}

body.is-page-despre-noi .about-groups__title {
	margin: 0 0 18px;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--about-navy);
}

body.is-page-despre-noi .about-groups__title::after {
	content: "";
	display: block;
	width: 32px;
	height: 3px;
	margin-top: 12px;
	background: var(--about-peach);
}

body.is-page-despre-noi .about-groups__text > p {
	margin: 0;
}

/* Coordinators: light peach chips with a person icon instead of numbers. */
body.is-page-despre-noi .about-groups__people {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 0;
}

body.is-page-despre-noi .about-groups__people > li {
	margin: 0;
	padding: 6px 12px 6px 34px;
	border-radius: 4px;
	background: var(--about-peach-light);
	color: var(--about-navy);
	line-height: 1.4;
}

body.is-page-despre-noi .about-groups__people > li::before {
	content: "";
	left: 11px;
	top: 50%;
	width: 16px;
	height: 16px;
	border: 0;
	border-radius: 0;
	transform: translateY(-50%);
	background: var(--about-brown);
	-webkit-mask: var(--betania-ico-user) center / contain no-repeat;
	mask: var(--betania-ico-user) center / contain no-repeat;
}

/* Phones (UI-59): one column, so the photo goes first in every group, also in the text-first rows
 * (Corul mixt); otherwise its photo sat right above the next group's photo and read as theirs. */
@media (max-width: 767px) {
	body.is-page-despre-noi .about-groups__row--text-first > .about-groups__gallery {
		order: -1;
	}
}

/* ---- 8. Te așteptăm: light peach box, small Dosis title, left-aligned ---- */

body.is-page-despre-noi .about-next .betania-next-step {
	margin: 0 0 1.5rem;
	padding: 22px 24px;
	border: 1px solid var(--about-peach-line);
	border-radius: 5px;
	background: var(--about-peach-light);
	text-align: left;
}

body.is-page-despre-noi .about-next .betania-next-step > * {
	max-width: none;
	margin: 0 0 10px;
}

body.is-page-despre-noi .about-next .betania-next-step .is-style-betania-script {
	font-family: var(--wp--preset--font-family--dosis);
	/* UI-49: an H2, so the section-title style (theme.json h2). */
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.3;
	text-align: left;
	text-transform: uppercase;
}

body.is-page-despre-noi .about-next .wp-block-buttons {
	justify-content: flex-start;
	gap: 10px;
	margin-top: 16px;
}

/* ---- Line length (UI-47): running text stops at about 70 characters ----
 * On 1440 the paragraphs ran 90-165 characters across the 1200px column and the boxes. 55ch of Roboto 17px
 * is about 520px, which measures 65-75 characters of Romanian text. Phones are narrower than that, so it
 * only acts from tablets up. The boxes keep their width; only the text inside stops earlier. */
body.is-page-despre-noi {
	--about-measure: 55ch;
}

body.is-page-despre-noi :is(
	.about-origin__step p,
	.about-schedule__events p,
	.about-history__box > p,
	.about-pastor__quote :is(p, li),
	.about-groups__text > p
) {
	max-width: var(--about-measure);
}

body.is-page-despre-noi .about-schedule .betania-program--grid .betania-program__note {
	max-width: var(--about-measure);
}

/* The numbers sit in the 44px padding, so the list is that much wider than the text. */
body.is-page-despre-noi .about-confession__list {
	max-width: calc(var(--about-measure) + 44px);
}

/* Children of constrained groups get centred with `margin: auto !important`; these stay on the left edge. */
body.is-page-despre-noi .about-groups > .about-groups__intro {
	max-width: var(--about-measure);
	margin-inline: max(0px, calc((100% - 1200px) / 2)) auto !important;
}

body.is-page-despre-noi .about-next .betania-next-step > p {
	max-width: var(--about-measure);
	margin-inline: 0 auto !important;
}

/* ---- Wider screens ---- */

@media (min-width: 600px) {
	body.is-page-despre-noi .about-schedule .betania-program--grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	/* The drawings carry their own white margin, so the rows can sit closer than on phones. */
	body.is-page-despre-noi .about-origin__steps {
		gap: 1rem;
	}

	body.is-page-despre-noi .about-origin__step {
		flex-direction: row;
		align-items: center;
		gap: 30px;
	}

	/* Same zig-zag as .about-groups__row; the modifier flips the side but keeps the drawing first
	 * in the markup, so on phones every drawing still sits above its text. */
	body.is-page-despre-noi .about-origin__step--text-first {
		flex-direction: row-reverse;
	}

	body.is-page-despre-noi .about-origin__step > :not(.about-origin__art) {
		flex: 1 1 0;
		min-width: 0;
	}

	/* The 55ch measure (UI-47) leaves the text narrower than its slot; in the flipped row that space would
	 * open on the left and pull the text off the column edge the titles start from. */
	body.is-page-despre-noi .about-origin__step--text-first > :not(.about-origin__art) {
		margin-inline-end: auto;
	}

	/* 400px at 1440 (inside the 360-420 asked for, under the 440px source); scales down to 280px at 768. */
	body.is-page-despre-noi .about-origin__art {
		flex: 0 0 clamp(280px, 28vw, 400px);
		width: auto;
	}

	body.is-page-despre-noi .about-origin__lead {
		font-size: var(--wp--preset--font-size--large);
	}

	body.is-page-despre-noi .about-schedule__box {
		padding: 30px 36px 28px;
	}

	body.is-page-despre-noi .about-schedule__events {
		padding: 20px 22px;
	}

	body.is-page-despre-noi .about-history__box {
		padding: 30px 36px;
	}

	body.is-page-despre-noi .about-pastor__body {
		grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
		gap: 30px;
	}

	body.is-page-despre-noi .about-pastor__quote {
		padding: 34px 40px 30px 76px;
	}

	body.is-page-despre-noi .about-pastor__quote::before {
		left: 22px;
		top: -14px;
		font-size: 5rem;
	}

	/* Cards: portrait photo, name, function label; 2 rows of 4. */
	body.is-page-despre-noi .about-team__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 30px;
	}

	body.is-page-despre-noi .about-team__card {
		display: block;
		padding: 0 0 1.25rem;
		border: 1px solid var(--about-line);
		background: var(--wp--preset--color--white);
		text-align: center;
	}

	body.is-page-despre-noi .about-team__photo {
		width: auto;
		height: auto;
		border-radius: 0;
	}

	body.is-page-despre-noi .about-team__photo img {
		width: 100%;
		height: auto;
		aspect-ratio: 2 / 3;
	}

	body.is-page-despre-noi .about-team__name {
		margin: 25px 0.75rem 0;
		font-size: var(--wp--preset--font-size--medium);
	}

	body.is-page-despre-noi .about-team__role {
		display: inline-block;
		margin: 6px 0.75rem 0;
	}

	/* Zig-zag: photos and text side by side, centred vertically. */
	body.is-page-despre-noi .about-groups__row {
		flex-direction: row;
		align-items: center;
		gap: 30px;
		margin-bottom: 44px;
	}

	body.is-page-despre-noi .about-groups__row > * {
		flex: 1 1 0;
		min-width: 0;
	}

	body.is-page-despre-noi .wp-block-gallery.has-nested-images.about-groups__gallery {
		max-width: 525px;
	}
}

@media (min-width: 992px) {
	body.is-page-despre-noi .about-schedule .betania-program--grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* UI-19: the confession gets the script title of "Te așteptăm" (h2.is-style-betania-script in style.css),
 * centred, instead of the spaced capitals of the other sections (Adelin, 27.10). Same text, CSS only. */
body.is-page-despre-noi .about-confession > .about-title {
	font-family: var(--wp--preset--font-family--script);
	font-size: clamp(2.75rem, 2rem + 3.5vw, 4.25rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: none;
	text-align: center;
	color: var(--wp--preset--color--navy);
}

body.is-page-despre-noi .about-confession > .about-title::after {
	content: none;
}

/* UI-19: a quiet ornament above and below the confession (Adelin, 27.10): a hairline fading out both ways
 * around a small diamond, in the peach of the title rules. Drawn as a mask so the colour stays a theme token. */
body.is-page-despre-noi .about-confession::before,
body.is-page-despre-noi .about-confession::after {
	content: "";
	display: block;
	width: min(300px, 80%);
	height: 14px;
	margin-inline: auto;
	background-color: var(--wp--preset--color--gold);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14'%3E%3Cdefs%3E%3ClinearGradient id='l'%3E%3Cstop offset='0' stop-opacity='0'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='r'%3E%3Cstop offset='0'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='6.25' width='130' height='1.5' fill='url(%23l)'/%3E%3Crect x='170' y='6.25' width='130' height='1.5' fill='url(%23r)'/%3E%3Cpath d='M150 1 L156 7 L150 13 L144 7 Z'/%3E%3Ccircle cx='137' cy='7' r='1.5'/%3E%3Ccircle cx='163' cy='7' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14'%3E%3Cdefs%3E%3ClinearGradient id='l'%3E%3Cstop offset='0' stop-opacity='0'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='r'%3E%3Cstop offset='0'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='6.25' width='130' height='1.5' fill='url(%23l)'/%3E%3Crect x='170' y='6.25' width='130' height='1.5' fill='url(%23r)'/%3E%3Cpath d='M150 1 L156 7 L150 13 L144 7 Z'/%3E%3Ccircle cx='137' cy='7' r='1.5'/%3E%3Ccircle cx='163' cy='7' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.is-page-despre-noi .about-confession::before {
	margin-block: 1rem 3rem;
}

body.is-page-despre-noi .about-confession::after {
	margin-block: 3.5rem 1rem;
}

/* UI-19: from 1024px the list (55ch, UI-47) would leave ~600px empty on its right. Adelin (27.10) tried a drawing
 * there, then a scroll animation, and chose neither: nothing should pull the eye off the confession. So the whole
 * section (title and list) is one reading column, centred like a page of a book. */
@media (min-width: 1024px) {
	body.is-page-despre-noi .about-confession > * {
		width: 100%;
		max-width: calc(var(--about-measure) + 44px);
		margin-inline: auto !important;
	}

	/* ch resolves in the title's own font (Dosis, larger, spaced), which made its column 128px wider than the
	 * list's; 562px is the list column as rendered (55ch of Roboto 17px + 44px for the numbers). */
	body.is-page-despre-noi .about-confession > .about-title {
		max-width: 562px;
	}

	body.is-page-despre-noi .about-confession__pause {
		display: none;
	}
}