/* ============================================
   CUSTOM SLIDER RESPONSIVE
   (Desktop > 1024px sudah ada di slider.css)
   ============================================ */

/* ============================================
   TABLET (768px - 1023px)
   ============================================ */
@media (max-width: 1023px) and (min-width: 768px) {
    .custom-slider-section {
        margin-bottom: 24px;
    }

    .custom-featured-slider {
        height: 360px;
    }

    .custom-featured-content {
        bottom: 30px;
        left: 30px;
        right: 30px;
    }

    .custom-featured-category {
        font-size: 11px;
    }

    .custom-featured-title {
        font-size: 1.6rem;
    }

    .custom-nav-btn {
        width: 40px;
        height: 40px;
    }

    .custom-nav-btn svg {
        width: 22px;
        height: 22px;
    }

    .custom-prev-btn {
        left: 15px;
    }

    .custom-next-btn {
        right: 15px;
    }

    .custom-thumbnail-slider {
        padding: 14px 0;
    }

    .custom-thumbnail-wrapper {
        gap: 12px;
        padding: 0 15px;
    }

    .custom-thumbnail-slide {
        flex: 0 0 calc((100% - 24px) / 3);
    }

    .custom-thumbnail-image {
        aspect-ratio: 16/10;
        margin-bottom: 8px;
    }

    .custom-thumbnail-info {
        padding: 0 4px;
    }

    .custom-thumbnail-category {
        font-size: 11px;
        margin-bottom: 5px;
    }

    .custom-thumbnail-title {
        font-size: 13px;
        -webkit-line-clamp: 3;
    }
}

/* ============================================
   MOBILE (481px - 767px)
   ============================================ */
@media (max-width: 767px) and (min-width: 481px) {
    .custom-slider-section {
        margin-bottom: 20px;
    }

    .custom-featured-slider {
        height: 260px;
    }

    /* Sembunyikan tombol navigasi di mobile */
    .custom-nav-btn {
        display: none !important;
    }

    .custom-featured-content {
        bottom: 20px !important;
        left: 20px !important;
        right: 20px !important;
        max-width: calc(100% - 40px);
    }

    .custom-featured-category {
        padding: 3px 10px !important;
        font-size: 11px !important;
        margin-bottom: 8px !important;
    }

    .custom-featured-title {
        font-size: 1.2rem !important;
        line-height: 1.35 !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .custom-thumbnail-slider {
        padding: 12px 0 !important;
    }

    .custom-thumbnail-wrapper {
        gap: 10px !important;
        padding: 0 !important;
        scroll-snap-type: x mandatory;
    }

    .custom-thumbnail-slide {
        flex: 0 0 calc((100% - 10px) / 2) !important;
        scroll-snap-align: start;
    }

    .custom-thumbnail-image {
        aspect-ratio: 16/10 !important;
        margin-bottom: 8px !important;
        border-radius: 4px;
    }

    .custom-thumbnail-info {
        padding: 0 2px !important;
    }

    .custom-thumbnail-category {
        font-size: 11px !important;
        margin-bottom: 4px !important;
    }

    .custom-thumbnail-title {
        font-size: 12px !important;
        line-height: 1.35 !important;
        -webkit-line-clamp: 2 !important;
    }
}

/* ============================================
   SMALL MOBILE (< 480px)
   ============================================ */
@media (max-width: 480px) {
    .custom-slider-section {
        margin-bottom: 16px;
    }

    .custom-featured-slider {
        height: 220px;
    }

    .custom-nav-btn {
        display: none !important;
    }

    .custom-featured-content {
        bottom: 15px !important;
        left: 15px !important;
        right: 15px !important;
        max-width: calc(100% - 30px);
    }

    .custom-featured-category {
        font-size: 10px !important;
        margin-bottom: 4px !important;
    }

    .custom-featured-title {
        font-size: 1.05rem !important;
        line-height: 1.3 !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .custom-thumbnail-slider {
        padding: 10px 0 !important;
    }

    .custom-thumbnail-wrapper {
        gap: 12px !important;
        padding: 0 !important;
        scroll-snap-type: x mandatory;
    }

    .custom-thumbnail-slide {
        flex: 0 0 calc((100% - 9px) / 2) !important;
        scroll-snap-align: start;
    }

    .custom-thumbnail-image {
        aspect-ratio: 16/10 !important;
        margin-bottom: 6px !important;
        border-radius: 8px;
    }

    .custom-thumbnail-info {
        padding: 0 2px !important;
    }

    .custom-thumbnail-category {
        font-size: 10px !important;
        margin-bottom: 3px !important;
    }

    .custom-thumbnail-title {
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
        -webkit-line-clamp: 3 !important;
    }
}