/* Horizontal Scroll Styles untuk Mobile */
.horizontal-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

.horizontal-scroll::-webkit-scrollbar {
    height: 6px;
}

.horizontal-scroll::-webkit-scrollbar-track {
    background: rgba(243, 244, 246, 0.5);
    border-radius: 10px;
}

.horizontal-scroll::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.7);
    border-radius: 10px;
}

.horizontal-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(107, 114, 128, 0.9);
}

/* Smooth scrolling untuk mobile */
.horizontal-scroll {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Fade edges untuk horizontal scroll */
.scroll-fade::before,
.scroll-fade::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    pointer-events: none;
    z-index: 10;
}

.scroll-fade::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-color), transparent);
}

.scroll-fade::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-color), transparent);
}

/* Line clamp utilities untuk text truncation */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card height consistency */
.card-consistent {
    min-height: 280px;
    max-height: 320px;
}

.card-compact {
    min-height: 240px;
    max-height: 280px;
}

/* Responsive: sembunyikan fade di desktop */
@media (min-width: 640px) {
    .scroll-fade::before,
    .scroll-fade::after {
        display: none;
    }

    /* Desktop card heights bisa lebih fleksibel */
    .card-consistent,
    .card-compact {
        min-height: auto;
        max-height: none;
    }
}