/*
 * Media & Tekst, blokstijl "Flipkaart": afbeelding en tekstvlak liggen op
 * elkaar in één gridcel en draaien om.
 * - Muis: hover draait de kaart om.
 * - Touch / toetsenbord: flipkaart.js zet de klasse .is-flipped bij tik of Enter/spatie.
 * - Touch zonder JavaScript: foto en tekst staan gewoon onder elkaar.
 * Het tekstvlak erft de achtergrond en tekstkleur van het blok zelf.
 */
.wp-block-media-text.is-style-flipkaart {
	display: grid;
	grid-template-columns: 1fr !important;
	grid-template-rows: 1fr;
	direction: ltr;
	perspective: 1200px;
	overflow: visible;
	position: relative;
}

.wp-block-media-text.is-style-flipkaart > .wp-block-media-text__media,
.wp-block-media-text.is-style-flipkaart > .wp-block-media-text__content {
	grid-area: 1 / 1;
	margin: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transition: transform 0.6s ease;
}

.wp-block-media-text.is-style-flipkaart > .wp-block-media-text__media {
	height: 100%;
	transform: rotateY(0deg);
}

.wp-block-media-text.is-style-flipkaart > .wp-block-media-text__media img,
.wp-block-media-text.is-style-flipkaart > .wp-block-media-text__media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wp-block-media-text.is-style-flipkaart > .wp-block-media-text__content {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 8%;
	transform: rotateY(180deg);
	background: inherit;
	color: inherit;
}

.wp-block-media-text.is-style-flipkaart.is-flipped > .wp-block-media-text__media {
	transform: rotateY(-180deg);
}

.wp-block-media-text.is-style-flipkaart.is-flipped > .wp-block-media-text__content {
	transform: rotateY(0deg);
}

@media (hover: hover) {
	.wp-block-media-text.is-style-flipkaart:hover > .wp-block-media-text__media {
		transform: rotateY(-180deg);
	}

	.wp-block-media-text.is-style-flipkaart:hover > .wp-block-media-text__content {
		transform: rotateY(0deg);
	}
}

.wp-block-media-text.is-style-flipkaart.flipkaart-actief {
	cursor: pointer;
}

/* Tik-icoon op touch: maakt zichtbaar dat de kaart aanraakbaar is. Op de achterkant wordt het een draai-pijl. */
@media (hover: none) {
	html.flipkaart-js .wp-block-media-text.is-style-flipkaart.flipkaart-actief::after {
		content: "";
		position: absolute;
		right: 12px;
		bottom: 12px;
		z-index: 3;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background-color: #fff;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 60%;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231a2141' d='M9 11.24V7.5C9 6.12 10.12 5 11.5 5S14 6.12 14 7.5v3.74c1.21-.81 2-2.18 2-3.74C16 5.01 13.99 3 11.5 3S7 5.01 7 7.5c0 1.56.79 2.93 2 3.74zm9.84 4.63l-4.54-2.26c-.17-.07-.35-.11-.54-.11H13v-6c0-.83-.67-1.5-1.5-1.5S10 6.67 10 7.5v10.74l-3.43-.72c-.08-.01-.15-.03-.24-.03-.31 0-.59.13-.79.33l-.79.8 4.94 4.94c.27.27.65.44 1.06.44h6.79c.75 0 1.33-.55 1.44-1.28l.75-5.27c.01-.07.02-.14.02-.2 0-.62-.38-1.16-.91-1.38z'/%3E%3C/svg%3E");
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
		pointer-events: none;
		animation: flipkaart-tik 2s ease-in-out infinite;
	}

	html.flipkaart-js .wp-block-media-text.is-style-flipkaart.flipkaart-actief.is-flipped::after {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231a2141' d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E");
		animation: none;
	}
}

@keyframes flipkaart-tik {
	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.12);
	}
}

.wp-block-media-text.is-style-flipkaart:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 4px;
}

/* Touch zonder JavaScript: geen flip, foto en tekst onder elkaar. */
@media (hover: none) {
	html:not(.flipkaart-js) .wp-block-media-text.is-style-flipkaart {
		grid-template-rows: auto;
		perspective: none;
	}

	html:not(.flipkaart-js) .wp-block-media-text.is-style-flipkaart > .wp-block-media-text__media,
	html:not(.flipkaart-js) .wp-block-media-text.is-style-flipkaart > .wp-block-media-text__content {
		grid-area: auto;
		transform: none;
		transition: none;
		backface-visibility: visible;
		-webkit-backface-visibility: visible;
	}

	html:not(.flipkaart-js) .wp-block-media-text.is-style-flipkaart > .wp-block-media-text__content {
		align-self: auto;
		display: block;
		background: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-media-text.is-style-flipkaart > .wp-block-media-text__media,
	.wp-block-media-text.is-style-flipkaart > .wp-block-media-text__content {
		transition: none;
	}

	html.flipkaart-js .wp-block-media-text.is-style-flipkaart.flipkaart-actief::after {
		animation: none;
	}
}