/* Slider
 * Swiperin perustyylit: assets/vendor/swiper/swiper.min.css.
 * Diojen määrä ja väli tulevat lohkon asetuksista CSS-muuttujina
 * (render.php), joten asettelu on oikea jo ennen kuin Swiper käynnistyy.
--------------------------------------------- */

.wp-block-luotsi-slider {
	--luotsi-slider-per-view: var(--luotsi-slider-per-view-mobile, 1);
	--luotsi-slider-control-size: 2.75rem;
	--swiper-theme-color: var(--wp--preset--color--primary);
	--swiper-navigation-size: var(--luotsi-slider-control-size);
	--swiper-pagination-bullet-inactive-color: var(--wp--preset--color--main);
	--swiper-pagination-bullet-inactive-opacity: 0.25;
	--swiper-pagination-bullet-size: 0.625rem;
	position: relative;
}

@media (min-width: 600px) {
	.wp-block-luotsi-slider {
		--luotsi-slider-per-view: var(--luotsi-slider-per-view-tablet, 2);
	}
}

@media (min-width: 1024px) {
	.wp-block-luotsi-slider {
		--luotsi-slider-per-view: var(--luotsi-slider-per-view-desktop, 3);
	}
}

/* Diat ja artikkelikarusellin lista */
.wp-block-luotsi-slider .swiper-wrapper {
	align-items: stretch;
	margin: 0;
	padding: 0;
	max-width: none;
	list-style: none;
}

.wp-block-luotsi-slider .wp-block-post-template.swiper-wrapper {
	display: flex;
	gap: 0;
}

.wp-block-luotsi-slider .swiper-slide {
	box-sizing: border-box; /* Swiper käyttää content-boxia: dian reunus ei saa kasvattaa leveyttä. */
	height: auto;
	margin: 0;
}

/* Häivytys: tuleva dia päällimmäisenä, jolloin edellinen pysyy sen alla
 * näkyvissä eikä tausta välähdä läpi (view.js: crossFade pois). */
.wp-block-luotsi-slider .swiper-fade .swiper-slide-active {
	z-index: 1;
}

/* Ennen käynnistystä (ja ilman JavaScriptiä): diat rivissä oikean levyisinä. */
.wp-block-luotsi-slider .swiper:not(.swiper-initialized) > .swiper-wrapper {
	gap: var(--luotsi-slider-gap, 24px);
}

.wp-block-luotsi-slider .swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide {
	width: calc((100% - (var(--luotsi-slider-per-view) - 1) * var(--luotsi-slider-gap, 24px)) / var(--luotsi-slider-per-view));
}

/* Hero: Kansi-lohko täyttää dian, jolloin kaikki diat ovat yhtä korkeita
 * (korkein dia määrää). Tyhjät kappaleet dian ympärillä ohitetaan. */
.wp-block-luotsi-slide:has(> .wp-block-cover) {
	display: flex;
	flex-direction: column;
}

.wp-block-luotsi-slide > .wp-block-cover {
	flex: 1 0 auto;
	margin-block: 0;
}

.wp-block-luotsi-slide:has(> .wp-block-cover) > p:empty {
	display: none;
}

/* Jatkuva liike (esim. logot): tasainen vauhti. */
.wp-block-luotsi-slider.is-continuous {
	--swiper-wrapper-transition-timing-function: linear;
}

/* Nuolet ja pallot
 * Nuolet ovat diojen kanssa samassa kehyksessä (.luotsi-slider__viewport),
 * pallot sen alla. Paikka: is-controls-below | -sides | -overlay.
--------------------------------------------- */

.luotsi-slider__viewport {
	position: relative;
}

.wp-block-luotsi-slider .luotsi-slider__viewport > .swiper {
	width: 100%;
	min-width: 0;
}

.wp-block-luotsi-slider .luotsi-slider__prev,
.wp-block-luotsi-slider .luotsi-slider__next {
	position: absolute;
	top: 50%;
	z-index: 10;
	width: var(--luotsi-slider-control-size);
	height: var(--luotsi-slider-control-size);
	margin: 0;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 50%;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--main);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.wp-block-luotsi-slider .luotsi-slider__prev:hover,
.wp-block-luotsi-slider .luotsi-slider__next:hover {
	border-color: var(--wp--preset--color--main);
	background-color: var(--wp--preset--color--tertiary);
}

.wp-block-luotsi-slider :is(.luotsi-slider__prev, .luotsi-slider__next) svg {
	width: 30%;
	height: 40%;
}

.wp-block-luotsi-slider .luotsi-slider__pagination {
	position: static;
	width: auto;
	margin-top: var(--wp--preset--spacing--medium);
	transform: none;
	text-align: center;
}

/* Diojen alla: nuolet ja pallot samalla rivillä. */
.wp-block-luotsi-slider.is-controls-below {
	display: grid;
	grid-template-columns: 1fr auto auto auto 1fr;
	align-items: center;
	column-gap: var(--wp--preset--spacing--small);
}

.wp-block-luotsi-slider.is-controls-below .luotsi-slider__viewport {
	display: contents;
}

.wp-block-luotsi-slider.is-controls-below .luotsi-slider__viewport > .swiper {
	grid-column: 1 / -1;
	grid-row: 1;
}

.wp-block-luotsi-slider.is-controls-below :is(.luotsi-slider__prev, .luotsi-slider__next, .luotsi-slider__pagination) {
	grid-row: 2;
	position: static;
	margin-top: var(--wp--preset--spacing--medium);
	transform: none;
}

.wp-block-luotsi-slider.is-controls-below .luotsi-slider__prev {
	grid-column: 2;
}

.wp-block-luotsi-slider.is-controls-below .luotsi-slider__pagination {
	grid-column: 3;
}

