/**
 * DMF Image Carousel
 *
 * Logo/image carousel that pages through a grid of images. Supports a
 * staggered ("brick") layout, custom arrow images, dots and autoplay.
 *
 * Most colors/sizes are defaults; the majority are overridable via the
 * widget's Style tab (Elementor `selectors`).
 */

.dmf-image-carousel {
	--dmf-ic-stagger: 36px;
	max-width: 1100px;
	margin: 0 auto;
}

.dmf-image-carousel__viewport {
	display: flex;
	align-items: center;
	gap: 16px;
	/* Horizontal drags are swipes; vertical drags keep scrolling the page. */
	touch-action: pan-y;
}

/* --- Arrows --- */

.dmf-image-carousel__arrow {
	flex-shrink: 0;
	background: none;
	border: 0;
	padding: 8px;
	cursor: pointer;
	color: #374151;
	line-height: 0;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.dmf-image-carousel__arrow:hover {
	color: #003057;
}

.dmf-image-carousel__arrow svg {
	width: 28px;
	height: 28px;
}

.dmf-image-carousel__arrow img {
	width: 28px;
	height: auto;
	display: block;
}

/* --- Pages / grid --- */

/* Pages are stacked in a single grid cell so the container auto-sizes to the
   tallest page and we can crossfade between them (no height collapse, no JS
   measuring). */
.dmf-image-carousel__pages {
	flex: 1;
	min-width: 0;
	display: grid;
}

.dmf-image-carousel__page {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
	column-gap: 32px;
	row-gap: 24px;
	opacity: 0;
	visibility: hidden;
	/* Delay the visibility flip until the opacity fade-out finishes so the
	   outgoing page crossfades instead of vanishing. transform is animated too
	   for the Slide effect (JS drives the inline transforms). */
	transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0.5s;
}

.dmf-image-carousel__page.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s linear 0s;
}

/* --- Items --- */

.dmf-image-carousel__item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.dmf-image-carousel__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.dmf-image-carousel__img {
	display: block;
	max-width: 100%;
	max-height: 80px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Grayscale-until-hover treatment (logo wall). */
.dmf-ic-grayscale-yes .dmf-image-carousel__img {
	filter: grayscale(1);
	opacity: 0.75;
	transition: filter 0.25s ease, opacity 0.25s ease;
}

.dmf-ic-grayscale-yes .dmf-image-carousel__item:hover .dmf-image-carousel__img {
	filter: grayscale(0);
	opacity: 1;
}

/* --- Staggered ("brick") layout --- */

/* Split the offset so alternating items move up/down by half each — this keeps
   the staggered block visually centered on the row instead of hanging below
   it. Padding reserves room for the shifted items so nothing clips. */
.dmf-image-carousel--staggered .dmf-image-carousel__page {
	align-items: center;
	padding-top: calc(var(--dmf-ic-stagger, 36px) / 2);
	padding-bottom: calc(var(--dmf-ic-stagger, 36px) / 2);
}

.dmf-image-carousel--staggered .dmf-image-carousel__item:nth-child(odd) {
	transform: translateY(calc(var(--dmf-ic-stagger, 36px) / -2));
}

.dmf-image-carousel--staggered .dmf-image-carousel__item:nth-child(even) {
	transform: translateY(calc(var(--dmf-ic-stagger, 36px) / 2));
}

/* --- Dots --- */

.dmf-image-carousel__dots {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}

/* The button is a 24x24 touch target; the 8px visual dot is drawn on ::before
   so the hit area stays comfortable on phones. Color controls target the
   pseudo-element. */
.dmf-image-carousel__dot {
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	padding: 0;
	cursor: pointer;
	background: none;
}

.dmf-image-carousel__dot::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #d1d5db;
	transition: background-color 0.2s ease;
}

.dmf-image-carousel__dot:hover::before {
	background-color: #9ca3af;
}

.dmf-image-carousel__dot.is-active::before {
	background-color: #4b5563;
}

