/* Homepage row slider: a card grid becomes a native horizontal scroller once it holds more than one row's worth.
   Blade marks where that happens (.is-slider-lg desktop, -md tablet, -sm phone); home-slider.js adds arrows, mouse drag
   and progress. Native scrolling keeps touch swipes and momentum smooth, and cards off to the side skip rendering. */
.home-slider-nav { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.home-slider-nav[hidden], .home-slider-progress[hidden] { display: none; }
.home-slider-progress { position: relative; width: min(240px, 50%); height: 2px; margin: 20px auto 0; overflow: hidden; border-radius: 2px; background: var(--ui-line, #dde0f2); }
.home-slider-progress i {
    position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #3f47b8, #7f87ee);
    transform-origin: left; transform: translateX(var(--slider-start, 0%)) scaleX(var(--slider-size, 1));
}
[dir="rtl"] .home-slider-progress i { transform-origin: right; transform: translateX(calc(var(--slider-start, 0%) * -1)) scaleX(var(--slider-size, 1)); }

/* The scroller applies only at the breakpoints Blade asked for: one block each, identical apart from the selector and
   column count. Its padding and matching negative margin keep card shadows and hover lifts from being clipped. */
@media (min-width: 992px) {
    .home-recommendations-section .home-recommendation-grid.is-slider-lg {
        --slider-columns: 4; --slider-gap: 18px;
        grid-template-columns: none; grid-auto-flow: column;
        grid-auto-columns: calc((100% - (var(--slider-columns) - 1) * var(--slider-gap)) / var(--slider-columns));
        gap: var(--slider-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
        padding: 6px 4px 28px; margin: -6px -4px -28px; scroll-padding-inline: 4px; scrollbar-width: none;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .home-recommendations-section .home-recommendation-grid.is-slider-md {
        --slider-columns: 2.2; --slider-gap: 16px;
        grid-template-columns: none; grid-auto-flow: column;
        grid-auto-columns: calc((100% - 2 * var(--slider-gap)) / var(--slider-columns));
        gap: var(--slider-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
        padding: 6px 4px 28px; margin: -6px -4px -28px; scroll-padding-inline: 4px; scrollbar-width: none;
    }
}
@media (max-width: 767px) {
    .home-recommendations-section .home-recommendation-grid.is-slider-sm {
        --slider-columns: 1.15; --slider-gap: 12px;
        grid-template-columns: none; grid-auto-flow: column;
        grid-auto-columns: calc((100% - var(--slider-gap)) / var(--slider-columns));
        gap: var(--slider-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
        padding: 6px 4px 28px; margin: -6px -4px -28px; scroll-padding-inline: 4px; scrollbar-width: none;
    }
}
.home-recommendation-grid[data-home-slider]::-webkit-scrollbar { display: none; }
.home-recommendation-grid[data-home-slider] > .recommendation-card {
    scroll-snap-align: start;
    /* Cards scrolled out of view are not laid out or painted until they come back. */
    content-visibility: auto; contain-intrinsic-size: auto 260px;
}
/* Touch devices swipe the row natively, sideways or past it vertically; iOS keeps its momentum. */
.home-recommendation-grid.is-scrollable { touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
/* With a mouse the row shows it can be grabbed, cards included, since a drag on a card moves the row. */
@media (hover: hover) and (pointer: fine) {
    .home-recommendation-grid.is-scrollable, .home-recommendation-grid.is-scrollable > * { cursor: grab; }
    .home-recommendation-grid.is-dragging, .home-recommendation-grid.is-dragging > * { cursor: grabbing; }
}
/* While the mouse drags, snapping waits until release so the row follows the pointer exactly. This must outrank the
   per-breakpoint scroller rules above; otherwise every move snaps back to a card and the row only swaps content in place. */
.home-recommendations-section .home-recommendation-grid.is-dragging { scroll-snap-type: none; scroll-behavior: auto; user-select: none; -webkit-user-select: none; }
.home-recommendation-grid.is-dragging > * { pointer-events: none; }