/*
 * Layout "editorial": full-width cover (copy + poem) over a light subscription band with the signup card.
 * Used by cognitivepunk.com.
 */

.bcs-hero.wp-block-cover {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	min-height: 730px;
	padding: 56px var(--gutter);
	align-items: stretch;
	justify-content: flex-start;
	color: var(--wp--preset--color--hero-ink);
}

.bcs-hero .wp-block-cover__inner-container {
	position: relative;
	width: 100%;
	max-width: none;
	color: inherit;
}

.bcs-copy {
	max-width: 450px;
}

.bcs-hero .bcs-eyebrow {
	color: var(--wp--preset--color--eyebrow);
}

.bcs-poem {
	font: 400 18px/1.65 var(--display-font);
	max-width: 430px;
	margin-top: 24px;
}

.bcs-poem .bcs-stanza + .bcs-stanza {
	margin-top: 16px;
}

.bcs-poem .bcs-line {
	display: block;
	animation: poem-in 0.9s both;
}

.bcs-poem .bcs-stanza:nth-child(1) .bcs-line:nth-child(1) { animation-delay: 0s; }
.bcs-poem .bcs-stanza:nth-child(1) .bcs-line:nth-child(2) { animation-delay: 0.25s; }
.bcs-poem .bcs-stanza:nth-child(1) .bcs-line:nth-child(3) { animation-delay: 0.5s; }
.bcs-poem .bcs-stanza:nth-child(1) .bcs-line:nth-child(4) { animation-delay: 0.75s; }
.bcs-poem .bcs-stanza:nth-child(2) .bcs-line:nth-child(1) { animation-delay: 1s; }
.bcs-poem .bcs-stanza:nth-child(2) .bcs-line:nth-child(2) { animation-delay: 1.25s; }
.bcs-poem .bcs-stanza:nth-child(2) .bcs-line:nth-child(3) { animation-delay: 1.5s; }
.bcs-poem .bcs-stanza:nth-child(2) .bcs-line:nth-child(4) { animation-delay: 1.75s; }

@keyframes poem-in {
	0% { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: none; }
}

/* Sits 28px above the cover's bottom edge: the inner container ends at the cover's 56px padding. */
.bcs-page .bcs-scales {
	position: absolute;
	left: 0;
	bottom: -28px;
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.bcs-spread {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 440px;
	gap: 64px;
	padding: 48px var(--gutter);
	background: var(--wp--preset--color--spread-bg);
	color: var(--wp--preset--color--spread-ink);
}

.bcs-intro {
	max-width: 550px;
	padding-top: 16px;
}

.bcs-page .bcs-display {
	font: 400 clamp(2.7rem, 4.4vw, 4.5rem) / 1.04 var(--display-font);
	letter-spacing: -0.03em;
}

.bcs-page .bcs-teaser {
	display: table;
	margin-top: 28px;
	border-top: 1px solid;
	padding-top: 12px;
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--spread-accent);
}

/* Mobile poem: a duplicate of the cover poem, shown only on small screens. */
.bcs-poem-mobile {
	display: none;
}

@media (max-width: 1100px) {
	.bcs-spread {
		grid-template-columns: minmax(0, 1fr) 390px;
		gap: 32px;
	}
}

@media (max-width: 700px) {
	/* A child theme paints its art-directed mobile crop as this element's background (and hides the desktop <img>). */
	.bcs-hero.wp-block-cover {
		min-height: 216px !important;
		padding: 20px;
	}

	.bcs-page .bcs-cover-line {
		font-size: 52px;
		line-height: 1;
		margin: 10px 0;
	}

	.bcs-hero .bcs-eyebrow {
		font-size: 9px;
	}

	.bcs-page .bcs-scales,
	.bcs-hero .bcs-poem {
		display: none;
	}

	.bcs-spread {
		display: block;
		padding: 20px;
	}

	.bcs-intro {
		display: none;
	}

	.bcs-poem-mobile {
		display: block;
		padding: 28px 24px;
		background: var(--wp--preset--color--ground);
		color: var(--wp--preset--color--hero-ink);
	}

	.bcs-poem-mobile .bcs-poem {
		font-size: 19px;
		line-height: 1.65;
		margin: 0;
	}
}