/* ── Circular Cups — pattern components ─────────────────────────────────
   The CSS for sections built from *core* blocks plus a class.

   A custom block ships its own stylesheet through block.json and WordPress
   loads it only on pages that use it. A pattern has nowhere equivalent to put
   its CSS, so it lives here — which is also why this file should stay small:
   anything that grows attributes, state or JavaScript has outgrown a pattern
   and belongs in src/ as a block.

   Every value below resolves to a token. Where the handoff's screen CSS used an
   off-scale number (90px, 110px, 17.5px) it has been moved onto the nearest
   scale step, per design-tokens.md §1.3 — "no off-scale values anywhere". */

/* ══ Grid containers vs. core's flow layout ══════════════════════════════
   Several patterns below turn a Group block into a CSS grid. Core's flow
   layout has already given that Group's children `margin-block-start:
   var(--wp--style--block-gap)`, and a margin on a grid item adds to the grid's
   own gap rather than replacing it — which is why the six journey steps would
   otherwise sit 16px further apart than the design, and unevenly, because the
   first item in each row has no preceding sibling.

   Zeroed here rather than by setting blockGap to 0 in each pattern's markup,
   which would also flatten the gap inside the cards. */

.cc-steps > *,
.cc-cups > *,
.cc-cards > * {
	margin-block: 0;
}

/* ══ Buttons ═════════════════════════════════════════════════════════════
   theme.json styles the default button: purple-700 fill, pill radius, white
   text. The design uses two further variants, registered as block styles so
   they appear in the editor's Styles panel rather than having to be typed in
   as a class name. */

.wp-block-button__link {
	transition:
		transform var(--duration-slow) var(--ease-spring),
		background var(--duration-base) var(--ease-standard);
	will-change: transform;
}

.wp-block-button__link:hover {
	transform: scale(1.05);
}

/* Accent — the festival yellow, used for the single strongest call to action
   on a screen (the hero, the CTA band, the header). Dark text only: white on
   #F4B740 is 2.0:1 and would fail at any size. */
.wp-block-button.is-style-cc-accent .wp-block-button__link {
	background-color: var(--accent);
	color: var(--on-accent);
}

.wp-block-button.is-style-cc-accent .wp-block-button__link:hover {
	background-color: var(--yellow-300);
	color: var(--on-accent);
}

/* Ghost — the secondary action beside a primary one. A 1.5px outline rather
   than the brand's 2px, because at button scale the heavier weight reads as a
   third emphasis level competing with the filled button next to it. */
.wp-block-button.is-style-cc-ghost .wp-block-button__link {
	background-color: var(--surface-card);
	color: var(--purple-800);
	box-shadow: inset 0 0 0 1.5px var(--purple-200);
}

.wp-block-button.is-style-cc-ghost .wp-block-button__link:hover {
	background-color: var(--surface-card);
	color: var(--purple-900);
	box-shadow: inset 0 0 0 1.5px var(--primary);
}

/* ══ Eyebrows and pills ══════════════════════════════════════════════════ */

/* The outlined capsule above the hero heading — a statement of provenance, not
   a control, so it is a paragraph rather than a link or button. */
.cc-pill {
	display: inline-block;
	margin-block-end: var(--space-6);
	padding: var(--space-2) var(--space-5);
	border: var(--border-thin) solid var(--neutral-300);
	border-radius: var(--radius-pill);
	background: var(--surface-card);
	font-size: var(--text-small);
	line-height: var(--leading-normal);
	color: var(--neutral-700);
}

/* The filled uppercase label that opens a section ("The problem"). */
.cc-eyebrow {
	display: inline-block;
	margin-block-end: var(--space-5);
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-pill);
	background: var(--purple-900);
	color: var(--white);
	font-family: var(--font-body);
	font-size: var(--text-small);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-caps);
	line-height: var(--leading-normal);
	text-transform: uppercase;
}

.cc-eyebrow--eco {
	background: var(--green-700);
}

/* The marker-pen highlight behind a phrase in a section heading. A gradient
   rather than a background colour so it sits behind the baseline like a
   highlighter stroke, and so it does not change the text's own contrast: the
   heading is purple-900, which is 6.8:1 on yellow-300 and 14.9:1 on the cream
   either side of the stroke. */
