/* Kinetic Snap-In Gallery */
.ks-admin-gallery {
    padding: 4px 0 12px;
}
.ks-admin-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}
.ks-admin-item {
    position: relative;
    aspect-ratio: 1;
    border: 1px solid #dcdcde;
    border-radius: 12px;
    overflow: hidden;
    background: #f6f7f7;
    cursor: grab;
}
.ks-admin-item:active { cursor: grabbing; }
.ks-admin-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.ks-remove-image {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,.72);
    color: #fff;
    font-size: 20px;
    line-height: 25px;
    cursor: pointer;
}
.ks-drag-handle {
    position: absolute;
    left: 7px;
    bottom: 7px;
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(0,0,0,.68);
    color: #fff;
    font-size: 12px;
}
.ks-sort-placeholder {
    border: 2px dashed #2271b1;
    border-radius: 12px;
    background: #eef6fc;
}

.ks-gallery-wrap {
    --ks-radius: 18px;
    --ks-gap: 18px;
    width: 100%;
    position: relative;
}
.ks-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ks-gap);
}
.ks-gallery-card {
    appearance: none;
    border: 0;
    padding: 0;
    margin: 0;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--ks-radius);
    background: #e9e9e9;
    cursor: zoom-in;
    position: relative;
    transform: translateZ(0);
}
.ks-gallery-media {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.ks-gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .35s ease;
}
.ks-gallery-card:hover img {
    transform: scale(1.045);
}
.ks-gallery-card:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 4px;
}

/* Kinetic Snap-In:
   hidden -> blurred -> 92% -> aggressive snap to full size/color */
.ks-gallery-card.ks-enter {
    opacity: 0;
    filter: blur(14px);
    transform: scale(.92) translateY(12px);
}
.ks-gallery-card.ks-enter.ks-in {
    opacity: 1;
    filter: blur(0);
    transform: scale(1) translateY(0);
    transition:
        opacity .32s ease-out,
        filter .38s ease-out,
        transform .55s cubic-bezier(.16, 1.35, .22, 1);
}
.ks-gallery-card.ks-snap-reset {
    animation: ks-snap-reset .55s cubic-bezier(.16, 1.35, .22, 1) both;
}
@keyframes ks-snap-reset {
    0% { opacity: 0; filter: blur(14px); transform: scale(.92) translateY(12px); }
    65% { opacity: 1; filter: blur(0); transform: scale(1.025) translateY(-1px); }
    100% { opacity: 1; filter: blur(0); transform: scale(1) translateY(0); }
}

.ks-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}
.ks-page {
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    font: inherit;
    transition: transform .2s ease, background .2s ease, color .2s ease;
}
.ks-page:hover { transform: translateY(-2px); }
.ks-page.is-active {
    background: #111;
    color: #fff;
    border-color: #111;
}

.ks-gallery-loading {
    opacity: .45;
    pointer-events: none;
    transition: opacity .2s ease;
}
.ks-empty-gallery {
    padding: 28px;
    border-radius: 16px;
    background: #f5f5f5;
    text-align: center;
}

/* Lightbox */
.ks-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, visibility 0s linear .35s;
}
.ks-lightbox.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity .28s ease;
}
.ks-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 7, 12, .9);
    backdrop-filter: blur(10px);
}
.ks-lightbox-stage {
    position: relative;
    z-index: 2;
    max-width: min(94vw, 1500px);
    max-height: 94vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ks-lightbox-image {
    display: block;
    max-width: 90vw;
    max-height: 84vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 30px 100px rgba(0,0,0,.45);
    opacity: 0;
    transform: scale(.92);
    filter: blur(8px);
}
.ks-lightbox.is-open .ks-lightbox-image {
    animation: ks-lightbox-in .38s cubic-bezier(.16, 1.25, .22, 1) forwards;
}
.ks-lightbox.is-closing .ks-lightbox-image {
    animation: ks-lightbox-out .26s cubic-bezier(.55,.08,.68,.53) forwards;
}
@keyframes ks-lightbox-in {
    0% { opacity: 0; transform: scale(.92); filter: blur(8px); }
    70% { opacity: 1; transform: scale(1.015); filter: blur(0); }
    100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes ks-lightbox-out {
    0% { opacity: 1; transform: scale(1); filter: blur(0); }
    100% { opacity: 0; transform: scale(.86); filter: blur(5px); }
}
.ks-lightbox-close,
.ks-lightbox-prev,
.ks-lightbox-next {
    position: absolute;
    z-index: 5;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.1);
    color: #fff;
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
}
.ks-lightbox-close:hover,
.ks-lightbox-prev:hover,
.ks-lightbox-next:hover {
    background: rgba(255,255,255,.2);
    transform: scale(1.06);
}
.ks-lightbox-close {
    top: -18px;
    right: -18px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 28px;
    line-height: 36px;
}
.ks-lightbox-prev,
.ks-lightbox-next {
    top: 50%;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 24px;
    transform: translateY(-50%);
}
.ks-lightbox-prev:hover,
.ks-lightbox-next:hover { transform: translateY(-50%) scale(1.06); }
.ks-lightbox-prev { left: -70px; }
.ks-lightbox-next { right: -70px; }

@media (max-width: 900px) {
    .ks-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .ks-gallery-wrap { --ks-radius: 14px; }
    .ks-lightbox-prev { left: 10px; }
    .ks-lightbox-next { right: 10px; }
    .ks-lightbox-close { top: 10px; right: 10px; }
}
@media (max-width: 600px) {
    .ks-gallery-grid { gap: 9px; }
    .ks-lightbox { padding: 12px; }
    .ks-lightbox-image { max-width: 94vw; max-height: 78vh; }
    .ks-lightbox-prev, .ks-lightbox-next {
        width: 40px;
        height: 40px;
        font-size: 19px;
    }
        .ks-admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
    .ks-gallery-card,
    .ks-gallery-card img,
    .ks-lightbox,
    .ks-lightbox-image,
    .ks-page {
        animation: none !important;
        transition: none !important;
    }
}