/* Infinite marquee — ported verbatim from MKT-342 mockup .carousel-wrapper/
   .carousel-track (page-1-standalone.html). Duplicated item set (13 real +
   13 clone = 26 DOM nodes) creates the seamless loop. Rendered as a direct
   child of .hero (see section-hero-tool/hero-tool.php) so it hugs the hero's
   bottom edge and shares its background — the parent-side spacing rules
   (.hero > .carousel-wrapper) live in section-hero-tool/assets/styles.css. */
.carousel-wrapper {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    padding-bottom: var(--var-24);
}

.carousel-track {
    --carousel-item-w: 300px;
    --carousel-item-gap: var(--var-16);
    --carousel-set-count: 13;
    --carousel-set-shift: calc(var(--carousel-set-count) * (var(--carousel-item-w) + var(--carousel-item-gap)));
    display: flex !important;
    gap: var(--carousel-item-gap) !important;
    width: max-content !important;
    align-items: flex-start !important;
    will-change: transform;
    animation: cbScrollTrack 36s linear infinite;
}

.carousel-track:hover {
    animation-play-state: paused;
}

@keyframes cbScrollTrack {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(calc(-1 * var(--carousel-set-shift)), 0, 0);
    }
}

.carousel-item {
    width: var(--carousel-item-w, 300px) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--var-16) !important;
    position: relative !important;
    margin: 0 !important;
}

.carousel-item:nth-child(13n+1) .carousel-item-image,
.carousel-item:nth-child(13n+2) .carousel-item-image,
.carousel-item:nth-child(13n+5) .carousel-item-image,
.carousel-item:nth-child(13n+8) .carousel-item-image,
.carousel-item:nth-child(13n+9) .carousel-item-image,
.carousel-item:nth-child(13n+11) .carousel-item-image,
.carousel-item:nth-child(13n+13) .carousel-item-image {
    height: 380px;
}

.carousel-item:nth-child(13n+6) .carousel-item-image {
    height: 375px;
}

.carousel-item:nth-child(13n+3) .carousel-item-image,
.carousel-item:nth-child(13n+4) .carousel-item-image,
.carousel-item:nth-child(13n+7) .carousel-item-image,
.carousel-item:nth-child(13n+10) .carousel-item-image,
.carousel-item:nth-child(13n+12) .carousel-item-image {
    height: 410px;
}

.carousel-item-image {
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
}

.carousel-item-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    display: block !important;
    object-fit: cover !important;
}

.carousel-item-logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

.carousel-item-logo img {
    height: var(--var-24) !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    filter: grayscale(1);
}

.carousel-hover-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: var(--color-1st-brd) !important;
    color: var(--color-reverse-fg) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: var(--var-32) !important;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.carousel-item:hover .carousel-hover-overlay {
    opacity: 1;
}

.overlay-category {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    border: var(--var-1) solid rgba(255, 255, 255, 0.3) !important;
    padding: var(--var-4) var(--var-8) !important;
    margin: 0 0 var(--var-24) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--var-6) !important;
    text-transform: uppercase !important;
    color: var(--color-reverse-fg) !important;
}

.category-indicator {
    width: var(--var-4) !important;
    height: var(--var-12) !important;
    background: var(--color-reverse-fg) !important;
}

.overlay-stat {
    font-family: var(--font-display) !important;
    font-size: var(--h2) !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    margin: 0 0 var(--var-12) !important;
    color: var(--color-reverse-fg) !important;
}

.overlay-desc {
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--var-6) !important;
    color: var(--color-reverse-fg) !important;
}

.overlay-desc::before {
    content: "•";
    color: var(--color-reverse-fg);
}

@media (max-width: 1024px) {
    .carousel-track {
        --carousel-item-w: 200px;
    }

    .carousel-item:nth-child(n) .carousel-item-image {
        height: 270px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .carousel-track {
        animation: none;
    }
}