/* ─── Scroll row — snap card strip with edge fades + arrows ────────────
   Horizontal scroll-snap row for any cards. The track is a real scroller
   (touch/keyboard native); scroll-row.js ([data-hzo-scroll-row]) drives the
   arrows and toggles .is-start / .is-end to hide the spent edge fade and
   disable the spent arrow. --scroll-fade-color (default --bg-page) tints the
   fades; --scroll-fade-width sizes them; --scroll-card-width / --scroll-gap
   size the cards ([hzo_scroll_row] can seed all four inline). Reduced motion
   → instant (non-smooth) scroll. Markup: blocks/card-row.html or the
   [hzo_scroll_row] shortcode (scroll-row.php). */
.hzo-scroll-row { position: relative; }
.hzo-scroll-row__track {
    display: flex;
    gap: var(--scroll-gap, var(--space-lg));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-inline: var(--space-xs);
    padding: var(--space-xs) 0;   /* room for focus rings / card shadows */
    scrollbar-width: none;         /* Firefox */
    -webkit-overflow-scrolling: touch;
}
.hzo-scroll-row__track::-webkit-scrollbar { display: none; }
.hzo-scroll-row__track:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-panel); }
.hzo-scroll-row__track > * { scroll-snap-align: start; flex: 0 0 var(--scroll-card-width, clamp(240px, 74vw, 320px)); }
/* Edge fades — sit above the track edges; the JS hides the spent side. */
.hzo-scroll-row::before,
.hzo-scroll-row::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--scroll-fade-width, 48px);
    pointer-events: none;
    z-index: 1;
    opacity: 1;
    transition: opacity var(--transition-base) ease;
}
.hzo-scroll-row::before { left: 0;  background: linear-gradient(to right, var(--scroll-fade-color, var(--bg-page)), transparent); }
.hzo-scroll-row::after  { right: 0; background: linear-gradient(to left,  var(--scroll-fade-color, var(--bg-page)), transparent); }
.hzo-scroll-row.is-start::before { opacity: 0; }
.hzo-scroll-row.is-end::after    { opacity: 0; }
/* Prev / next arrows — circular, disabled (hidden) at the respective bound. */
.hzo-scroll-row__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    border: var(--border-1) solid var(--border);
    background: var(--bg-page);
    color: var(--text-heading);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: background var(--transition-base), opacity var(--transition-base);
}
.hzo-scroll-row__btn:hover { background: var(--bg-alt); }
.hzo-scroll-row__btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.hzo-scroll-row__btn[disabled] { opacity: 0; pointer-events: none; }
.hzo-scroll-row__btn--prev { left: var(--space-sm); }
.hzo-scroll-row__btn--next { right: var(--space-sm); }
@media (prefers-reduced-motion: reduce) {
    .hzo-scroll-row__track { scroll-behavior: auto; }
    .hzo-scroll-row::before,
    .hzo-scroll-row::after,
    .hzo-scroll-row__btn { transition: none; }
}