/* Container scales to 100% width of your theme's post content block */
.spg-gallery-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px 0 !important;
    overflow-x: auto !important; /* Forces layout to scroll horizontally if images exceed width */
    overflow-y: hidden !important;
    background: #fbfbfb !important;
    border: 1px solid #ededed !important;
    padding: 12px !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    display: block !important;
    white-space: nowrap !important; /* Prevents thumbnails from wrapping to a new line */
}

/* Elegant minimalist scrollbar tweaks */
.spg-gallery-container::-webkit-scrollbar {
    height: 5px !important;
}
.spg-gallery-container::-webkit-scrollbar-thumb {
    background-color: #cdcdcd !important;
    border-radius: 10px !important;
}

/* Structural container holding the line */
.spg-gallery-row {
    display: block !important;
    width: auto !important;
    white-space: nowrap !important;
    padding: 2px 0 !important;
    margin: 0 !important;
}

/* Fixed 60px x 60px thumbnail framework sitting in an inline layout chain */
.spg-gallery-item {
    display: inline-block !important; /* Positions items neatly side-by-side */
    vertical-align: middle !important;
    width: 60px !important;
    height: 60px !important;
    margin-right: 6px !important; /* Sets the precise space between each thumbnail */
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.spg-gallery-item:last-child {
    margin-right: 0 !important;
}

.spg-thumb-link {
    display: block !important;
    width: 60px !important;
    height: 60px !important;
    text-decoration: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Hard-locked 60px elements with maximum specificity configuration */
img.spg-img-element {
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important; 
    max-height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    object-fit: cover !important; /* Forces internal crop into precise square geometry */
    border-radius: 4px !important;
    border: 1px solid #ddd !important;
    transition: transform 0.15s ease-in-out !important;
    display: block !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

img.spg-img-element:hover {
    transform: scale(1.06) !important;
    border-color: #999 !important;
}

/* --- LIGHTBOX POPUP SYSTEM --- */
.spg-lightbox {
    display: none !important;
    white-space: normal !important; /* Resets wrapping rules inside the popup window */
    position: fixed !important;
    z-index: 999999 !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    background: rgba(0, 0, 0, 0.85) !important;
    justify-content: center !important;
    align-items: center !important;
}

.spg-lightbox:target {
    display: flex !important;
}

.spg-close-overlay {
    position: absolute !important;
    width: 100% !important; height: 100% !important;
    cursor: default !important;
    top: 0 !important; left: 0 !important;
}

.spg-lightbox-content {
    position: relative !important;
    max-width: 90% !important; max-height: 85% !important;
    background: #fff !important; padding: 6px !important;
    border-radius: 4px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.5) !important;
    animation: spgPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.2) !important;
    display: block !important;
    z-index: 1000000 !important;
}

.spg-lightbox-content img {
    max-width: 100% !important;
    max-height: 80vh !important;
    display: block !important;
    height: auto !important;
    border-radius: 2px !important;
    margin: 0 auto !important;
}

.spg-close-btn {
    position: absolute !important;
    top: -12px !important; right: -12px !important;
    color: #fff !important; background: #e14d4d !important;
    border-radius: 50% !important;
    width: 28px !important; height: 28px !important;
    text-align: center !important; line-height: 26px !important;
    font-size: 20px !important; text-decoration: none !important;
    font-weight: bold !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}

@keyframes spgPop {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Container scales to 100% width of your theme's 900px post content block */
.spg-gallery-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px 0 !important;
    overflow-x: auto !important; /* Creates the clean horizontal slider */
    overflow-y: hidden !important;
    background: #fbfbfb !important;
    border: 1px solid #ededed !important;
    padding: 12px !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    display: block !important;
    white-space: nowrap !important; /* Keeps all thumbnails locked onto a single row */
}

/* Elegant minimalist scrollbar tweaks */
.spg-gallery-container::-webkit-scrollbar {
    height: 5px !important;
}
.spg-gallery-container::-webkit-scrollbar-thumb {
    background-color: #cdcdcd !important;
    border-radius: 10px !important;
}

/* Horizontal track line framework */
.spg-gallery-row {
    display: block !important;
    width: auto !important;
    white-space: nowrap !important;
    padding: 2px 0 !important;
    margin: 0 !important;
}

/* Inline block elements with an exact 6px gap space between them */
.spg-gallery-item {
    display: inline-block !important;
    vertical-align: middle !important;
    width: 60px !important;
    height: 60px !important;
    margin-right: 6px !important; 
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.spg-gallery-item:last-child {
    margin-right: 0 !important;
}

.spg-thumb-link {
    display: block !important;
    width: 60px !important;
    height: 60px !important;
    text-decoration: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 
 * CRITICAL SELECTION OVERRIDE:
 * We use '.entry-content .spg-gallery-container img' to out-rank the theme's rule.
 * We add margin: 0 !important to strip away that massive 20px theme margin gap.
 */
.entry-content .spg-gallery-container img.spg-img-element,
img.spg-img-element {
    width: 60px !important;
    height: 60px !important;
    max-width: 60px !important; 
    max-height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    object-fit: cover !important; 
    border-radius: 4px !important;
    border: 1px solid #ddd !important;
    transition: transform 0.15s ease-in-out !important;
    display: block !important;
    cursor: pointer !important;
    margin: 0 !important; /* Overrides the theme's margin: 20px 0 layout rule */
    padding: 0 !important;
    box-sizing: border-box !important;
}

img.spg-img-element:hover {
    transform: scale(1.06) !important;
    border-color: #999 !important;
}

/* --- LIGHTBOX POPUP SYSTEM --- */
.spg-lightbox {
    display: none !important;
    white-space: normal !important; 
    position: fixed !important;
    z-index: 999999 !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    background: rgba(0, 0, 0, 0.85) !important;
    justify-content: center !important;
    align-items: center !important;
}

.spg-lightbox:target {
    display: flex !important;
}

.spg-close-overlay {
    position: absolute !important;
    width: 100% !important; height: 100% !important;
    cursor: default !important;
    top: 0 !important; left: 0 !important;
}

/* We target popup images specifically so the theme doesn't shrink/warp them */
.entry-content .spg-lightbox-content img,
.spg-lightbox-content img {
    max-width: 100% !important;
    max-height: 80vh !important;
    display: block !important;
    height: auto !important;
    width: auto !important; /* Prevents large popup photo from stretching to 100% box width */
    border-radius: 2px !important;
    margin: 0 auto !important;
}

.spg-lightbox-content {
    position: relative !important;
    max-width: 90% !important; max-height: 85% !important;
    background: #fff !important; padding: 6px !important;
    border-radius: 4px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.5) !important;
    animation: spgPop 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.2) !important;
    display: block !important;
    z-index: 1000000 !important;
}

.spg-close-btn {
    position: absolute !important;
    top: -12px !important; right: -12px !important;
    color: #fff !important; background: #e14d4d !important;
    border-radius: 50% !important;
    width: 28px !important; height: 28px !important;
    text-align: center !important; line-height: 26px !important;
    font-size: 20px !important; text-decoration: none !important;
    font-weight: bold !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}

@keyframes spgPop {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}