.cc-highlight {
	padding-inline: var(--space-1);
	background:
 linear-gradient(transparent 58%, var(--yellow-300) 58%, var(--yellow-300) 96%, transparent 96%);
}

/* ══ Hero ════════════════════════════════════════════════════════════════
   Two columns on the home page — copy and the mascot — and one column on the
   sub-page header. Both sit on the lavender wash with two soft circles
   drifting behind them. */

.cc-hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--space-9) var(--space-8);
	background: var(--surface-wash);
}

.cc-hero > * {
	position: relative;
}

/* The circles are drawn by the pattern as two empty spans. They carry no text
   and are `aria-hidden`, so there is nothing for assistive technology to
   skip. */
.cc-hero__circle {
	position: absolute;
	border-radius: 50%;
	background: var(--purple-100);
	pointer-events: none;
}

.cc-hero__circle--one {
	inset-block-start: -180px;
	inset-inline-end: -140px;
	width: 520px;
	height: 520px;
	opacity: 0.85;
	animation: cc-drift 14s ease-in-out infinite alternate;
}

.cc-hero__circle--two {
	inset-block-end: -150px;
	inset-inline-start: -110px;
	width: 340px;
	height: 340px;
	opacity: 0.75;
	animation: cc-drift 18s ease-in-out infinite alternate-reverse;
}

@keyframes cc-drift {

	from {
		transform: translate(0, 0);
	}

	to {
		transform: translate(22px, -18px);
	}
}

/* The hero's two columns, as a grid rather than core's flex Columns maths.
   The design specifies a 7:4 split, which flex `flex-basis` percentages only
   approximate once the gap is taken out of the line — the grid says 7fr and 4fr
   and means it. `.cc-split` and `.cc-with-aside` are built the same way, so all
   three two-column layouts in the theme measure the same way. */
.wp-block-columns.cc-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
	gap: var(--space-6);
	align-items: center;
}

.cc-hero__lead {
	max-width: 50ch;
	font-size: var(--text-body-lg);
	line-height: 1.7;
	color: var(--neutral-700);
}

/* The mascot. It bobs, and it settles into place on load — decoration in the
   truest sense, so it carries an empty alt and disappears entirely under
   prefers-reduced-motion (handled globally in tokens.css) and below the
   breakpoint where the copy needs the full width. */
.cc-hero__mascot {
	display: flex;
	align-items: center;
	justify-content: center;
	max-height: 480px;
	padding: var(--space-5);
	aspect-ratio: 4 / 5;
	animation: cc-bob 5s 1.4s ease-in-out infinite;
}

/* The column is a flex box with an aspect ratio, so the Figure inside it has no
   width of its own to give the image — and an image with `width: auto` inside a
   zero-width box renders at zero. Sizing the figure to the column is what gives
   the illustration something to be a percentage of. */
.cc-hero__mascot .wp-block-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
}

.cc-hero__mascot img {
	width: auto;
	max-width: 100%;
	max-height: 100%;
	animation: cc-settle 1s 0.25s cubic-bezier(0.34, 1.4, 0.5, 1) backwards;
}

@keyframes cc-bob {

	0%,
	100% {
		transform: translateY(0) rotate(0deg);
	}

	25% {
		transform: translateY(-10px) rotate(-1.5deg);
	}

	50% {
		transform: translateY(-18px) rotate(0deg);
	}

	75% {
		transform: translateY(-10px) rotate(1.5deg);
	}
}

