/* =========================================================
   2A Testimonials — bottom auto-scrolling marquee
   ---------------------------------------------------------
   A continuously scrolling horizontal strip of homeowner review snippets
   pinned to the BOTTOM of the testimonials section. The PHP/TSX emits the
   item list twice inside .testimonials-marquee__track; animating that track
   by translateX(-50%) loops seamlessly (the second half re-enters exactly
   where the first began).

   - Pause on hover/focus.
   - prefers-reduced-motion: reduce  → stop the animation entirely (static).
   Mirrors src/components/sections/Testimonials.tsx marquee + globals.css.
   ========================================================= */

.testimonials-marquee {
    position: relative;
    width: 100%;
    margin-top: 2.5rem;
    padding: 0.85rem 0;
    overflow: hidden;
    border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    background: var(--color-bg-secondary, rgba(235, 93, 29, 0.04));
    /* Fade the strip edges so items slide in/out softly. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.testimonials-marquee__track {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    /* Two copies are emitted; the track is therefore 200% wide and translating
       by -50% lands on the start of the second copy = seamless. */
    width: max-content;
    will-change: transform;
    animation: twoa-marquee-scroll 38s linear infinite;
}

/* Pause when the user hovers or keyboard-focuses anywhere on the strip. */
.testimonials-marquee:hover .testimonials-marquee__track,
.testimonials-marquee:focus-within .testimonials-marquee__track {
    animation-play-state: paused;
}

.testimonials-marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.75rem;
    white-space: nowrap;
    font-size: 0.875rem;
    color: var(--color-text-secondary, #555);
    border-right: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
}

.testimonials-marquee__stars {
    color: #eb5d1d;
    letter-spacing: 0.05em;
    font-size: 0.8rem;
}

.testimonials-marquee__name {
    font-weight: 700;
    color: var(--color-text-primary, #1a1a1a);
}

.testimonials-marquee__loc {
    opacity: 0.75;
}

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

/* Reduced motion: stop the scroll (render the strip static at its start). */
@media (prefers-reduced-motion: reduce) {
    .testimonials-marquee__track {
        animation: none;
        transform: none;
    }
}

/* =========================================================
   Reviews-video tab strip — VISIBLE horizontal scrollbar up to tablet
   ---------------------------------------------------------
   The .testimonial-thumbs row scrolls horizontally on small/tablet screens
   but style.css hides its scrollbar (scrollbar-width:none + ::-webkit-scrollbar
   display:none), so users don't know it scrolls. Loaded after twoa-style, these
   rules re-enable a slim, on-brand scrollbar at <=1024px (tablet & below).
   Desktop (>=768px) keeps overflow:visible from style.css, so no scrollbar shows.
   ========================================================= */
@media (max-width: 1024px) {
    .testimonial-thumbs {
        scrollbar-width: thin;
        scrollbar-color: #eb5d1d rgba(0, 0, 0, 0.08);
        -ms-overflow-style: auto;
    }
    .testimonial-thumbs::-webkit-scrollbar {
        display: block;
        height: 6px;
    }
    .testimonial-thumbs::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.08);
        border-radius: 999px;
    }
    .testimonial-thumbs::-webkit-scrollbar-thumb {
        background: #eb5d1d;
        border-radius: 999px;
    }
    .testimonial-thumbs::-webkit-scrollbar-thumb:hover {
        background: #c94a10;
    }
}