/* ==========================================================================
   Blog post galleries + lightbox (markup from the the_content filter in senax-pages.php).
   ========================================================================== */

.sx-gallery {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin: 32px 0;
}
.sx-gallery .sx-lb {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #f4f4f2;
	cursor: zoom-in;
}
.sx-gallery .sx-gallery__img,
.sx-gallery img {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	object-fit: cover !important; /* blog.css sets contain on .sx-b-prose img */
	border-radius: 0;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .3s;
}
.sx-gallery .sx-lb:hover img { transform: scale(1.06); }
.sx-gallery .sx-lb::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 0;
	background: #ff0000;
	transition: width .4s cubic-bezier(.2, .7, .2, 1);
}
.sx-gallery .sx-lb:hover::after { width: 100%; }

/* First image larger: 2×2 tile. */
.sx-gallery > .sx-lb:first-child { grid-column: span 2; grid-row: span 2; }
/* Two images: side by side, wide. */
.sx-gallery--n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sx-gallery--n2 > .sx-lb:first-child { grid-column: auto; grid-row: auto; }
.sx-gallery--n2 .sx-lb { aspect-ratio: 4 / 3; }
/* Three images: one big + two stacked. */
.sx-gallery--n3 { grid-template-columns: 2fr 1fr; }
.sx-gallery--n3 > .sx-lb:first-child { grid-column: auto; grid-row: span 2; aspect-ratio: auto; min-height: 100%; }

/* "+N снимки" tile and hidden overflow (still in the lightbox). */
.sx-gallery .sx-gallery__hidden { display: none; }
.sx-gallery .sx-gallery__more::before {
	content: attr(data-more);
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(18, 18, 18, .72);
	color: #fff;
	font: 800 18px/1.2 'Montserrat', sans-serif;
	letter-spacing: .02em;
}

/* Single in-text images: show they open. */
a.sx-lb--single { display: inline-block; cursor: zoom-in; }
a.sx-lb--single img { transition: opacity .2s; }
a.sx-lb--single:hover img { opacity: .9; }

@media (max-width: 767px) {
	.sx-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 24px 0; }
	.sx-gallery > .sx-lb:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 3; }
	.sx-gallery--n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sx-gallery--n3 > .sx-lb:first-child { grid-row: auto; aspect-ratio: 4 / 3; }
}

/* Lightbox: brand touches. */
.glightbox-clean .gslide-description { background: #121212; }
.glightbox-clean .gnext, .glightbox-clean .gprev, .glightbox-clean .gclose { background: rgba(0, 0, 0, .55); }
.glightbox-clean .gnext:hover, .glightbox-clean .gprev:hover, .glightbox-clean .gclose:hover { background: #ff0000; }
.goverlay { background: rgba(10, 10, 10, .94); }