@keyframes cc-settle {

	from {
		opacity: 0;
		transform: rotate(-5deg) translateY(18px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 860px) {

	.cc-hero__mascot {
		display: none;
	}

	/* The hero is a grid rather than core's flex Columns, so core's own stacking
	   at 781px never applies to it — without this the 7:4 split survives all the
	   way down to a phone, which is where the heading started breaking words in
	   half. It collapses at 860px, the same width the mascot is dropped at. */
	.wp-block-columns.cc-hero__grid {
		grid-template-columns: 1fr;
	}
}

/* ══ Sign-in card ════════════════════════════════════════════════════════
   The signed-out My Account screen. `.cc-hero` already supplies the wash, the
   circles and the overflow clip; this only has to centre a card in it, taller
   than the page-header's because there is no breadcrumb or title sharing the
   space — just the card, which is the whole point of the screen. */

/* The inline padding is the gutter. This panel is full-bleed, so without it
   the card sits edge to edge on a phone — the one width where a 440px card is
   wider than the screen and the `min()` below stops capping it. */
.cc-account-auth {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-block: var(--space-9);
	padding-inline: var(--container-pad);
}

.cc-account-auth__card {
	position: relative;
	z-index: 1;
	width: min(100%, 440px);
	padding: var(--space-7) var(--space-6);
	border: var(--border-thin) solid var(--neutral-200);
	border-radius: var(--radius-lg);
	background: var(--surface-card);
	box-shadow: var(--shadow-panel);
}

/* The design sets this at 28px, which the type scale has no step for — h3 is
   24px and h2 is fluid up to 48px. Rounded down to h3 rather than inventing an
   off-scale size, per design-tokens.md §1.3. It is an `h1` in the markup (the
   signed-out screen has no page header, so this is the page's only first-level
   heading); the size here is presentational and does not follow from that. */
.cc-account-auth__title {
	margin: 0;
	font-size: var(--text-h3);
}

.cc-account-auth__lead {
	margin-block: var(--space-2) var(--space-6);
	color: var(--neutral-600);
}

/* ══ Centred section beat ════════════════════════════════════════════════ */

.cc-beat {
	text-align: center;
}

/* The centred beats set their heading against a wider measure than the page's
   own content size — a two-line statement, not a paragraph. Centred explicitly
   because overriding the max-width also overrides core's centring margin. */
.cc-beat :where(h2, h3) {
	max-width: 960px;
	margin-inline: auto;
}

.cc-beat .cc-beat__copy {
	max-width: 52ch;
	margin-inline: auto;
	font-size: var(--text-body-lg);
	line-height: 1.7;
	color: var(--neutral-600);
}

/* ══ The six-step journey ════════════════════════════════════════════════
   Three across, twice, with a labelled rule between the two halves marking
   "After the event". Built as a plain grid rather than core Columns because the
   separator has to span the full row — a Columns block cannot produce a child
   that breaks the column track. */

.wp-block-group.cc-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-7) var(--space-6);
	max-width: 960px;
	margin-inline: auto;
	text-align: start;
}

.cc-steps__step {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.cc-steps__figure {
	position: relative;
	margin: 0;
}

.cc-steps__figure img {
	display: block;
	width: 100%;
	height: auto;
	border: var(--border-thick) solid var(--neutral-900);
	border-radius: var(--radius-md);
}

/* The numbered disc. `aria-hidden`, because the step's position is already
   carried by the ordered list the steps sit in — a screen reader announcing
   "1. 1. Collection" is the cost of not hiding it. */
.cc-steps__number {
	position: absolute;
	inset-block-start: -10px;
	inset-inline-start: -10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--purple-700);
	color: var(--white);
	font-family: var(--font-body);
	font-size: var(--text-h5);
	font-weight: var(--weight-semibold);
}

.cc-steps__step:hover .cc-steps__number {
	animation: cc-pulse 0.9s ease-in-out;
}

@keyframes cc-pulse {

	0%,
	100% {
		transform: scale(1);
	}

	25% {
		transform: scale(1.15);
	}

	50% {
		transform: scale(1);
	}

	75% {
		transform: scale(1.12);
	}
}

.cc-steps__step h3 {
	margin: 0;
	font-size: var(--text-h5);
}

/* Direct children only. The numbered disc is a paragraph too, and it lives
   inside `.cc-steps__figure` — a descendant selector here would drop it to
   14px and it is set at 18px two rules above. */
.cc-steps__step > p {
	margin: 0;
	font-size: var(--text-small);
	line-height: var(--leading-relaxed);
	color: var(--neutral-600);
}

.cc-steps__break {
	display: flex;
	grid-column: 1 / -1;
	gap: var(--space-4);
	align-items: center;
	color: var(--primary);
	font-size: var(--text-caption);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
}

