/**
 * Image Marquee
 *
 * Full-bleed by construction: .page-builder is a bare section at body width, so the module
 * section is already viewport-wide — no breakout, no negative margin. The scroll itself is
 * the global .marquee mechanism (style.css → Marquee, script.js → MARQUEE); this file only
 * sizes the photos and places the pause control.
 */

.module.image-marquee .track {
	align-items: center;
}

.module.image-marquee .media {
	aspect-ratio: 400 / 300;
	border-radius: 10px;
	flex: 0 0 auto;
	height: 300px;
}

/* The band's inset is the wrapper's to set: every background this module offers is a wash, so
   the module itself never wears one. Only when the run is this module alone — a longer run is
   spaced by the modules in it. */
.page-builder > .wash:not(.module):has(> .module.image-marquee:only-child) {
	padding-block: var(--module-spacing-medium);
}

.page-builder > .wash.margin-overlap:not(.module):has(> .module.image-marquee:only-child) {
	padding-top: calc(var(--module-overlap) + var(--module-spacing-medium));
}

/* Kept in the page and out of sight: 2.2.2 wants a way to stop the scroll, and the comp does
   not draw one. It comes back for a keyboard, which is the path that has no other way to stop
   it — a pointer can leave the band. */
.module.image-marquee .pause {
	bottom: var(--text-spacing-small);
	display: none;
	opacity: 0;
	position: absolute;
	right: var(--text-spacing-small);
	z-index: 1;
}

.module.image-marquee .pause:focus-visible,
.module.image-marquee .marquee.paused .pause {
	opacity: 1;
}

.module.image-marquee .marquee.scrolling .pause {
	display: flex;
}

.module.image-marquee .pause .icon-play {
	display: none;
}

.module.image-marquee .marquee.paused .pause .icon-pause {
	display: none;
}

.module.image-marquee .marquee.paused .pause .icon-play {
	display: block;
}

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

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

	.module.image-marquee .marquee {
		--marquee-gap: 48px;
	}

	.module.image-marquee .media {
		height: 240px;
	}

}

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

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

	.module.image-marquee .marquee {
		--marquee-gap: 40px;
	}

	.module.image-marquee .media {
		height: 200px;
	}

}