/**
 * Home slider mobile refinements for theme 71.8.
 */

@media (max-width: 1179px) {
	/* The mobile navigation opens over the current hero. When that hero is a
	 * dark Wistia slide, retain the light logo/icons instead of the generic
	 * menu-open black icon treatment. */
	body.no-overflow .header-section.ecs-home-slider-light-header:not(.shrink) {
		background-color: transparent !important;
	}

	body.no-overflow .header-section.ecs-home-slider-light-header:not(.shrink) .dark-logo {
		display: none !important;
		opacity: 0 !important;
		visibility: hidden !important;
	}

	body.no-overflow .header-section.ecs-home-slider-light-header:not(.shrink) .white-logo {
		display: block !important;
		opacity: 1 !important;
		visibility: visible !important;
	}

	body.no-overflow .header-section.ecs-home-slider-light-header:not(.shrink) .menu-btn span {
		background-color: #fff !important;
	}

	body.no-overflow .header-section.ecs-home-slider-light-header:not(.shrink) .header-search-icon svg path {
		fill: #fff !important;
	}
}

@media (max-width: 767px) {
	/* Use one stable phone-sized hero footprint. The small viewport unit stays
	 * fixed while Safari's browser controls expand and collapse, avoiding a
	 * second source of height movement after the carousel has initialized. */
	.hero-section.with-slider {
		--ecs-home-slider-dots-left: 4%;
		--ecs-home-slider-dots-width: 92%;
		box-sizing: border-box;
		min-height: 720px;
		min-height: max(720px, 100svh);
		padding-top: var(--ecs-home-slider-top-space) !important;
		padding-bottom: 0 !important;
		position: relative;
	}

	.hero-section.with-slider > .hero-clients {
		box-sizing: border-box;
		height: var(--ecs-home-hero-min-height) !important;
		min-height: var(--ecs-home-hero-min-height) !important;
		overflow: hidden;
	}

	.hero-section.with-slider > .hero-clients > .wrapper,
	.hero-section.with-slider > .hero-clients > .wrapper > .hero-inner {
		box-sizing: border-box;
		height: 100%;
		min-height: 100%;
	}

	.hero-section.with-slider .hero-inner {
		align-items: stretch;
		flex-direction: column;
		flex-wrap: nowrap !important;
		justify-content: flex-start;
	}

	/* Standard slides place a deliberately oversized artwork crop above the
	 * copy. The fixed slot and content heights sum to the same total on every
	 * slide, so neither the hero nor its dots can move during rotation. */
	.hero-section.with-slider:not(.ecs-home-slider-video-active) .hero-clients-logos {
		flex: 0 0 270px !important;
		height: 270px !important;
		margin: 0 0 8px !important;
		max-width: 100% !important;
		order: -1;
		overflow: hidden;
		position: relative;
		right: auto !important;
		top: auto !important;
		transform: none !important;
		width: 100% !important;
	}

	.hero-section.with-slider:not(.ecs-home-slider-video-active) .hero-clients-logos:has(.fixed-animation),
	.hero-section.with-slider:not(.ecs-home-slider-video-active) .hero-clients-logos.ecs-home-slider-lottie-artwork {
		align-items: center !important;
		display: flex !important;
		left: 50% !important;
		margin-right: 0 !important;
		max-width: none !important;
		right: auto !important;
		transform: translateX(-50%) !important;
		width: 100vw !important;
	}

	.hero-section.with-slider .hero-content {
		box-sizing: border-box;
		flex: 0 0 var(--ecs-home-slider-content-height) !important;
		height: var(--ecs-home-slider-content-height) !important;
		max-width: 100% !important;
		order: 1;
		width: 100% !important;
	}

	.hero-section.with-slider:not(.ecs-home-slider-video-active) .fixed-animation,
	.hero-section.with-slider:not(.ecs-home-slider-video-active) .dynamic-image-slide {
		align-items: center;
		display: flex;
		height: 100%;
		justify-content: center;
		margin: 0 !important;
		max-width: 100%;
		overflow: hidden;
		position: relative;
		width: 100%;
	}

	/* The Lottie composition is 2220 x 800. Its central e-logo sits at roughly
	 * 50% x / 66.125% y, so pin that exact point to the middle of the artwork
	 * slot. The 300vw composition intentionally crops beyond both phone edges;
	 * the central e-logo remains centered while the overall animation reads at
	 * the larger scale requested for mobile. */
	.hero-section.with-slider:not(.ecs-home-slider-video-active) .hero-clients-logos #lottie-container {
		height: min(108.108vw, 540.54px) !important;
		left: 50% !important;
		margin: 0 !important;
		max-width: none !important;
		min-height: 0 !important;
		padding: 0 !important;
		position: absolute !important;
		top: 50% !important;
		transform: translate(-50%, -66.125%) !important;
		transform-origin: 50% 66.125% !important;
		width: min(300vw, 1500px) !important;
	}

	.hero-section.with-slider:not(.ecs-home-slider-video-active) .hero-clients-logos #lottie-container svg {
		display: block;
		height: 100% !important;
		max-height: none !important;
		max-width: none !important;
		overflow: visible;
		width: 100% !important;
	}

	.hero-section.with-slider:not(.ecs-home-slider-video-active) .dynamic-image-slide img {
		display: block;
		height: 100% !important;
		max-height: 100% !important;
		max-width: 140% !important;
		object-fit: contain;
		width: 140% !important;
	}

	/* Video slides keep the identical foreground footprint but vertically center
	 * their copy because the artwork row is intentionally absent. */
	.hero-section.with-slider.ecs-home-slider-video-active .hero-inner {
		align-items: stretch;
		justify-content: center;
	}

	.hero-section.with-slider.ecs-home-slider-video-active .hero-content {
		flex: 0 0 var(--ecs-home-slider-content-height) !important;
		height: var(--ecs-home-slider-content-height) !important;
	}

	/* Continue the Wistia image behind the transparent fixed header while the
	 * foreground remains clipped to the stable hero box. */
	.hero-section.with-slider.ecs-home-slider-video-active {
		overflow: visible;
	}

	.hero-section.with-slider.ecs-home-slider-video-active .ecs-home-slider-backgrounds {
		top: calc(-1 * var(--ecs-home-slider-top-space));
	}

	.hero-section.with-slider.ecs-home-slider-video-active .ecs-home-slider-background {
		overflow: hidden;
	}

	.hero-section.with-slider.ecs-home-slider-video-active > .hero-clients,
	.hero-section.with-slider.ecs-home-slider-video-active > .is-style-gl-s6 {
		overflow: hidden;
	}

	/* The dots now live in a section-level rail. Keep their touch targets and
	 * visual treatment identical while their anchor remains fixed across every
	 * standard and video slide. */
	.hero-section.with-slider > .ecs-home-slider-controls .slick-dots li {
		display: block;
		flex: 0 0 20px;
		height: 20px;
		margin: 0 4px;
		width: 20px;
	}

	.hero-section.with-slider > .ecs-home-slider-controls .slick-dots li button {
		height: 20px;
		min-height: 20px;
		padding: 5px;
		width: 20px;
	}

	.hero-section.with-slider > .ecs-home-slider-controls .slick-dots li button::before {
		border: 1px solid var(--ecs_border, #05c2de);
		border-radius: 50%;
		font-size: 40px;
		height: 20px;
		line-height: 18px;
		width: 20px;
	}
}

@media (max-width: 380px) {
	.hero-section.with-slider:not(.ecs-home-slider-video-active) .hero-clients-logos {
		flex-basis: 258px !important;
		height: 258px !important;
	}
}