/* =============================================================================
 * SKOL Outdoor Kitchens — Masonry Gallery
 * ========================================================================== */

.skol-gallery {
	margin: 2rem 0;
	/* Masonry positions items absolutely; container height is set by JS. */
}

/* Sizer element sets column width — Masonry reads this via .skol-gallery__sizer.
 * Default: 3 columns with a 16px gutter. */
.skol-gallery__sizer,
.skol-gallery__item {
	width: calc((100% - 32px) / 3); /* (container - 2 gutters) / 3 cols */
}

.skol-gallery__item {
	display: block;
	margin-bottom: 16px;
	overflow: hidden;
	border-radius: 4px;
	background: #f3f3f3;
	cursor: zoom-in;
	transition: transform .25s ease, box-shadow .25s ease;
}

.skol-gallery__item img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform .4s ease;
}

.skol-gallery__item:hover {
	box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
}

.skol-gallery__item:hover img {
	transform: scale(1.03);
}

/* Hide items before Masonry initializes to prevent a flash of stacked layout. */
.skol-gallery[data-masonry-init]:not(.is-ready) .skol-gallery__item {
	visibility: hidden;
}

.skol-gallery.is-ready .skol-gallery__item {
	visibility: visible;
}

.skol-gallery__empty {
	padding: 3rem 1rem;
	text-align: center;
	color: #666;
	background: #fafafa;
	border: 1px dashed #ddd;
	border-radius: 4px;
}

/* -----------------------------------------------------------------------------
 * Responsive: tablet 2 cols, mobile 1 col
 * -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.skol-gallery__sizer,
	.skol-gallery__item {
		width: calc((100% - 16px) / 2);
	}
}

@media (max-width: 600px) {
	.skol-gallery__sizer,
	.skol-gallery__item {
		width: 100%;
	}
}

/* -----------------------------------------------------------------------------
 * GLightbox small tweak — slightly darker backdrop
 * -------------------------------------------------------------------------- */
.glightbox-clean .gslide-description {
	background: rgba(0, 0, 0, .65);
}