/**
 * sermon: loaded only on pages that show it.
 *
 * Split out of the shared stylesheets by bin/split-css.py; loaded by
 * inc/feature-styles.php when something on the page has the class.
 */

/* ---------- From blocks.css ---------- */
/* ---------- Archive filters ----------------------------------------------- *
 *
 * Two rows of the same chips: which service, which year. Two rows rather than
 * one long wrap, because they are two independent questions and a single line
 * that happened to break between them would read as one.
 * ------------------------------------------------------------------------- */

.cong-sermon-filters {
	display: grid;
	gap: 0.6rem;

}

.cong-sermon-filters__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
}

/* "Find a sermon by what was said", and the moments it found. */
.cong-sermon-filters__said {
	display: grid;
	gap: 0.35rem;
	justify-items: center;
	margin-block-end: var(--wp--preset--spacing--20);
}

.cong-sermon-filters__said label {
	font-weight: 600;
}

.cong-sermon-filters__said-row {
	display: flex;
	gap: 0.5rem;
	inline-size: min(100%, 32rem);
}

.cong-sermon-filters__said input[type="search"] {
	flex: 1;
	min-inline-size: 0;
	padding: 0.55rem 1rem;
	border: 1px solid var(--wp--preset--color--sky-mid, #d8e3ea);
	border-radius: 999px;
	font: inherit;
}

.cong-sermon-filters__moments {
	max-inline-size: 46rem;
	margin: var(--wp--preset--spacing--30) auto 0;
}

.cong-sermon-filters__moments-head {
	font-size: var(--wp--preset--font-size--lg, 1.25rem);
}

.cong-sermon-filters__moments ol {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
	list-style: none;
}

.cong-sermon-filters__moments li a {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.75rem;
	align-items: baseline;
	color: var(--wp--preset--color--ink);
}

.cong-sermon-filters__moment-when {
	color: var(--wp--preset--color--ink-muted, #4a6577);
	font-size: var(--wp--preset--font-size--sm);
	font-variant-numeric: tabular-nums;
}

.cong-sermon-filters__moment-said {
	display: block;
	margin-block-start: 0.2rem;
	color: var(--wp--preset--color--ink-muted, #4a6577);
}

/* ---------- Sermons ------------------------------------------------------- */

/*
 * A sermon card is a video, so it says so: 16:9, and a play mark over the
 * still. Without one these read as articles with an odd photograph, and
 * nobody clicks them expecting to watch.
 */
.cong-sermon__still {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--wp--preset--color--ink);
}

.cong-sermon__still img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.cong-sermon__play {
	position: absolute;
	inset-block-end: 10px;
	inset-inline-start: 10px;
	inline-size: 34px;
	block-size: 34px;
	border-radius: 50%;
	background: rgb(0 0 0 / 0.6);
}

.cong-sermon__play::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 52%;
	translate: -50% -50%;
	border-block: 7px solid transparent;
	border-inline-start: 11px solid #fff;
	border-inline-end: 0;
}

.cong-sermon__series {
	display: block;
	color: var(--wp--preset--color--leaf);
	font-weight: 600;
}

/*
 * The recording itself: 16:9 and as wide as the column allows.
 *
 * Its own box rather than the generic .cong-frame, which is a fixed-height
 * panel built for the campus map — a video wants a ratio, not a height.
 */
.cong-sermon-player__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 16px;
	background: var(--wp--preset--color--ink);
}

.cong-sermon-player__frame iframe {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}

.cong-sermon-player__away {
	margin-block-start: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--sm);
}

/*
 * The two services, side by side and alike, above the player. Two halves of
 * one control, so neither reads as the main one and the other an extra.
 */
.cong-sermon-player__services {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: 4px;
	max-width: 32rem;
	margin: 0 auto var(--wp--preset--spacing--30);
	padding: 4px;
	border-radius: 999px;
	background: var(--wp--preset--color--sky-soft);
}

.cong-sermon-player__service {
	padding: 0.6em 1em;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.cong-sermon-player__service:hover {
	background: rgb(255 255 255 / 0.6);
}

.cong-sermon-player__service[aria-pressed="true"] {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

.cong-sermon-player__service:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

/* The still on a sermon card is a button now, so it must not look like one. */
button.cong-sermon__still {
	display: block;
	/*
	 * The card's media bleeds to the card's edges with a negative inline
	 * margin, which a div stretches into on its own. A button does not: an
	 * explicit 100% measures the card's content box, so the negative margins
	 * only slid the still sideways and it hung off one edge by the width of
	 * the padding. Adding that padding back on both sides is what "100% of
	 * the padding box" has to be spelled out as.
	 */
	inline-size: calc(100% + var(--wp--preset--spacing--30) * 2);
	padding: 0;
	border: 0;
	font: inherit;
	cursor: pointer;
}

/*
 * Chapters and the transcript, under the player.
 *
 * Chapters are a short list of times anybody can scan; the transcript is
 * folded away, because most people came to watch. Times are the same
 * tabular figures in both, so a column of them lines up.
 */
.cong-transcript__chapters {
	margin-block-start: var(--wp--preset--spacing--40);
}

.cong-transcript__heading {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--md, 1.125rem);
}

.cong-transcript__chapters ol {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 0.25rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cong-transcript__chapters a {
	display: flex;
	gap: 0.75rem;
	padding: 0.35rem 0;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.cong-transcript__chapters a:hover .cong-transcript__title,
.cong-transcript__chapters a:focus-visible .cong-transcript__title {
	text-decoration: underline;
}

.cong-transcript__clock,
.cong-transcript__time {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.cong-transcript__clock {
	min-inline-size: 3.5em;
	color: var(--wp--preset--color--leaf);
}

.cong-transcript {
	margin-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--preset--color--sky-mid, #d8e3ea);
	padding-block-start: var(--wp--preset--spacing--30);
}

.cong-transcript summary {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	cursor: pointer;
}

.cong-transcript__note {
	color: var(--wp--preset--color--ink-muted, #4a6577);
	font-size: var(--wp--preset--font-size--sm);
}

.cong-transcript__body {
	max-inline-size: 42rem;
}

.cong-transcript__body p {
	margin-block: 0 var(--wp--preset--spacing--20);
	padding: 0.25rem 0.5rem;
	border-radius: 6px;
	scroll-margin-block-start: 6rem;
}

.cong-transcript__body p.is-asked {
	background: var(--wp--preset--color--sky-soft);
}

.cong-transcript__time {
	margin-inline-end: 0.5rem;
	color: var(--wp--preset--color--leaf);
	text-decoration: none;
}

.cong-transcript__time:hover,
.cong-transcript__time:focus-visible {
	text-decoration: underline;
}