/* =============================================================
   Idan Drill — Logo Marquee
   ONE widget with TWO independent carousels:
     - .idan-lm-cf  ►  Desktop / Tablet coverflow (≥768px)
     - .idan-lm-mq  ►  Mobile marquee (≤767px)
   Both are rendered always; @media at the bottom hides the one
   that doesn't belong to the current viewport. No JS mode switch.
============================================================= */

.idan-lm {
	position: relative;
	width: 100%;
}

/* ============================================================
   DESKTOP / TABLET — COVERFLOW (.idan-lm-cf)
============================================================ */
.idan-lm-cf {
	position: relative;
	padding: 0 60px;            /* room for the side arrows */
}

.idan-lm-cf__viewport {
	overflow: hidden;
}

.idan-lm-cf__track {
	display: flex;
	flex-wrap: nowrap;
	direction: ltr;             /* keeps arrow math sane regardless of page RTL */
	width: 100%;
	transition: transform 0.55s ease;
	will-change: transform;
}

.idan-lm-cf__item {
	flex: 0 0 calc(100% / 3);
	padding: 0 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	min-height: 120px;          /* reserve space before images decode */
	transform: scale(0.74);
	opacity: 0.42;
	filter: blur(1.2px);
	transition: transform 0.45s ease, opacity 0.45s ease, filter 0.45s ease;
}
.idan-lm-cf[data-slides="5"] .idan-lm-cf__item { flex-basis: 20%; }
.idan-lm-cf[data-slides="7"] .idan-lm-cf__item { flex-basis: calc(100% / 7); }

.idan-lm-cf__item.is-active {
	transform: scale(1);
	opacity: 1;
	filter: none;
}

.idan-lm-cf__item img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 180px;
	border-radius: 16px;
	border: 2px solid #FBBD23;
	background: #ffffff;
}

/* Arrows — prev on the LEFT, next on the RIGHT */
.idan-lm-cf__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #FBBD23;
	color: #111317;
	border: 0;
	cursor: pointer;
	z-index: 10;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.idan-lm-cf__nav:hover { transform: translateY(-50%) scale(1.05); }
.idan-lm-cf__nav--prev { left: 8px; right: auto; }
.idan-lm-cf__nav--next { right: 8px; left: auto; }
.idan-lm-cf__nav svg { width: 18px; height: 18px; }

/* ============================================================
   MOBILE — MARQUEE (.idan-lm-mq)
   Pattern: Azie88/Infinite-Logo-Marquee-CSS.
   Two inline-block slides side-by-side, both animating -100% of
   their own width. No flex, no max-content, no JS — just plain
   inline-block + white-space:nowrap + a translate animation.
============================================================ */
.idan-lm-mq {
	overflow: hidden;
	position: relative;
	width: 100%;
	white-space: nowrap;
	direction: ltr;              /* keep slide order LTR regardless of page RTL */
	font-size: 0;                /* eliminate any inline whitespace gap between slides/items */
}

.idan-lm-mq__slide {
	display: inline-block;
	animation: idan-lm-marquee-left 30s linear infinite;
	vertical-align: middle;
	font-size: 0;
}

/* Triple-class selector (0,3,0) + !important so no theme or leftover Custom CSS
   can shrink the gap between logos. */
.idan-lm-mq .idan-lm-mq__slide .idan-lm-mq__item {
	display: inline-block !important;
	margin: 0 40px !important;   /* 80px between adjacent logos — adjust in the panel */
	padding: 0 !important;
	vertical-align: middle;
	text-decoration: none;
	font-size: 0;
}

/* Make sure WordPress's responsive-image classes can't apply their own auto-sizing. */
.idan-lm-mq .idan-lm-mq__slide .idan-lm-mq__item img {
	max-width: none !important;
}

.idan-lm-mq__item img {
	display: inline-block;
	vertical-align: middle;
	height: 80px;
	width: auto;
	border-radius: 16px;
	border: 2px solid #FBBD23;
	background: #ffffff;
}

/* Each slide animates -100% / +100% of its OWN width (not the track's). */
@keyframes idan-lm-marquee-left {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}
@keyframes idan-lm-marquee-right {
	from { transform: translateX(0); }
	to   { transform: translateX(100%); }
}

/* ============================================================
   DEVICE SWITCH — pure CSS, no JS
============================================================ */
@media (max-width: 767px) {
	.idan-lm-cf { display: none !important; }
}
@media (min-width: 768px) {
	.idan-lm-mq { display: none !important; }
}

/* Reduced motion: pause animations and coverflow transitions. */
@media (prefers-reduced-motion: reduce) {
	.idan-lm-mq__track { animation: none !important; }
	.idan-lm-cf__track,
	.idan-lm-cf__item  { transition: none !important; }
}