/* Lnsel Post Gallery Lightbox — Frontend CSS */

.lnsel-pgl-section { margin: 40px 0 0; padding: 0; }

/* ── Grid ── */
.lnsel-pgl-grid { display: grid; }
.lnsel-pgl-cols-2 { grid-template-columns: repeat(2,1fr); }
.lnsel-pgl-cols-3 { grid-template-columns: repeat(3,1fr); }
.lnsel-pgl-cols-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width:900px) { .lnsel-pgl-cols-4 { grid-template-columns: repeat(3,1fr); } }
@media (max-width:680px) { .lnsel-pgl-cols-3,.lnsel-pgl-cols-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width:400px) { .lnsel-pgl-cols-2,.lnsel-pgl-cols-3,.lnsel-pgl-cols-4 { grid-template-columns: 1fr; } }

.lnsel-pgl-item { position:relative; overflow:hidden; border-radius:6px; background:#f0f0f0; aspect-ratio:4/3; }
.lnsel-pgl-link { display:block; width:100%; height:100%; position:relative; }
.lnsel-pgl-thumb { width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s cubic-bezier(.25,.46,.45,.94); }
.lnsel-pgl-item:hover .lnsel-pgl-thumb { transform:scale(1.06); }

/* ── Masonry ── */
.lnsel-pgl-masonry { columns:var(--lnsel-cols,3); column-gap:var(--lnsel-gap,10px); }
@media (max-width:900px) { .lnsel-pgl-masonry-4 { columns:3; } }
@media (max-width:680px) { .lnsel-pgl-masonry-3,.lnsel-pgl-masonry-4 { columns:2; } }
@media (max-width:400px) { .lnsel-pgl-masonry-2,.lnsel-pgl-masonry-3,.lnsel-pgl-masonry-4 { columns:1; } }

.lnsel-pgl-masonry-item {
    break-inside:avoid; -webkit-column-break-inside:avoid;
    margin-bottom:var(--lnsel-gap,10px);
    position:relative; overflow:hidden; border-radius:6px; background:#f0f0f0; display:block;
}
.lnsel-pgl-masonry-item:last-child { margin-bottom:0; }
.lnsel-pgl-masonry-item .lnsel-pgl-link { display:block; width:100%; height:auto; }
.lnsel-pgl-masonry-img { width:100%; height:auto; display:block; transition:transform .45s cubic-bezier(.25,.46,.45,.94); }
.lnsel-pgl-masonry-item:hover .lnsel-pgl-masonry-img { transform:scale(1.04); }

/* ── Overlay ── */
.lnsel-pgl-overlay {
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(0,0,0,.38); opacity:0; transition:opacity .3s; border-radius:inherit;
}
.lnsel-pgl-overlay svg { width:38px; height:38px; color:#fff; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.lnsel-pgl-item:hover .lnsel-pgl-overlay,
.lnsel-pgl-masonry-item:hover .lnsel-pgl-overlay { opacity:1; }

/* ── Lightbox ── */
.lnsel-pgl-lightbox { display:none; position:fixed; inset:0; z-index:999999; align-items:center; justify-content:center; }
.lnsel-pgl-lightbox.lnsel-pgl-active { display:flex; animation:lnsel-pgl-fade .25s ease; }
@keyframes lnsel-pgl-fade { from{opacity:0} to{opacity:1} }

.lnsel-pgl-lb-bg { position:absolute; inset:0; background:rgba(10,10,10,.93); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }

.lnsel-pgl-lb-wrap {
    position:relative; z-index:1;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    width:100%; height:100%; padding:56px 16px 72px; box-sizing:border-box; pointer-events:none;
}

.lnsel-pgl-lb-close {
    position:fixed; top:18px; right:22px; width:44px; height:44px;
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
    border-radius:50%; cursor:pointer; color:#fff;
    display:flex; align-items:center; justify-content:center;
    transition:background .2s,transform .2s; pointer-events:all; z-index:2;
}
.lnsel-pgl-lb-close svg { width:20px; height:20px; }
.lnsel-pgl-lb-close:hover { background:rgba(255,255,255,.22); transform:rotate(90deg); }

.lnsel-pgl-lb-prev,.lnsel-pgl-lb-next {
    position:fixed; top:50%; transform:translateY(-50%);
    width:50px; height:50px;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
    border-radius:50%; cursor:pointer; color:#fff;
    display:flex; align-items:center; justify-content:center;
    transition:background .2s,transform .2s; pointer-events:all; z-index:2;
}
.lnsel-pgl-lb-prev { left:18px; }
.lnsel-pgl-lb-next { right:18px; }
.lnsel-pgl-lb-prev svg,.lnsel-pgl-lb-next svg { width:24px; height:24px; }
.lnsel-pgl-lb-prev:hover { background:rgba(255,255,255,.2); transform:translateY(-50%) translateX(-3px); }
.lnsel-pgl-lb-next:hover { background:rgba(255,255,255,.2); transform:translateY(-50%) translateX(3px); }
@media (max-width:580px) {
    .lnsel-pgl-lb-prev { left:8px; width:40px; height:40px; }
    .lnsel-pgl-lb-next { right:8px; width:40px; height:40px; }
}

.lnsel-pgl-lb-img-wrap {
    position:relative; display:flex; align-items:center; justify-content:center;
    max-width:min(90vw,1100px); max-height:calc(100vh - 160px); pointer-events:all;
}
.lnsel-pgl-lb-img {
    max-width:100%; max-height:calc(100vh - 160px);
    object-fit:contain; border-radius:4px;
    box-shadow:0 24px 80px rgba(0,0,0,.6); transition:opacity .3s; display:block;
}
.lnsel-pgl-lb-spinner {
    position:absolute; width:36px; height:36px;
    border:3px solid rgba(255,255,255,.15); border-top-color:#fff;
    border-radius:50%; animation:lnsel-pgl-spin .75s linear infinite; display:none;
}
@keyframes lnsel-pgl-spin { to{transform:rotate(360deg)} }

.lnsel-pgl-lb-footer {
    position:fixed; bottom:0; left:0; right:0;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:14px 24px; background:rgba(0,0,0,.55);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); pointer-events:all;
}
.lnsel-pgl-lb-caption { font-size:.85rem; color:rgba(255,255,255,.8); margin:0; max-width:70%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.lnsel-pgl-lb-counter { font-size:.78rem; color:rgba(255,255,255,.5); font-variant-numeric:tabular-nums; white-space:nowrap; }

body.lnsel-pgl-noscroll { overflow:hidden; }

/* ── Bottom image ── */
.lnsel-pgl-bottom { margin-top: 24px; text-align: center; }
.lnsel-pgl-bottom-img { max-width: 100%; height: auto; display: inline-block; border-radius: 4px; }