/* =========================================================================
 * Content Band 003 — Full-screen Photo with Testimonials, Revealed and Held
 *
 * Two states.
 *
 *   By default (no JS, reduced motion, the editor): the photo, one screen,
 *   then the quotes as a calm dark band under it, one after another.
 *
 *   `is-telling` (pattern.js): the section is long (its height set by the
 *   script from the number of quotes), the photo and the quotes are both
 *   sticky, the quotes laid over the photo, centred, one at a time; the
 *   script raises their lines in and away with the scroll and darkens the
 *   photo behind them (--content-band-003-dim). The last screen is for the
 *   next chapter's panel to rise over it (site.css §3g).
 * ========================================================================= */

.content-band-003 {
	--content-band-003-zoom: 1.6;
	--content-band-003-dim: 0;
	/* The margin the opened photo keeps all round: the header's, so the photo
	   lines up with the logo and the button (a phone: the page gutter, as the
	   header has there). */
	--content-band-003-frame: var(--header-gutter);
	/* Where the opened photo's top edge stops: the frame's margin, or under a
	   pinned header the bar's foot (below). */
	--content-band-003-top-edge: var(--content-band-003-frame);

	position: relative;
	/* Its layers (photo, darkening, quotes) stay its own, so the next
	   chapter's panel rising over it covers all of them. */
	isolation: isolate;
}

/* Flush against the section before it: no block gap. */
.wp-block-post-content > .content-band-003.content-band-003 {
	margin-block-start: 0;
}

.content-band-003.content-band-003 > * {
	margin-block: 0;
}

/* Doubled class: the editor makes every block position: relative. */
.content-band-003 .content-band-003__photo.content-band-003__photo {
	position: sticky;
	top: 0;
	height: 100svh;
	overflow: hidden;
}

.content-band-003__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- The quotes: the calm band (default) --------------------------------- */

.content-band-003 .content-band-003__quotes.content-band-003__quotes {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--space-xl);
	justify-items: center;
	padding: var(--space-xl) var(--gutter);
	background: var(--color-ink-deep);
	color: var(--color-on-dark);
	text-align: center;
}

.content-band-003 .content-band-003__quote.content-band-003__quote {
	width: min(54rem, 100%);
	margin: 0;
	padding: 0;
	border: 0;
}

/* Five stars above the words: decoration (every review here is five
   stars), in the strong gold, at the larger editorial size. */
.content-band-003__quote::before {
	content: "★★★★★" / "";
	display: block;
	margin-bottom: var(--space-sm);
	font-size: var(--wp--preset--font-size--xl);
	letter-spacing: 0.3em;
	/* The tracking also follows the last star; this evens the centring. */
	text-indent: 0.3em;
	color: var(--color-gold);
}

.content-band-003__quote p {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--heading-2);
	line-height: 1.18;
	letter-spacing: -0.01em;
	color: var(--color-on-dark);
	text-wrap: balance;
}

.content-band-003__quote cite {
	display: block;
	margin-top: var(--space-md);
	font-size: var(--wp--preset--font-size--xs);
	font-style: normal;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-on-dark);
}

/* ---- Telling: over the photo, one at a time ----------------------------- */

/* Over the photo: as tall as the screen, pulled up over the photo's screen,
   and sticky like it. The darkening is its own layer, so the quotes stay
   at full strength. */
.content-band-003.is-telling .content-band-003__quotes.content-band-003__quotes {
	position: sticky;
	top: 0;
	z-index: 2;
	place-items: center;
	height: 100svh;
	margin-top: -100svh;
	/* Centred in the opened frame. */
	padding: var(--content-band-003-top-edge) var(--gutter) var(--content-band-003-frame);
	background: none;
	overflow: hidden;
}

.content-band-003.is-telling .content-band-003__quotes::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(ellipse at center, color-mix(in srgb, var(--color-ink-deep) 40%, transparent) 0%, color-mix(in srgb, var(--color-ink-deep) 24%, transparent) 55%, color-mix(in srgb, var(--color-ink-deep) 8%, transparent) 100%);
	opacity: var(--content-band-003-dim);
	/* The photo's own clip while it opens (pattern.js), so the darkening
	   stays inside the frame. */
	clip-path: var(--content-band-003-clip, none);
}

.content-band-003.is-telling .content-band-003__quote.content-band-003__quote {
	grid-area: 1 / 1;
}

/* The stars come and go with their review (pattern.js sets --mark). */
.content-band-003.is-telling .content-band-003__quote::before {
	opacity: var(--mark, 0);
}

/* A light darkening behind the words, and a soft shadow on them, so they
   read over the bright parts of the photo without dimming the whole of it. */
.content-band-003.is-telling .content-band-003__quote p,
.content-band-003.is-telling .content-band-003__quote cite {
	text-shadow: 0 2px 24px color-mix(in srgb, var(--color-ink-deep) 55%, transparent);
}

/* Each line in its own clip, so it rises in from behind an edge. The 0.08em
   below is room for descenders (g, y, p), which the clip would otherwise cut:
   a property of the type, not spacing. */
.content-band-003 .content-band-003__line-mask {
	padding-bottom: 0.08em;
}

/* ---- The editor: the calm band, the photo shorter -------------------------- */

.editor-styles-wrapper .content-band-003 .content-band-003__photo.content-band-003__photo {
	position: relative;
	height: 60vh;
}

/* The editor writes an inline `height: auto` on every block image, so the
   photo would stop filling its frame there (white below it). Only !important
   beats an inline style; scoped to the editor, the front end is unaffected. */
.editor-styles-wrapper .content-band-003__photo img {
	height: 100% !important;
}

@media (max-width: 40rem) {
	.content-band-003 {
		--content-band-003-frame: var(--gutter);
	}
}

/* Under a pinned header (inc/header.php) the photo's top edge meets the bar's
   foot: header.js publishes its real height. */
body.header-sticky .content-band-003 {
	--content-band-003-top-edge: var(--header-height);
}

/* A phone's bar is the shorter one (site.css §3a, the same width). */
@media (max-width: 40rem) {
	body.header-sticky .content-band-003 {
		--content-band-003-top-edge: var(--wp--custom--header-height-sm);
	}
}