/* === Machines full-width carousel ([machines_slider_full]) ===
   Independent second version of the Machines hero slider — see
   [machines_slider] (Impreza-child/style.css, .bsc-ms__*) for the original,
   UNTOUCHED. This block uses its own namespace (.bsc-mcar__*) end to end
   (markup in includes/machines-carousel.php, behaviour in
   assets/machines-carousel.js), so nothing here can ever affect the
   original slider and vice versa. Lives entirely in this plugin as of
   2026-09-07 — previously shipped from Impreza-child/style.css.

   Layout: full-width image stage (all machines in one row, active one
   dominant) with the title + buttons centred BELOW it (no side-by-side
   split, no eyebrow/intro copy, no progress bar — client's design, see
   the screenshot this was built from). Same colours/fonts as the rest of
   the site (var(--color-custom-1/3), Blanc-Bold/Medium, Open Sans) — only
   layout/behaviour is new.

   Every .bsc-mcar__img's final position is
   translateX(var(--slot-x) + var(--bsc-drag)) scale(var(--slot-scale)) —
   --slot-x/--slot-scale come from whichever slot class below is active
   (is-active/is-next/is-prev/is-next-far/is-prev-far). --bsc-drag is
   inert as of 2026-09-07: machines-carousel.js no longer sets it while
   dragging (a live 1:1-with-the-pointer belt translation, even clamped to
   one slide-step, still pushed the "far" machines — already close to this
   stage's own overflow:hidden edge at rest — part-way off-frame and
   visibly clipped them, which is what the client kept flagging). Left in
   the transform/var() as a harmless no-op rather than ripped out, in case
   a future design wants a (much smaller, carefully bounded) live-drag
   preview back. */
.bsc-machines-carousel{
    position: relative;
    overflow: hidden;
    padding-bottom: 4rem;              /* room for the grid icon, bottom-left */
}

.bsc-mcar__stage{
    position: relative;
    height: 440px;
    width: 100%;
    overflow: hidden;
    touch-action: pan-y;               /* let vertical page-scroll pass through; horizontal drag is ours */
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;                 /* press-drag must not trigger the browser's own text/image selection */
}
.bsc-mcar__stage.is-dragging{
    cursor: grabbing;
}

.bsc-mcar__img{
    position: absolute;
    inset: 0;
    margin: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 1rem;
    opacity: 0;                        /* any machine beyond the 5 defined slots stays hidden */
    transform-origin: bottom center;
    transform: translateX(calc(var(--slot-x, 0px) + var(--bsc-drag, 0px))) scale(var(--slot-scale, 0.5));
    transition: transform 0.5s ease, opacity 0.5s ease, filter 0.5s ease;
    will-change: transform;
    pointer-events: none;
}
/* Harmless now that --bsc-drag is never set (see the file header): kept so
   a plain click's transition doesn't briefly disable/re-enable mid-drag. */
.bsc-mcar__stage.is-dragging .bsc-mcar__img{
    transition: none;
}
.bsc-mcar__img img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    -webkit-user-drag: none;           /* stop the browser's native "drag this image" ghost preview */
}

/* Centre: full colour, full size, foreground. */
.bsc-mcar__img.is-active{
    --slot-x: 0px;
    --slot-scale: 1;
    opacity: 1;
    filter: none;
    z-index: 3;
}
/* Near sides: smaller, slightly desaturated, still clearly readable —
   clickable to jump straight to that machine.
   --slot-x widened 230px -> 400px (2026-08-31): machines whose own photo
   has a wide silhouette (e.g. ST, shot mid-tip with its arms spread out)
   physically overlapped the active image at the old distance — fine for a
   compact machine like BRL, broken for a wide one, confirmed via a live
   screenshot. 400px clears even the wide-silhouette case. */
