/**
 * Content
 *
 * Rich text on the 8-column body measure, over a full-grid third-party frame.
 * The type is all global (.heading-3.semibold, .eyebrow, .content-styles, and the body size
 * an editor picks); this file only places the two grid children and sizes the frame.
 * A `background` choice puts the module in a page-level .wash run; nothing here paints it.
 */

.module.content .container.grid {
	row-gap: var(--module-spacing-small);
}

.module.content .content-styles {
	grid-column: 3 / span 8;
	text-align: center;
}

.module.content .content-styles > .eyebrow + * {
	margin-top: var(--text-spacing-xxsmall);
}

.module.content .content-styles > .eyebrow + :is(table, .table-scroll) {
	margin-top: var(--text-spacing-small);
}

.module.content .content-styles > :first-child {
	margin-top: 0;
}

.module.content .content-styles > :last-child {
	margin-bottom: 0;
}

.module.content .content-styles > .image {
	display: block;
	line-height: 0;
}

.module.content .content-styles > .image:not(:last-child) {
	margin-bottom: var(--text-spacing-medium);
}

.module.content .content-styles > [class^="heading-"] {
	margin-bottom: var(--text-spacing-xsmall);
}

.module.content .content-styles > [class^="heading-"]:has(+ .eyebrow) {
	margin-bottom: var(--module-spacing-small);
}

/** Style: lead — a teal head over an article-scale deck, on a ten-column measure **/

.module.content.style-lead .content-styles {
	grid-column: 2 / span 10;
}

.module.content.style-lead.align-left .content-styles {
	grid-column: 1 / span 10;
}

.module.content.style-lead .content-styles > [class^="heading-"] {
	color: var(--dark-teal);
}

/** Layout: align-left **/

.module.content.align-left .content-styles {
	grid-column: 1 / span 8;
	text-align: left;
}

/** Width: wide — ten columns rather than eight, for a table or a longer table of contents **/

.module.content.width-wide .content-styles {
	grid-column: 2 / -2;
}

.module.content.width-wide.align-left .content-styles {
	grid-column: 1 / span 10;
}

/** Embed **/

.module.content .embed {
	grid-column: 1 / -1;
}

.module.content .embed iframe {
	border: 0;
	display: block;
	width: 100%;
}

.module.content .embed.embed-short iframe {
	height: 480px;
}

.module.content .embed.embed-medium iframe {
	height: 800px;
}

.module.content .embed.embed-tall iframe {
	height: 1200px;
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1200 - Smaller Desktop Sizes / Larger Tablet Sizes */
/***************************************************************************************************************************************************************************************/

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

	.module.content .content-styles {
		grid-column: 2 / -2;
	}

	.module.content.align-left .content-styles,
	.module.content.width-wide.align-left .content-styles {
		grid-column: 1 / -2;
	}

	/* A notice runs the container's width a rung earlier than prose does. Prose is held to eight
	   columns for the length of its line; a notice is one sentence on a coloured bar, and at eight
	   columns of a narrowing container the bar reads as having shrunk rather than as a measure. */
	.module.content .content-styles:has(> .shortcode.notice) {
		grid-column: 1 / -1;
	}

}

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

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

	.module.content .content-styles > [class^="heading-"]:has(+ .eyebrow) {
		margin-bottom: var(--text-spacing-small);
	}


	.module.content .content-styles,
	.module.content.align-left .content-styles,
	.module.content.width-wide .content-styles,
	.module.content.width-wide.align-left .content-styles,
	.module.content.style-lead .content-styles,
	.module.content.style-lead.align-left .content-styles {
		grid-column: 1 / -1;
	}

}

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

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

	.module.content .content-styles > [class^="heading-"] {
		margin-bottom: 0;
	}

	/* The copy's own step off the heading, which is the one that was left: the heading gave up its
	   margin and the paragraph under it still carried a full line. */
	.module.content .content-styles > [class^="heading-"] + * {
		margin-top: var(--text-spacing-xxsmall);
	}

	/* A table is boxed to scroll sideways here, and the box's own step is an article's rather than
	   a module's. The box runs out to the screen's right edge, so a table wider than the column
	   scrolls away under the edge of the screen rather than stopping short of it at the container.
	   A table that fits keeps the column's width: the bleed is taken back off it, and a wider one
	   is sized by its columns anyway. */
	.module.content .content-styles .table-scroll {
		margin-right: var(--viewport-edge);
		margin-top: var(--text-spacing-medium);
	}

	.module.content .content-styles .table-scroll > table {
		width: calc(100% + var(--viewport-edge));
	}

}