/*
 * "grid_random" layout overrides.
 * Reuses the standard grid styling but forces a 4-column layout
 * (the base grid is 3 columns / 33.33%).
 */
/* Full-width wrapper: no max-width, no margin, no padding (edge to edge). */
.repocean-grid-main.repocean-grid-random .content-wrapper {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Stretch the boxes edge to edge of the wrapper.
   The base layout keeps the -8px offset that cancels the boxes' 8px margins,
   so with zero wrapper padding the outer boxes sit flush to the edges. */
.repocean-grid-main.repocean-grid-random .grid-box-parent .grid-box {
    width: calc(25% - 16px);
    min-width: 0;
    align-items: stretch;
}

/* Hide the Load More button if it is ever rendered for this layout. */
.repocean-grid-main.repocean-grid-random .load-more-btn {
    display: none !important;
}

/* Carousel container. The arrows are hidden on desktop (boxes simply wrap). */
.repocean-grid-main.repocean-grid-random .grid-carousel {
    position: relative;
}
.repocean-grid-main.repocean-grid-random .repocean-grid-nav {
    display: none;
}

@media (max-width: 1199px) {
    .repocean-grid-main.repocean-grid-random .grid-box-parent .grid-box {
        width: calc(50% - 16px);
    }
}

/* --- Mobile: horizontal swipeable carousel with arrows --- */
@media (max-width: 767px) {
    .repocean-grid-main.repocean-grid-random .grid-box-parent {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        margin: 0;
        padding-bottom: 6px;
        /* Hide the scrollbar while keeping native touch swipe. */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .repocean-grid-main.repocean-grid-random .grid-box-parent::-webkit-scrollbar {
        display: none;
    }
    .repocean-grid-main.repocean-grid-random .grid-box-parent .grid-box {
        flex: 0 0 85%;
        width: 85%;
        margin: 0 8px;
        scroll-snap-align: center;
    }
    /* Keep boxes visible even before the grid.js "show" animation runs. */
    .repocean-grid-main.repocean-grid-random .grid-box-parent .grid-box,
    .repocean-grid-main.repocean-grid-random .grid-box-parent .grid-box.show {
        display: flex;
        opacity: 1;
    }

    .repocean-grid-main.repocean-grid-random .repocean-grid-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 38px;
        height: 38px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: #ffffff;
        color: #222222;
        font-size: 26px;
        line-height: 1;
        cursor: pointer;
        z-index: 5;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
        transition: opacity 0.2s ease, background 0.2s ease;
    }
    .repocean-grid-main.repocean-grid-random .repocean-grid-nav span {
        margin-top: -3px;
    }
    .repocean-grid-main.repocean-grid-random .repocean-grid-prev {
        left: 4px;
    }
    .repocean-grid-main.repocean-grid-random .repocean-grid-next {
        right: 4px;
    }
    .repocean-grid-main.repocean-grid-random .repocean-grid-nav:disabled {
        opacity: 0.35;
        cursor: default;
    }
    .repocean-grid-main.repocean-grid-random.dark .repocean-grid-nav {
        background: #333333;
        color: #ffffff;
    }
}