/* ═══════════════════════════════════════════════════════
   Base
   ═══════════════════════════════════════════════════════ */
.spg-gallery {
	margin:  0;
	padding: 0;
}

.spg-gallery__inner {
	/* layout set per-variant below */
}

.spg-gallery-item {
	margin:        0;
	overflow:      hidden;
	border-radius: var( --spg-radius, 6px );
	background:    #e8e8e8;
	position:      relative;
}

.spg-gallery-link {
	display:  block;
	overflow: hidden;
	position: relative;
}

.spg-gallery-item img {
	width:      100%;
	display:    block;
	transition: transform 0.3s ease;
}

.spg-gallery-item:hover img {
	transform: scale( 1.06 );
}

/* ═══════════════════════════════════════════════════════
   1. GRID
   ═══════════════════════════════════════════════════════ */
.spg-gallery--grid .spg-gallery__inner {
	display:               grid;
	grid-template-columns: repeat( var( --spg-columns, 3 ), 1fr );
	gap:                   var( --spg-gap, 12px );
}

.spg-gallery--grid .spg-gallery-item img {
	height:     var( --spg-height, 260px );
	object-fit: cover;
}

/* ═══════════════════════════════════════════════════════
   2. MASONRY
   CSS-columns is the no-JS fallback.
   Once frontend.js runs it adds .spg-masonry-active and
   switches to absolute positioning for proper left→right fill.
   ═══════════════════════════════════════════════════════ */

/* Fallback: CSS columns (no JS) */
.spg-gallery--masonry .spg-gallery__inner {
	columns:    var( --spg-columns, 3 );
	column-gap: var( --spg-gap, 12px );
}

.spg-gallery--masonry .spg-gallery__inner:not( .spg-masonry-active ) .spg-gallery-item {
	break-inside:  avoid;
	margin-bottom: var( --spg-gap, 12px );
}

.spg-gallery--masonry .spg-gallery__inner:not( .spg-masonry-active ) .spg-gallery-item img {
	height:     auto;
	width:      100%;
	object-fit: cover;
}

/* Active: JS absolute layout */
.spg-gallery--masonry .spg-gallery__inner.spg-masonry-active {
	columns:    unset;
	column-gap: unset;
	position:   relative;
}

.spg-gallery--masonry .spg-masonry-active .spg-gallery-item {
	break-inside:  auto;
	margin-bottom: 0;
}

/* Link and image must fill the JS-calculated height */
.spg-gallery--masonry .spg-masonry-active .spg-gallery-link {
	height: 100%;
}

.spg-gallery--masonry .spg-masonry-active .spg-gallery-item img {
	width:      100%;
	height:     100%;
	object-fit: cover;
}

/* ═══════════════════════════════════════════════════════
   3. JUSTIFIED (JS sets item width/height)
   ═══════════════════════════════════════════════════════ */
.spg-gallery--justified .spg-gallery__inner {
	display:     flex;
	flex-wrap:   wrap;
	gap:         var( --spg-gap, 12px );
	align-items: flex-start;
}

.spg-gallery--justified .spg-gallery-item {
	flex:       0 0 auto;
	min-width:  60px;
}

.spg-gallery--justified .spg-gallery-link {
	height: 100%;
}

.spg-gallery--justified .spg-gallery-item img {
	width:      100%;
	height:     100%;
	object-fit: cover;
}

/* ═══════════════════════════════════════════════════════
   4. MOSAIC
   ═══════════════════════════════════════════════════════ */
.spg-gallery--mosaic .spg-gallery__inner {
	display:               grid;
	grid-template-columns: repeat( var( --spg-columns, 3 ), 1fr );
	grid-auto-rows:        var( --spg-height, 260px );
	gap:                   var( --spg-gap, 12px );
}

/* The link must stretch to fill the grid cell so height:100% on img works */
.spg-gallery--mosaic .spg-gallery-link {
	height: 100%;
}

.spg-gallery--mosaic .spg-gallery-item img {
	width:      100%;
	height:     100%;
	object-fit: cover;
}

.spg-gallery--mosaic .spg-gallery-item:first-child {
	grid-column: span 2;
	grid-row:    span 2;
}

/* ═══════════════════════════════════════════════════════
   Captions
   ═══════════════════════════════════════════════════════ */
