/* ======================================================
   Infinite drag-scroll  ·  homepage horizontal tracks
   No auto-scroll — drag or swipe to loop infinitely
   ====================================================== */

.hp-scroll {
    overflow-x: scroll;    /* always scrollable so JS can set scrollLeft */
    overflow-y: hidden;
    position: relative;
    width: 100%;
    cursor: grab;

    /* hide the scrollbar visually */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE/Edge */

    /* soft fade at both edges */
    mask-image: linear-gradient(90deg,
        transparent 0%,
        #000 3%,
        #000 97%,
        transparent 100%);
    -webkit-mask-image: linear-gradient(90deg,
        transparent 0%,
        #000 3%,
        #000 97%,
        transparent 100%);
}

.hp-scroll::-webkit-scrollbar {
    display: none;          /* Chrome/Safari */
}

.hp-scroll.is-dragging {
    cursor: grabbing;
    user-select: none;
}
/* only block text selection while dragging, not pointer events */
.hp-scroll.is-dragging * {
    user-select: none;
}

.hp-section-scroll {
    margin-top: 1.75rem;
}

.hp-scroll__track {
    display: flex;
    gap: 18px;
    width: max-content;
    /* no animation, no will-change */
}

/* Drag hint below the track */
.hp-scroll__hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 12px;
    color: #94a3b8;
    pointer-events: none;
    user-select: none;
    font-family: 'Plus Jakarta Sans', sans-serif;
}
.hp-scroll__hint i { font-size: 11px; }

/* On touch-only devices the swipe gesture is obvious — hide text hint */
@media (hover: none) and (pointer: coarse) {
    .hp-scroll__hint { display: none !important; }
}