/* ============================================================
   SHARED · CardSlider styles (.cardslider)
   Horizontal, swipeable, scroll-snap card row with floating ‹ › arrows.
   Cards are equal-height (flex stretch) so the row reads clean instead of
   a ragged grid. Reader text #111111.
   ============================================================ */

.cardslider { position: relative; }

.cardslider__track {
    display: flex;
    align-items: flex-start;   /* natural card heights — no stretched dead space */
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 14px;
    scrollbar-width: thin;
}
.cardslider__track > * {
    flex: 0 0 clamp(280px, 86%, 356px);
    scroll-snap-align: start;
}
@media (min-width: 720px) {
    .cardslider__track > * { flex-basis: 340px; }
}

/* floating arrows (auto-hide when there's nothing to scroll) */
.cardslider__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.96); color: #111111;
    border: 1px solid rgba(15, 23, 42, 0.14);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
    font-size: 24px; line-height: 1; cursor: pointer; z-index: 6;
    transition: opacity .15s, background .15s, border-color .15s;
}
.cardslider__nav:hover { background: #fff; border-color: rgba(15, 23, 42, 0.3); }
.cardslider__nav:focus-visible { box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.35); }
.cardslider__nav--prev { left: 4px; }
.cardslider__nav--next { right: 4px; }
.cardslider__nav[disabled] { opacity: 0; pointer-events: none; }
.cardslider--static .cardslider__nav { display: none; }

@media (max-width: 640px) {
    /* arrows are redundant with touch-swipe on phones */
    .cardslider__nav { display: none; }
    .cardslider__track { gap: 14px; }
}