/* =========================================================
   STIGEON GALLERY
========================================================= */

.stigeon-gallery-wrapper {
    width: 100%;
    position: relative;
}

.stigeon-gallery-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 30px;
}

.stigeon-gallery-filters button {

    border: none;

    padding: 12px 20px;

    cursor: pointer;

    background: #111;

    color: #fff;
}

.stigeon-gallery-grid {
    position: relative;
}

.stigeon-gallery-item {

    width: calc(25% - 16px);

    margin-bottom: 16px;

    position: absolute;

    overflow: hidden;

    text-decoration: none;

    background: #e5e5e5;
}

.stigeon-gallery-ratio {
    position: relative;
    width: 100%;
}

.stigeon-gallery-placeholder {

    position: absolute;

    inset: 0;

    background: #e5e5e5;
}

.stigeon-gallery-image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 0;

    transition: opacity 0.3s ease;
}

.stigeon-gallery-image.loaded {
    opacity: 1;
}

.stigeon-gallery-load-wrap {
    text-align: center;
    margin-top: 40px;
}

.stigeon-gallery-load-more {

    border: none;

    padding: 12px 20px;

    cursor: pointer;

    background: #111;

    color: #fff;
}

@media (max-width: 1024px) {

    .stigeon-gallery-item {
        width: calc(33.333% - 16px);
    }

}

@media (max-width: 767px) {

    .stigeon-gallery-item {
        width: calc(50% - 16px);
    }

}
/* =========================================================
   V9.2.1 — SECONDARY BUTTONS + SKELETON LOADING
   Original gallery sizing/layout above is intentionally preserved.
========================================================= */

.stigeon-gallery-filters button,
.stigeon-gallery-load-more {
    border: 1px solid #000;
    background: #fff;
    color: #000;
    transition: background-color .2s ease, color .2s ease;
}

.stigeon-gallery-filters button:hover,
.stigeon-gallery-filters button:focus-visible,
.stigeon-gallery-filters button.active,
.stigeon-gallery-load-more:hover,
.stigeon-gallery-load-more:focus-visible {
    background: #000;
    color: #fff;
}

.stigeon-gallery-load-more:disabled {
    cursor: wait;
    opacity: .65;
}

.stigeon-gallery-skeleton {
    min-height: 180px;
    background: var(--e-global-color-secondary, #e5e5e5);
    pointer-events: none;
}

.stigeon-gallery-skeleton--portrait { aspect-ratio: 3 / 4; }
.stigeon-gallery-skeleton--landscape { aspect-ratio: 4 / 3; }
.stigeon-gallery-skeleton--square { aspect-ratio: 1 / 1; }

.stigeon-gallery-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--e-global-color-primary, #000) 8%, transparent),
        transparent
    );
    animation: stigeon-gallery-skeleton-shimmer 1.35s infinite;
}

@keyframes stigeon-gallery-skeleton-shimmer {
    100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .stigeon-gallery-skeleton::after { animation: none; }
}

/* =========================================================
   V9.2.6 — STABLE LOAD-MORE POSITION + MOBILE LOADING
========================================================= */

/* Prevent the browser from choosing gallery content / the Load More button
   as a scroll anchor while Masonry appends new cards. */
.stigeon-gallery-wrapper,
.stigeon-gallery-grid,
.stigeon-gallery-load-wrap {
    overflow-anchor: none;
}

/* Keep a visible neutral card behind each image until that individual image
   has loaded. This avoids a white gap on slower mobile connections. */
.stigeon-gallery-placeholder {
    background: var(--e-global-color-secondary, #e5e5e5);
}