.cc-steps__break::before,
.cc-steps__break::after {
	flex: 1;
	border-block-start: var(--border-width) dashed var(--purple-200);
	content: "";
}

@media (max-width: 860px) {

	.wp-block-group.cc-steps {
		grid-template-columns: 1fr;
		gap: var(--space-7);
	}
}

/* ══ Cup line-up ═════════════════════════════════════════════════════════
   The four hire items as cut-outs on a tinted tile. On the shop page the same
   four are WooCommerce products; woocommerce.css gives the product loop the
   same tile so the catalogue and the home page are one picture. */

.wp-block-group.cc-cups {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--space-6);
	text-align: start;
}

.cc-cups__tile {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-block-end: var(--space-6);
	border-radius: var(--radius-md);
	background: var(--purple-050);
	aspect-ratio: 1 / 1;
}

/* The image sits in a Figure, and a percentage max-height on the image would
   resolve against that figure's auto height — which is to say, against nothing,
   so it would be ignored and the cut-out would render at its intrinsic 877px
   and push the square tile out of shape. Giving the figure the tile's full
   height is what makes the image's own percentage cap resolvable. */
.cc-cups__tile .wp-block-image {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 100%;
	margin: 0;
}

.cc-cups__tile img {
	width: auto;
	max-height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 10px 14px rgba(38, 16, 66, 0.14));
	transition: transform var(--duration-slow) var(--ease-standard);
	transform-origin: 50% 90%;
}

.cc-cups__item:hover .cc-cups__tile img {
	animation: cc-cup-bounce 0.55s ease forwards;
}

@keyframes cc-cup-bounce {

	0% {
		transform: none;
	}

	30% {
		transform: translateY(-16px) scale(1.05) rotate(-2deg);
	}

	55% {
		transform: translateY(2px) scale(1.07) rotate(-4deg);
	}

	78% {
		transform: translateY(-6px) scale(1.08) rotate(-4deg);
	}

	100% {
		transform: translateY(0) scale(1.08) rotate(-4deg);
	}
}

.cc-cups__item h3 {
	margin-block: var(--space-3) var(--space-1);
	font-size: var(--text-h5);
}

.cc-cups__meta {
	display: block;
	font-size: var(--text-small);
	color: var(--neutral-500);
}

.cc-cups__item p {
	margin-block: var(--space-2) 0;
	font-size: var(--text-small);
	line-height: var(--leading-relaxed);
	color: var(--neutral-600);
}

@media (max-width: 640px) {

	.cc-cups__tile {
		align-items: center;
		padding-block-end: 0;
	}
}

/* ══ CTA band ════════════════════════════════════════════════════════════
   The deep-purple panel with the big radius. Full width with its own inset
   rather than edge to edge, which is what the 48px radius is for — a rounded
   corner touching the viewport edge does not read as rounded. */

/* Specific enough to beat core's `.alignfull` rule, which sets
   `margin-left/right: 0`. The inset is the whole point of the 48px radius: a
   rounded corner touching the viewport edge does not read as rounded. */
.wp-block-group.cc-band {
	margin-inline: var(--space-5);
	padding: var(--space-9) var(--space-6);
	border-radius: var(--radius-band);
	background: var(--surface-brand-deep);
	color: var(--white);
	text-align: center;
}

.cc-band :where(h2, h3) {
	max-width: 20ch;
	margin-inline: auto;
	color: var(--white);
}

.cc-band p {
	max-width: 50ch;
	margin-inline: auto;
	color: var(--purple-100);
	font-size: var(--text-body-lg);
	line-height: 1.7;
}

/* ══ Counties strip ══════════════════════════════════════════════════════
   The ten local-authority areas, printed in full on every page. This is the
   fallback the region tooltip relies on: with JavaScript off, or with the
   tooltip never opened, the coverage is still stated on the page. */

.cc-counties {
	padding-block: var(--space-8) var(--space-5);
	font-size: var(--text-small);
	color: var(--neutral-600);
	text-align: center;
}

