/*
 * About Us page (setup/content/about-us.php), redesign POC (soft editorial): 2819church.org's layout ideas in
 * the 2020 brand identity's type and colors. On paper: the page title, Vision and Mission, Our Story, the Board
 * and the Core Principles (numbered 01–05 here, with a CSS counter); the Community Scholar on the one crimson
 * band; then the Year in Review reports as a grid of smaller viewers. Desktop layouts use a 12-column grid
 * inside the page gutters (--sr-gutter); phones stack. The words are the Squarespace page's, unchanged.
 */
.wp-block-post-content.sr-about-sections > * + * {
	margin-block-start: 0;
}

.sr-about-sections {
	--sr-gap: 1.6vw;
	--sr-hair: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 14%, transparent);
}

.sr-about-vision,
.sr-about-story,
.sr-about-board,
.sr-about-principles,
.sr-about-scholar,
.sr-about-reports {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--sr-gap);
	align-items: start;
	padding: 6vw var(--sr-gutter) !important;
}

:is(.sr-about-vision, .sr-about-story, .sr-about-board, .sr-about-principles, .sr-about-scholar, .sr-about-reports) > *,
:is(.sr-about-story__text, .sr-about-scholar__text, .sr-about-contact, .sr-about-principle, .sr-about-report-card) > *,
:is(.sr-about-principles__list, .sr-about-reports__grid) > * {
	margin-block: 0;
}

:is(.sr-about-vision, .sr-about-story, .sr-about-board, .sr-about-principles, .sr-about-reports) p,
.sr-about-scholar p {
	text-wrap: pretty;
}

/* ---------- Opening ---------- */
.sr-about-sections > .sr-about-head {
	padding-bottom: 4vw !important;
}

/* ---------- Vision (large display) and Mission (statement) ---------- */
.sr-about-vision {
	row-gap: 4vw;
	padding-top: 4vw !important;
	border-top: var(--sr-hair);
}

.sr-about-vision__label,
.sr-about-mission__label {
	grid-column: 1 / 4;
	padding-top: 0.9rem;
	color: var(--wp--preset--color--ink);
}

.sr-about-vision__line {
	grid-column: 4 / 13;
	font-size: clamp(2.4rem, 5.2vw, 5.4rem);
	line-height: 0.98;
}

.sr-about-mission__text {
	grid-column: 4 / 11;
	padding-left: 1.4rem;
	border-left: var(--sr-rule);
	font-size: clamp(1.25rem, 1.9vw, 1.9rem);
	line-height: 1.35;
}

/* ---------- Our Story: photo left, text right with a crimson rule ---------- */
.sr-about-story {
	border-top: var(--sr-hair);
}

.sr-about-story__photo {
	grid-column: 1 / 6;
	aspect-ratio: 1;
}

/* The brand's own logotype artwork keeps its crimson and gold. */
.sr-about-story__photo img {
	filter: none;
}

.sr-about-story__text {
	grid-column: 7 / 13;
}

.sr-about-story__text p {
	max-width: 36em;
	padding-left: 1.4rem;
	border-left: var(--sr-rule);
	font-size: clamp(1.05rem, 1.2vw, 1.2rem);
	font-weight: 300;
	line-height: 1.6;
}

.sr-about-story__text p + p {
	margin-top: 0 !important;
	padding-top: 1.2em;
}

/* ---------- Board of Directors: names in spaced capitals between hairlines ---------- */
.sr-about-board {
	border-top: var(--sr-hair);
}

.sr-about-board .sr-section-title {
	grid-column: 1 / 6;
}

