/**
 * poster: 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 ---------- */
/* ---------- Event poster -------------------------------------------------- */

/*
 * The artwork leads.
 *
 * The backdrop is the same picture, blurred and darkened, so the band fills
 * edge to edge at any window width while the artwork itself is never cropped
 * — a 16:9 graphic, a square one and a portrait flyer all sit correctly on
 * it, which matters because the church makes a new one every time.
 */
.cong-poster {
	position: relative;
	isolation: isolate;
	overflow: clip;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

.cong-poster__backdrop {
	position: absolute;
	/* Bled past the edges so the blur has something to blur into. */
	inset: -8%;
	/* Under the shade (-1), which comes first in the markup and would
	   otherwise be painted over by this. */
	z-index: -2;
	background-position: center;
	background-size: cover;
	/*
	 * Bright enough to carry the artwork's colour. At 0.42 every poster sat
	 * on near-black, whatever was in it; the words keep their contrast from
	 * the shade behind them instead (below).
	 */
	filter: blur(40px) saturate(1.6) brightness(0.78);
}

/*
 * The shade for the words, on the blurred kind: the artwork's colour shows
 * on its side, and under the words it is at least 84% navy. That is what
 * keeps white text above 7:1 (AAA) whatever the artwork is, even an all-white
 * flyer: white over 84% #0b2a42 on white is about 9:1.
 */
.cong-poster:not(.cong-poster--scene)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(180deg, rgb(11 42 66 / 0.2), rgb(11 42 66 / 0.84) 26%);
}

@media (min-width: 60rem) {
	.cong-poster:not(.cong-poster--scene)::before {
		background: linear-gradient(90deg, rgb(11 42 66 / 0.1) 22%, rgb(11 42 66 / 0.84) 54%);
	}
}

/*
 * A chosen picture behind the poster, sharp. A shade only on the side the
 * words are, so the sky stays bright behind the artwork.
 */
.cong-poster--scene .cong-poster__backdrop {
	inset: 0;
	z-index: -2;
	filter: none;
}

.cong-poster--scene::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(180deg, rgb(11 42 66 / 0.15), rgb(11 42 66 / 0.84) 26%);
}

@media (min-width: 60rem) {
	.cong-poster--scene::before {
		background: linear-gradient(90deg, rgb(11 42 66 / 0) 25%, rgb(11 42 66 / 0.84) 56%);
	}
}

.cong-poster__credit {
	margin: 0;
	padding: 0 var(--wp--custom--gutter, 1.25rem) 0.6rem;
	color: rgb(255 255 255 / 0.8);
	font-size: 0.72rem;
	text-align: end;
	text-shadow: 0 1px 3px rgb(0 0 0 / 0.6);
}

.cong-poster .cong-poster__credit a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgb(255 255 255 / 0.5);
}

.cong-poster__inner {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	inline-size: min(100% - 2 * var(--wp--custom--gutter, 1.25rem), var(--wp--style--global--wide-size, 76rem));
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--60);
}

@media (min-width: 60rem) {
	.cong-poster__inner {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--60);
	}
}

.cong-poster__art {
	margin: 0;
	border-radius: 16px;
	overflow: clip;
	/* A shadow, because the artwork is sitting on a photograph of itself. */
	box-shadow: 0 18px 50px rgb(0 0 0 / 0.45);
}

.cong-poster__art img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/*
 * theme.json colours every heading ink, and that beats a colour inherited
 * from an ancestor however dark the ancestor is — so the title came out navy
 * on navy. Same trap as the slideshow headings.
 */
.cong-poster :is(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

.cong-poster__title {
	margin-block: 0.15em 0;
	font-size: var(--wp--preset--font-size--xxxl);
	line-height: 1.05;
	text-wrap: balance;
}

.cong-poster__when {
	margin-block-start: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
}

.cong-poster__where {
	display: grid;
	justify-items: start;
	gap: 0.35rem;
	margin-block-start: var(--wp--preset--spacing--20);
}

/* The place: as large and as white as the date, behind a map pin. */
.cong-poster__spot {
	display: block;
	padding-inline-start: 1.6em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aebc21' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 1 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") left 0.15em / 1.15em no-repeat;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	line-height: 1.3;
}

.cong-poster .cong-poster__place,
.cong-poster a.cong-poster__place:not(.wp-element-button),
.cong-poster a.cong-poster__directions:not(.wp-element-button) {
	color: var(--wp--preset--color--base);
}

.cong-poster a.cong-poster__place {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	text-decoration-color: rgb(255 255 255 / 0.45);
}

.cong-poster a.cong-poster__place:hover,
.cong-poster a.cong-poster__place:focus-visible {
	text-decoration-color: currentColor;
}

/* Directions, for somewhere off campus: a plain link under the address. */
.cong-poster__directions {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	margin-inline-start: 1.6em;
	color: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	white-space: nowrap;
}

.cong-poster__directions:hover,
.cong-poster__directions:focus-visible {
	text-decoration-thickness: 2px;
}

.cong-poster__actions {
	margin-block-start: var(--wp--preset--spacing--40);
}

.cong-poster__actions .wp-element-button {
	/* The site's own button size; a soft lift so it sits off any artwork. */
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--ink);
	box-shadow: 0 6px 18px rgb(0 0 0 / 0.28);
}