/* The strip is a constrained Group, so core caps each child at contentSize —
   68ch, which is the right measure for a paragraph and the wrong one for a
   single line of ten placenames separated by dots. It wrapped to three
   lines. */
.cc-counties > p {
	max-width: var(--container-max);
	margin-inline: auto;
}

.cc-counties__heading {
	display: block;
	margin-block-end: var(--space-2);
	color: var(--purple-600);
	font-size: var(--text-caption);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
}

/* ══ Inline region term ══════════════════════════════════════════════════
   "Southern Waste Region" in running copy, revealing the ten areas. Before
   assets/js/region.js upgrades it, it is a dotted-underlined span and nothing
   more — which is why the counties strip above exists. */

.cc-region {
	position: relative;
}

.cc-region__trigger {
	padding: 0;
	border: 0;
	border-block-end: var(--border-width) dotted var(--primary);
	background: none;
	color: inherit;
	font: inherit;
	cursor: help;
}

.cc-region__panel {
	position: absolute;
	inset-block-end: calc(100% + 10px);
	inset-inline-start: 50%;
	z-index: 6;
	width: 300px;
	padding: var(--space-4);
	border: var(--border-thin) solid var(--neutral-200);
	border-radius: var(--radius-md);
	background: var(--nav-scrim-solid);
	box-shadow: 0 8px 24px rgba(38, 16, 66, 0.12);
	color: var(--purple-800);
	font-size: var(--text-small);
	line-height: var(--leading-relaxed);
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%);
	transition: opacity var(--duration-fast) var(--ease-standard);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	pointer-events: none;
}

.cc-region__panel b {
	display: block;
	margin-block-end: var(--space-2);
	color: var(--purple-600);
	font-size: var(--text-caption);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.cc-region__panel::after {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 50%;
	border: 7px solid transparent;
	border-block-start-color: var(--nav-scrim-solid);
	transform: translateX(-50%);
	content: "";
}

.cc-region.is-open .cc-region__panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

/* On the deep band the dotted rule disappears into the purple. */
.cc-band .cc-region__trigger {
	border-block-end-color: var(--purple-200);
}

/* ══ Two-column prose with a figure ══════════════════════════════════════ */

.wp-block-columns.cc-split {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: var(--space-8);
	align-items: center;
}

.cc-split p {
	max-width: 58ch;
	color: var(--neutral-600);
}

@media (max-width: 860px) {

	.wp-block-columns.cc-split {
		grid-template-columns: 1fr;
	}
}

/* ══ Sidebar with main column ════════════════════════════════════════════ */

.wp-block-columns.cc-with-aside {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--space-8);
	align-items: start;
}

.cc-aside {
	position: sticky;
	inset-block-start: var(--space-9);
	padding: var(--space-6);
	border: var(--border-thin) solid var(--neutral-200);
	border-radius: var(--radius-md);
	background: var(--surface-card);
}

.cc-aside p {
	font-size: var(--text-small);
	line-height: 1.7;
	color: var(--neutral-600);
}

@media (max-width: 860px) {

	.wp-block-columns.cc-with-aside {
		grid-template-columns: 1fr;
	}

	.cc-aside {
		position: static;
	}
}

/* ══ FAQ ═════════════════════════════════════════════════════════════════
   Core Details blocks, grouped under headings. Closed by default and left as
   native <details>, which means the disclosure works with JavaScript off, is
   found by the browser's own in-page search in every current engine, and needs
   no aria-expanded of its own. */

.cc-faq-group {
	margin-block-end: var(--space-7);
}

.cc-faq-group > h2,
.cc-faq-group > h3 {
	margin-block-end: var(--space-2);
	font-size: var(--text-h3);
}

.cc-faq-group .wp-block-details {
	border-block-end: var(--border-thin) solid var(--neutral-200);
}

.cc-faq-group summary {
	display: flex;
	gap: var(--space-4);
	align-items: center;
	padding: var(--space-5) var(--space-1);
	font-family: var(--font-body);
	font-size: var(--text-h5);
	font-weight: var(--weight-semibold);
	color: var(--purple-900);
	list-style: none;
	cursor: pointer;
}

.cc-faq-group summary::-webkit-details-marker {
	display: none;
}

