/* =====================================================================
   BP 30 RAILS (CSS)
   Best Placed Kit v4.2

   Fluent Snippet:  BP 30 Rails       Type: CSS, front end      Priority: 4
   Pairs with:      BP 30 Rails JS    Type: JS, footer

   Only install these two on a site that uses a rail or a marquee.

     bp-rail      a row of cards you swipe or arrow through. It loops. Put the
                  class on a ROW container, set Wrap to No Wrap in the panel
                  (Elementor's own page CSS beats the class on phones), and
                  give each card a Width (320px is the kit default). Add
                  bp-rail--slides to make every child a full-width slide.
                  It also works on a GRID container: type the phone columns
                  as repeat(4, 84%) and the tiles slide on phones only.
                  v4.2: put it on a LOOP GRID widget and the posts slide. The
                  widget's own Columns and gap settings decide how many show:
                  3, 2 and 1 gives three cards on desktop, two on tablet and
                  one with the next peeking in on phones.
     bp-rail-foot a row container placed straight after the rail. The arrows
                  go inside it, on the right, so a button can sit on the left
                  of the same line. Hide it on desktop if the rail fits there.
     bp-marquee   a slow, endless row of logos. Put the class on a ROW
                  container of logo tiles, each with a Width. It pauses on
                  hover, on keyboard focus, and when tapped or clicked.

   Safelist in the cache plugin's used-CSS setting (the script adds them):
     bp-rail-nav  bp-rail-btn  bp-marquee-track  is-ready  is-paused
===================================================================== */

/* ---- rail ---- */
.e-con.bp-rail {
    --flex-wrap: nowrap; --flex-wrap-mobile: nowrap; --justify-content: flex-start; --align-items: stretch;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-block: 4px 8px;
}
.e-con.bp-rail::-webkit-scrollbar { display: none; }
.e-con.bp-rail > .e-con { --flex-shrink: 0; scroll-snap-align: start; max-width: 86vw; }
.e-con.bp-rail.bp-rail--slides > .e-con { --width: 100%; max-width: 100%; }

.bp-rail-nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.bp-rail-nav[hidden] { display: none; }
/* arrows inside a bp-rail-foot row: no gap above, pushed to the right */
.bp-rail-foot .bp-rail-nav { margin-top: 0; margin-left: auto; }
/* Three classes on purpose. Site Settings > Buttons styles every <button>, and its hover rule is (0,2,1).
   Anything lighter than (0,3,0) here gets repainted as a call to action and loses its round shape on hover. */
.bp-rail-nav .bp-rail-btn.bp-rail-btn {
    width: var(--bp-control-size); height: var(--bp-control-size); min-height: 0; padding: 0; display: grid; place-items: center;
    border-radius: 50%; border: 1px solid var(--brand-line); background: var(--brand-surface); color: var(--brand-primary);
    cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.bp-rail-nav .bp-rail-btn.bp-rail-btn:hover,
.bp-rail-nav .bp-rail-btn.bp-rail-btn:focus-visible { background: var(--brand-accent-solid); border-color: var(--brand-accent-solid); color: var(--brand-accent-solid-ink); }
.bp-rail-nav .bp-rail-btn.bp-rail-btn[aria-disabled="true"] { opacity: .35; cursor: default; background: var(--brand-surface); color: var(--brand-primary); border-color: var(--brand-line); }
.bp-rail-nav .bp-rail-btn svg { width: 18px; height: 18px; display: block; }

/* ---- marquee ---- */
.e-con.bp-marquee { --flex-wrap: nowrap; --flex-wrap-mobile: nowrap; --justify-content: flex-start; overflow: hidden; }
.e-con.bp-marquee > .e-con { --flex-shrink: 0; }
.e-con.bp-marquee.is-ready { overflow: hidden; display: block; }
.bp-marquee-track { display: flex; width: max-content; gap: var(--row-gap, 16px); animation: bp-marquee var(--bp-marquee-time, 40s) linear infinite; }
.e-con.bp-marquee:hover .bp-marquee-track, .e-con.bp-marquee:focus-within .bp-marquee-track,
.e-con.bp-marquee.is-paused .bp-marquee-track { animation-play-state: paused; }
.e-con.bp-marquee:focus-visible { outline: 3px solid var(--brand-accent-solid); outline-offset: 4px; }
.bp-marquee-track > .e-con { flex: 0 0 auto; }
@keyframes bp-marquee { to { transform: translateX(calc(-50% - (var(--row-gap, 16px) / 2))); } }
@media (prefers-reduced-motion: reduce) {
    .bp-marquee-track { animation: none; }
    .e-con.bp-marquee.is-ready { overflow-x: auto; }
}

/* ---- rail on a Loop Grid (v4.2). Columns and gaps come from the widget's own settings ---- */
.elementor-widget-loop-grid.bp-rail .elementor-loop-container {
    display: flex; flex-wrap: nowrap; align-items: stretch; gap: var(--grid-row-gap, 20px) var(--grid-column-gap, 20px);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-block: 4px 8px;
}
.elementor-widget-loop-grid.bp-rail .elementor-loop-container::-webkit-scrollbar { display: none; }
.elementor-widget-loop-grid.bp-rail .elementor-loop-container > .e-loop-item {
    flex: 0 0 calc((100% - (var(--grid-columns, 3) - 1) * var(--grid-column-gap, 20px)) / var(--grid-columns, 3));
    display: flex; min-width: 0; scroll-snap-align: start;
}
.elementor-widget-loop-grid.bp-rail .elementor-loop-container > .e-loop-item > .e-con { flex: 1 1 auto; }
.elementor-widget-loop-grid.bp-rail .elementor-loop-container > style { display: none; }
@media (max-width: 767px) {
    .elementor-widget-loop-grid.bp-rail .elementor-loop-container > .e-loop-item { flex-basis: 84%; }
}