/**
 * Single insight — the article shell, and the spacing of the related-posts and call-to-action
 * bands that follow it.
 *
 * The intro and body share the container's grid with row gaps zeroed, so the vertical rhythm is
 * the margins below. The dek box breaks out of its columns by one gap on each side and pads back
 * in by the same amount, so its text keeps the body's left edge.
 */

/*** Intro ***/

.insight .intro {
	--texture-fade: 65%;
	--texture-opacity: 0.08;
	padding-bottom: var(--module-spacing-small);
	padding-top: calc(var(--header-space) + var(--module-spacing-medium) + var(--text-spacing-xxsmall));
}

.insight .intro .container {
	row-gap: 0;
}

.insight .intro .container > * {
	grid-column: 2 / span 9;
}

.insight .intro .heading-1 {
	grid-column: 2 / span 10;
	margin: var(--text-spacing-small) 0 0;
}

.insight .intro .byline {
	margin: var(--text-spacing-xsmall) 0 0;
}

/** Dek **/

.insight .intro .dek {
	--texture-opacity: 0.08;
	margin: var(--module-spacing-small) calc(var(--gap) * -1) 0;
	padding: var(--text-spacing-medium) var(--gap);
}

.insight .dek p {
	margin: 0;
}

/*** Body ***/

.insight .body {
	grid-column: 2 / span 9;
}

/*** Following Bands ***/

.single .module.latest-posts {
	margin-top: calc(var(--module-spacing-xlarge) + var(--text-spacing-large));
	padding-bottom: var(--text-spacing-large);
}

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

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

	.insight .intro .container > *,
	.insight .intro .heading-1,
	.insight .body {
		grid-column: 1 / -1;
	}

	.insight .intro .dek {
		margin-left: 0;
		margin-right: 0;
		padding: var(--text-spacing-small);
	}

}

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

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

	.insight .intro {
		padding-top: calc(var(--header-space) + var(--module-spacing-small));
	}

	.insight .intro .dek {
		margin-top: var(--text-spacing-xlarge);
		padding: var(--text-spacing-small) var(--text-spacing-xsmall);
	}

}