/**
 * MIM Slider Overlay
 *
 * Doel:
 * - Toon een overlay-button in het midden van een Blocksy slider-afbeelding
 * - Laat de knop subtiel infaden en omhoog bewegen bij hover
 * - Geef de afbeelding een lichte blur en minimale zoom
 */

/* Zorg dat de media-container als positioneringscontext werkt */
.ct-posts-shortcode .flexy .ct-media-container {
	position: relative;
	display: block;
	overflow: hidden;
}

/* Maak de afbeelding animeerbaar */
.ct-posts-shortcode .flexy .ct-media-container img {
	display: block;
	width: 100%;
	transition: filter 0.3s ease, transform 0.3s ease;
	will-change: filter, transform;
}

/* Overlay button in het midden */
.ct-posts-shortcode .flexy .mim-slider-overlay-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, calc(-50% - 25px));
	opacity: 0;
	visibility: hidden;
	z-index: 3;
	transition:
		opacity 0.28s ease,
		transform 0.28s ease,
		visibility 0.28s ease;
	pointer-events: none;
	white-space: nowrap;
}

/* Subtiele overlay wash voor betere leesbaarheid */
.ct-posts-shortcode .flexy .ct-media-container::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.08);
	opacity: 0;
	transition: opacity 0.28s ease;
	z-index: 2;
	pointer-events: none;
}

/* Hover/focus: blur en mini zoom */
.ct-posts-shortcode .flexy .ct-media-container:hover img,
.ct-posts-shortcode .flexy .ct-media-container:focus-visible img,
.ct-posts-shortcode .flexy .ct-media-container:focus-within img {
	filter: blur(2px);
	transform: scale(1.02);
}

/* Hover/focus: donkere wash tonen */
.ct-posts-shortcode .flexy .ct-media-container:hover::before,
.ct-posts-shortcode .flexy .ct-media-container:focus-visible::before,
.ct-posts-shortcode .flexy .ct-media-container:focus-within::before {
	opacity: 1;
}

/* Hover/focus: knop zichtbaar maken en naar exact midden laten bewegen */
.ct-posts-shortcode .flexy .ct-media-container:hover .mim-slider-overlay-button,
.ct-posts-shortcode .flexy .ct-media-container:focus-visible .mim-slider-overlay-button,
.ct-posts-shortcode .flexy .ct-media-container:focus-within .mim-slider-overlay-button {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, -50%);
	pointer-events: auto;
}