/**
 * Module: Hero
 *
 * Every style lives here rather than in per-style files: the router loads its partials from
 * `heroes/`, while the head preload looks for `hero/{style}`, so a per-style file would only load
 * on one of the two paths.
 *
 * Content sits on the container's own grid with row gaps zeroed, so the vertical rhythm is the
 * margins below. A column that ends one gap past its last track reaches the next column's start.
 */

/*** Module: Hero ***/

.module.hero {
	padding: var(--module-spacing-large) 0;
}

.module.hero.under-header {
	padding-top: calc(var(--header-space) + var(--module-spacing-large));
}

.module.hero .container {
	row-gap: 0;
}

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

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

/** Style: Text **/

.module.hero.style-text .container > * {
	grid-column: 1 / span 10;
	margin-right: calc(var(--gap) * -1);
}

.module.hero.style-text .breadcrumb,
.module.hero.style-text .eyebrow {
	margin-bottom: var(--text-spacing-xsmall);
}

.module.hero.style-text .description {
	grid-column: 1 / span 9;
	margin-top: var(--text-spacing-small);
}

.module.hero.style-text .buttons {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-medium) var(--text-spacing-large);
	grid-column: 1 / -1;
	margin-right: 0;
	margin-top: var(--text-spacing-large);
}

/** Style: Split **/

.module.hero.style-split .description :is(strong, b) {
	color: var(--cyan);
}

.module.hero.style-split .description p + p {
	margin-top: var(--text-spacing-xxsmall);
}

.module.hero.style-split .description p {
	margin-bottom: 0;
}

.module.hero.style-split.arrangement-beside :is(.heading-1, .heading-2) {
	align-self: start;
	grid-column: 1 / span 5;
	grid-row: 1;
	margin-right: calc(var(--gap) * -1);
}

.module.hero.style-split.arrangement-beside .description {
	align-self: start;
	grid-column: 7 / span 5;
	grid-row: 1;
	margin-right: calc(var(--gap) * -1);
	margin-top: var(--module-spacing-small);
}

.module.hero.style-split.arrangement-below :is(.heading-1, .heading-2) {
	grid-column: 1 / span 9;
}

.module.hero.style-split.arrangement-below .description {
	grid-column: 8 / -1;
	margin-top: var(--text-spacing-large);
}

/** Style: Content + Image **/

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

.module.hero.style-content-image .media {
	aspect-ratio: 269 / 415;
	grid-column: 2 / span 3;
	grid-row: 1;
	margin-left: calc(var(--gap) * -1);
	margin-right: var(--gap);
}

.module.hero.style-content-image .content {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	grid-column: 5 / span 7;
	grid-row: 1;
	margin-right: calc(var(--gap) * -1);
}

.module.hero.style-content-image .eyebrow {
	margin-bottom: var(--text-spacing-xsmall);
}

.module.hero.style-content-image .subhead {
	margin: var(--text-spacing-xxsmall) 0 0;
}

.module.hero.style-content-image .content > .btn {
	margin-top: var(--text-spacing-large);
}

.module.hero.style-content-image.layout-image-right .media {
	grid-column: 9 / span 3;
	margin-left: var(--gap);
	margin-right: calc(var(--gap) * -1);
}

.module.hero.style-content-image.layout-image-right .content {
	grid-column: 1 / span 7;
}

.module.hero.style-content-image.no-media:is(.layout-image-left, .layout-image-right) .content {
	align-items: center;
	grid-column: 3 / span 8;
	margin: 0;
	text-align: center;
}

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

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

	.module.hero.style-text .container > * {
		grid-column: 1 / -1;
		margin-right: 0;
	}

	.module.hero.style-text .description {
		grid-column: 1 / span 10;
	}

	.module.hero.style-split.arrangement-beside :is(.heading-1, .heading-2) {
		grid-column: 1 / span 6;
		margin-right: 0;
	}

	.module.hero.style-split.arrangement-beside .description {
		grid-column: 7 / -1;
		margin-right: 0;
	}

	.module.hero.style-split.arrangement-below :is(.heading-1, .heading-2) {
		grid-column: 1 / span 11;
	}

	.module.hero.style-split.arrangement-below .description {
		grid-column: 7 / -1;
	}

	.module.hero.style-content-image .media {
		grid-column: 1 / span 4;
		margin-left: 0;
		margin-right: 0;
	}

	.module.hero.style-content-image .content {
		grid-column: 5 / -1;
		margin-right: 0;
	}

	.module.hero.style-content-image.layout-image-right .media {
		grid-column: 9 / -1;
		margin-left: 0;
		margin-right: 0;
	}

	.module.hero.style-content-image.layout-image-right .content {
		grid-column: 1 / span 8;
	}

	.module.hero.style-content-image.no-media:is(.layout-image-left, .layout-image-right) .content {
		grid-column: 2 / span 10;
	}

}

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

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

	.module.hero.style-text .description {
		grid-column: 1 / -1;
	}

	.module.hero.style-split.arrangement-beside :is(.heading-1, .heading-2),
	.module.hero.style-split.arrangement-beside .description,
	.module.hero.style-split.arrangement-below :is(.heading-1, .heading-2),
	.module.hero.style-split.arrangement-below .description {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	.module.hero.style-split.arrangement-beside .description {
		margin-top: var(--text-spacing-small);
	}

	.module.hero.style-content-image .container {
		align-items: start;
	}

	.module.hero.style-content-image .media,
	.module.hero.style-content-image.layout-image-right .media {
		grid-column: 1 / span 4;
		grid-row: 1;
	}

	.module.hero.style-content-image .content,
	.module.hero.style-content-image.layout-image-right .content {
		grid-column: 1 / -1;
		grid-row: 2;
		margin-top: var(--text-spacing-large);
	}

	.module.hero.style-content-image.no-media:is(.layout-image-left, .layout-image-right) .content {
		grid-column: 1 / -1;
		margin-top: 0;
	}

}

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

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

	.module.hero.style-text .container > *,
	.module.hero.style-text .description {
		grid-column: 1 / -1;
	}

	.module.hero.style-content-image .media,
	.module.hero.style-content-image.layout-image-right .media {
		grid-column: 1 / -1;
		width: 60%;
	}

}