/**
 * Hero style: Showcase
 *
 * Copy on six columns; the photograph starts on column 6 and runs to the right edge of the
 * screen. 637 - 122 = 515 = 5 x 103, so the photo's left edge is a real column boundary and
 * needs no nudging.
 */

/* The mark now runs past the right edge of the screen, so the module has to be the thing that
   cuts it off. `clip` rather than `hidden`: it trims without turning the module into a scroll
   container, which is what would otherwise break sticky descendants and anchor jumps. */
.module.hero.style-showcase {
	overflow-x: clip;
}

.module.hero.style-showcase .container {
	align-items: center;
}

.module.hero.style-showcase .content,
.module.hero.style-showcase .media {
	grid-row: 1;
}

.module.hero.style-showcase .content {
	grid-column: 1 / span 6;
	padding-bottom: var(--text-spacing-small);
	position: relative;
	z-index: 1;
}

.module.hero.style-showcase .content > * {
	margin: 0;
}

.module.hero.style-showcase .content > * + * {
	margin-top: var(--text-spacing-small);
}

.module.hero.style-showcase .media {
	aspect-ratio: 803 / 636;
	border-radius: 10px 0 0 10px;
	grid-column: 6 / -1;
	margin-right: var(--viewport-edge);
	overflow: visible;
}

.module.hero.style-showcase .watermark {
	bottom: 0;
	color: var(--charcoal);
	opacity: .05;
	pointer-events: none;
	position: absolute;
	/* Pushed off the plate's right edge rather than tucked against it. A percentage keeps the
	   shove in step with the plate as the grid narrows, where a fixed 400px would swallow a
	   small plate whole; 44% is that 400px at the width the page was drawn to. */
	right: -44%;
	width: calc(1400 / 803 * 100%);
	z-index: -1;
}

.module.hero.style-showcase .watermark svg {
	display: block;
	max-width: none;
	width: 100%;
}

.module.hero.style-showcase .media img {
	border-radius: inherit;
}

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

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

	/* The trail sits directly above the lockup here rather than a screen's width away from it. */
	.module.hero.style-showcase {
		padding-top: var(--module-spacing-medium);
	}

	.module.hero.style-showcase .container {
		display: block;
	}

	.module.hero.style-showcase .content {
		padding-bottom: 0;
	}

	/* Under the copy rather than beside it, but still the plate that runs off the right of the
	   screen with its mark behind — the rung below keeps both. */
	.module.hero.style-showcase .media {
		margin-top: var(--text-spacing-xlarge);
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ 651-950 - Tablet Sizes Only */
/***************************************************************************************************************************************************************************************/

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

	/* Still the plate that runs off the right of the screen, just a smaller one under the copy
	   instead of beside it — so it keeps its square right edge and the mark behind it. */
	.module.hero.style-showcase .media {
		border-radius: 0;
		margin-left: auto;
		margin-right: var(--viewport-edge);
		margin-top: -64px;
		width: 80%;
	}

}

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

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

	.module.hero.style-showcase {
		padding-top: var(--module-spacing-large);
	}

	.module.hero.style-showcase .content > * + * {
		margin-top: var(--text-spacing-xsmall);
	}

	/* The plate follows the copy closely here rather than standing a text-xlarge off it: with the
	   two stacked on a phone, the run reads as one lockup and the mark behind the plate comes up
	   with it. */
	.module.hero.style-showcase .media {
		margin-top: var(--text-spacing-xsmall);
	}

}