/*** Module: Client Stories ***/

/** Style: grid — heading row over a 2-up client-story-card grid **/

.module.client-stories.style-grid {
	padding-block: var(--module-spacing-large);
}

.module.client-stories.style-grid .header {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--text-spacing-medium);
	grid-column: 1 / -1;
	justify-content: space-between;
	margin-bottom: var(--text-spacing-small);
}

.module.client-stories.style-grid .cards {
	grid-column: 1 / -1;
	grid-template-columns: repeat(2, 1fr);
}

/** Style: carousel — split header + arrows over a swipeable card row **/

.module.client-stories.style-carousel {
	overflow-x: clip;
	padding-block: var(--module-spacing-large);
}

.module.client-stories.style-carousel .header {
	align-items: flex-end;
	column-gap: var(--gap);
	display: flex;
	grid-column: 1 / -1;
	justify-content: space-between;
}

.module.client-stories.style-carousel .intro {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-xsmall);
}

.module.client-stories.style-carousel .intro > * + * {
	margin-top: var(--text-spacing-xsmall);
}

.module.client-stories.style-carousel .intro p {
	margin: 0;
}

.module.client-stories.style-carousel .jazzy-arrows {
	flex-shrink: 0;
}

/* Slide mode wraps the <ul> in .jazzy-carousel-wrapper (the grid child that clips
   the track). Break it past the container to the viewport's right edge so cards
   scroll/peek to the edge — the section's overflow-x: clip bounds them — while the
   first card stays aligned with the header at the content edge. (The .cards rule
   below only reaches the un-wrapped static fallback.) */
.module.client-stories.style-carousel .jazzy-carousel-wrapper {
	grid-column: 1 / -1;
	width: calc(100% + var(--container-outer-margin) + var(--container-outer-padding));
}

.module.client-stories.style-carousel .cards {
	grid-column: 1 / -1;
	list-style: none;
	margin: var(--text-spacing-small) 0 0;
	padding: 0;
}

/* Fallback when too few stories to scroll — Jazzy leaves the list static; the
   arrows would be inert, so drop them and lay the cards out as a plain grid. */
.module.client-stories.style-carousel:has(.cards.jazzy-static) .jazzy-arrows {
	display: none;
}

.module.client-stories.style-carousel .cards.jazzy-static {
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(3, 1fr);
}

/** Style: featured **/

.module.client-stories.style-featured {
	overflow-x: clip;
	padding-block: var(--module-spacing-large);
}

/* isolation contains the .panel's z-index:-1 behind everything else. */
.module.client-stories.style-featured .container {
	align-items: start;
	isolation: isolate;
	row-gap: var(--text-spacing-xlarge);
}

.module.client-stories.style-featured .panel {
	align-self: stretch;
	background: var(--parchment);
	grid-column: 4 / -1;
	grid-row: 1 / span 3;
	justify-self: start;
	width: calc(100% + var(--container-outer-margin) + var(--container-outer-padding));
	z-index: -1;
}

.module.client-stories.style-featured .section-title {
	grid-column: 1 / span 6;
	grid-row: 1;
}

.module.client-stories.style-featured .story-media {
	grid-column: 1 / span 6;
	grid-row: 2;
	position: relative;
}

/* Client logos are white, so overlay them on the still (top-left, clear of the
   bottom-left play button) with a scrim for legibility — matches the archive
   card's logo-on-media treatment. */