.sr-about-board__list {
	grid-column: 7 / 13;
	margin: 0.6rem 0 0;
	padding: 0;
	list-style: none;
	border-top: var(--sr-rule);
	font-family: var(--wp--preset--font-family--label);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.sr-about-board__list li {
	margin: 0;
	padding: 1.15rem 0;
	border-bottom: var(--sr-hair);
}

/* ---------- Core Principles: title and photo, then the five, numbered ---------- */
.sr-about-principles {
	row-gap: 4vw;
	border-top: var(--sr-hair);
}

.sr-about-principles .sr-section-title {
	grid-column: 1 / 6;
}

.sr-about-principles__photo {
	grid-column: 7 / 13;
	aspect-ratio: 16 / 9;
}

.sr-about-principles__list {
	grid-column: 1 / 13;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 2.4rem var(--sr-gap);
	counter-reset: sr-principle;
}

.sr-about-principle {
	counter-increment: sr-principle;
	padding-top: 1.1rem;
	border-top: var(--sr-rule);
}

.sr-about-principle::before {
	content: counter(sr-principle, decimal-leading-zero);
	display: block;
	margin-bottom: 1.4rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2.2rem, 3vw, 3rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1;
	color: var(--wp--preset--color--accent-1);
}

.sr-about-principle h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.4rem, 1.7vw, 1.75rem);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: 0;
	text-transform: uppercase;
}

.sr-about-principle p {
	margin-top: 0.9rem !important;
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.55;
}

/* ---------- Community Scholar: the page's one band (crimson); portrait left, text right ---------- */
.sr-about-scholar__photo {
	grid-column: 1 / 5;
	aspect-ratio: 4 / 5;
}

.sr-about-scholar__text {
	grid-column: 6 / 13;
}

.sr-about-scholar .sr-section-title {
	font-size: clamp(2.2rem, 4vw, 4.2rem);
}

.sr-about-scholar__text > p {
	max-width: 38em;
	font-size: clamp(1.05rem, 1.2vw, 1.2rem);
	font-weight: 300;
	line-height: 1.6;
}

.sr-about-scholar__text > p + p {
	margin-top: 1.2em;
}

.sr-about-scholar a {
	color: var(--wp--preset--color--base);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.sr-about-scholar a:hover,
.sr-about-scholar a:focus-visible {
	color: var(--wp--preset--color--peach);
}

.sr-about-scholar a:focus-visible {
	outline: 2px solid var(--wp--preset--color--peach);
	outline-offset: 3px;
}

.sr-about-contact {
	max-width: 38em;
	margin-top: 2.6rem !important;
	padding-left: 1.4rem;
	border-left: 1px solid var(--wp--preset--color--peach);
}

.sr-about-contact > p:first-child {
	font-family: var(--wp--preset--font-family--label);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--wp--preset--color--peach);
}

.sr-about-contact__links {
	margin-top: 0.8rem !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.4rem, 2vw, 2rem);
	font-weight: 400;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.sr-about-contact__links a {
	text-decoration: none;
}

/* ---------- Year in Review: title and intro, then the reports three to a row ---------- */
.sr-about-reports {
	row-gap: 3vw;
}

.sr-about-reports .sr-section-title {
	grid-column: 1 / 6;
}

.sr-about-reports__intro {
	grid-column: 7 / 12;
	align-self: end;
	padding-left: 1.4rem;
	border-left: var(--sr-rule);
	font-size: clamp(1.05rem, 1.2vw, 1.2rem);
	font-weight: 300;
	line-height: 1.55;
}

.sr-about-reports__grid {
	grid-column: 1 / 13;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 3.2rem var(--sr-gap);
}

.sr-about-report-card {
	padding-top: 1rem;
	border-top: var(--sr-hair);
}

.sr-about-report-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.4rem, 1.8vw, 1.8rem);
	font-weight: 400;
	line-height: 1.1;
	text-transform: uppercase;
}

.sr-about-sections .wp-block-file.sr-about-report {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.6rem 1.2rem;
	margin: 1rem 0 0;
	font-family: var(--wp--preset--font-family--label);
	font-size: 13px;
	line-height: 1.4;
}

