/*
 * Hancas Gallery
 * Masonry: N photos per row (set in the theme), phones usually one column.
 * Without script the photos sit in a plain grid; the script turns it into a masonry.
 */

.igg-masonry {
	--gap: 8px;
	display: grid;
	gap: var(--gap);
	grid-template-columns: repeat(var(--cols-m, 1), minmax(0, 1fr));
	align-items: start;
	width: 100%;
	margin: 0 auto 24px;
}
@media (min-width: 700px)  { .igg-masonry { grid-template-columns: repeat(var(--cols-t, 3), minmax(0, 1fr)); } }
@media (min-width: 1100px) { .igg-masonry { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); } }

/* script ran, masonry: real columns */
.igg-masonry.is-masonry { display: flex; }
.igg-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }

/* script ran, rows (exact order): every row has one height and fills the width */
.igg-masonry.is-rows { display: flex; flex-direction: column; align-items: stretch; }
.igg-row { display: flex; gap: var(--gap); align-items: flex-start; }
/* grow = ratio x 100: the factors must add up to more than 1, otherwise a short row (a single portrait photo on a phone) does not fill the width */
.igg-row .igg-item { flex: calc(var(--ar) * 100) 1 0%; min-width: 0; }

.igg-item {
	display: block;
	line-height: 0;
	overflow: hidden;
	background: #eee;
	cursor: zoom-in;
	aspect-ratio: var(--ar);
}
.igg-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 699px) { .igg-item { cursor: default; } }

/* Lightbox (wide screens only) */
.igg-lb {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .92);
}
.igg-lb img {
	max-width: 94vw;
	max-height: 94vh;
	object-fit: contain;
}
.igg-lb button {
	position: absolute;
	border: 0;
	background: none;
	color: #fff;
	font: 40px/1 sans-serif;
	padding: 16px 22px;
	cursor: pointer;
	opacity: .7;
}
.igg-lb button:hover { opacity: 1; }
.igg-lb .igg-count { position: absolute; top: 24px; left: 26px; color: #fff; opacity: .8; font: 13px/1 sans-serif; letter-spacing: .12em; }
.igg-lb .igg-close { top: 0; right: 0; }
.igg-lb .igg-prev  { left: 0; top: 50%; transform: translateY(-50%); }
.igg-lb .igg-next  { right: 0; top: 50%; transform: translateY(-50%); }