/**
 * Styles for pages somebody is designing rather than filling in.
 *
 * Each is a block style, picked in the editor's Styles panel, so a designed
 * event or landing page can step out of the house look without anybody
 * writing CSS — and the next show can reuse them. Small on purpose: a few
 * strong ideas rather than a second theme.
 *
 *   Cover   → Fades from sepia to colour  (Kansas, then Oz)
 *   Group   → Yellow brick road           (a path across the page)
 *   Group   → Rainbow arc behind           (an arc over a section's heading)
 *   Group   → Emerald band                 (deep green, light text)
 *   Heading → Rainbow lettering
 */

/* ---------- The page itself ------------------------------------------------ */

/* A designed event starts with whatever its designer put first, usually a
   full-bleed cover: no gap between it and the header. */
.cong-designed > .wp-block-post-content > .alignfull:first-child {
	margin-block-start: 0;
}

/* ---------- Fades from sepia to colour ----------------------------------- */

.wp-block-cover.is-style-sepia-to-colour .wp-block-cover__image-background,
.wp-block-cover.is-style-sepia-to-colour .wp-block-cover__video-background {
	filter: sepia(1) saturate(0.55) contrast(1.05) brightness(0.95);
	animation: cong-to-colour 3.6s cubic-bezier(0.65, 0, 0.35, 1) 0.8s forwards;
}

@keyframes cong-to-colour {
	to { filter: none; }
}

/* The words arrive a moment after the colour does. */
.wp-block-cover.is-style-sepia-to-colour .wp-block-cover__inner-container > * {
	opacity: 0;
	transform: translateY(12px);
	animation: cong-rise 0.9s ease-out forwards;
	animation-delay: calc(2.2s + var(--cong-rise-step, 0) * 0.15s);
}

.wp-block-cover.is-style-sepia-to-colour .wp-block-cover__inner-container > *:nth-child(2) { --cong-rise-step: 1; }
.wp-block-cover.is-style-sepia-to-colour .wp-block-cover__inner-container > *:nth-child(3) { --cong-rise-step: 2; }
.wp-block-cover.is-style-sepia-to-colour .wp-block-cover__inner-container > *:nth-child(4) { --cong-rise-step: 3; }
.wp-block-cover.is-style-sepia-to-colour .wp-block-cover__inner-container > *:nth-child(n + 5) { --cong-rise-step: 4; }

@keyframes cong-rise {
	to { opacity: 1; transform: none; }
}

/*
 * A spotlight for the words: darker behind the middle and towards the foot,
 * where the title, the times and the buttons sit, and clear at the edges and
 * the top, so the sky and the rainbow stay bright. Between the picture and
 * the words, above the cover's own overlay colour.
 */
.wp-block-cover.is-style-sepia-to-colour::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(ellipse 60% 55% at 50% 62%, rgb(11 42 66 / 0.5), rgb(11 42 66 / 0.18) 65%, transparent 100%),
		linear-gradient(180deg, transparent 35%, rgb(11 42 66 / 0.35) 100%);
}

.wp-block-cover.is-style-sepia-to-colour > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

/* Words on a sky need a little help to be read. */
.wp-block-cover.is-style-sepia-to-colour h1,
.wp-block-cover.is-style-sepia-to-colour h2,
.wp-block-cover.is-style-sepia-to-colour p {
	text-shadow: 0 2px 18px rgb(11 42 66 / 0.45);
}

/* In the editor, and for anybody who has asked for less motion: in colour,
   with the words already there. */
.editor-styles-wrapper .wp-block-cover.is-style-sepia-to-colour .wp-block-cover__image-background,
.editor-styles-wrapper .wp-block-cover.is-style-sepia-to-colour .wp-block-cover__inner-container > * {
	animation: none;
	filter: none;
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-cover.is-style-sepia-to-colour .wp-block-cover__image-background,
	.wp-block-cover.is-style-sepia-to-colour .wp-block-cover__video-background,
	.wp-block-cover.is-style-sepia-to-colour .wp-block-cover__inner-container > * {
		animation: none;
		filter: none;
		opacity: 1;
		transform: none;
	}
}

/* ---------- Yellow brick road -------------------------------------------- */

/*
 * Bricks drawn once in an SVG tile — two courses, the second offset by half
 * a brick — so the road tiles across any width without seams. Use it empty,
 * as a divider, or with a line of text on it.
 */
.wp-block-group.is-style-brick-road {
	position: relative;
	min-block-size: 4.5rem;
	padding-block: var(--wp--preset--spacing--30);
	background-color: #f2c230;
	background-image:
		linear-gradient(180deg, rgb(255 255 255 / 0.18), rgb(120 72 0 / 0.18)),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48' viewBox='0 0 96 48'%3E%3Cg fill='none' stroke='%23b8860b' stroke-width='3'%3E%3Cpath d='M0 1.5H96M0 25.5H96M1.5 0V24M49.5 0V24M25.5 24V48M73.5 24V48'/%3E%3C/g%3E%3Cg fill='%23ffd75a' opacity='.55'%3E%3Crect x='6' y='5' width='38' height='5' rx='2'/%3E%3Crect x='54' y='5' width='38' height='5' rx='2'/%3E%3Crect x='30' y='29' width='38' height='5' rx='2'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 100% 100%, 96px 48px;
	color: #3b2a00;
	box-shadow: inset 0 6px 10px -6px rgb(0 0 0 / 0.35), inset 0 -6px 10px -6px rgb(0 0 0 / 0.35);
}

