/**
 * Native Gallery block with the "Слайдер" style (is-style-inweb-slider),
 * transformed into a Splide slider by assets/js/gallery-slider.js.
 * No arrows; every image is a fixed width (centered) with auto height, the
 * track height follows the image (Splide autoHeight); custom pill pagination.
 *
 * Change --gallery-slider-img-width to resize all slides. A single gallery can
 * override it via its "Additional CSS class" + a rule, or an inline style.
 */

.gallery-slider {
	--gallery-slider-img-width: 300px;
	/* Always fills the container but never exceeds it; the per-block inline
	   max-width (image width × images-per-view) caps it on wide screens, where
	   margin-inline auto then centers it. */
	width: 100%;
	margin-inline: auto;
}

.gallery-slider .splide__slide {
	display: flex;
	align-items: center;
	justify-content: center;
}

.gallery-slider .splide__slide figure,
.gallery-slider .splide__slide img {
	margin: 0;
}

.gallery-slider .splide__slide img {
	width: var(--gallery-slider-img-width);
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-md);
}

/* Pagination — static row 10px below the image; dots #D9D9D9 15×15, active
   pill 30×15 #989797. */
.gallery-slider .splide__pagination {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	list-style: none;
	gap: 8px;
	margin: 10px 0 0;
	padding: 0;
}

.gallery-slider .splide__pagination li {
	position: static;
	margin: 0;
	line-height: 0;
}

/* The pagination is a real <ul>/<li> that Splide generates itself, so it also
   matches the article content's list styling (dash/number ::before markers,
   negative-margin position). Neutralize that here — this block's pagination
   dots are drawn entirely via .splide__pagination__page below. */
.gallery-slider .splide__pagination li::before {
	content: none;
}

.gallery-slider .splide__pagination__page {
	display: block;
	width: 15px;
	height: 15px;
	margin: 0;
	padding: 0;
	border-radius: var(--radius-pill);
	background: var(--color-gray-border);
	opacity: 1;
	transform: none;
	transition:
		width var(--transition-hover),
		background-color var(--transition-hover);
}

.gallery-slider .splide__pagination__page.is-active {
	width: 30px;
	background: var(--color-gray-text);
	transform: none;
}

/* Mobile: the image fills the slide (which equals the container), so a single
   image spans the full content width regardless of the desktop fixed width. */
@media (max-width: 767px) {
	.gallery-slider .splide__slide img {
		width: 100% !important;
	}
}