/**
 * Post Gallery Shortcode — Front-end Styles
 * Version: 2.0.0
 *
 * Every rule is scoped to .pgsc-gallery or .pgsc-lightbox.
 * CSS custom properties use --pgsc- prefix throughout.
 * No resets or globals that could affect the theme.
 */

/* ════════════════════════════════════════════════════════════
   GALLERY GRID
   ════════════════════════════════════════════════════════════ */
.pgsc-gallery {
    --pgsc-gap:   12px;
    --pgsc-ratio: 1/1;
    --pgsc-cols:  3;

    display: grid;
    grid-template-columns: repeat( var(--pgsc-cols), 1fr );
    gap: var(--pgsc-gap);
    width: 100%;
    margin: 1.5em 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

/* Column variants — set via inline style + class for specificity safety */
.pgsc-gallery--cols-1 { --pgsc-cols: 1; }
.pgsc-gallery--cols-2 { --pgsc-cols: 2; }
.pgsc-gallery--cols-3 { --pgsc-cols: 3; }
.pgsc-gallery--cols-4 { --pgsc-cols: 4; }
.pgsc-gallery--cols-5 { --pgsc-cols: 5; }
.pgsc-gallery--cols-6 { --pgsc-cols: 6; }

/* Responsive collapse */
@media (max-width: 768px) {
    .pgsc-gallery--cols-4,
    .pgsc-gallery--cols-5,
    .pgsc-gallery--cols-6 { --pgsc-cols: 3; }
}
@media (max-width: 540px) {
    .pgsc-gallery--cols-3,
    .pgsc-gallery--cols-4,
    .pgsc-gallery--cols-5,
    .pgsc-gallery--cols-6 { --pgsc-cols: 2; }
}
@media (max-width: 340px) {
    .pgsc-gallery { --pgsc-cols: 1 !important; }
}

/* ── Gallery item ──────────────────────────────────────────── */
.pgsc-gallery__item {
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background-color: #1a1a1a;
    aspect-ratio: var(--pgsc-ratio);
    box-sizing: border-box;
    /* Isolate stacking context so overlay never leaks */
    isolation: isolate;
}

/* ── Anchor (lightbox trigger) ─────────────────────────────── */
.pgsc-gallery__link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    outline-offset: 3px;
}

/* ── Image ─────────────────────────────────────────────────── */
.pgsc-gallery__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity   0.4s ease;
    will-change: transform;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    max-width: none;        /* override theme resets */
    vertical-align: top;
}

.pgsc-gallery__item:hover .pgsc-gallery__img,
.pgsc-gallery__link:focus-visible .pgsc-gallery__img {
    transform: scale(1.07);
    opacity: 0.82;
}

/* ── Hover overlay ─────────────────────────────────────────── */
.pgsc-gallery__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.28s ease;
    pointer-events: none;
    z-index: 2;
}

.pgsc-gallery__item:hover .pgsc-gallery__overlay,
.pgsc-gallery__link:focus-visible .pgsc-gallery__overlay { opacity: 1; }

.pgsc-gallery__icon {
    width: 36px;
    height: 36px;
    color: #fff;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
    flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════
   LIGHTBOX
   ════════════════════════════════════════════════════════════ */
.pgsc-lightbox {
    --pgsc-lb-z:      999990;
    --pgsc-lb-radius: 6px;
    --pgsc-lb-btn-sz: 46px;
    --pgsc-lb-ease:   cubic-bezier(0.16, 1, 0.3, 1);

    position: fixed;
    inset: 0;
    z-index: var(--pgsc-lb-z);
    display: flex;
    align-items: center;
    justify-content: center;

    /* Hidden by default — JS toggles pgsc-lightbox--open */
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}

.pgsc-lightbox.pgsc-lightbox--open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transition: opacity 0.22s ease;
}

/* ── Backdrop ──────────────────────────────────────────────── */
.pgsc-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 8, 10, 0.93);
    cursor: zoom-out;
}

