/*
 * Homepage, redesign POC (soft editorial): 2819church.org's layout ideas in the 2020 brand identity's type and
 * colors. Mostly paper; the prayer times are peach on crimson and the Qurʾān verse sits on slate, pairings
 * from the brand guide's wordmark pages. Desktop layouts use
 * a 12-column grid inside the page gutters (--sr-gutter); phones stack, with photos staggered left and right.
 * The words come from the Squarespace homepage unchanged; only the presentation is new.
 */
.wp-block-post-content.sr-home-sections > * + * {
	margin-block-start: 0;
}

.sr-hero,
.sr-mission {
	--sr-cols: 12;
	--sr-gap: 1.6vw;
	--sr-col: calc((100% - 2 * var(--sr-gutter) - (var(--sr-cols) - 1) * var(--sr-gap)) / var(--sr-cols));
	display: grid;
	grid-template-columns: repeat(var(--sr-cols), minmax(0, 1fr));
	column-gap: var(--sr-gap);
	padding-inline: var(--sr-gutter);
}

.sr-hero > *,
.sr-mission > * {
	margin: 0;
}

/* ---------- Hero ---------- */
.sr-hero {
	position: relative;
	margin-top: 0 !important;
	padding-top: 2.5vw;
	padding-bottom: 5vw;
	align-items: start;
}

.sr-hero__kicker {
	grid-area: 1 / 1 / 2 / 7;
	align-self: end;
	padding-bottom: 1.2vw;
	color: var(--wp--preset--color--ink);
}


.sr-hero__line {
	position: relative;
	z-index: 2;
	mix-blend-mode: multiply;
}

.sr-hero__line img {
	display: block;
	height: auto;
}

/* Both lines at the same letter size: ROOTS is 1749/2333 of SACRED's width in the logo file. */
.sr-hero__line--1 img {
	width: 57vw;
}

.sr-hero__line--2 img {
	width: calc(57vw * 1749 / 2333);
}

.sr-hero__line--1 {
	grid-area: 2 / 1 / 3 / 11;
	margin-top: 0.6vw !important;
}

.sr-hero__line--2 {
	grid-area: 3 / 3 / 4 / 11;
	padding-left: 2vw;
	margin-top: 2.2vw !important;
}

.sr-hero__photo-a {
	grid-area: 1 / 8 / 3 / 11;
	aspect-ratio: 4 / 3;
	margin-top: 1vw !important;
	margin-left: -1vw !important;
	align-self: start;
}

.sr-hero__photo-b {
	grid-area: 3 / 1 / 4 / 3;
	aspect-ratio: 4 / 5;
	align-self: start;
	margin-top: 2.5vw !important;
}

.sr-hero__aside {
	grid-area: 2 / 11 / 4 / 13;
	align-self: end;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding-bottom: 1vw;
}

.sr-hero__aside > * {
	margin: 0;
}

.sr-hero__photo-c {
	aspect-ratio: 4 / 5;
	margin-top: 0.8rem !important;
}

.sr-hero__links {
	grid-area: 4 / 1 / 5 / 13;
	margin-top: 3vw !important;
	padding-top: 1.4rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 18%, transparent);
}

/* ---------- Mission: words down the side, a crimson rule, photo collage ---------- */
.sr-mission {
	position: relative;
	row-gap: 5vw;
	padding-top: 6vw;
	padding-bottom: 8vw;
}

.sr-mission::before {
	content: "";
	position: absolute;
	top: 6vw;
	bottom: 4vw;
	left: calc(var(--sr-gutter) + 2 * (var(--sr-col) + var(--sr-gap)) - var(--sr-gap) / 2);
	border-left: var(--sr-rule);
}

.sr-mission__words {
	grid-area: 1 / 1 / 4 / 3;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 0.6rem 0 0;
	list-style: none;
	font-family: var(--wp--preset--font-family--label);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
}

.sr-mission__words li:nth-last-child(-n + 4) {
	color: var(--wp--preset--color--accent-1);
}

.sr-mission__title {
	grid-area: 1 / 3 / 2 / 13;
	padding-left: var(--sr-gap);
	font-size: clamp(2.6rem, 6.6vw, 7rem);
	line-height: 0.95;
}

