/* ==========================================================================
   WDF — Slider (Splide)
   Tyylit ladataan splide.min.css:n jälkeen, joten nämä menevät sen päälle.
   ========================================================================== */

.wdf-slider {
	padding-block: var(--wdf-padding-y);
}

/* Osion yhteinen otsikkoalue */
.wdf-slider__ylaosa {
    margin-bottom: 48px;
}
.wdf-slider__osion-otsikko {
    margin: 0 0 8px 0;
}
.wdf-slider__osion-alaotsikko {
    margin: 0;
	color: var(--wp--preset--color--accent);
}

/* --- Slidejen sisältö --- */
.wdf-slider__kuva {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;   /* yhtenäinen korkeus; säädä tai poista tarpeen mukaan */
	object-fit: cover;
}
.wdf-slider__sisalto {
	padding-top: 24px;
}
.wdf-slider__otsikko {
	margin: 0 0 8px;
}
.wdf-slider__teksti p { margin: 0 0 1em; }
.wdf-slider__teksti :last-child { margin-bottom: 0; }
.wdf-slider__teksti a { color: var(--wp--preset--color--accent); }
.wdf-slider__sisalto .wdf-btn {
	margin-top: 16px;
}

/* --- Splide-nuolet brändäys (vihreä, valkoinen nuoli) --- */
.wdf-slider .splide__arrow {
	background: var(--wp--preset--color--accent);
	opacity: 1;
}
.wdf-slider .splide__arrow svg {
	fill: #ffffff;
}
.wdf-slider .splide__arrow:disabled {
	opacity: 0.3;
}

/* --- Splide-pisteet brändäys (aktiivinen vihreä) --- */
.wdf-slider .splide__pagination {
	position: static;
	margin-top: 16px;
}
.wdf-slider .splide__pagination__page {
	background: #cccccc;
}
.wdf-slider .splide__pagination__page.is-active {
	background: var(--wp--preset--color--accent);
}

/* Tehdään sliderista container, jotta cqw-yksiköt viittaavat sen leveyteen */
.wdf-slider .splide {
    container-type: inline-size;
}
/* Nuolet kuvan pystykeskelle: 16/9-kuvan keskikohta = leveys × 9/16 ÷ 2 = 28.125 % leveydestä */
.wdf-slider .splide__arrow {
    top: 28.125cqw;
}