/* =============================================================================
   Secondary Product Gallery — Frontend Styles
   ========================================================================== */

/* ── Gallery wrapper ─────────────────────────────────────────────────────────── */

.spg-gallery {
    --spg-cols: 3;
    --spg-gap: 12px;
    --spg-radius: 8px;
    margin: 2em 0;
    width: 100%;
}

.spg-gallery__heading {
    margin: 0 0 1em;
    font-size: 1.25em;
    line-height: 1.3;
}

/* ── Grid layout ─────────────────────────────────────────────────────────────── */

.spg-layout--grid .spg-grid {
    display: grid;
    grid-template-columns: repeat(var(--spg-cols), 1fr);
    gap: var(--spg-gap);
}

/* ── Masonry layout ──────────────────────────────────────────────────────────── */

.spg-layout--masonry .spg-grid {
    columns: var(--spg-cols);
    column-gap: var(--spg-gap);
}

.spg-layout--masonry .spg-item {
    break-inside: avoid;
    margin-bottom: var(--spg-gap);
    display: block;
}

.spg-layout--masonry .spg-item:last-child {
    margin-bottom: 0;
}

/* ── Carousel layout ─────────────────────────────────────────────────────────── */

.spg-layout--carousel .spg-carousel {
    position: relative;
    padding: 0 40px;
}

.spg-layout--carousel .spg-carousel__viewport {
    overflow: hidden;
}

.spg-layout--carousel .spg-carousel__track {
    display: flex;
    gap: var(--spg-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
    padding-bottom: 2px; /* prevent clipping box-shadows */
}

.spg-layout--carousel .spg-carousel__track::-webkit-scrollbar {
    display: none;
}

.spg-layout--carousel .spg-item {
    flex: 0 0 calc(
        (100% - (var(--spg-cols) - 1) * var(--spg-gap)) / var(--spg-cols)
    );
    scroll-snap-align: start;
}

.spg-carousel__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    transition: background 0.15s ease, box-shadow 0.15s ease;
    padding: 0;
}

.spg-carousel__btn:hover {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

.spg-carousel__btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.spg-carousel__btn--prev { left: 0; }
.spg-carousel__btn--next { right: 0; }

.spg-carousel__btn svg {
    pointer-events: none;
}

/* ── Items ───────────────────────────────────────────────────────────────────── */

.spg-item {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--spg-radius);
    text-decoration: none;
    color: inherit;
    background: #f0f0f0;
}

.spg-item .spg-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--spg-radius);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Lightbox hover effect */
.spg-has-lightbox .spg-item {
    cursor: zoom-in;
}

.spg-has-lightbox .spg-item:hover .spg-img {
    transform: scale(1.04);
    opacity: 0.9;
}

.spg-has-lightbox .spg-item:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* ── Aspect ratio wrapper ────────────────────────────────────────────────────── */

.spg-item__ratio {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--spg-radius);
    width: 100%;
}

.spg-item__ratio .spg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

/* ── Caption ─────────────────────────────────────────────────────────────────── */

.spg-item__caption {
    display: block;
    font-size: 0.8em;
    color: #666;
    text-align: center;
    margin-top: 0.4em;
    padding: 0 0.4em;
    line-height: 1.4;
}

/* =============================================================================
   Lightbox
   ========================================================================== */

.spg-lb {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spg-lb[hidden] {
    display: none;
}

.spg-lb__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    cursor: pointer;
}

.spg-lb__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 96vw;
    max-height: 96vh;
    padding: 20px;
    box-sizing: border-box;
}

.spg-lb__stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-height: 90vh;
    overflow: hidden;
}

.spg-lb__img {
    display: block;
    max-width: min(80vw, 1200px);
    max-height: 80vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
    /* Smooth image swap */
    transition: opacity 0.2s ease;
}

.spg-lb__img.is-loading {
    opacity: 0.4;
}

.spg-lb__caption {
    margin: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.875rem;
    text-align: center;
    max-width: 60ch;
    line-height: 1.5;
}

.spg-lb__caption[hidden] {
    display: none;
}

/* Navigation buttons */
.spg-lb__close,
.spg-lb__prev,
.spg-lb__next {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    flex-shrink: 0;
    padding: 0;
}

.spg-lb__close:hover,
.spg-lb__prev:hover,
.spg-lb__next:hover {
    background: rgba(255, 255, 255, 0.25);
}

.spg-lb__close:focus-visible,
.spg-lb__prev:focus-visible,
.spg-lb__next:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
}

.spg-lb__close {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 40px;
    height: 40px;
}

.spg-lb__prev,
.spg-lb__next {
    width: 52px;
    height: 52px;
}

/* Counter */
.spg-lb__counter {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    pointer-events: none;
    z-index: 1;
}

/* Lock body scroll when lightbox open */
body.spg-lb-open {
    overflow: hidden;
}

/* =============================================================================
   Responsive — columns and gap are controlled per-gallery via inline <style>
   blocks output by the shortcode. Only lightbox and carousel tweaks live here.
   ========================================================================== */

@media (max-width: 600px) {
    .spg-lb__prev,
    .spg-lb__next {
        display: none;
    }

    .spg-lb__img {
        max-width: 92vw;
        max-height: 75vh;
    }

    .spg-layout--carousel {
        padding: 0;
    }
}