.sr-mission__photo-a {
	grid-area: 2 / 3 / 3 / 9;
	aspect-ratio: 16 / 10;
}

.sr-mission__photo-b {
	grid-area: 2 / 10 / 3 / 13;
	aspect-ratio: 4 / 5;
	margin-top: 6vw !important;
	outline: var(--sr-rule);
	outline-offset: 10px;
}

.sr-mission__statement {
	grid-area: 3 / 6 / 4 / 12;
	font-size: clamp(1.6rem, 2.4vw, 2.4rem);
	line-height: 1.25;
}

.sr-mission__more {
	grid-area: 4 / 6 / 5 / 12;
	margin-top: -3vw !important;
}

.sr-mission__photo-c {
	grid-area: 4 / 1 / 6 / 5;
	aspect-ratio: 4 / 3;
	align-self: end;
}

.sr-mission__photo-d {
	grid-area: 5 / 6 / 6 / 10;
}

/* The street photo is a video still with black bars above and below: crop them off. */
.sr-mission__photo-d img {
	aspect-ratio: 16 / 7.4;
}

.sr-mission__body {
	grid-area: 6 / 3 / 7 / 8;
	padding-left: var(--sr-gap);
	max-width: 26em;
	font-size: clamp(1.15rem, 1.5vw, 1.45rem);
	line-height: 1.45;
}

.sr-mission__photo-e {
	grid-area: 5 / 11 / 7 / 13;
	aspect-ratio: 3 / 4;
	align-self: end;
}

.sr-mission__photo-f {
	grid-area: 6 / 8 / 8 / 11;
	aspect-ratio: 3 / 2;
	margin-top: 3vw !important;
}

/* ---------- Featured event (plugin block), on paper ---------- */
.sr-home-sections > .sr-home-featured {
	padding: 6vw var(--sr-gutter) !important;
	background: color-mix(in srgb, var(--wp--preset--color--peach) 55%, var(--wp--preset--color--paper));
	color: var(--wp--preset--color--ink);
}

.sr-home-featured .sr-featured-event__inner {
	max-width: none;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 5vw;
}

.sr-home-featured .sr-featured-event__image img {
	max-height: none;
	box-shadow: none;
}

.sr-home-featured .sr-featured-event__eyebrow,
.sr-home-featured .sr-featured-event__list-heading {
	font-family: var(--wp--preset--font-family--label);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--accent-1);
}

.sr-home-featured .sr-featured-event__title {
	font-size: clamp(2.6rem, 4.6vw, 4.8rem);
	font-weight: 300;
	line-height: 0.95;
	text-transform: uppercase;
}

.sr-home-featured .sr-featured-event__subtitle {
	color: var(--wp--preset--color--accent-1);
}

.sr-home-featured .sr-featured-event__button.wp-element-button {
	padding: 0;
	border: 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;
	text-transform: uppercase;
}

.sr-home-featured .sr-featured-event__button::before,
.sr-home-featured .sr-featured-event__button::after {
	color: var(--wp--preset--color--accent-1);
	font-weight: 400;
}

.sr-home-featured .sr-featured-event__button::before {
	content: "(";
	margin-right: 0.12em;
}

.sr-home-featured .sr-featured-event__button::after {
	content: ")";
	margin-left: 0.12em;
}

.sr-home-featured .sr-featured-event__button:hover {
	color: var(--wp--preset--color--accent-1);
}

/* ---------- Prayer times: title left, times as a grid of large numerals ---------- */
.sr-home-sections > .sr-home-prayer {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: 2rem 5vw;
	align-items: end;
	padding: 6vw var(--sr-gutter) !important;
	background: var(--wp--preset--color--accent-1);
	background-image: var(--sr-grain);
	color: var(--wp--preset--color--base);
}

.sr-home-prayer > * {
	margin: 0 !important;
}

.sr-home-prayer__title {
	grid-row: 1 / 3;
	align-self: start;
	font-size: clamp(2.8rem, 5.4vw, 5.6rem);
}

.sr-home-prayer__title {
	color: var(--wp--preset--color--base);
}

.sr-home-prayer__title em {
	color: var(--wp--preset--color--peach) !important;
}

.sr-home-prayer .sr-prayer-times {
	font-size: inherit !important;
	text-align: left;
}

