/**
 * program: 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 ---------- */
/* ------------------------------------------------------------------ *
 * Ways to serve
 *
 * A list, not a grid of boxes. The first attempt gave each role a bordered
 * card with a coloured edge, which meant four large rectangles each holding
 * one short line — most of the section was empty, and because the whole card
 * was a link the title and the day both came out underlined.
 *
 * These are short labels. They want to be read down, quickly, the way you read
 * a list of options — so they are rows with a rule between them and the day
 * set quietly to the right.
 * ------------------------------------------------------------------ */
/*
 * The space above this section is on the heading, not on the block.
 *
 * Two attempts at a margin on `.cong-program-roles` both computed to zero:
 * WordPress's generated layout CSS zeroes the block margins of every child in
 * a flow container, and it wins. The heading inside the block is not something
 * that CSS touches, so putting the gap there is the fix that stays fixed —
 * rather than escalating specificity against a stylesheet that is regenerated
 * on every page load.
 */
.cong-program-roles__heading {
	margin: var(--wp--preset--spacing--60) 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--xl, 1.5rem);
}

.cong-program-roles__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
	gap: 0 var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cong-program-roles__list > li {
	margin: 0;
	border-block-end: 1px solid var(--wp--preset--color--sky-mid, #d8e3ea);
}

a.cong-program-roles__role {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 0;
	/* The row is the link, so the underline would run through the day too. */
	text-decoration: none;
	color: inherit;
}

a.cong-program-roles__role:hover .cong-program-roles__name,
a.cong-program-roles__role:focus-visible .cong-program-roles__name {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.cong-program-roles__name {
	font-weight: 600;
	color: var(--wp--preset--color--ink, #04436a);
}

/*
 * A small arrow after the name rather than a button. It says "this goes
 * somewhere" without claiming the weight of a call to action — there are four
 * of these and none of them is the main thing on the page.
 */
.cong-program-roles__name::after {
	content: "\2192";
	margin-inline-start: 0.4em;
	opacity: 0;
	transition: opacity 120ms ease;
}

a.cong-program-roles__role:hover .cong-program-roles__name::after,
a.cong-program-roles__role:focus-visible .cong-program-roles__name::after {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.cong-program-roles__name::after {
		transition: none;
	}
}

.cong-program-roles__text {
	display: none;
}

.cong-program-roles__when {
	flex: 0 0 auto;
	font-size: var(--wp--preset--font-size--xs, 0.8rem);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--ink-muted, #5b6b78);
	white-space: nowrap;
}

/*
 * When a program meets. A title, a date and a place on one line each — the
 * page already says what the thing is, so this only has to answer "when".
 */
/* Room between the hero above and the page below. As specific as the
   designed page's "no gap between sections" rule, and later, so it holds. */
.wp-block-post-content > .cong-program-events,
.wp-block-post-content > * + .cong-program-events {
	margin-block: var(--wp--preset--spacing--60);
}

.cong-program-events__heading {
	margin-block: 0 0.6em;
	font-size: var(--wp--preset--font-size--lg);
}

.cong-program-events__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cong-program-events__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.2em 1em;
	padding-block: 0.6em;
	border-block-start: 1px solid var(--wp--preset--color--sky-mid, #aed4e3);
}

.cong-program-events__title {
	flex: 1 1 14em;
	font-weight: 700;
	text-decoration: none;
}

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

.cong-program-events__when,
.cong-program-events__where {
	flex: 0 1 auto;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink-muted, #4a6a7e);
}

/* ---------- Program filters ------------------------------------------------
 *
 * The same chips as the sermon archive, in labelled rows. The label matters
 * here and does not there: the sermon archive has one row of services and one
 * of years, and you can tell which is which at a glance. Three rows of proper
 * nouns — Missions, Thursday, Support Groups — cannot be told apart without
 * being told what they are.
 * -------------------------------------------------------------------------- */

.cong-program-filters {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.cong-program-filters__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: baseline;
}

.cong-program-filters__label {
	flex: 0 0 5.5rem;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cong-program-filters__clear {
	margin: 0.2rem 0 0;
	font-size: var(--wp--preset--font-size--sm);
}

@media (max-width: 38rem) {
	.cong-program-filters__row { flex-direction: column; align-items: flex-start; }
	.cong-program-filters__label { flex: none; }
}