/* The viewer: a smaller, cropped window onto the report's first page (it scrolls inside). */
.sr-about-sections .sr-about-report .wp-block-file__embed {
	order: -1;
	flex-basis: 100%;
	box-sizing: border-box;
	height: auto !important; /* The block saves a fixed 600px height. */
	aspect-ratio: 4 / 3;
	margin: 0 0 0.4rem;
	border: var(--sr-hair);
	background: color-mix(in srgb, var(--wp--preset--color--ink) 6%, transparent);
}

.sr-about-report > a:not(.wp-block-file__button) {
	color: color-mix(in srgb, var(--wp--preset--color--ink) 72%, transparent);
	text-decoration: none;
}

.sr-about-report > a:not(.wp-block-file__button):hover {
	color: var(--wp--preset--color--accent-1);
}

/* "Download" as "(DOWNLOAD)", like the other bracketed links. */
.sr-about-sections .sr-about-report .wp-block-file__button {
	margin-left: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--label);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.sr-about-report .wp-block-file__button::before,
.sr-about-report .wp-block-file__button::after {
	color: var(--wp--preset--color--accent-1);
	font-weight: 400;
}

.sr-about-report .wp-block-file__button::before {
	content: "(";
	margin-right: 0.12em;
}

.sr-about-report .wp-block-file__button::after {
	content: ")";
	margin-left: 0.12em;
}

.sr-about-sections .sr-about-report .wp-block-file__button:hover,
.sr-about-sections .sr-about-report .wp-block-file__button:focus-visible {
	color: var(--wp--preset--color--accent-1);
}

/* ---------- Phones: everything stacks ---------- */
@media (max-width: 781px) {
	.sr-about-sections {
		--sr-gap: 12px;
	}

	.sr-about-vision,
	.sr-about-story,
	.sr-about-board,
	.sr-about-principles,
	.sr-about-scholar,
	.sr-about-reports {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 28px;
		padding-block: 56px !important;
	}

	:is(.sr-about-vision, .sr-about-story, .sr-about-board, .sr-about-principles, .sr-about-scholar, .sr-about-reports) > * {
		grid-column: 1 / -1 !important;
	}

	.sr-about-sections > .sr-about-head {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}

	.sr-about-sections .sr-section-title {
		margin-bottom: 0;
		font-size: 12.5vw;
	}

	.sr-about-sections :is(.sr-about-story__text, .sr-about-scholar__text) .sr-section-title {
		margin-bottom: 28px;
	}

	.sr-about-vision {
		padding-top: 40px !important;
	}

	.sr-about-vision__label,
	.sr-about-mission__label {
		padding-top: 0;
		margin-bottom: -16px !important;
	}

	.sr-about-mission__label {
		margin-top: 12px !important;
	}

	.sr-about-vision__line {
		font-size: 10.5vw;
	}

	.sr-about-mission__text {
		font-size: 1.2rem;
	}

	.sr-about-story__photo {
		width: 78%;
	}

	.sr-about-principles__photo {
		margin-left: 18% !important;
	}

	.sr-about-principles__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.sr-about-principle {
		display: grid;
		grid-template-columns: 3.2rem minmax(0, 1fr);
		column-gap: 12px;
	}

	.sr-about-principle::before {
		grid-row: 1 / 3;
		margin: 0;
		font-size: 2.2rem;
	}

	.sr-about-scholar__photo {
		width: 72%;
	}

	.sr-about-scholar .sr-section-title {
		font-size: 10.5vw;
	}

	.sr-about-contact {
		margin-top: 1.8rem !important;
	}

	.sr-about-reports__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.sr-about-report-card {
		padding-block: 1rem;
	}

	/* On phones the viewers can't show a PDF well (many browsers don't show one at all): the list keeps
	   each report's name and its download link. */
	.sr-about-sections .sr-about-report .wp-block-file__embed {
		display: none;
	}

	.sr-about-sections .wp-block-file.sr-about-report {
		margin-top: 0.6rem;
	}
}