.sr-home-prayer .sr-prayer-times__line {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0;
	border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}

.sr-home-prayer .sr-prayer-times__sep {
	display: none;
}

.sr-home-prayer .sr-prayer-times__item {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 1.1rem 0 1.4rem;
	border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent);
	font-family: var(--wp--preset--font-family--label);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--base) 80%, transparent);
}

.sr-home-prayer .sr-prayer-times__time {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.9rem, 2.8vw, 2.8rem);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1;
	text-transform: lowercase;
	color: var(--wp--preset--color--peach);
}

.sr-home-prayer .sr-brackets a {
	color: var(--wp--preset--color--base);
}

.sr-home-prayer .sr-brackets a::before,
.sr-home-prayer .sr-brackets a::after {
	color: var(--wp--preset--color--peach);
}

/* ---------- Upcoming events and the month calendar ---------- */
.sr-home-sections > .sr-home-events {
	padding: 6vw var(--sr-gutter) !important;
}

.sr-home-events__columns {
	gap: 5vw !important;
}

.sr-home-events h2 {
	margin: 0;
	font-size: clamp(2.8rem, 4.6vw, 4.8rem);
}

.sr-home-events__intro {
	margin-top: 1.2rem;
	font-size: 1.15rem;
	color: color-mix(in srgb, var(--wp--preset--color--ink) 75%, transparent);
}

.sr-home-events .sr-upcoming__year {
	font-family: var(--wp--preset--font-family--label);
	font-size: 12px;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--accent-1);
}

.sr-home-events .sr-upcoming__thumb img {
	filter: grayscale(0.85) sepia(0.2);
}

.sr-home-events .sr-cal__grid {
	gap: 0;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 18%, transparent);
	border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 18%, transparent);
}

.sr-home-events .sr-cal__weekday {
	padding-block: 0.6rem;
	border-right: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 18%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 18%, transparent);
	font-family: var(--wp--preset--font-family--label);
	letter-spacing: 0.16em;
}

.sr-home-events .sr-cal__day {
	background: transparent;
	border-right: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 18%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 18%, transparent);
}

.sr-home-events .sr-cal__day--blank {
	background: color-mix(in srgb, var(--wp--preset--color--ink) 3%, transparent);
}

.sr-home-events .sr-cal__day--today {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 8%, transparent);
}

.sr-home-events .sr-cal__day--today .sr-cal__date {
	color: var(--wp--preset--color--accent-1);
	font-weight: 700;
}

.sr-home-events .sr-cal__month {
	font-size: clamp(1.8rem, 2.6vw, 2.6rem);
	font-weight: 500;
}

/* ---------- Watch ---------- */
.sr-home-sections > .sr-home-watch {
	padding: 4vw var(--sr-gutter) 6vw !important;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 14%, transparent);
}

.sr-home-watch__columns {
	margin-top: 1.4rem;
	gap: var(--sr-gap, 1.6vw) !important;
}

.sr-home-watch .wp-block-embed {
	margin: 0;
}

/* ---------- Contact: two big headings, like 2819's "in person / online" ---------- */
.sr-home-sections > .sr-home-contact {
	padding: 6vw var(--sr-gutter) !important;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--ink) 14%, transparent);
}

.sr-home-contact__columns {
	gap: 5vw !important;
}

.sr-home-contact h2 {
	margin: 0 0 1.6rem;
	font-size: clamp(2.8rem, 5.4vw, 5.6rem);
}

.sr-home-contact .wp-block-column {
	padding-left: 1.4rem;
	border-left: var(--sr-rule);
}

.sr-home-contact p {
	font-size: 1.2rem;
}

/* ---------- Qurʾān verse ---------- */
.sr-home-sections > .sr-home-quote {
	padding: 7vw var(--sr-gutter) 8vw !important;
	background: var(--wp--preset--color--slate);
	background-image: var(--sr-grain);
	text-align: center;
}

.sr-home-quote::before {
	content: "";
	display: block;
	width: 1px;
	height: 5vw;
	margin: 0 auto 3vw;
	background: var(--wp--preset--color--accent-1);
}

