/*
 * A weekly program's page (/weekly/jumuah/; templates/single-sr_weekly_program.html, plugin block
 * sacred-roots/weekly-program). It uses the single event page's markup and classes, so events.css lays it out
 * and colors it (paper, ink). This file adds what's its own:
 * - "(weekly programs)" as the kicker over the title. It's in the template, before the plugin's block, so the
 *   block's wrapper steps aside (display: contents) and "(← BACK TO ALL EVENTS)" moves back above it.
 * - The Qurʾān quote on a slate band across the page, as on the homepage: ink text, a thin crimson line above.
 */
.sr-weekly-page {
	display: flex;
	flex-direction: column;
	padding: 2rem var(--sr-gutter) 0;
}

.sr-weekly-page > .sr-weekly-program {
	display: contents;
}

.sr-weekly-page .sr-event__back {
	order: -1;
	align-self: flex-start;
}

.sr-weekly-page .sr-weekly-page__kicker {
	margin: 4.5vw 0 1.4rem;
	color: var(--wp--preset--color--ink);
}

.sr-weekly-page .sr-event__item {
	padding-bottom: 0;
}

/* The schedule line and the place, under the date and time in the details panel. */
.sr-weekly-program .sr-event-meta--when li + :is(.sr-weekly-program__rule, .sr-weekly-program__skip) {
	margin-top: 0.9rem;
}

.sr-weekly-program .sr-weekly-program__where,
.sr-weekly-program .sr-weekly-program__skip {
	color: var(--sr-events-ink-soft);
}

/*
 * The quote: a slate band from edge to edge. The description column is 9/12 of the page's width less the column
 * gap, so the band reaches back by a third of the column plus the gap and the gutter.
 */
.sr-weekly-program .sr-event__content blockquote {
	clear: both;
	position: relative;
	margin: 4vw calc(-1 * var(--sr-gutter)) 0 calc(-1 * (100% / 3 + var(--sr-ev-gap) + var(--sr-gutter)));
	padding: 7vw var(--sr-gutter) 8vw;
	border: 0;
	background-color: var(--wp--preset--color--slate);
	background-image: var(--sr-grain);
	color: var(--wp--preset--color--ink);
	text-align: center;
}

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

/* The verse in large serif italics; the reference after it ("Q. 62:9-10") in small spaced capitals. */
.sr-weekly-program .sr-event__content blockquote p {
	max-width: none;
	margin: 0;
	font-family: var(--wp--preset--font-family--label);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.5;
	text-transform: uppercase;
}

.sr-weekly-program .sr-event__content blockquote em {
	display: block;
	max-width: 24em;
	margin: 0 auto 2rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.7rem, 2.9vw, 2.9rem);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.16;
	text-transform: none;
}

.sr-weekly-program .sr-event__content blockquote br {
	display: none;
}

@media (max-width: 781px) {
	.sr-weekly-page {
		padding-top: 1.4rem;
	}

	.sr-weekly-page .sr-weekly-page__kicker {
		margin: 2.4rem 0 1rem;
	}

	.sr-weekly-program .sr-event__content blockquote {
		margin: 2.4rem calc(-1 * var(--sr-gutter)) 0;
		padding: 3.2rem var(--sr-gutter) 3.6rem;
	}

	.sr-weekly-program .sr-event__content blockquote::before {
		height: 2.4rem;
		margin-bottom: 1.6rem;
	}
}