/**
 * equipment-marquee.css - Equipment Page Marquee Galleries
 *
 * Styles for the horizontal infinite-scroll galleries rendered
 * by inc/equipment-gallery.php. Each category section stacks
 * multiple rows; rows alternate direction globally.
 *
 * @package LibrandiOutdoorPower
 * @since   1.2.0
 */


/* ==========================================================
   Category Section
   ========================================================== */
.lop-equipment-category {
    margin-block: var(--space-12);
}
.lop-equipment-category:first-child {
    margin-top: 0;
}
.lop-equipment-category:last-child {
    margin-bottom: 0;
}

.lop-equipment-category__head {
    max-width: 820px;
    margin: 0 auto var(--space-8);
    padding-inline: var(--container-pad);
    text-align: center;
}
.lop-equipment-category__title {
    font-size: clamp(1.75rem, 2.4vw + 1rem, var(--text-4xl));
    margin-bottom: var(--space-3);
    color: var(--color-primary);
    letter-spacing: -0.02em;
}
.lop-equipment-category__desc {
    font-size: var(--text-lg);
    color: var(--color-gray-600);
    line-height: var(--leading-normal);
    margin: 0;
}


/* ==========================================================
   Marquee Gallery (stack of tracks)
   ========================================================== */
.lop-marquee-gallery {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--space-3), 1.4vw, var(--space-5));

    /* Subtle fade on the left/right edges so items emerge and
       disappear softly instead of clipping. Uses mask so it
       respects whatever page background sits behind. */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 6%,
        #000 94%,
        transparent 100%
    );
            mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 6%,
        #000 94%,
        transparent 100%
    );
}


/* ==========================================================
   Marquee Track (single row)
   ========================================================== */
.lop-marquee-track {
    width: 100%;
    overflow: hidden;
    /* Hide native scrollbars if any browser tries to render them */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.lop-marquee-track::-webkit-scrollbar {
    display: none;
}

.lop-marquee-track__inner {
    display: flex;
    gap: clamp(var(--space-3), 1.2vw, var(--space-5));
    flex-shrink: 0;
    width: max-content;
    will-change: transform;
}


/* ==========================================================
   Marquee Item (single image card, now a <button> trigger)
   Image is wrapped in a button because each card is a
   lightbox trigger wired via [data-lightbox-src] in main.js.
   Reset native button chrome so the card looks unchanged.
   Card sized ~50% larger than the initial release so the
   product details read clearly before a click.
   ========================================================== */
.lop-marquee-item {
    /* Reset native button styling */
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    background: var(--color-off-white);
    cursor: zoom-in;

    /* Layout: responsive card width, 50% larger than v1 */
    flex: 0 0 auto;
    width: clamp(270px, 33vw, 510px);
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration) var(--ease),
                box-shadow  var(--duration) var(--ease),
                filter      var(--duration) var(--ease);
    filter: saturate(0.9);
}
.lop-marquee-item:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}
.lop-marquee-item img {
    display: block;
    width: 100%;
    height: 100%;
    /* contain so the full product is visible, no center-crop */
    object-fit: contain;
    object-position: center;
    padding: clamp(8px, 1vw, 16px);
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none; /* clicks fall through to the button */
    transform-origin: center center;
}

.lop-marquee-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    filter: saturate(1.05);
    z-index: 2;
}


/* ==========================================================
   Page-level wrapper for the entire gallery block
   ========================================================== */
.lop-equipment-gallery-wrap {
    padding-block: var(--space-12) var(--space-16);
    background: linear-gradient(
        180deg,
        var(--color-off-white) 0%,
        var(--color-white) 100%
    );
}


/* ==========================================================
   Responsive tuning
   ========================================================== */
@media (max-width: 640px) {
    .lop-equipment-category {
        margin-block: var(--space-8);
    }
    .lop-marquee-item {
        /* Mobile: scale width with viewport but cap so at least
           partial siblings remain visible during the marquee loop. */
        width: clamp(240px, 78vw, 390px);
    }
}


/* ==========================================================
   Reduced-motion fallback
   JS bails on animation automatically; the items become a
   static overflow-scroll strip so content is still reachable.
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
    .lop-marquee-track {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }
    .lop-marquee-item {
        scroll-snap-align: start;
    }
    .lop-marquee-track__inner {
        gap: var(--space-4);
    }
}