.sr-home-quote__text {
	max-width: 22em;
	margin: 0 auto;
	font-size: clamp(2rem, 3.8vw, 3.6rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -0.01em;
	text-transform: none;
}

.sr-home-quote__cite {
	margin-top: 2rem !important;
	color: var(--wp--preset--color--ink);
}

/* ---------- Phones ---------- */
@media (max-width: 781px) {
	.sr-hero,
	.sr-mission {
		--sr-cols: 6;
		--sr-gap: 12px;
	}

	.sr-hero {
		padding-top: 12px;
		padding-bottom: 40px;
	}

	.sr-hero__kicker {
		grid-area: 1 / 1 / 2 / 7;
	}

	.sr-hero__photo-a {
		grid-area: 2 / 3 / 3 / 7;
		margin-top: 8px !important;
	}

	.sr-hero__line--1 img {
		width: calc(100vw - 2 * var(--sr-gutter));
	}

	.sr-hero__line--2 img {
		width: calc((100vw - 2 * var(--sr-gutter)) * 1749 / 2333);
	}

	.sr-hero__line--2 {
		justify-self: end;
		margin-top: 3vw !important;
	}

	.sr-hero__kicker {
		font-size: 10px;
	}

	.sr-hero__line--1 {
		grid-area: 3 / 1 / 4 / 7;
		margin-top: -14vw !important;
	}

	.sr-hero__line--2 {
		grid-area: 4 / 2 / 5 / 7;
	}

	.sr-hero__photo-b {
		grid-area: 5 / 1 / 6 / 4;
		margin-top: 24px !important;
	}

	.sr-hero__aside {
		grid-area: 5 / 4 / 6 / 7;
		align-self: end;
	}

	.sr-hero__photo-c {
		display: none;
	}

	.sr-hero__links {
		grid-area: 6 / 1 / 7 / 7;
		flex-direction: column;
		margin-top: 32px !important;
	}

	.sr-mission {
		row-gap: 28px;
		padding-top: 48px;
		padding-bottom: 56px;
	}

	.sr-mission::before {
		top: 48px;
		bottom: 56px;
		left: var(--sr-gutter);
	}

	.sr-mission > * {
		grid-area: auto !important;
		grid-column: 1 / 7 !important;
		padding-left: 18px;
	}

	.sr-mission > .sr-photo {
		padding-left: 0;
	}

	.sr-mission__words {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 4px 10px;
		order: 2;
		padding-top: 0;
	}

	.sr-mission__title {
		order: 1;
		font-size: 12.5vw;
	}

	.sr-mission__photo-a {
		order: 3;
		grid-column: 2 / 7 !important;
	}

	.sr-mission__statement {
		order: 4;
	}

	.sr-mission__more {
		order: 5;
		margin-top: 0 !important;
	}

	.sr-mission__photo-b {
		order: 6;
		grid-column: 2 / 5 !important;
		margin-top: 8px !important;
	}

	.sr-mission__body {
		order: 7;
	}

	.sr-mission__photo-d {
		order: 8;
		grid-column: 1 / 6 !important;
	}

	.sr-mission__photo-e,
	.sr-mission__photo-c {
		display: none;
	}

	.sr-mission__photo-f {
		order: 9;
		grid-column: 3 / 7 !important;
		margin-top: 0 !important;
	}

	.sr-home-featured .sr-featured-event__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.sr-home-sections > .sr-home-featured,
	.sr-home-sections > .sr-home-prayer,
	.sr-home-sections > .sr-home-events,
	.sr-home-sections > .sr-home-contact {
		padding-block: 56px !important;
	}

	.sr-home-sections > .sr-home-prayer {
		grid-template-columns: minmax(0, 1fr);
	}

	.sr-home-prayer__title {
		grid-row: auto;
		font-size: 14vw;
	}

	.sr-home-prayer .sr-prayer-times__line {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sr-home-events h2,
	.sr-home-contact h2 {
		font-size: 13vw;
	}

	.sr-home-featured .sr-featured-event__title {
		font-size: 10vw;
	}

	.sr-home-sections > .sr-home-quote {
		padding-block: 56px 72px !important;
	}

	.sr-home-quote::before {
		height: 48px;
		margin-bottom: 28px;
	}

	.sr-home-quote__text {
		font-size: 2rem;
	}
}