/*
 * Reusable marketing slider (<x-marketing.slider>) — structural styles only.
 * Per-slider look (card design, head, gap, dot colours, peek widths) is set by
 * the consuming section via the CSS custom properties below, scoped to its own
 * wrapper, so one stylesheet serves every instance.
 *
 * Custom properties (override on .marketing-slider or an ancestor):
 *   --ms-gap          gap between cards            (default 30px)
 *   --ms-pad          track padding               (default 10px 24px 8px)
 *   --ms-dot          dot colour                  (default #d4d9ec)
 *   --ms-dot-active   active dot colour           (default #739cff)
 *   --ms-marquee-dur  marquee loop duration       (default 20s)
 */

.marketing-slider__viewport {
    overflow: hidden;
}

.marketing-slider__track {
    display: flex;
    align-items: stretch;
    gap: var(--ms-gap, 30px);
    padding: var(--ms-pad, 10px 24px 8px);
    width: max-content;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.marketing-slider__dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
}

.marketing-slider__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--ms-dot, #d4d9ec);
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.marketing-slider__dot.is-active {
    background: var(--ms-dot-active, #739cff);
    transform: scale(1.25);
}

/* Marquee mode (e.g. the logos strip): the consumer renders the slides twice
   and the track scrolls one full copy via a CSS keyframe — seamless loop. */
.marketing-slider--marquee .marketing-slider__track {
    width: max-content;
    transition: none;
    animation: ms-marquee var(--ms-marquee-dur, 20s) linear infinite;
    animation-direction: var(--ms-marquee-dir, normal); /* set `reverse` to scroll right */
}

.marketing-slider--marquee .marketing-slider__dots {
    display: none;
}

@keyframes ms-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/*
 * Prev / next arrow buttons. The <x-marketing.slider> renders them inside
 * .marketing-slider__carousel (the Alpine root) so they can call prev()/next();
 * absolutely positioned over the viewport edges. Override per instance:
 *   --ms-arrow-size    button diameter        (default 44px)
 *   --ms-arrow-bg      button background      (default #ffffff)
 *   --ms-arrow-accent  icon / hover colour    (default --ms-dot-active / #195cff)
 *   --ms-arrow-offset  inset from the edge    (default 8px, inside the carousel)
 */
.marketing-slider__carousel {
    position: relative;
}

.marketing-slider__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ms-arrow-size, 44px);
    height: var(--ms-arrow-size, 44px);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--ms-arrow-bg, #ffffff);
    color: var(--ms-arrow-accent, var(--ms-dot-active, #195cff));
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(25, 92, 255, 0.18);
    transform: translateY(-50%);
    transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
}

.marketing-slider__arrow--prev {
    left: var(--ms-arrow-offset, 8px);
}

.marketing-slider__arrow--next {
    right: var(--ms-arrow-offset, 8px);
}

.marketing-slider__arrow svg {
    width: 42%;
    height: 42%;
}

.marketing-slider__arrow:hover,
.marketing-slider__arrow:focus-visible {
    background: var(--ms-arrow-accent, var(--ms-dot-active, #195cff));
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(25, 92, 255, 0.32);
    transform: translateY(-50%) scale(1.06);
}

.marketing-slider__arrow:focus-visible {
    outline: 2px solid var(--ms-arrow-accent, var(--ms-dot-active, #195cff));
    outline-offset: 2px;
}

.marketing-slider__arrow:active {
    transform: translateY(-50%) scale(0.96);
}

/* Marquee mode has no manual nav (its dots are hidden too). */
.marketing-slider--marquee .marketing-slider__arrow {
    display: none;
}

@media (max-width: 767px) {
    /* Touch swipe + dots cover navigation on mobile; on-card arrows would
       overlap the card text, so hide them there. */
    .marketing-slider__arrow {
        display: none;
    }
}