.wp-block-group.is-style-brick-road :where(h1, h2, h3, p) {
	color: inherit;
	text-shadow: 0 1px 0 rgb(255 255 255 / 0.4);
}

/* ---------- Rainbow arc behind ------------------------------------------- */

/*
 * An arc over the section's opening lines — the eyebrow and the heading sit
 * under it, the way the title sits under the rainbow in the photograph — and
 * clear of the paragraphs that follow, so nothing is read through stripes.
 */
.wp-block-group.is-style-rainbow-arc {
	--cong-arc: min(38rem, 92vw);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block-start: calc(var(--cong-arc) / 2 - 5.5rem);
}

.wp-block-group.is-style-rainbow-arc::before {
	/* Violet inside, red outside, as a rainbow is. */
	content: "";
	position: absolute;
	z-index: -1;
	inset-inline-start: 50%;
	inset-block-start: var(--wp--preset--spacing--40, 2rem);
	inline-size: var(--cong-arc);
	aspect-ratio: 2 / 1;
	transform: translateX(-50%);
	border-radius: 999px 999px 0 0;
	background: radial-gradient(circle calc(var(--cong-arc) / 2) at 50% 100%,
		transparent 0 70%,
		#6c4ab6 70% 72.5%,
		#2f7fd1 72.5% 75%,
		#4caf50 75% 77.5%,
		#f6d32d 77.5% 80%,
		#f39c24 80% 82.5%,
		#e8453c 82.5% 85%,
		transparent 85%);
	opacity: 0.55;
	pointer-events: none;
	/* Fades into the page at its feet, as a rainbow does into a field. */
	-webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}

/* ---------- Emerald band -------------------------------------------------- */

.wp-block-group.is-style-emerald {
	padding-block: var(--wp--preset--spacing--60);
	background:
		radial-gradient(ellipse at 20% 0%, rgb(140 255 190 / 0.22), transparent 55%),
		linear-gradient(160deg, #0b7a55, #064d36);
	color: #eafff4;
}

.wp-block-group.is-style-emerald :where(h1, h2, h3, h4, p, li) {
	color: inherit;
}

.wp-block-group.is-style-emerald a:not(.wp-element-button) {
	color: #b9ffd9;
}

.wp-block-group.is-style-emerald .wp-element-button {
	background: #f2c230;
	color: #2b1e00;
}

.wp-block-group.is-style-emerald .is-style-outline .wp-element-button {
	background: transparent;
	color: #eafff4;
	border-color: currentColor;
}

/* Inside an ordinary event's description the column is narrow, so a
   full-width band breaks out of it to the edges of the window. */
.cong-event-body .wp-block-group.alignfull.is-style-emerald {
	inline-size: 100vw;
	max-inline-size: none;
	margin-inline: calc(50% - 50vw);
	padding-inline: var(--wp--custom--gutter, 1.25rem);
}

/* ---------- Rainbow lettering --------------------------------------------- */

.wp-block-heading.is-style-rainbow-text {
	background: linear-gradient(90deg, #e8453c, #f39c24, #f6d32d, #4caf50, #2f7fd1, #6c4ab6);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: none;
}

/* On a photograph the letters need a pale edge and a shadow to stand on,
   or a yellow letter vanishes into a wheat field. */
.wp-block-cover .wp-block-heading.is-style-rainbow-text {
	background-image: linear-gradient(90deg, #ff6b5e, #ffb547, #ffe45c, #7be07f, #6fb4ff, #b18cff);
	-webkit-text-stroke: 1.5px rgb(255 255 255 / 0.9);
	filter: drop-shadow(0 2px 3px rgb(11 42 66 / 0.85)) drop-shadow(0 6px 18px rgb(11 42 66 / 0.55));
}

/* A long eyebrow on a phone wraps rather than running off the glass. */
.cong-designed .cong-eyebrow {
	white-space: normal;
	text-wrap: balance;
}

/* ---------- Photo credit -------------------------------------------------- */

/* "Photo by … on Unsplash": small, in the corner of the picture it credits,
   readable but out of the way. A paragraph with this class inside a cover. */
/* On a phone the cover's buttons stack down into that corner, so there the
   credit is a small line under everything else; in the corner from a
   tablet up. */
.wp-block-cover .cong-photo-credit,
.cong-photo-credit {
	margin: var(--wp--preset--spacing--40) 0 0;
	color: rgb(255 255 255 / 0.85);
	font-size: 0.72rem;
	text-align: center;
	text-shadow: 0 1px 3px rgb(0 0 0 / 0.6);
}

@media (min-width: 48rem) {
	.wp-block-cover .cong-photo-credit,
	.cong-photo-credit {
		position: absolute;
		inset-block-end: 0.6rem;
		inset-inline-end: 0.9rem;
		z-index: 2;
		margin: 0;
		text-align: end;
	}
}

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

/* Not part of the words that rise in. */
.wp-block-cover.is-style-sepia-to-colour .wp-block-cover__inner-container > .cong-photo-credit {
	opacity: 1;
	transform: none;
	animation: none;
}