@media (max-width: 767px) {
	.dmf-image-carousel__viewport {
		gap: 4px;
	}

	.dmf-image-carousel__page {
		column-gap: 16px;
	}

	.dmf-image-carousel__item {
		padding: 8px;
	}

	.dmf-image-carousel__arrow {
		padding: 4px;
	}

	.dmf-image-carousel__arrow svg {
		width: 22px;
		height: 22px;
	}

	.dmf-image-carousel__arrow img {
		width: 22px;
	}

	.dmf-image-carousel__dots {
		margin-top: 12px;
		overflow-x: auto;
		flex-wrap: nowrap;
		justify-content: flex-start;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.dmf-image-carousel__dots::-webkit-scrollbar {
		display: none;
	}

	.dmf-image-carousel__dot {
		flex-shrink: 0;
		scroll-snap-align: center;
		width: 20px;
		height: 20px;
	}

	.dmf-image-carousel__dot::before {
		width: 6px;
		height: 6px;
	}

	/* "Hide Arrows on Mobile" switcher (prefix class on the widget wrapper).
	   Swipe + dots take over. */
	.dmf-ic-arrows-mobile-hide-yes .dmf-image-carousel__arrow {
		display: none !important;
	}

	/* "Disable Stagger on Mobile" switcher: flat row on phones. */
	.dmf-ic-stagger-mobile-off-yes .dmf-image-carousel--staggered .dmf-image-carousel__page {
		padding-top: 0;
		padding-bottom: 0;
	}

	.dmf-ic-stagger-mobile-off-yes .dmf-image-carousel--staggered .dmf-image-carousel__item:nth-child(odd),
	.dmf-ic-stagger-mobile-off-yes .dmf-image-carousel--staggered .dmf-image-carousel__item:nth-child(even) {
		transform: none;
	}

	/* --- Mobile swipe strip ("Mobile Swipe Strip" switcher, default on) ---

	   Scoped to the switcher's wrapper prefix class so the strip works even
	   before the JS runs (the PHP markup is already a single flat page). The
	   JS keeps all items on ONE page on phones; these rules turn that page
	   into a native horizontally scrollable, snap-aligned row. No dots, no
	   arrows, no autoplay — the visitor swipes with normal touch scrolling. */

	.dmf-ic-mobile-strip-yes .dmf-image-carousel__viewport {
		/* Allow native horizontal panning (the paged mode restricts to pan-y
		   so its custom swipe can win). */
		touch-action: auto;
	}

	.dmf-ic-mobile-strip-yes .dmf-image-carousel__pages {
		display: block;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		/* Edge fades hint that the strip continues. */
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
	}

	.dmf-ic-mobile-strip-yes .dmf-image-carousel__pages::-webkit-scrollbar {
		display: none;
	}

	.dmf-ic-mobile-strip-yes .dmf-image-carousel__page {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		opacity: 1;
		visibility: visible;
		transition: none;
	}

	.dmf-ic-mobile-strip-yes .dmf-image-carousel__item {
		flex: 0 0 auto;
		width: var(--dmf-ic-strip-item, 140px);
		scroll-snap-align: center;
	}

	/* The strip is always a flat row — no stagger, whatever the switchers. */
	.dmf-ic-mobile-strip-yes .dmf-image-carousel--staggered .dmf-image-carousel__page {
		padding-top: 0;
		padding-bottom: 0;
	}

	.dmf-ic-mobile-strip-yes .dmf-image-carousel--staggered .dmf-image-carousel__item:nth-child(odd),
	.dmf-ic-mobile-strip-yes .dmf-image-carousel--staggered .dmf-image-carousel__item:nth-child(even) {
		transform: none;
	}

	/* Chrome is hidden by JS too; this covers the pre-init frame. */
	.dmf-ic-mobile-strip-yes .dmf-image-carousel__arrow,
	.dmf-ic-mobile-strip-yes .dmf-image-carousel__dots {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dmf-image-carousel__page {
		transition: opacity 0s, transform 0s, visibility 0s;
	}
}