.module.client-stories.style-featured .story-media::after {
	background: linear-gradient(135deg, color-mix(in srgb, var(--black) 32%, transparent) 0%, transparent 55%);
	content: '';
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.module.client-stories.style-featured .story-media .logo {
	left: var(--text-spacing-small);
	position: absolute;
	top: var(--text-spacing-small);
	z-index: 2;
}

.module.client-stories.style-featured .view-case-study {
	grid-column: 1 / span 6;
	grid-row: 3;
	justify-self: start;
	/* 40px under the video; the grid's 48px row-gap trims back to it. */
	margin-top: calc(var(--text-spacing-large) - var(--text-spacing-xlarge));
}

.module.client-stories.style-featured .play-iframe,
.module.client-stories.style-featured .play-mp4,
.module.client-stories.style-featured .story-image {
	aspect-ratio: 578 / 326;
	border: 0;
	cursor: pointer;
	display: block;
	overflow: hidden;
	padding: 0;
	position: relative;
	width: 100%;
}

.module.client-stories.style-featured .story-media img {
	height: 100%;
	inset: 0;
	object-fit: cover;
	position: absolute;
	width: 100%;
}

.module.client-stories.style-featured .play-iframe .icon,
.module.client-stories.style-featured .play-mp4 .icon {
	align-items: center;
	aspect-ratio: 1;
	background: var(--orange);
	border-radius: 50%;
	bottom: var(--text-spacing-small);
	color: var(--white);
	display: flex;
	font-size: calc(22rem / 16);
	justify-content: center;
	left: var(--text-spacing-small);
	position: absolute;
	width: 64px;
}

.module.client-stories.style-featured .story-content {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	grid-column: 7 / span 6;
	grid-row: 2 / span 2;
	margin-left: var(--text-spacing-medium);
	padding-block: 0 var(--module-spacing-medium);
}

.module.client-stories.style-featured:not(:has(.story-media)) .panel {
	grid-column: 1 / -1;
	grid-row: 2;
	width: 100%;
}

.module.client-stories.style-featured:not(:has(.story-media)) .story-content {
	grid-column: 1 / span 8;
	grid-row: 2;
	padding: var(--module-spacing-medium);
}

.module.client-stories.style-featured:not(:has(.story-media)) .view-case-study {
	grid-row: 3;
	margin-top: 0;
}

.module.client-stories.style-featured .story-content > .heading-4 + .large-text {
	margin-top: var(--text-spacing-xsmall);
}

.module.client-stories.style-featured .story-content > p {
	margin: 0;
}

.module.client-stories.style-featured .logo img {
	display: block;
	height: auto;
	max-height: 48px;
	max-width: 220px;
	object-fit: contain;
	width: auto;
}

.module.client-stories.style-featured .story-stats {
	display: grid;
	gap: var(--text-spacing-small) var(--gap);
	grid-template-columns: 1fr 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

.module.client-stories.style-featured .stat {
	display: grid;
	grid-template-columns: 1fr;
	row-gap: var(--text-spacing-xxsmall);
}

.module.client-stories.style-featured .stat:has(.metric-icon) {
	align-items: center;
	column-gap: var(--text-spacing-xsmall);
	grid-template-columns: auto 1fr;
}

.module.client-stories.style-featured .metric-icon {
	--metric-icon-size: 40px;
	grid-row: 1;
}

.module.client-stories.style-featured .stat .number {
	color: var(--orange-on-parchment);
	grid-row: 1;
}

.module.client-stories.style-featured .stat .label {
	grid-column: 1 / -1;
	grid-row: 2;
	margin: 0;
}

.module.client-stories.style-featured .story-content > * + * {
	margin-top: var(--text-spacing-small);
}

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

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

	.module.client-stories.style-grid .header {
		margin-bottom: 0;
	}

	.module.client-stories.style-grid .cards {
		grid-template-columns: 1fr;
	}

	.module.client-stories.style-carousel .cards.jazzy-static {
		grid-template-columns: repeat(2, 1fr);
	}

	.module.client-stories.style-featured {
		background: var(--parchment);
	}

	.module.client-stories.style-featured .container {
		display: block;
	}

	.module.client-stories.style-featured .section-title {
		margin-bottom: var(--text-spacing-medium);
	}

	.module.client-stories.style-featured .panel {
		display: none;
	}

	.module.client-stories.style-featured .story-media {
		margin-bottom: var(--text-spacing-medium);
	}

	/* Full-bleed the stacked copy. The no-media variant is echoed so its (0,5,0)
	   all-round padding doesn't survive the padding:0 reset. */
	.module.client-stories.style-featured .story-content,
	.module.client-stories.style-featured:not(:has(.story-media)) .story-content {
		margin: var(--text-spacing-medium) 0 0;
		padding: 0;
	}

	.module.client-stories.style-featured .stat:has(.metric-icon) {
		gap: var(--text-spacing-xxsmall);
	}

	.module.client-stories.style-featured .metric-icon {
		--metric-icon-size: 32px;
	}

	.module.client-stories.style-featured .view-case-study {
		margin-top: var(--text-spacing-medium);
	}

}

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

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

	/* Arrows drop below the intro — beside it they leave the heading ~180px to wrap in. */
	.module.client-stories.style-carousel .header {
		align-items: flex-start;
		flex-direction: column;
		row-gap: var(--text-spacing-small);
	}

	.module.client-stories.style-carousel .cards {
		margin-top: var(--text-spacing-xxsmall);
	}

	.module.client-stories.style-carousel .cards.jazzy-static {
		grid-template-columns: 1fr;
	}

	.module.client-stories.style-featured .story-stats {
		grid-template-columns: 1fr;
	}

}