/**
 * 2PX Elementor Suite — Logo Carousel Widget
 * Pure CSS infinite ticker scroll. No JavaScript required.
 * BEM Methodology.
 */

/* ── CSS custom properties (defaults) ──────────────────────────────────────── */
.twopx-lc {
    --lc-items: 5;               /* logos visible at once — set by Elementor control */
    box-sizing: border-box;
    overflow: hidden;            /* clip overflowing inner track */
    width: 100%;
}

.twopx-lc * {
    box-sizing: border-box;
}

/* ── Track: clips the scrolling content ─────────────────────────────────────── */
.twopx-lc__track {
    overflow: hidden;
    width: 100%;
}

/* ── Inner: the element that scrolls ───────────────────────────────────────── */
.twopx-lc__inner {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;          /* grows to contain all items */
    animation-name: twopxLCScroll;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 30s;     /* overridden by Elementor speed control */
    will-change: transform;
}

/* ── Direction variants ─────────────────────────────────────────────────────── */
.twopx-lc--rtl .twopx-lc__inner {
    animation-name: twopxLCScrollRTL;
}

/* ── Pause on hover ─────────────────────────────────────────────────────────── */
.twopx-lc--pause-hover .twopx-lc__track:hover .twopx-lc__inner {
    animation-play-state: paused;
}

/* ── Item: one logo slot wrapper ────────────────────────────────────────────── */
.twopx-lc__item {
    /* Width = 1 / visible items of the container.
     * Since .twopx-lc__inner is width:max-content and contains 2× the logos,
     * the container's 100% is our reference. Each item = 100vw / items, but
     * we approximate via CSS: the Elementor wrapper width / --lc-items.
     * We calculate this using a known container width of 100% on the widget. */
    flex-shrink: 0;
    /* This formula gives each item exactly 1/N of the visible area.
     * Since we doubled the logos, the total inner = 2 × visible area → animates -50% */
    width: calc(100% / var(--lc-items));
}

/*
 * The trick: .twopx-lc__inner has display:flex and its children each take
 * calc(100% / --lc-items) of the *widget's* width. The widget is the 100% reference.
 * With 2× logos duplicated, inner = 200% of widget → animating translateX(-50%)
 * brings us back to start → seamless loop.
 *
 * To ensure the items compute their width from the widget (not the inner),
 * we override with a known parent unit. This is solved by making the inner
 * use a fixed width that equals the widget's computed width × 2, via JS-free hack:
 */

/* Force each item to derive its width from the widget, not the inner flex container */
.elementor-widget-2px-logocarousel .twopx-lc__item {
    width: calc(100% / var(--lc-items));
}

/* ── Slot: the visible rectangular container for each logo ──────────────────── */
.twopx-lc__slot {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;                /* default — overridden by Elementor control */
    padding: 0 20px;
    overflow: hidden;
}

/* ── Logo image ─────────────────────────────────────────────────────────────── */
.twopx-lc__logo {
    display: block;
    max-width: 100%;
    max-height: 80px;            /* matches slot height default */
    width: auto;
    height: auto;
    object-fit: contain;         /* scale proportionally, never distort */
    object-position: center;
    opacity: 0.7;                /* default — overridden by Elementor control */
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.twopx-lc__item:hover .twopx-lc__logo {
    opacity: 1;
}

/* ── Grayscale variant ──────────────────────────────────────────────────────── */
.twopx-lc--grayscale .twopx-lc__logo {
    filter: grayscale(100%);
}

.twopx-lc--grayscale .twopx-lc__item:hover .twopx-lc__logo {
    filter: grayscale(0%);
}

/* ── Link wrapper ───────────────────────────────────────────────────────────── */
.twopx-lc__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* ── Keyframe animations ────────────────────────────────────────────────────── */

/* Left-to-right scroll (default: logos move left → right appears to come from right) */
@keyframes twopxLCScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Right-to-left scroll (reversed direction) */
@keyframes twopxLCScrollRTL {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* ── Reduce motion accessibility ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .twopx-lc__inner {
        animation: none;
    }
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
/* Tablet and mobile item counts are handled by the responsive Elementor control
   which updates --lc-items at the appropriate breakpoint. No extra CSS needed. */