.hok-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    gap: 0;
}

/* Base card */
.hok-card {
    position: relative;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    min-height: 220px;
}

/* =========================
   SPAN LOGIC (CLEAN)
========================= */

.hok-card.span-1 {
    grid-column: span 1;
}

.hok-card.span-2 {
    grid-column: span 2;
}

/* Overlay */
.hok-card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* =========================
   PAGINATION
========================= */

.hok-pagination {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.hok-pagination p {
    margin: 0;
}

/* Progress bar */
.hok-progress-bar {
    width: 190px;
    height: 2px;
    background: #eee;
    overflow: hidden;
}

.hok-progress-bar .fill {
    height: 100%;
    background: #000;
    transition: width 0.3s ease;
/*     margin-left: auto; */
}

/* Load more */
.hok-load-more {
    transition: 0.3s;
}

.hok-load-more:hover {
    background: #000;
    color: #fff;
}

/* Editor placeholder */
.hok-editor-placeholder {
    padding: 40px;
    border: 2px dashed #ccc;
    text-align: center;
}

@media (max-width: 586px) {

    .hok-gallery-grid {
        grid-template-columns: 1fr;
    }

    .hok-card.span-1,
    .hok-card.span-2 {
        grid-column: auto !important;
    }



}