/**
 * 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%;
	z-index: -1;
	background-position: center;
	background-size: cover;
	filter: blur(36px) saturate(1.2) brightness(0.42);
}

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

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

.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--scene .cong-poster__intro {
	text-shadow: 0 1px 12px rgb(11 42 66 / 0.55);
}

.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 {
	background: var(--wp--preset--color--lime);
	color: var(--wp--preset--color--ink);
}

/*
 * 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 {
	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 {
	color: var(--wp--preset--color--lime);
	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);
}