/* ==========================================================
   JT MAISON — Draggable Carousel Widget
   ========================================================== */

.jtm-draggable-carousel {
    padding: 100px 0; /* Full bleed layout */
    background: var(--jtm-white);
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.jtm-draggable-carousel__inner {
    display: flex;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 24px;
    padding: 0 0 0 40px; /* Left padding aligns with main layout */
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    cursor: grab;
    /* Prevent text selection while dragging */
    user-select: none;
    -webkit-user-select: none;
}

.jtm-draggable-carousel__inner:active {
    cursor: grabbing;
}

.jtm-draggable-carousel__inner::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.jtm-draggable-carousel__item {
    /* Height is controlled via Elementor, defaults to 600px */
    flex: 0 0 auto;
}

.jtm-draggable-carousel__item img {
    height: 100%;
    width: auto;
    object-fit: cover; /* Cover ensures no weird letterboxing if natural size is smaller */
    display: block;
    pointer-events: none; /* Prevents ghost image drag behavior in browsers */
}

.jtm-draggable-carousel__spacer {
    flex: 0 0 16px; /* Provides the final right-side padding (40 - 24 gap) */
}

/* ==========================================================
   RESPONSIVE MOBILE
   ========================================================== */
@media (max-width: 768px) {
    .jtm-draggable-carousel {
        padding: 60px 0;
    }
    
    .jtm-draggable-carousel__inner {
        padding-left: 24px;
        gap: 12px;
    }
    
    .jtm-draggable-carousel__spacer {
        flex: 0 0 12px; /* 24 - 12 gap */
    }
}