/**
 * 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;
}

/* ---------- 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;
}