/* The marker is drawn rather than typed, so it cannot be read out as a stray
   "+" between the question and the answer. */
.cc-faq-group summary::after {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	margin-inline-start: auto;
	border-radius: 50%;
	background: var(--purple-050);
	color: var(--purple-700);
	font-size: var(--text-h5);
	font-weight: var(--weight-medium);
	line-height: 1;
	transition: transform var(--duration-base) var(--ease-standard);
	content: "+";
}

.cc-faq-group details[open] summary::after {
	background: var(--purple-700);
	color: var(--white);
	transform: rotate(45deg);
}

.cc-faq-group details > *:not(summary) {
	max-width: 64ch;
	padding: 0 var(--space-7) var(--space-5) var(--space-1);
	font-size: var(--text-small);
	line-height: 1.75;
	color: var(--neutral-600);
}

/* ══ Resource cards ══════════════════════════════════════════════════════ */

.wp-block-group.cc-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-6);
}

.cc-card {
	padding: var(--space-5);
	border: var(--border-thin) solid var(--neutral-200);
	border-radius: var(--radius-md);
	background: var(--surface-card);
	transition:
		transform var(--duration-slow) var(--ease-standard),
		box-shadow var(--duration-slow) var(--ease-standard);
}

.cc-card:hover {
	box-shadow: var(--shadow-card);
	transform: translateY(-4px);
}

/* Specific enough to beat the generated `.wp-container-*` rule core emits for
   a flex Group, which sets its own gap and would otherwise win on source order
   depending on where the layout styles land in the head. */
.cc-card .cc-card__head {
	display: flex;
	gap: var(--space-4);
	align-items: center;
	margin-block: var(--space-4) var(--space-3);
}

.cc-card__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-md);
	background: var(--purple-100);
	color: var(--purple-700);
}

.cc-card__icon--eco {
	background: var(--green-100);
	color: var(--green-700);
}

.cc-card__icon--accent {
	background: var(--yellow-100);
	color: var(--yellow-600);
}

.cc-card__head :where(h2, h3, h4) {
	margin: 0;
	font-size: var(--text-h5);
}

.cc-card p {
	margin: 0;
	font-size: var(--text-small);
	line-height: var(--leading-relaxed);
	color: var(--neutral-600);
}

/* ══ Prompt strip ════════════════════════════════════════════════════════
   The tinted panel at the foot of a content page pairing one sentence with one
   action ("Order assets for your event"). */

.wp-block-group.cc-prompt {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6);
	align-items: center;
	justify-content: space-between;
	padding: var(--space-7);
	border-radius: var(--radius-lg);
	background: var(--purple-050);
}

.cc-prompt :where(h2, h3) {
	margin-block-end: var(--space-3);
}

.cc-prompt p {
	max-width: 52ch;
	margin: 0;
	color: var(--neutral-600);
}

@media (max-width: 860px) {

	.wp-block-group.cc-prompt {
		padding: var(--space-6) var(--space-5);
	}
}

/* ══ Panel ═══════════════════════════════════════════════════════════════
   The narrow white card the sign-in form sits in. Also the shape the Phase 2
   booking steps use, which is why it is a component rather than sign-in's own
   styling. */

.cc-panel {
	max-width: 440px;
	margin-inline: auto;
	padding: var(--space-7) var(--space-6);
	border: var(--border-thin) solid var(--neutral-200);
	border-radius: var(--radius-lg);
	background: var(--surface-card);
	box-shadow: var(--shadow-panel);
}

.cc-panel :where(h1, h2) {
	margin-block-end: var(--space-2);
	font-size: var(--text-h3);
}

/* ══ Placeholder frame ═══════════════════════════════════════════════════
   Stands in for photography that has not been supplied yet (flag 6 in the
   handoff: the About page's event photo and the Resources previews). It is
   visible on purpose — a grey box that says what is missing is easier to chase
   than an empty space that looks intentional. Remove the class, not the
   styling, when the images land. */

.cc-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	border-radius: var(--radius-md);
	background: var(--purple-050);
	color: var(--purple-600);
	font-size: var(--text-small);
	font-weight: var(--weight-medium);
	text-align: center;
}