/* ==========================================================================
   Class Tools - scroll-linked infinite marquee (Genially-style)
   Rows drift horizontally in alternating directions as the page scrolls.
   No autoplay: the rows are still (and clickable) when the page is still.
   ========================================================================== */

.tools-marquee-section {
    overflow: hidden;
}

.tools-marquee {
    --tm-gap: var(--space-6, 1.5rem);
    --tm-card: clamp(240px, 26vw, 340px);
    display: flex;
    flex-direction: column;
    gap: var(--tm-gap);
    margin-bottom: var(--space-8, 2rem);
    /* Full-bleed: break out of the parent .container.
       --tm-sbw is the scrollbar width, set by tools-marquee.js, so the row
       does not overshoot the viewport by the scrollbar. */
    width: calc(100vw - var(--tm-sbw, 0px));
    max-width: calc(100vw - var(--tm-sbw, 0px));
    margin-left: calc(50% - 50vw + (var(--tm-sbw, 0px) / 2));
    margin-right: calc(50% - 50vw + (var(--tm-sbw, 0px) / 2));
}

/* Keep the marquee maths left-to-right even on RTL pages.
   The overflow container's direction decides which edge an over-wide child
   is anchored to. Under rtl the track anchors to its RIGHT edge, so
   translating it left opens a growing blank gap on the right.

   Each level is listed explicitly rather than relying on inheritance:
   main.css has a blanket `[lang="ar"] *, .rtl * { direction: rtl }` whose
   universal descendant selector matches these elements directly, which
   would otherwise beat an inherited value. Card text is switched back to
   rtl further down. */
.tools-marquee,
.tools-marquee .tools-marquee__row,
.tools-marquee .tools-marquee__track,
.tools-marquee .tools-marquee__set {
    direction: ltr;
}

.tools-marquee__row {
    overflow: hidden;
    /* Breathing room so the card hover lift + shadow are not clipped */
    padding: 0.75rem 0;
    margin: -0.75rem 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.tools-marquee__track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    will-change: transform;
}

.tools-marquee__set {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--tm-gap);
    /* Trailing gap lives inside the set so clones butt up seamlessly */
    padding-right: var(--tm-gap);
}

/* Card text still follows the page direction */
html[dir="rtl"] .tools-marquee .tool-card {
    direction: rtl;
    text-align: right;
}

.tools-marquee .tool-card {
    flex: 0 0 auto;
    width: var(--tm-card);
    height: auto;
}

@media (max-width: 640px) {
    .tools-marquee {
        --tm-gap: var(--space-4, 1rem);
        --tm-card: 230px;
    }
}

/* ---- Fallbacks -----------------------------------------------------------
   Reduced motion, or no JS: rows become plain horizontal scrollers instead. */
.tools-marquee.is-static .tools-marquee__row,
.no-js .tools-marquee .tools-marquee__row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    -webkit-mask-image: none;
    mask-image: none;
}

.tools-marquee.is-static .tools-marquee__track,
.no-js .tools-marquee .tools-marquee__track {
    transform: none !important;
    padding: 0 var(--tm-gap);
}

@media (prefers-reduced-motion: reduce) {
    .tools-marquee__track {
        transform: none !important;
    }
}