.wp-block-luotsi-slider.is-controls-below .luotsi-slider__next {
	grid-column: 4;
}

/* Sivuilla: nuolet diojen vieressä. Jos tilaa ei ole (koko leveä slider,
 * leveä slider kapeahkolla näytöllä tai mobiili), nuolet ovat diojen päällä. */
.wp-block-luotsi-slider.is-controls-sides {
	--luotsi-slider-arrow-offset: calc(-1 * (var(--luotsi-slider-control-size) + var(--wp--preset--spacing--small)));
}

.wp-block-luotsi-slider.is-controls-sides .luotsi-slider__prev {
	left: var(--luotsi-slider-arrow-offset);
}

.wp-block-luotsi-slider.is-controls-sides .luotsi-slider__next {
	right: var(--luotsi-slider-arrow-offset);
}

.wp-block-luotsi-slider.is-controls-sides.alignfull {
	--luotsi-slider-arrow-offset: var(--wp--preset--spacing--medium);
}

@media (max-width: 1439px) {
	.wp-block-luotsi-slider.is-controls-sides.alignwide {
		--luotsi-slider-arrow-offset: var(--wp--preset--spacing--small);
	}
}

@media (max-width: 899px) {
	.wp-block-luotsi-slider.is-controls-sides {
		--luotsi-slider-arrow-offset: var(--wp--preset--spacing--small);
	}
}

.wp-block-luotsi-slider.is-controls-sides.alignfull :is(.luotsi-slider__prev, .luotsi-slider__next) {
	border-color: transparent;
	box-shadow: 0 0 15px rgb(0 0 0 / 0.15);
}

@media (max-width: 1439px) {
	.wp-block-luotsi-slider.is-controls-sides.alignwide :is(.luotsi-slider__prev, .luotsi-slider__next) {
		border-color: transparent;
		box-shadow: 0 0 15px rgb(0 0 0 / 0.15);
	}
}

@media (max-width: 899px) {
	.wp-block-luotsi-slider.is-controls-sides :is(.luotsi-slider__prev, .luotsi-slider__next) {
		border-color: transparent;
		box-shadow: 0 0 15px rgb(0 0 0 / 0.15);
	}
}

/* Mobiilissa sivujen nuolet siirtyvät diojen alle pallojen kanssa samalle riville. */
@media (max-width: 781px) {
	.wp-block-luotsi-slider.is-controls-sides {
		display: grid;
		grid-template-columns: 1fr auto auto auto 1fr;
		align-items: center;
		column-gap: var(--wp--preset--spacing--small);
	}

	.wp-block-luotsi-slider.is-controls-sides .luotsi-slider__viewport {
		display: contents;
	}

	.wp-block-luotsi-slider.is-controls-sides .luotsi-slider__viewport > .swiper {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	/* :is(.alignwide, .alignfull, *) nostaa tarkkuutta, jotta leveiden sliderien
	 * diojen päällä olevien nuolten varjo ja reunaton tyyli eivät jää voimaan. */
	.wp-block-luotsi-slider.is-controls-sides:is(.alignwide, .alignfull, *) :is(.luotsi-slider__prev, .luotsi-slider__next, .luotsi-slider__pagination) {
		grid-row: 2;
		position: static;
		margin-top: var(--wp--preset--spacing--medium);
		border-color: var(--wp--preset--color--border-light);
		box-shadow: none;
		transform: none;
	}

	.wp-block-luotsi-slider.is-controls-sides .luotsi-slider__prev {
		grid-column: 2;
	}

	.wp-block-luotsi-slider.is-controls-sides .luotsi-slider__pagination {
		grid-column: 3;
	}

	.wp-block-luotsi-slider.is-controls-sides .luotsi-slider__next {
		grid-column: 4;
	}
}

/* Kuvan päällä (hero): nuolet reunoilla, pallot alhaalla. */
.wp-block-luotsi-slider.is-controls-overlay {
	--swiper-pagination-bullet-inactive-color: var(--wp--preset--color--base);
	--swiper-pagination-bullet-inactive-opacity: 0.6;
	--swiper-pagination-color: var(--wp--preset--color--base);
}

.wp-block-luotsi-slider.is-controls-overlay :is(.luotsi-slider__prev, .luotsi-slider__next) {
	border-color: transparent;
	background-color: rgb(0 0 0 / 0.35);
	color: var(--wp--preset--color--base);
}

.wp-block-luotsi-slider.is-controls-overlay :is(.luotsi-slider__prev, .luotsi-slider__next):hover {
	background-color: rgb(0 0 0 / 0.6);
}

.wp-block-luotsi-slider.is-controls-overlay .luotsi-slider__prev {
	left: var(--wp--preset--spacing--medium);
}

.wp-block-luotsi-slider.is-controls-overlay .luotsi-slider__next {
	right: var(--wp--preset--spacing--medium);
}

.wp-block-luotsi-slider.is-controls-overlay .luotsi-slider__pagination {
	position: absolute;
	bottom: var(--wp--preset--spacing--medium);
	left: 50%;
	z-index: 10;
	margin: 0;
	transform: translateX(-50%);
}

/* Mobiilissa hero-nuolet piiloon: dioja vaihdetaan pyyhkäisemällä. */
@media (max-width: 599px) {
	.wp-block-luotsi-slider.is-controls-overlay :is(.luotsi-slider__prev, .luotsi-slider__next) {
		display: none;
	}
}

/* Logokaruselli
--------------------------------------------- */

.wp-block-luotsi-slider.is-style-logos .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
}

.wp-block-luotsi-slider.is-style-logos .wp-block-image {
	margin: 0;
}

.wp-block-luotsi-slider.is-style-logos .wp-block-image img {
	width: auto;
	max-height: 4rem;
	object-fit: contain;
}