/* ── Stage (above backdrop) ────────────────────────────────── */
.pgsc-lightbox__stage {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* ── Media area ────────────────────────────────────────────── */
.pgsc-lightbox__media {
    position: relative;
    max-width: 88vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pgsc-lightbox__img {
    display: block;
    max-width: 88vw;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--pgsc-lb-radius);
    box-shadow: 0 16px 60px rgba(0,0,0,.7);
    transition: opacity 0.2s ease;
    margin: 0 auto;
    /* Override any theme styles that might distort the image */
    min-width: unset;
    min-height: unset;
    border: none;
    padding: 0;
    vertical-align: top;
}

.pgsc-lightbox__img.pgsc-lightbox__img--loading { opacity: 0; }

.pgsc-lightbox__caption {
    margin: 10px 0 0;
    color: rgba(255,255,255,.65);
    font-size: 0.875rem;
    font-style: italic;
    text-align: center;
    line-height: 1.5;
    max-width: 60ch;
}

/* ── Spinner ────────────────────────────────────────────────── */
.pgsc-lightbox__spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
}

.pgsc-lightbox__spinner.pgsc-lightbox__spinner--visible { opacity: 1; }

.pgsc-lightbox__spinner svg {
    width: 42px;
    height: 42px;
    color: rgba(255,255,255,.6);
    animation: pgsc-spin 0.85s linear infinite;
}

@keyframes pgsc-spin {
    to { transform: rotate(360deg); }
}

/* ── Counter ────────────────────────────────────────────────── */
.pgsc-lightbox__counter {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.55);
    color: rgba(255,255,255,.8);
    font-size: 0.8rem;
    padding: 4px 12px;
    border-radius: 20px;
    pointer-events: none;
    letter-spacing: .03em;
}

/* ── Shared button base ─────────────────────────────────────── */
.pgsc-lightbox__btn {
    --pgsc-lb-btn-bg: rgba(255, 255, 255, 0.12);

    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width:  var(--pgsc-lb-btn-sz);
    height: var(--pgsc-lb-btn-sz);
    padding: 0;
    background: var(--pgsc-lb-btn-bg);
    border: 1.5px solid rgba(255,255,255,.18);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
    /* Prevent theme button styles bleeding in */
    font-size: inherit;
    line-height: 1;
    text-decoration: none;
    box-shadow: none;
    outline-offset: 3px;
}

.pgsc-lightbox__btn:hover,
.pgsc-lightbox__btn:focus-visible {
    --pgsc-lb-btn-bg: rgba(255, 255, 255, 0.28);
    border-color: rgba(255,255,255,.45);
}

.pgsc-lightbox__btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    /* Never let theme rotate or filter these icons */
    transform: none !important;
    filter: none !important;
}

/* Positions */
.pgsc-lightbox__btn--close {
    top:   16px;
    right: 16px;
}
.pgsc-lightbox__btn--prev {
    left: 16px;
    top:  50%;
    transform: translateY(-50%);
}
.pgsc-lightbox__btn--prev:hover { transform: translateY(-50%) scale(1.08); }

.pgsc-lightbox__btn--next {
    right: 16px;
    top:   50%;
    transform: translateY(-50%);
}
.pgsc-lightbox__btn--next:hover { transform: translateY(-50%) scale(1.08); }

/* Hide nav buttons when only one image */
.pgsc-lightbox.pgsc-lightbox--single .pgsc-lightbox__btn--prev,
.pgsc-lightbox.pgsc-lightbox--single .pgsc-lightbox__btn--next { display: none; }

/* Mobile tweaks */
@media (max-width: 480px) {
    .pgsc-lightbox__btn { --pgsc-lb-btn-sz: 38px; }
    .pgsc-lightbox__btn--prev { left: 8px; }
    .pgsc-lightbox__btn--next { right: 8px; }
    .pgsc-lightbox__img { max-width: 96vw; max-height: 75vh; }
}