/* Web Builder: text_slider_box / editorial marquee */

.wb-text_slider_box-marquee {
    --tsb-bg: var(--bg-light, #FAF7F2);
    --tsb-fg: var(--primary-dark, #1f1a17);
    --tsb-accent: var(--accent, #6B2D5B);
    --tsb-muted: var(--text-muted, rgba(31, 26, 23, 0.55));
    --tsb-border: rgba(0, 0, 0, 0.08);

    background-color: var(--tsb-bg);
    border-top: 1px solid var(--tsb-border);
    border-bottom: 1px solid var(--tsb-border);
    padding: clamp(18px, 2.4vw, 28px) 0;
    overflow: hidden;
    position: relative;
    width: 100%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.wb-text_slider_box-marquee__track {
    display: inline-flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: max-content;
    animation: wb-tsb-scroll 80s linear infinite;
    will-change: transform;
}

.wb-text_slider_box-marquee__row {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
}

.wb-text_slider_box-marquee__item {
    font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1.05rem, 1.4vw, 1.35rem);
    color: var(--tsb-fg);
    letter-spacing: -0.005em;
    line-height: 1;
    padding: 0 clamp(28px, 4vw, 56px);
}

.wb-text_slider_box-marquee__item em {
    font-style: italic;
    font-weight: 300;
    color: var(--tsb-accent);
}

.wb-text_slider_box-marquee__dot {
    font-family: 'Fraunces', serif;
    font-weight: 300;
    color: var(--tsb-muted);
    font-size: 1rem;
    transform: translateY(-1px);
}

@keyframes wb-tsb-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.wb-text_slider_box-marquee:hover .wb-text_slider_box-marquee__track {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .wb-text_slider_box-marquee__track {
        animation: none;
    }
}

@media (max-width: 768px) {
    .wb-text_slider_box-marquee {
        padding: 14px 0;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    }

    .wb-text_slider_box-marquee__item {
        font-size: 0.95rem;
        padding: 0 22px;
    }

    .wb-text_slider_box-marquee__track {
        animation-duration: 60s;
    }
}