/* Smart Gallery — Public Styles */

/* ── Width variants ────────────────────────────────────────────────────────── */
.sg-width-boxed {
    /* inherits the theme's content width */
}
.sg-width-full {
    /* JS sets margin-left and width dynamically via sg-full-width-ready */
    box-sizing: border-box;
    padding-left:  var(--sg-full-pad, 0px);
    padding-right: var(--sg-full-pad, 0px);
}
.sg-width-full.sg-full-width-ready {
    position: relative;
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
.sg-gallery {
    --sg-cols:   3;
    --sg-cols-t: 2;
    --sg-cols-m: 1;
    --sg-gap:    10px;
    box-sizing: border-box;
}
.sg-gallery *,
.sg-gallery *::before,
.sg-gallery *::after { box-sizing: inherit; }

.sg-gallery a { text-decoration: none; display: block; }

.sg-gallery img {
    display: block;
    width:   100%;
    height:  auto;
    max-width: 100%;
}

.sg-empty { color: #777; font-style: italic; padding: 20px 0; }

/* ── Grid layout ───────────────────────────────────────────────────────────── */
.sg-layout-grid {
    display: grid;
    grid-template-columns: repeat(var(--sg-cols), 1fr);
    gap: var(--sg-gap);
}
.sg-layout-grid .sg-item { overflow: hidden; }
.sg-layout-grid .sg-item img { width: 100%; height: 200px; object-fit: cover; }

@media (max-width: 768px) {
    .sg-layout-grid {
        grid-template-columns: repeat(var(--sg-cols-t), 1fr);
    }
}
@media (max-width: 480px) {
    .sg-layout-grid {
        grid-template-columns: repeat(var(--sg-cols-m), 1fr);
    }
}

/* ── Masonry layout (Pro) ──────────────────────────────────────────────────── */
.sg-layout-masonry {
    columns: var(--sg-cols);
    column-gap: var(--sg-gap);
}
.sg-layout-masonry .sg-item {
    break-inside: avoid;
    margin-bottom: var(--sg-gap);
    overflow: hidden;
}
.sg-layout-masonry .sg-item img { width: 100%; height: auto; }

@media (max-width: 768px) {
    .sg-layout-masonry { columns: var(--sg-cols-t); }
}
@media (max-width: 480px) {
    .sg-layout-masonry { columns: var(--sg-cols-m); }
}

/* ── Justified layout (Pro) ────────────────────────────────────────────────── */
.sg-layout-justified {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sg-gap);
}
.sg-layout-justified .sg-item {
    flex: 1 1 200px;
    overflow: hidden;
}
.sg-layout-justified .sg-item img {
    width:  100%;
    height: 220px;
    object-fit: cover;
}

/* ── Slideshow layout (Pro) ────────────────────────────────────────────────── */
.sg-layout-slideshow {
    position: relative;
    overflow: hidden;
    background: #000;
    user-select: none;
}
.sg-layout-slideshow .sg-item {
    display: none;
    position: relative;
}
.sg-layout-slideshow .sg-item.sg-slide-active { display: block; }
.sg-layout-slideshow .sg-item img {
    width:  100%;
    height: 500px;
    object-fit: contain;
    display: block;
}
.sg-slide-prev,
.sg-slide-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.5);
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    padding: 0;
}
.sg-slide-prev:hover,
.sg-slide-next:hover { background: rgba(0,0,0,.75); }
.sg-slide-prev { left:  12px; }
.sg-slide-next { right: 12px; }
.sg-slide-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 2;
}
.sg-slide-dot {
    width:  10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    cursor: pointer;
    border: none;
    padding: 0;
    transition: background .2s;
}
.sg-slide-dot.sg-dot-active { background: #fff; }
.sg-slide-counter {
    position: absolute;
    top: 12px;
    right: 16px;
    background: rgba(0,0,0,.5);
    color: #fff;
    font-size: 13px;
    padding: 3px 10px;
    border-radius: 20px;
    z-index: 2;
}
@media (max-width: 480px) {
    .sg-layout-slideshow .sg-item img { height: 240px; }
}

/* ── Caption ───────────────────────────────────────────────────────────────── */
.sg-caption-below {
    margin: 0;
    padding: 6px 4px 0;
    font-size: 13px;
    color: #555;
    line-height: 1.4;
}

.sg-item { position: relative; }
.sg-caption-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,.7));
    color: #fff;
    font-size: 13px;
    padding: 24px 10px 10px;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .25s, transform .25s;
    pointer-events: none;
}
.sg-captions-overlay .sg-item:hover .sg-caption-overlay,
.sg-captions-overlay .sg-item:focus-within .sg-caption-overlay {
    opacity: 1;
    transform: translateY(0);
}