.bsc-mcar__img.is-next,
.bsc-mcar__img.is-prev{
    --slot-scale: 0.72;
    opacity: 0.85;
    filter: grayscale(0.15);
    z-index: 2;
    pointer-events: auto;
    cursor: pointer;
}
.bsc-mcar__img.is-next{
    --slot-x: 400px;
    /* Mask pushed from 65% to 92% — was fading in well before the outer
       stage edge, which combined with the old, tighter --slot-x made
       overlaps with the active image look like a soft double-exposure
       instead of two distinct machines. Now it only softens the very last
       sliver right at the crop, close to a hard cut (matching the
       reference design's crisp edge on the two outermost machines). */
    -webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, #000 92%, transparent 100%);
}
.bsc-mcar__img.is-prev{
    --slot-x: -400px;
    -webkit-mask-image: linear-gradient(to left, #000 92%, transparent 100%);
    mask-image: linear-gradient(to left, #000 92%, transparent 100%);
}
/* Far sides: smallest, faded and fading further into the section's edge —
   still clickable, matching "click en las imágenes laterales".
   --slot-x widened 420px -> 650px, same reasoning as the near sides above. */
.bsc-mcar__img.is-next-far,
.bsc-mcar__img.is-prev-far{
    --slot-scale: 0.48;
    opacity: 0.5;
    filter: grayscale(0.4) blur(0.5px);
    z-index: 1;
    pointer-events: auto;
    cursor: pointer;
}
.bsc-mcar__img.is-next-far{
    --slot-x: 650px;
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
    mask-image: linear-gradient(to right, #000 85%, transparent 100%);
}
.bsc-mcar__img.is-prev-far{
    --slot-x: -650px;
    -webkit-mask-image: linear-gradient(to left, #000 85%, transparent 100%);
    mask-image: linear-gradient(to left, #000 85%, transparent 100%);
}

/* Content: title + buttons, centred BELOW the stage. Same type styles as
   [machines_slider]'s .bsc-mc-code/.bsc-mc-sub, copied (not shared) so
   that shortcode's CSS is never referenced from here. */
.bsc-mcar__content{
    text-align: center;
    margin-top: 1.5rem;
    transition: opacity 0.25s ease;
}
.bsc-mcar__content.is-fading{
    opacity: 0;
}
.bsc-mcar__title{
    margin: 0 0 1rem;
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 0.35em;
    line-height: 1.1;
}
.bsc-mcar__code{
    font-family: 'Blanc-Bold', sans-serif;
    font-size: 38px;
    color: var(--color-custom-1);
    text-transform: uppercase;
    overflow-wrap: break-word;
}
.bsc-mcar__sub{
    font-family: 'Blanc-Medium', sans-serif;
    font-size: 38px;
    color: var(--color-custom-3);
    text-transform: uppercase;
    overflow-wrap: break-word;
}
.bsc-mcar__actions{
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Decorative grid icon, pinned bottom-left of the whole component. */
.bsc-mcar__grid{
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 80px;
    z-index: 3;
}
.bsc-mcar__grid img{
    display: block;
    width: 80px;
    height: auto;
}

/* Tablet (768-1200px): 3 machines visible (active + near sides only).
   The active slot is scaled down here (unlike desktop, where the 1400px-wide
   stage already leaves natural margin around it) so its own photo doesn't
   fill the whole narrower stage edge-to-edge. Product photos have a lot of
   transparent padding around an irregular silhouette (not a filled
   rectangle), so a small bounding-box gap isn't enough to guarantee any
   actual visible pixels of a neighbour peek through — this needs a real
   ~150-180px clear gap between the active and near photos' own rendered
   width, not just their boxes, confirmed by direct measurement. */
@media (min-width: 768px) and (max-width: 1200px){
    .bsc-mcar__stage{
        height: 360px;
    }
    .bsc-mcar__img.is-active{
        --slot-scale: 0.65;
    }
    .bsc-mcar__img.is-next{
        --slot-x: 220px;
    }
    .bsc-mcar__img.is-prev{
        --slot-x: -220px;
    }
    .bsc-mcar__img.is-next,
    .bsc-mcar__img.is-prev{
        --slot-scale: 0.5;
    }
    .bsc-mcar__img.is-next-far,
    .bsc-mcar__img.is-prev-far{
        display: none;
    }
    .bsc-mcar__code,
    .bsc-mcar__sub{
        font-size: 30px;
    }
}

/* Mobile (<768px): 1 machine visible at a time; press-and-drag (or the
   autoplay) is the only way through the set, same as the hint text below. */
@media (max-width: 767px){
    .bsc-machines-carousel{
        padding-bottom: 1rem;
    }
    .bsc-mcar__stage{
        height: auto;
        aspect-ratio: 4 / 3;
        max-width: 100%;
    }
    .bsc-mcar__img{
        padding-bottom: 0;
    }
    .bsc-mcar__img.is-active{
        --slot-scale: 0.85;
    }
    .bsc-mcar__img.is-next,
    .bsc-mcar__img.is-prev,
    .bsc-mcar__img.is-next-far,
    .bsc-mcar__img.is-prev-far{
        display: none;
    }
    .bsc-mcar__grid{
        display: none;
    }
    .bsc-mcar__code,
    .bsc-mcar__sub{
        font-size: 26px;
    }
    .bsc-machines-carousel::after{
        content: "Drag to explore";
        display: block;
        margin-top: 0.75rem;
        font-family: 'Open Sans', sans-serif;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-align: center;
        text-transform: uppercase;
        color: var(--color-custom-3);
        opacity: 0.8;
    }
}