/* BY only: the horizontally scrolling tile row of <x-card.carousel>. A flex track with scroll snapping rather than
Bootstrap's carousel: it moves by one tile, not by whole slides, and overflow-x scrolling gives native touch swiping. */

.boat-carousel-track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* Room for the tiles' own shadow, which the overflow would otherwise
    clip. Vertical only: horizontal padding here would offset the track's
    resting scrollLeft (it sat at 4px, which made the "back" arrow look
    usable at the very start), and the tiles need no side inset anyway.
    Since the tiles answer the mouse with the homepage's large soft shadow
    (site.css, Carsten 2026-10-29) the room is 1rem above (exactly the heading
    row's mb-3, so the track never lies over the arrows) and 2.5rem below; the
    negative margins keep the row where it was. */
    padding: 1rem 0 2.5rem;
    margin: -1rem 0 -1.5rem;
    /* Firefox: thin bar instead of the chunky default. */
    scrollbar-width: thin;
}

/* Chrome/Safari - same idea, the bar is only a hint here since the arrows
and swiping are the real controls. */
.boat-carousel-track::-webkit-scrollbar {
    height: 6px;
}

.boat-carousel-track::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.boat-carousel-item {
    flex: 0 0 100%;
    max-width: 100%;
    scroll-snap-align: start;
}

/* Same breakpoints the BY homepage's featured rows use (col-12 col-md-6
col-xl-3), so a tile is the same size in both places. The gap is subtracted
so four really fit side by side instead of the fourth being pushed out. */
@media (min-width: 768px) {
    .boat-carousel-item {
        flex-basis: calc((100% - 1.5rem) / 2);
        max-width: calc((100% - 1.5rem) / 2);
    }
}

@media (min-width: 1200px) {
    .boat-carousel-item {
        flex-basis: calc((100% - 4.5rem) / 4);
        max-width: calc((100% - 4.5rem) / 4);
    }
}

/* Arrows in the old BY site's look: a long-arrow SVG in the brand blue, in a square, rounded, faintly blue frame. */
.boat-carousel-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    color: var(--by-primary);
    background-color: #fff;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.25);
    border-radius: 0.5rem;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.boat-carousel-arrow svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* Both buttons carry the same arrow; "back" is that arrow mirrored here. */
.boat-carousel-prev svg {
    transform: scaleX(-1);
}

.boat-carousel-arrow:hover:not([aria-disabled="true"]) {
    background-color: rgba(var(--brand-primary-rgb), 0.08);
    border-color: var(--by-primary);
}

/* Nothing left or right to scroll to - the button stays in place rather
than disappearing, so the row doesn't jump around as you page through. aria-disabled, not disabled: a
disabled button loses the keyboard focus the visitor has just pressed it with. */
.boat-carousel-arrow[aria-disabled="true"] {
    opacity: 0.35;
}

/* Respect a reduced-motion preference: jump instead of gliding. */
@media (prefers-reduced-motion: reduce) {
    .boat-carousel-track {
        scroll-behavior: auto;
    }
}