/* ── Hover effects ─────────────────────────────────────────────────────────── */
.sg-gallery .sg-item a { overflow: hidden; }
.sg-gallery .sg-item a img { transition: transform .3s ease, filter .3s ease; }

/* zoom */
.sg-hover-zoom .sg-item a:hover img { transform: scale(1.07); }

/* darken */
.sg-hover-darken .sg-item a::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    transition: background .25s;
    pointer-events: none;
}
.sg-hover-darken .sg-item a:hover::after { background: rgba(0,0,0,.3); }

/* shine */
.sg-hover-shine .sg-item a {
    overflow: hidden;
}
.sg-hover-shine .sg-item a::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.4) 50%, transparent 60%);
    transition: left .45s ease;
    z-index: 1;
    pointer-events: none;
}
.sg-hover-shine .sg-item a:hover::before { left: 150%; }

/* slide-up caption (combined with caption overlay) */
.sg-hover-slide-up .sg-item .sg-caption-overlay {
    opacity: 1;
    transform: translateY(100%);
    transition: transform .3s ease;
}
.sg-hover-slide-up .sg-item:hover .sg-caption-overlay { transform: translateY(0); }

/* ── Style presets ─────────────────────────────────────────────────────────── */

/* default — no changes */

/* dark */
.sg-preset-dark { background: #111; padding: 16px; border-radius: 6px; }
.sg-preset-dark .sg-item a img { filter: brightness(.9); }
.sg-preset-dark .sg-item a:hover img { filter: brightness(1); }
.sg-preset-dark .sg-caption-below { color: #ccc; }

/* minimal */
.sg-preset-minimal .sg-item img { border-radius: 0 !important; }
.sg-preset-minimal .sg-caption-below { color: #888; font-size: 12px; }

/* rounded */
.sg-preset-rounded .sg-item,
.sg-preset-rounded .sg-item a { border-radius: 12px; }
.sg-preset-rounded .sg-item img { border-radius: 12px; }

/* bordered */
.sg-preset-bordered .sg-item {
    border: 2px solid #ddd;
    border-radius: 4px;
    padding: 4px;
    background: #fff;
}

/* ── Lightbox ──────────────────────────────────────────────────────────────── */
.sg-lb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.92);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s;
    cursor: zoom-out;
    pointer-events: none;
}
.sg-lb-overlay.sg-lb-open {
    pointer-events: all;
}
.sg-lb-overlay.sg-lb-open { opacity: 1; }
.sg-lb-overlay.sg-lb-closing { opacity: 0; }

.sg-lb-inner {
    position: relative;
    max-width: 94vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: default;
}

.sg-lb-img-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sg-lb-img-wrap img {
    max-width: 92vw;
    max-height: 80vh;
    object-fit: contain;
    display: block;
    border-radius: 2px;
    box-shadow: 0 8px 40px rgba(0,0,0,.6);
    opacity: 0;
    transform: scale(.97);
    transition: opacity .2s, transform .2s;
}
.sg-lb-img-wrap img.sg-lb-img-loaded {
    opacity: 1;
    transform: scale(1);
}
.sg-lb-spinner {
    position: absolute;
    width:  36px;
    height: 36px;
    border: 3px solid rgba(255,255,255,.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: sg-spin .7s linear infinite;
}
@keyframes sg-spin { to { transform: rotate(360deg); } }

.sg-lb-caption {
    color: rgba(255,255,255,.85);
    font-size: 14px;
    margin-top: 12px;
    text-align: center;
    max-width: 600px;
    line-height: 1.5;
    min-height: 20px;
}

.sg-lb-close {
    position: fixed;
    top: 16px; right: 20px;
    background: none;
    border: none;
    color: rgba(255,255,255,.8);
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
    z-index: 100001;
    transition: color .15s;
}
.sg-lb-close:hover { color: #fff; }

.sg-lb-prev,
.sg-lb-next {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.1);
    border: none;
    color: #fff;
    width:  52px;
    height: 52px;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    padding: 0;
}
.sg-lb-prev:hover,
.sg-lb-next:hover { background: rgba(255,255,255,.25); }
.sg-lb-prev { left:  16px; }
.sg-lb-next { right: 16px; }
.sg-lb-prev.sg-lb-hidden,
.sg-lb-next.sg-lb-hidden { display: none; }

.sg-lb-counter {
    position: fixed;
    top: 20px; left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,.6);
    font-size: 13px;
    z-index: 100001;
}

@media (max-width: 600px) {
    .sg-lb-prev { left:  6px; }
    .sg-lb-next { right: 6px; }
    .sg-lb-prev,
    .sg-lb-next { width: 40px; height: 40px; font-size: 18px; }
}

/* ── Gallery Wall layout (Pro) ─────────────────────────────────────────────── */

.sg-gallery-wall {
    position: relative;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* Wall colors */
.sg-wall-color-offwhite { background: #f7f4ef; }
.sg-wall-color-warm     { background: #f4ece0; }
.sg-wall-color-gray     { background: #ebebeb; }

/*
 * Photo area — CSS Grid with tiny row unit + JS-computed spans per frame.
 * Result: left→right DOM order (matches admin grid) AND no gaps
 * (each frame spans exactly as many 4 px rows as its rendered height needs).
 */
.sg-wall-photos {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 4px;    /* tiny unit; JS sets grid-row-end: span N on each frame */
    row-gap: 0;             /* gaps come from margin-bottom on .sg-frame */
    column-gap: 36px;
    align-items: start;
    padding: 60px 50px 50px;
}

/* Individual frames */
.sg-frame {
    display: block;
    width: 100%;
    margin-bottom: 36px;    /* column gap — JS includes this in the span calculation */
    position: relative;
    transform: rotate(var(--sg-rot, 0deg));
    transform-origin: center center;
    transition: transform .4s ease, box-shadow .4s ease;
    /*
     * Pre-rendered grid-row span (set inline as --sg-row-span by the PHP
     * renderer based on the image's aspect ratio). Prevents the "stacked /
     * collapsed frames" flash before sg-public.js can measure real heights.
     * JS overrides this once the image actually loads.
     */
    grid-row-end: span var(--sg-row-span, 100);
    /*
     * Off-screen frames are not painted/laid-out by the browser. Each frame
     * keeps its intrinsic size from --sg-row-span × grid-auto-rows so the
     * page height stays stable. Huge win on long mobile galleries.
     */
    content-visibility: auto;
    contain-intrinsic-size: 0 calc(var(--sg-row-span, 100) * 4px);
}
.sg-frame:hover {
    transform: rotate(calc(var(--sg-rot, 0deg) * .18)) scale(1.02) translateY(-4px);
}

/* Frame border thicknesses */
.sg-frame-thin   { padding: 7px; }
.sg-frame-medium { padding: 15px; }
.sg-frame-thick  { padding: 23px; }

/* Shared profile-bevel pseudo-element structure */
.sg-frame-style-black::before,
.sg-frame-style-white::before,
.sg-frame-style-lightwood::before,
.sg-frame-style-darkwood::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* ── Black lacquer ───────────────────────────────────────────────────────── */
/*
 * Gradient simulates the molding slope:
 *   outer top-left face → catches light (lighter)
 *   inner slope → falls into shadow (darker)
 *   outer bottom-right bounce → faint ambient lift
 */
.sg-frame-style-black {
    background: linear-gradient(
        155deg,
        #2e2e2e  0%,
        #141414 38%,
        #080808 65%,
        #1c1c1c 100%
    );
    box-shadow:
        1px  2px  2px  rgba(0,0,0,.55),   /* tight contact shadow */
        4px  7px 14px  rgba(0,0,0,.40),   /* main directional shadow */
        7px 12px 30px  rgba(0,0,0,.20);   /* ambient spread */
}
/* Inset box-shadows add the raised-edge / inner-slope bevel lighting */
.sg-frame-style-black::before {
    box-shadow:
        inset  0    2px  0   rgba(255,255,255,.20),  /* top edge: catches light */
        inset  2px  0    0   rgba(255,255,255,.10),  /* left edge: catches light */
        inset  0   -3px  5px rgba(0,0,0,.80),        /* bottom inner slope: deep */
        inset -3px  0    4px rgba(0,0,0,.60),        /* right inner slope: shadow */
        inset  4px  4px 10px rgba(0,0,0,.50);        /* centre depth / cave effect */
}
.sg-frame-style-black:hover {
    box-shadow:
         5px 14px 22px rgba(0,0,0,.50),
        10px 22px 48px rgba(0,0,0,.22);
}

/* ── White / plaster ─────────────────────────────────────────────────────── */
.sg-frame-style-white {
    background: linear-gradient(
        155deg,
        #f2f2f2  0%,
        #dedede 38%,
        #d0d0d0 65%,
        #dadada 100%
    );
    box-shadow:
        1px  2px  2px  rgba(0,0,0,.14),
        4px  7px 14px  rgba(0,0,0,.10),
        7px 12px 30px  rgba(0,0,0,.07);
}
.sg-frame-style-white::before {
    box-shadow:
        inset  0    2px  0   rgba(255,255,255,.95),  /* top: very bright */
        inset  2px  0    0   rgba(255,255,255,.75),  /* left: bright */
        inset  0   -3px  5px rgba(0,0,0,.16),        /* bottom shadow */
        inset -3px  0    4px rgba(0,0,0,.11),        /* right shadow */
        inset  4px  4px 10px rgba(0,0,0,.07);        /* inner depth */
}
.sg-frame-style-white:hover {
    box-shadow:
         5px 14px 22px rgba(0,0,0,.15),
        10px 22px 48px rgba(0,0,0,.08);
}

/* ── Light wood — oak / maple with lacquer sheen ─────────────────────────── */
.sg-frame-style-lightwood {
    background:
        /* Lacquer sheen: diagonal sweep upper-left → lower-right */
        linear-gradient(152deg,
            rgba(255,255,255,.26)  0%,
            rgba(255,255,255,.08) 32%,
            transparent           55%,
            rgba(0,0,0,.12)      100%
        ),
        /* Wood grain — varied band widths avoid mechanical repetition */
        repeating-linear-gradient(90deg,
            #c8943c  0px, #c8943c  1px,
            #d4a04a  1px, #d4a04a  7px,
            #bf8d39  7px, #bf8d39  8px,
            #daa84e  8px, #daa84e 19px,
            #c49040 19px, #c49040 20px,
            #d8a64c 20px, #d8a64c 29px,
            #c08c38 29px, #c08c38 31px,
            #dcac52 31px, #dcac52 42px
        );
    box-shadow:
        1px  2px  2px  rgba(0,0,0,.35),
        4px  7px 14px  rgba(0,0,0,.26),
        7px 12px 30px  rgba(0,0,0,.14);
}
.sg-frame-style-lightwood::before {
    box-shadow:
        inset  0    2px  0   rgba(255,255,255,.48),
        inset  2px  0    0   rgba(255,255,255,.24),
        inset  0   -3px  5px rgba(0,0,0,.42),
        inset -3px  0    4px rgba(0,0,0,.30),
        inset  4px  4px 10px rgba(0,0,0,.22);
}
.sg-frame-style-lightwood:hover {
    box-shadow:
         5px 14px 22px rgba(0,0,0,.32),
        10px 22px 48px rgba(0,0,0,.16);
}

/* ── Dark wood — walnut / wenge ──────────────────────────────────────────── */
.sg-frame-style-darkwood {
    background:
        linear-gradient(152deg,
            rgba(255,255,255,.15)  0%,
            rgba(255,255,255,.04) 28%,
            transparent           50%,
            rgba(0,0,0,.22)      100%
        ),
        repeating-linear-gradient(90deg,
            #2a1806  0px, #2a1806  1px,
            #462a10  1px, #462a10  7px,
            #361e08  7px, #361e08  8px,
            #523012  8px, #523012 19px,
            #3c2208 19px, #3c2208 20px,
            #5a3616 20px, #5a3616 29px,
            #321c06 29px, #321c06 31px,
            #4e2e0e 31px, #4e2e0e 42px
        );
    box-shadow:
        1px  2px  2px  rgba(0,0,0,.55),
        4px  7px 14px  rgba(0,0,0,.44),
        7px 12px 30px  rgba(0,0,0,.24);
}
.sg-frame-style-darkwood::before {
    box-shadow:
        inset  0    2px  0   rgba(255,255,255,.18),
        inset  2px  0    0   rgba(255,255,255,.08),
        inset  0   -3px  5px rgba(0,0,0,.80),
        inset -3px  0    4px rgba(0,0,0,.60),
        inset  4px  4px 10px rgba(0,0,0,.45);
}
.sg-frame-style-darkwood:hover {
    box-shadow:
         5px 14px 22px rgba(0,0,0,.50),
        10px 22px 48px rgba(0,0,0,.24);
}

/* ── Passepartout / Mat ──────────────────────────────────────────────────── */
.sg-frame-mat {
    background: #f4f1eb;            /* warm cream — real museum mats aren't pure white */
    padding: var(--sg-mat-pad, 12px);
    line-height: 0;
    position: relative;
    /* Mat is thick board — top/left inner edges are in slight shadow */
    box-shadow:
        inset  0   3px 6px rgba(0,0,0,.10),
        inset  3px 0   4px rgba(0,0,0,.07),
        inset  0  -1px 2px rgba(0,0,0,.04),
        inset -1px 0   1px rgba(0,0,0,.03);
}
/* Clean bright inner line where the mat board meets the frame insert */
.sg-frame-mat::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}
/* 45° bevel cut at the mat's inner opening — no glass, just the angled edge */
.sg-frame-mat::after {
    content: '';
    position: absolute;
    inset: var(--sg-mat-pad, 12px);
    pointer-events: none;
    z-index: 1;
    /* Bevel cut: top/left face catches light (bright), bottom/right in shadow */
    box-shadow:
         0  -1px 0 rgba(255,255,255,.70),
        -1px  0  0 rgba(255,255,255,.45),
         0   1px 0 rgba(0,0,0,.09),
         1px  0  0 rgba(0,0,0,.06);
}
.sg-frame-mat img,
.sg-frame-mat a img {
    display: block;
    width: 100%;
    height: auto;
    position: relative;  /* establishes stacking so glass ::after sits on top */
    z-index: 0;
    /* iOS Safari subpixel-fix: forces own compositing layer, avoids
       half-pixel gaps between img edge and the mat ::after bevel overlay. */
    transform: translateZ(0);
    backface-visibility: hidden;
}
/* Same compositing hint for the bevel overlay so it snaps to integer pixels
   on the GPU layer instead of bleeding a fractional white pixel into the photo. */
.sg-frame-mat::after { transform: translateZ(0); }
.sg-frame-mat a {
    display: block;
    line-height: 0;
    cursor: zoom-in;
}

/* ── Gallery Wall responsive ────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .sg-wall-photos {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 0;                /* spacing comes from .sg-frame margin-bottom */
        column-gap: 28px;
        padding: 48px 32px 40px;
    }
    .sg-frame { margin-bottom: 28px; }
}

@media (max-width: 600px) {
    .sg-wall-photos {
        grid-template-columns: 1fr;
        row-gap: 0;                /* spacing comes from .sg-frame margin-bottom */
        column-gap: 0;
        padding: 32px 16px 24px;
    }
    .sg-frame {
        margin-bottom: 22px;
        transform: rotate(calc(var(--sg-rot, 0deg) * .35));
    }
    .sg-frame:hover {
        transform: rotate(calc(var(--sg-rot, 0deg) * .1)) scale(1.01) translateY(-2px);
    }
    /* Override the variable itself so padding AND ::after inset stay in sync.
       Otherwise the bevel pseudo-element drifts inwards and a white strip
       appears over the photo on mobile. */
    .sg-frame-mat    { --sg-mat-pad: 10px; padding: var(--sg-mat-pad); }
    .sg-frame-thick  { padding: 14px; }
    .sg-frame-medium { padding: 9px; }
}

@media (max-width: 380px) {
    .sg-wall-photos { padding: 20px 10px 16px; }
    .sg-frame        { margin-bottom: 16px; }
    .sg-frame-thick  { padding: 10px; }
    .sg-frame-medium { padding: 7px; }
    .sg-frame-thin   { padding: 5px; }
    .sg-frame-mat    { --sg-mat-pad: 7px; padding: var(--sg-mat-pad); }
}

/* <picture> wrapper introduced for WebP delivery — neutralise baseline
   layout so the masonry-JS keeps measuring frame height correctly. */
.sg-gallery picture,
.sg-gallery-wall picture {
    display: block;
    line-height: 0;
}