/**
 * Statement
 *
 * One centered display heading, optionally under an eyebrow and over a paragraph. That frame
 * covers the eyebrow lockup and the linen band; the description's size, its gap and its
 * measure are chosen defaults nothing specifies, each a one-liner to change.
 */

.module.statement.size-mega {
	align-content: center;
	display: grid;
	min-height: 100dvh;
}

.module.statement.bg-linen {
	padding-block: var(--module-spacing-xlarge) var(--module-spacing-large);
}

/*** Linen run — the band holds the inset, so it takes this module's rather than adding to it ***/

.wash.linen:has(> .module.statement:first-child) {
	padding-top: var(--module-spacing-xlarge);
}

.wash.linen:has(> .module.statement:last-child) {
	padding-bottom: var(--module-spacing-xlarge);
}

.module.statement .intro {
	row-gap: var(--text-spacing-small);
	text-align: center;
}

.module.statement .intro > * {
	grid-column: 1 / -1;
	margin: 0;
}

.module.statement .eyebrow {
	color: var(--storm);
	justify-content: center;
}

/*** Compact and Section — section-heading type on a ten-column measure ***/

.module.statement:is(.size-compact, .size-section) .intro > :is(h1, h2, h3),
.module.statement.size-section .intro > .description {
	grid-column: 2 / -2;
}

/* Section is a section heading, and this build paints those teal wherever they lead a band
   rather than carry one. Set on the module so the eyebrow and the deck keep the body color. */
.module.statement.size-section {
	--heading-color: var(--dark-teal);
}

.module.statement .intro > .description {
	grid-column: 3 / -3;
}

.module.statement .description > :first-child {
	margin-top: 0;
}

.module.statement .description > :last-child {
	margin-bottom: 0;
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem/16)) {

	.module.statement:is(.size-compact, .size-section) .intro > :is(h1, h2, h3),
	.module.statement.size-section .intro > .description,
	.module.statement .intro > .description {
		grid-column: 1 / -1;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem/16)) {

	.module.statement .intro {
		row-gap: var(--text-spacing-xsmall);
	}

	/* The statement arrives already said at this width. The reveal holds it back until the module
	   is properly on screen, which it is written to do — and here the module is the second or third
	   thing on the page, near enough the top that the hold outlasts the first look and the band
	   reads as empty. Stated rather than left to the library: the attribute drives the split, and
	   what is hidden is the parts it makes. */
	.module.statement [data-jazzy-scroll] {
		pointer-events: all;
	}

	.module.statement [data-jazzy-scroll*="fade-in"],
	.module.statement [data-jazzy-scroll^="reveal-"].is-split .split-part {
		opacity: 1;
		transform: none;
	}

}