.cong-poster__out {
	display: inline-block;
	margin-inline-start: 0.15em;
}


/*
 * The practical details, as a strip rather than a column.
 *
 * They used to sit in a tall card beside the artwork, which forced the
 * artwork narrow and left the card mostly empty. Across the bottom they take
 * the width they actually need.
 */
.cong-poster__strip {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	inline-size: min(100% - 2 * var(--wp--custom--gutter, 1.25rem), var(--wp--style--global--wide-size, 76rem));
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--30);
	border-block-start: 1px solid rgb(255 255 255 / 0.22);
	font-size: var(--wp--preset--font-size--sm);
}

@media (min-width: 48rem) {
	.cong-poster__strip {
		grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
		gap: var(--wp--preset--spacing--50);
	}
}

.cong-poster__label {
	display: block;
	margin-block-end: 0.25em;
	color: rgb(255 255 255 / 0.72);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--xs);
}

/* No artwork: the words carry it, so give them the middle of the band. */
.cong-poster--plain .cong-poster__inner {
	grid-template-columns: minmax(0, 1fr);
	max-inline-size: 46rem;
	text-align: center;
}

/* A venue that is not a church room: its address sits under the name. */
.cong-poster__place {
	display: block;
	font-weight: 600;
}

.cong-poster__address {
	display: block;
	font-size: 0.8em;
	font-weight: 400;
	opacity: 0.85;
}

.cong-poster__where + .cong-poster__where {
	margin-block-start: 0.4em;
}

/*
 * Which date is where, for an event that moves between places. A date and a
 * place on one line, because the reader's question is "where is the next one"
 * and then "what about the one after that".
 */
.cong-poster__schedule-label {
	margin: 1.25em 0 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.8;
}

.cong-poster__schedule-label + .cong-poster__schedule {
	margin-block-start: 0.35em;
}

.cong-poster__schedule {
	margin: 0.75em 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--sm);
}

.cong-poster__schedule li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15em 0.9em;
	padding-block: 0.3em;
	border-block-start: 1px solid currentColor;
	border-color: color-mix(in srgb, currentColor 22%, transparent);
}

.cong-poster__schedule-when {
	flex: 0 0 auto;
	min-inline-size: 5.5em;
	font-weight: 700;
}

.cong-poster__schedule-where {
	flex: 1 1 10em;
	opacity: 0.9;
}

/* Who to ask, under the button: small, and part of the details. */
.cong-poster__ask {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15em 0.5em;
	margin-block-start: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--sm);
	opacity: 0.95;
}

.cong-poster__ask-label {
	/* Lime on the shade is about 3.6:1, under AA for text this size. */
	color: var(--wp--preset--color--lime-soft);
	font-weight: 700;
}

.cong-poster .cong-poster__ask a:not(.wp-element-button) {
	color: var(--wp--preset--color--base);
	text-decoration-color: rgb(255 255 255 / 0.5);
}

/* ---- The artwork, then a few photos ---- */

.cong-poster__art--slides {
	position: relative;
}

.cong-poster__slides {
	display: flex;
	block-size: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.cong-poster__slides::-webkit-scrollbar { display: none; }

.cong-poster__slides:focus-visible {
	outline: 3px solid var(--wp--preset--color--lime);
	outline-offset: -3px;
}

.cong-poster__slide {
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: start;
}

.cong-poster__art--slides .cong-poster__slide img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

/* Photos fill the frame; the artwork keeps all of itself. */
.cong-poster__art--slides .cong-poster__slide--photo img {
	object-fit: cover;
}

.cong-poster__slides-go {
	position: absolute;
	inset-block-start: 50%;
	translate: 0 -50%;
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.92);
	color: var(--wp--preset--color--ink);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 4px 14px rgb(0 0 0 / 0.3);
}

.cong-poster__slides-go:hover { background: #fff; }

.cong-poster__slides-go:focus-visible {
	outline: 3px solid var(--wp--preset--color--lime);
	outline-offset: 2px;
}

.cong-poster__slides-go--back { inset-inline-start: 0.75rem; }
.cong-poster__slides-go--next { inset-inline-end: 0.75rem; }

.cong-poster__slides-count {
	position: absolute;
	inset-block-end: 0.75rem;
	inset-inline-end: 0.75rem;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: rgb(11 42 66 / 0.85);
	color: #fff;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Keep it, pass it on: quiet links under the button. */
.cong-poster__keep {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	margin-block-start: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--sm);
}

.cong-poster__keep-link {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
	opacity: 0.9;
}

.cong-poster__keep-link:hover,
.cong-poster__keep-link:focus-visible { opacity: 1; }
.cong-poster__keep-link[disabled] { text-decoration: none; cursor: default; }