/**
 * Module: Case Studies
 *
 * The card arrow stays in flow rather than taking `.corner`: `.card-link::after` has to resolve
 * against the card, and a positioned button would become its containing block instead.
 * The dialog header reuses the card rules, so a change to one lands on both.
 */

/*** Module: Case Studies ***/

.module.case-studies {
	--texture-fade: 100%;
}

.module.case-studies.textured {
	padding-bottom: var(--module-spacing-large);
}

.module.case-studies .container > .heading-2 {
	margin-bottom: var(--module-spacing-medium);
}

.module.case-studies .cards {
	display: flex;
	flex-direction: column;
	gap: var(--module-spacing-small);
	list-style: none;
	margin: 0;
	padding: 0;
}

.module.case-studies .cards .eyebrow {
	margin-bottom: var(--text-spacing-small);
}

.module.case-studies .actions {
	display: flex;
	justify-content: center;
	margin-top: var(--module-spacing-small);
}

/** Card **/

.module.case-studies :is(.cards .card, .case-study header) {
	--texture-opacity: 0.08;
	padding: var(--text-spacing-large) var(--text-spacing-xxsmall) var(--text-spacing-xxsmall) calc(var(--one-column-width));
}

.module.case-studies :is(.cards .card, .case-study header) > :not(.texture, .btn) {
	max-width: calc(9 * var(--one-column-width) + 9 * var(--gap));
}

.module.case-studies :is(.cards .card, .case-study header) .logo {
	align-items: flex-end;
	display: flex;
	height: 48px;
	margin-bottom: var(--text-spacing-small);
}

.module.case-studies :is(.cards .card, .case-study header) .logo img {
	max-height: 100%;
	width: auto;
}

.module.case-studies :is(.cards .card, .case-study header) .heading-4 {
	margin-bottom: var(--text-spacing-xsmall);
}

.module.case-studies :is(.cards .card, .case-study header) p {
	margin: 0;
}

.module.case-studies .cards .card > .btn {
	align-self: flex-end;
}

.module.case-studies .cards .card:has(.card-link:is(:hover, :focus-visible)) {
	background: color-mix(in srgb, var(--teal-deep) 85%, var(--teal));
}

@media (prefers-reduced-motion: no-preference) {

	.module.case-studies .cards .card {
		transition: background-color .3s ease;
	}

}

/** All — Grid **/

.module.case-studies .list-eyebrow {
	margin: 0 0 var(--text-spacing-small);
}

.module.case-studies.is-grid .cards {
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.module.case-studies.is-grid .cards > li {
	display: grid;
}

.module.case-studies.is-grid .cards .card {
	padding-left: var(--text-spacing-large);
}

.module.case-studies.is-grid .cards .card > :not(.texture, .btn) {
	margin-right: calc(var(--text-spacing-large) - var(--text-spacing-xxsmall));
	max-width: none;
}

.module.case-studies.is-grid .cards .card > .btn {
	margin-top: auto;
}

/** All — Load More **/

.module.case-studies [jx-form-results] {
	display: flex;
	flex-direction: column;
}

.module.case-studies [jx-form-pagination="load_more"] {
	align-self: center;
	margin-top: var(--module-spacing-small);
}

.module.case-studies .load-more-complete {
	display: none;
}

.module.case-studies.loading [jx-form-results] .cards > li {
	animation: loading-pulse 1.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {

	.module.case-studies.loading [jx-form-results] .cards > li {
		animation: none;
		opacity: .6;
	}

}

/** Dialog **/

html:has(.jazzy-dialog.case-study[open]) {
	overflow: hidden;
}

.jazzy-dialog.case-study {
	--dialog-inset: var(--text-spacing-medium);
	background: none;
	color: var(--text);
	max-height: calc(100dvh - 2 * var(--dialog-inset));
	max-width: none;
	overflow-y: auto;
	overscroll-behavior: contain;
	width: calc(var(--container-width) - 2 * var(--container-outer-padding));
}

.module.case-studies .jazzy-dialog.case-study > header {
	padding-bottom: calc(var(--icon-button-size) + var(--text-spacing-xxsmall));
}

.module.case-studies .case-study .story {
	gap: var(--text-spacing-large);
	padding: var(--text-spacing-xlarge) calc(var(--one-column-width) + var(--gap)) var(--text-spacing-xlarge) calc(2 * var(--gap));
}

.module.case-studies .case-study .story :is(h2, h3, h4) {
	color: var(--teal-deep);
	font-size: var(--heading-6-size);
	line-height: calc(34 / 24);
}

.module.case-studies .case-study .story .small-text > * {
	margin: 0 0 12px;
}

.module.case-studies .case-study .story .small-text > :last-child {
	margin-bottom: 0;
}

.module.case-studies .case-study .story .small-text > * + :is(h2, h3, h4) {
	margin-top: var(--text-spacing-large);
}

.module.case-studies .case-study .story a {
	text-decoration: underline;
}

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

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

	.module.case-studies.is-grid .cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.module.case-studies :is(.cards .card, .case-study header) {
		padding-left: var(--text-spacing-large);
	}

	.module.case-studies :is(.cards .card, .case-study header) > :not(.texture, .btn) {
		margin-right: calc(var(--text-spacing-large) - var(--text-spacing-xxsmall));
		max-width: none;
	}

	.module.case-studies .case-study .story {
		padding: var(--text-spacing-xlarge) var(--text-spacing-large);
	}

}

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

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

	.module.case-studies .container > .heading-2 br {
		display: none;
	}

	.module.case-studies .cards {
		gap: var(--gap);
	}

	.module.case-studies :is(.cards .card, .case-study header) {
		padding-left: var(--text-spacing-small);
		padding-top: var(--text-spacing-medium);
	}

	.module.case-studies :is(.cards .card, .case-study header) > :not(.texture, .btn) {
		margin-right: calc(var(--text-spacing-small) - var(--text-spacing-xxsmall));
	}

	.jazzy-dialog.case-study {
		--dialog-inset: var(--container-outer-padding);
	}

	.module.case-studies .case-study .story {
		padding: var(--text-spacing-medium) var(--text-spacing-small);
	}

}