/* ═══════════════════════════════════════════════════════════════════════════
   قالب آریا – post-rails.css
   Home page post sliders: native horizontal scrolling with snap points (smooth on
   touch), mouse dragging, pill dots that fill while autoplay waits.
   Cards keep the theme's 25px gap; --rail-pv cards per view on desktop.
   ═══════════════════════════════════════════════════════════════════════════ */

.arya-rail { --rail-gap: 25px; --rail-pv: 3; position: relative; }

.arya-rail__track {
    display: flex;
    gap: var(--rail-gap);
    margin: -8px -5px 0;
    padding: 12px 5px 22px;          /* room for the cards' hover lift and shadow */
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 5px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.arya-rail__track::-webkit-scrollbar { display: none; }
.arya-rail__track:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 12px; }
.arya-rail__track > * {
    flex: 0 0 calc((100% - (var(--rail-pv) - 1) * var(--rail-gap)) / var(--rail-pv));
    min-width: 0;
    max-width: none;
    scroll-snap-align: start;
}
/* while dragging with the mouse: no snapping, no accidental text selection or image drag */
.arya-rail.is-dragging .arya-rail__track { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.arya-rail.is-dragging .arya-rail__track * { pointer-events: none; }
.arya-rail__track img { -webkit-user-drag: none; user-select: none; }
@media (hover: hover) and (pointer: fine) { .arya-rail__track { cursor: grab; } }

/* dots: the active one is a pill that fills up while autoplay waits */
.arya-rail__dots { display: flex; justify-content: center; gap: 6px; min-height: 8px; margin-top: 2px; }
.arya-rail__dot {
    position: relative;
    width: 8px;
    height: 8px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 30%, transparent);
    cursor: pointer;
    transition: width .3s cubic-bezier(.4, 0, .2, 1), background-color .2s;
}
.arya-rail__dot:hover { background: color-mix(in srgb, var(--text-muted) 55%, transparent); }
.arya-rail__dot.is-active { width: 28px; background: color-mix(in srgb, var(--accent) 30%, transparent); }
.arya-rail__dot.is-active::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--accent);
    transform-origin: right center;
}
[dir="ltr"] .arya-rail__dot.is-active::after { transform-origin: left center; }
.arya-rail.is-playing .arya-rail__dot.is-active::after { animation: arya-rail-fill var(--rail-speed) linear forwards; }
.arya-rail.is-paused .arya-rail__dot.is-active::after,
.arya-rail:not(.is-playing) .arya-rail__dot.is-active::after { animation: none; transform: scaleX(1); }
@keyframes arya-rail-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.arya-rail__dots.is-hidden { visibility: hidden; }

/* tablets: two cards; phones: one card with the next one peeking in */
@media (max-width: 1024px) { .arya-rail { --rail-pv: 2 !important; --rail-gap: 18px; } }
@media (max-width: 640px) {
    .arya-rail { --rail-gap: 14px; }
    .arya-rail__track > * { flex-basis: 84%; }
}

@media (prefers-reduced-motion: reduce) {
    .arya-rail__dot { transition: none; }
    .arya-rail.is-playing .arya-rail__dot.is-active::after { animation: none; transform: scaleX(1); }
}