/*
 * product-rail.css — phone-only horizontal rail for product-list-lahoda-1
 * (editor switch `display.mobileLayout = rail`, see component.php). A
 * home-page showcase of a dozen cards stacked two per row was ~1 600px of a
 * phone screen; as a single scroll-snap row it is one card tall, the next
 * card peeking in from the right as the "swipe for more" affordance. No JS:
 * the cards' own links are focusable, so Tab moves through the rail and the
 * browser scrolls each focused card into view.
 *
 * Loaded by product-list-lahoda-1 next to its style.css, which owns the grid
 * and the shared card (`product-card-lahoda`) and is left untouched here.
 * Selectors carry the root class on top of the doubled grid class so they
 * out-rank that file's
 * `.product-list-lahoda-1__grid.product-list-lahoda-1__grid--cols-mobile-2`
 * whatever order the renderer emits the two stylesheets in. Everything is
 * inside the phone container query — tablet and desktop never see these
 * rules and keep the normal grid.
 */

@container (max-width: 767.98px) {
    .product-list-lahoda-1
        .product-list-lahoda-1__grid.product-list-lahoda-1__grid--rail {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--space-3);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        /* Bleed to the viewport edges so the clipped next card is visible
           where the gutter would otherwise be. */
        margin-inline: calc(-1 * var(--container-gutter));
        padding-inline-start: var(--container-gutter);
        scroll-padding-inline-start: var(--container-gutter);
        /* Room for the cards' shadow/lift above and the thin scrollbar below. */
        padding-block: var(--space-1) var(--space-3);
        scrollbar-width: thin;
        scrollbar-color: var(--brand-gold-light) transparent;
    }

    /* ~72 % of the container: one full card plus a slice of the next on a
       360–430px phone, capped so a wide phone in landscape still shows a
       partial card instead of two whole ones. */
    .product-list-lahoda-1 .product-list-lahoda-1__grid--rail > .product-card-lahoda {
        flex: 0 0 clamp(220px, 72cqw, 280px);
        scroll-snap-align: start;
    }

    /* Inline-end gutter as a margin on the last card, not padding on the
       track: Blink/WebKit drop a scroll container's inline-end padding at
       the scroll end (same workaround as navigation-lahoda-1's contact bar). */
    .product-list-lahoda-1 .product-list-lahoda-1__grid--rail
        > .product-card-lahoda:last-child {
        margin-inline-end: var(--container-gutter);
    }
}