/**
 * "Gallery Slider" block — frontend styles.
 *
 * Layout rules mirror the JS behaviour:
 *  - Desktop ( >= 768px ), <= 3 images: static flex row (1 = 100%, 2 = 50%, 3 = 33%).
 *  - Desktop, >= 4 images: slick slider showing 3 per view.
 *  - Mobile ( < 768px ): slick slider, 1 per view.
 *
 * The width rules below use the direct-child selector ( > ) so they apply ONLY
 * while the gallery is a plain row. Once slick wraps the items into
 * .slick-list > .slick-track they are no longer direct children, so slick takes
 * over the sizing and these rules stop matching.
 */

.wp-block-sws-gallery-slider {
	--gs-gap: 10px;
	--gs-ratio: 1 / 1;
	--gs-max-height: 500px;
	--gs-radius: 28px;
	margin-block: 5rem;
}

.wp-block-sws-gallery-slider .gallery-slider {
	display: flex;
	flex-wrap: nowrap;
	/* Keep items centered regardless of how many there are (1, 2 or 3). */
	justify-content: center;
	margin-inline: calc( var( --gs-gap ) * -1 );
	/* Prevents a 4+ image row from overflowing before slick boots. */
	overflow: hidden;
}

/* Item spacing (applies in both static and slider modes). */
.wp-block-sws-gallery-slider .gallery-slider__item {
	box-sizing: border-box;
	padding-inline: var( --gs-gap );
}

/* --- Static row widths (desktop, <= 3 images / pre-slick) --- */
.wp-block-sws-gallery-slider .gallery-slider > .gallery-slider__item {
	flex: 0 0 33.3333%;
	max-width: 33.3333%;
}

.wp-block-sws-gallery-slider .gallery-slider[data-count="1"] > .gallery-slider__item {
	flex-basis: 100%;
	max-width: 100%;
}

.wp-block-sws-gallery-slider .gallery-slider[data-count="2"] > .gallery-slider__item {
	flex-basis: 50%;
	max-width: 50%;
}

.wp-block-sws-gallery-slider .gallery-slider[data-count="3"] > .gallery-slider__item {
	flex-basis: 33.3333%;
	max-width: 33.3333%;
}

/* Below the desktop breakpoint every gallery is a 1-per-view slider; make the
   pre-slick fallback show a single image instead of a cramped row. */
@media ( max-width: 767px ) {
	.wp-block-sws-gallery-slider .gallery-slider > .gallery-slider__item {
		flex-basis: 100%;
		max-width: 100%;
	}
}

/* --- Figure / image --- */
.wp-block-sws-gallery-slider .gallery-slider__figure {
	position: relative;
	margin: 0;
	aspect-ratio: var( --gs-ratio );
	max-height: var( --gs-max-height );
	overflow: hidden;
	border-radius: var( --gs-radius );
}

.wp-block-sws-gallery-slider .gallery-slider__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var( --gs-radius );
}

/* --- Minimal slick runtime CSS ---
   Only the rules slick actually needs to work, scoped to THIS block so nothing
   leaks onto other sliders on the page. This replaces loading the full, unscoped
   vendor slick.css (which was breaking other sliders' styling). */
.wp-block-sws-gallery-slider .slick-slider {
	position: relative;
	display: block;
	box-sizing: border-box;
	touch-action: pan-y;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.wp-block-sws-gallery-slider .slick-list {
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

.wp-block-sws-gallery-slider .slick-list:focus {
	outline: none;
}

.wp-block-sws-gallery-slider .slick-slider .slick-track,
.wp-block-sws-gallery-slider .slick-slider .slick-list {
	transform: translate3d( 0, 0, 0 );
}

.wp-block-sws-gallery-slider .slick-track {
	position: relative;
	top: 0;
	left: 0;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-block-sws-gallery-slider .slick-track::before,
.wp-block-sws-gallery-slider .slick-track::after {
	display: table;
	content: "";
}

.wp-block-sws-gallery-slider .slick-track::after {
	clear: both;
}

.wp-block-sws-gallery-slider .slick-slide {
	display: none;
	float: left;
	height: 100%;
	min-height: 1px;
}

.wp-block-sws-gallery-slider .slick-slide img {
	display: block;
}

.wp-block-sws-gallery-slider .slick-initialized .slick-slide {
	display: block;
}

.wp-block-sws-gallery-slider .slick-arrow.slick-hidden {
	display: none;
}

/* --- Slick layout overrides for this block ---
   When slick is active the outer element becomes the slider wrapper; move the
   negative gutter onto the track/list and let slick control layout. */
.wp-block-sws-gallery-slider .gallery-slider.slick-slider {
	display: block;
	margin-inline: 0;
	overflow: visible;
}

.slider-navigation .slick-arrow.slick-next:before{
	rotate: unset;
}

.wp-block-sws-gallery-slider .gallery-slider .slick-list {
	margin-inline: calc( var( --gs-gap ) * -1 );
}

.wp-block-sws-gallery-slider .gallery-slider .slick-track {
	display: flex;
	align-items: stretch;
}

.wp-block-sws-gallery-slider .gallery-slider .slick-slide {
	height: auto;
	cursor: grab;
}

.wp-block-sws-gallery-slider .gallery-slider .slick-slide > div {
	height: 100%;
}

/* --- Dots ---
   Self-contained styling so the dots always show, regardless of whether
   slick-theme.css is loaded on the page. */
.wp-block-sws-gallery-slider .slick-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	position: static;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.wp-block-sws-gallery-slider .slick-dots li {
	--btn-size: 10px;
	width: var( --btn-size );
	height: var( --btn-size );
	margin: 0;
	padding: 0;
}

.wp-block-sws-gallery-slider .slick-dots li button {
	position: relative;
	width: var( --btn-size );
	height: var( --btn-size );
	padding: 0;
	border: 0;
	font-size: 0;
	line-height: 0;
	color: transparent;
	background: transparent;
	cursor: pointer;
}

.wp-block-sws-gallery-slider .slick-dots li button::before {
	content: "";
	position: absolute;
	inset: 0;
	width: var( --btn-size );
	height: var( --btn-size );
	background-color: rgba( 15, 52, 73, 0.3 );
	border-radius: 100%;
	opacity: 1;
}

.wp-block-sws-gallery-slider .slick-dots li.slick-active button::before {
	background-color: var( --wp--preset--color--primary );
}