.adaptive-item {
    position: relative;
    overflow: hidden;
    height: 100%;
    display: block;
    /* Changes cursor to finger pointer on hover */
}

.adaptive-item.has-caption {
    cursor: pointer;
}

.item-arrow {
    color: #fff;
    font-size: 20px;
    margin-left: 10px;
    transition: transform 0.2s ease;
}

.item-overlay-stripe {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.4) 40%,
            rgba(0, 0, 0, 0.9) 100%
    );

    padding: 100px 25px 10px 20px;
    box-sizing: border-box;
    z-index: 10;

    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Updated Hover Rule */
.adaptive-item:hover .item-overlay-stripe,
.adaptive-item.is-dragging .item-overlay-stripe {
    opacity: 1;
    transform: translateY(0);
}

/* Ensure other items dim slightly or stay hidden during a drag */
.adaptive-container.active .adaptive-item:not(:hover):not(.is-dragging) .item-overlay-stripe {
    opacity: 0;
}

/* Ensure caption text doesn't hit the bottom edge too hard */
.item-caption {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 5px; /* Fine-tune vertical position */
}

.item-arrow {
    margin-bottom: 5px; /* Keep arrow aligned with text baseline */
}

/* Subtle arrow animation on hover */
.adaptive-item:hover .item-arrow {
    transform: translateX(5px);
}

.adaptive-container {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
}

.adaptive-caption {
    width: 100%;
    text-align: center;
    /* Keeps the caption within the standard theme container
       even if the images below it break out to 100vw */
    max-width: 1200px;
    margin: 0 auto;
}

.adaptive-caption h3 {
    margin: 0;
    font-size: 24px;
    /* Customize to match your theme */
}

/* --- MOBILE LOGIC --- */
@media (max-width: 768px) {
    /* Mobile Stripe */
    .m-stripe-mode .adaptive-track {
        display: flex;
        gap: var(--image-gap, 0px); /* Applied here */
        width: max-content;
        height: var(--stripe-height);
    }
    .m-stripe-mode .adaptive-item { height: 100%; flex-shrink: 0; }
    .m-stripe-mode .adaptive-item img { height: 100%; width: auto; }

    /* Mobile Grid */
    .m-grid-mode .adaptive-track {
        display: grid;
        grid-template-columns: repeat(var(--m-cols, 2), 1fr);
        width: 100vw;
    }
    .m-grid-mode .is-duplicate { display: none; }
    .m-grid-mode .adaptive-item img {
        width: 100%;
        height: 100%;
        object-fit: fill;
        padding: var(--image-gap, 0px);
    }
}

/* --- DESKTOP LOGIC --- */
@media (min-width: 769px) {
    /* Desktop Stripe */
    .d-stripe-mode .adaptive-track {
        display: flex;
        gap: var(--image-gap, 0px); /* Applied here */
        width: max-content;
        height: var(--stripe-height);
    }
    .d-stripe-mode .adaptive-item { height: 100%; flex-shrink: 0; }
    .d-stripe-mode .adaptive-item img { height: 100%; width: auto; }

    /* Desktop Grid */
    .d-grid-mode .adaptive-track {
        display: grid;
        grid-template-columns: repeat(var(--d-cols, 4), 1fr);
        width: 100vw;
    }
    .d-grid-mode .is-duplicate { display: none; }
    .d-grid-mode .adaptive-item img {
        width: 100%;
        height: 100%;
        object-fit: fill;
        padding: var(--image-gap, 0px);
    }
}

.adaptive-item img {
    /* Prevent the browser's ghost image drag effect */
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;

    /* Prevent text/image selection during drag */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    pointer-events: none; /* Recommended for the img inside the item */
}

