/*
 * Image Slider - base styles.
 *
 * Images fill 100% of the module width. All slides share a consistent
 * height so the carousel doesn't jump as it advances.
 */

.image-slider {
	position: relative;
	width: 100%;
}

.image-slider__items {
	width: 100%;
	/* Before slick initialises, only show the first slide so the images
	   don't briefly stack on top of each other while the page loads. */
	max-height: 100vh;
	overflow: hidden;
}

.image-slider__items.slick-initialized {
	max-height: none;
	overflow: visible;
}

/* Hide all but the first slide until slick takes over. */
.image-slider__items > .image-slider__item ~ .image-slider__item {
	display: none;
}

.image-slider__items.slick-initialized > .image-slider__item ~ .image-slider__item {
	display: block;
}

.image-slider__item {
	position: relative;
	width: 100%;
}

.image-slider__img {
	display: block;
	width: 100%;
	height: auto;
}

/* Admin links: keep them out of the way, over the image. */
.image-slider .modulelinks {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	background-color: rgba(0, 0, 0, 0.65);
	color: #fff;
	padding: 4px 8px;
}

.image-slider .modulelinks a,
.image-slider .modulelinks a:hover {
	color: #fff;
}

.image-slider .flexi-item-edit {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 5;
	background-color: rgba(0, 0, 0, 0.65);
	color: #fff;
	padding: 4px 8px;
}

.image-slider .flexi-item-edit:hover {
	color: #fff;
}

/*
 * OPTIONAL - fixed-height slides.
 *
 * By default the slider height follows the natural aspect ratio of the
 * images (width 100%, height auto). If your images differ in aspect ratio
 * and you want every slide the same height, uncomment the block below and
 * set the height you want. object-fit: cover crops rather than distorts.
 */
/*
.image-slider__img {
	height: 36rem;
	object-fit: cover;
	object-position: center center;
}
*/