.spg-caption--below {
	padding:    8px 10px;
	font-size:  0.85em;
	color:      #555;
	text-align: center;
	margin:     0;
	background: #f5f5f5;
}

.spg-caption--overlay {
	position:       absolute;
	bottom:         0;
	left:           0;
	right:          0;
	margin:         0;
	padding:        12px 12px 10px;
	background:     linear-gradient( transparent, rgba( 0, 0, 0, 0.7 ) );
	color:          #fff;
	font-size:      0.85em;
	text-align:     center;
	opacity:        0;
	transform:      translateY( 6px );
	transition:     opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
}

.spg-gallery-link:hover .spg-caption--overlay {
	opacity:   1;
	transform: translateY( 0 );
}

/* ═══════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════ */
@media ( max-width: 768px ) {
	.spg-gallery--grid .spg-gallery__inner,
	.spg-gallery--mosaic .spg-gallery__inner {
		grid-template-columns: repeat( min( var( --spg-columns, 3 ), 2 ), 1fr );
	}

	.spg-gallery--masonry .spg-gallery__inner:not( .spg-masonry-active ) {
		columns: min( var( --spg-columns, 3 ), 2 );
	}
}

@media ( max-width: 480px ) {
	.spg-gallery--grid .spg-gallery__inner,
	.spg-gallery--mosaic .spg-gallery__inner {
		grid-template-columns: 1fr 1fr;
	}

	.spg-gallery--masonry .spg-gallery__inner:not( .spg-masonry-active ) {
		columns: 2;
	}

	.spg-gallery--grid .spg-gallery-item img,
	.spg-gallery--mosaic .spg-gallery-item img {
		height: 130px;
	}
}

/* ═══════════════════════════════════════════════════════
   Lightbox
   ═══════════════════════════════════════════════════════ */
.spg-lb {
	position:        fixed;
	inset:           0;
	z-index:         999999;
	display:         flex;
	align-items:     center;
	justify-content: center;
	opacity:         0;
	pointer-events:  none;
	transition:      opacity 0.2s ease;
}

.spg-lb--open {
	opacity:        1;
	pointer-events: auto;
}

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

.spg-lb__box {
	position:        relative;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	max-width:       92vw;
	max-height:      92vh;
	z-index:         1;
}

.spg-lb__img {
	max-width:     92vw;
	max-height:    80vh;
	object-fit:    contain;
	border-radius: 4px;
	box-shadow:    0 12px 48px rgba( 0, 0, 0, 0.6 );
	display:       block;
	transition:    opacity 0.15s ease;
}

.spg-lb__img--loading { opacity: 0.35; }

.spg-lb__caption {
	color:      #ddd;
	font-size:  0.9em;
	margin:     12px 0 0;
	text-align: center;
	max-width:  640px;
}

.spg-lb__counter {
	color:      #777;
	font-size:  0.78em;
	margin-top: 6px;
}

.spg-lb__close {
	position:        absolute;
	top:             16px;
	right:           16px;
	background:      rgba( 0, 0, 0, 0.5 );
	border:          none;
	color:           #fff;
	font-size:       20px;
	line-height:     1;
	width:           36px;
	height:          36px;
	border-radius:   50%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	cursor:          pointer;
	opacity:         0.85;
	transition:      opacity 0.15s, background 0.15s;
	padding:         0;
	z-index:         2;
}

.spg-lb__close:hover { opacity: 1; background: rgba( 0, 0, 0, 0.85 ); }

.spg-lb__nav {
	position:        absolute;
	top:             50%;
	transform:       translateY( -50% );
	background:      rgba( 0, 0, 0, 0.45 );
	border:          none;
	color:           #fff;
	font-size:       24px;
	line-height:     1;
	width:           48px;
	height:          48px;
	min-width:       48px;
	padding:         0;
	box-sizing:      border-box;
	border-radius:   50%;
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	opacity:         0.85;
	transition:      opacity 0.15s, background 0.15s;
	z-index:         2;
}

.spg-lb__nav:hover {
	opacity:    1;
	background: rgba( 0, 0, 0, 0.75 );
}

.spg-lb__prev { left:  12px; }
.spg-lb__next { right: 12px; }

@media ( max-width: 480px ) {
	.spg-lb__nav { width: 40px; height: 40px; font-size: 28px; }
}