/**
 * Media Features block — afbeelding + lijst features in twee kolommen.
 */

*, ::before, ::after {
	--tw-border-spacing-x: 0;
	--tw-border-spacing-y: 0;
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	--tw-rotate: 0;
	--tw-skew-x: 0;
	--tw-skew-y: 0;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	--tw-pan-x:  ;
	--tw-pan-y:  ;
	--tw-pinch-zoom:  ;
	--tw-scroll-snap-strictness: proximity;
	--tw-gradient-from-position:  ;
	--tw-gradient-via-position:  ;
	--tw-gradient-to-position:  ;
	--tw-ordinal:  ;
	--tw-slashed-zero:  ;
	--tw-numeric-figure:  ;
	--tw-numeric-spacing:  ;
	--tw-numeric-fraction:  ;
	--tw-ring-inset:  ;
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: rgb(59 130 246 / 0.5);
	--tw-ring-offset-shadow: 0 0 #0000;
	--tw-ring-shadow: 0 0 #0000;
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
	--tw-blur:  ;
	--tw-brightness:  ;
	--tw-contrast:  ;
	--tw-grayscale:  ;
	--tw-hue-rotate:  ;
	--tw-invert:  ;
	--tw-saturate:  ;
	--tw-sepia:  ;
	--tw-drop-shadow:  ;
	--tw-backdrop-blur:  ;
	--tw-backdrop-brightness:  ;
	--tw-backdrop-contrast:  ;
	--tw-backdrop-grayscale:  ;
	--tw-backdrop-hue-rotate:  ;
	--tw-backdrop-invert:  ;
	--tw-backdrop-opacity:  ;
	--tw-backdrop-saturate:  ;
	--tw-backdrop-sepia:  ;
	--tw-contain-size:  ;
	--tw-contain-layout:  ;
	--tw-contain-paint:  ;
	--tw-contain-style:  ;
}

::backdrop {
	--tw-border-spacing-x: 0;
	--tw-border-spacing-y: 0;
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	--tw-rotate: 0;
	--tw-skew-x: 0;
	--tw-skew-y: 0;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	--tw-pan-x:  ;
	--tw-pan-y:  ;
	--tw-pinch-zoom:  ;
	--tw-scroll-snap-strictness: proximity;
	--tw-gradient-from-position:  ;
	--tw-gradient-via-position:  ;
	--tw-gradient-to-position:  ;
	--tw-ordinal:  ;
	--tw-slashed-zero:  ;
	--tw-numeric-figure:  ;
	--tw-numeric-spacing:  ;
	--tw-numeric-fraction:  ;
	--tw-ring-inset:  ;
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: rgb(59 130 246 / 0.5);
	--tw-ring-offset-shadow: 0 0 #0000;
	--tw-ring-shadow: 0 0 #0000;
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
	--tw-blur:  ;
	--tw-brightness:  ;
	--tw-contrast:  ;
	--tw-grayscale:  ;
	--tw-hue-rotate:  ;
	--tw-invert:  ;
	--tw-saturate:  ;
	--tw-sepia:  ;
	--tw-drop-shadow:  ;
	--tw-backdrop-blur:  ;
	--tw-backdrop-brightness:  ;
	--tw-backdrop-contrast:  ;
	--tw-backdrop-grayscale:  ;
	--tw-backdrop-hue-rotate:  ;
	--tw-backdrop-invert:  ;
	--tw-backdrop-opacity:  ;
	--tw-backdrop-saturate:  ;
	--tw-backdrop-sepia:  ;
	--tw-contain-size:  ;
	--tw-contain-layout:  ;
	--tw-contain-paint:  ;
	--tw-contain-style:  ;
}
.container {
	width: 100%;
}
@media (min-width: 640px) {

	.container {
		max-width: 640px;
	}
}
@media (min-width: 768px) {

	.container {
		max-width: 768px;
	}
}
@media (min-width: 1024px) {

	.container {
		max-width: 1024px;
	}
}
@media (min-width: 1280px) {

	.container {
		max-width: 1280px;
	}
}
@media (min-width: 1536px) {

	.container {
		max-width: 1536px;
	}
}
.visible {
	visibility: visible;
}
.static {
	position: static;
}
.fixed {
	position: fixed;
}
.absolute {
	position: absolute;
}
.relative {
	position: relative;
}
.right-4 {
	right: 1rem;
}
.top-4 {
	top: 1rem;
}
.z-10 {
	z-index: 10;
}
.mx-auto {
	margin-left: auto;
	margin-right: auto;
}
.mb-6 {
	margin-bottom: 1.5rem;
}
.mt-2 {
	margin-top: 0.5rem;
}
.block {
	display: block;
}
.inline-block {
	display: inline-block;
}
.inline {
	display: inline;
}
.flex {
	display: flex;
}
.grid {
	display: grid;
}
.hidden {
	display: none;
}
.max-w-3xl {
	max-width: 48rem;
}
.transform {
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.resize {
	resize: both;
}
.flex-col {
	flex-direction: column;
}
.flex-wrap {
	flex-wrap: wrap;
}
.items-start {
	align-items: flex-start;
}
.items-end {
	align-items: flex-end;
}
.items-center {
	align-items: center;
}
.justify-start {
	justify-content: flex-start;
}
.justify-end {
	justify-content: flex-end;
}
.justify-center {
	justify-content: center;
}
.gap-2 {
	gap: 0.5rem;
}
.gap-3 {
	gap: 0.75rem;
}
.rounded {
	border-radius: 0.25rem;
}
.border {
	border-width: 1px;
}
.bg-accent {
	background-color: var(--wp--preset--color--accent);
}
.bg-primary {
	background-color: var(--wp--preset--color--primary);
}
.px-6 {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}
.px-8 {
	padding-left: 2rem;
	padding-right: 2rem;
}
.py-20 {
	padding-top: 5rem;
	padding-bottom: 5rem;
}
.py-4 {
	padding-top: 1rem;
	padding-bottom: 1rem;
}
.text-left {
	text-align: left;
}
.text-center {
	text-align: center;
}
.text-right {
	text-align: right;
}
.text-4xl {
	font-size: 2.25rem;
	line-height: 2.5rem;
}
.text-lg {
	font-size: 1.125rem;
	line-height: 1.75rem;
}
.text-sm {
	font-size: 0.875rem;
	line-height: 1.25rem;
}
.font-bold {
	font-weight: 700;
}
.font-semibold {
	font-weight: 600;
}
.text-white {
	--tw-text-opacity: 1;
	color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.opacity-75 {
	opacity: 0.75;
}
.outline {
	outline-style: solid;
}
.filter {
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}
.transition-opacity {
	transition-property: opacity;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}

/* ──────────────────────────────────────────────
   Layout
────────────────────────────────────────────── */
.wp-block-signijkerk-media-features {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: start;
	padding: 3rem 0;
}

/* Wisselt positie van afbeelding-kolom — DOM-volgorde blijft hetzelfde,
   alleen visuele volgorde verandert. */
.wp-block-signijkerk-media-features.media-features--image-right .media-features__image-col {
	order: 2;
}
.wp-block-signijkerk-media-features.media-features--image-right .media-features__items-col {
	order: 1;
}

/* ──────────────────────────────────────────────
   Afbeelding-kolom
────────────────────────────────────────────── */
.wp-block-signijkerk-media-features .media-features__image-col {
	position: sticky;
	top: 2rem;
}

.wp-block-signijkerk-media-features .media-features__image {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
}

.wp-block-signijkerk-media-features .media-features__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	background: rgba( 0, 0, 0, 0.04 );
	border: 2px dashed rgba( 0, 0, 0, 0.15 );
	border-radius: 6px;
}

/* ──────────────────────────────────────────────
   Items-kolom
────────────────────────────────────────────── */
.wp-block-signijkerk-media-features .media-features__items-col {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

.wp-block-signijkerk-media-features .media-features__item {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;

	/* Scroll-in animatie: onzichtbaar + iets omlaag, view.ts voegt .is-visible toe */
	opacity: 0;
	transform: translateY( 28px );
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.wp-block-signijkerk-media-features .media-features__item.is-visible {
	opacity: 1;
	transform: translateY( 0 );
}

/* Editor: geen JS view-script, dus items altijd direct zichtbaar */
.editor-styles-wrapper .wp-block-signijkerk-media-features .media-features__item,
.block-editor-block-list__block .wp-block-signijkerk-media-features .media-features__item {
	opacity: 1;
	transform: none;
	transition: none;
}

.wp-block-signijkerk-media-features .media-features__icon {
	width: 40px;
	height: 40px;
	color: var( --wp--preset--color--accent, #F07D00 );
	flex-shrink: 0;
}

.wp-block-signijkerk-media-features .media-features__icon svg,
.wp-block-signijkerk-media-features .media-features__icon img {
	width: 100%;
	height: 100%;
	-o-object-fit: contain;
	   object-fit: contain;
}

.wp-block-signijkerk-media-features .media-features__title {
	margin: 0;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var( --wp--preset--color--primary, #1A3C5E );
}

.wp-block-signijkerk-media-features .media-features__description {
	margin: 0;
	padding-left: 1.5rem;
	font-size: 0.92rem;
	line-height: 1.7;
	color: rgba( 0, 0, 0, 0.6 );
}

/* ──────────────────────────────────────────────
   Editor — selectie-ring + add-knop
────────────────────────────────────────────── */
.wp-block-signijkerk-media-features .media-features__item--selected {
	outline: 2px solid var( --wp--preset--color--accent, #F07D00 );
	outline-offset: 8px;
	border-radius: 4px;
}

.wp-block-signijkerk-media-features .media-features__add {
	margin-top: 0.5rem;
}

/* ──────────────────────────────────────────────
   Responsive
────────────────────────────────────────────── */
@media ( max-width: 1024px ) {
	.wp-block-signijkerk-media-features {
		gap: 3rem;
	}

	.wp-block-signijkerk-media-features .media-features__image-col {
		position: static;
	}
}

@media ( max-width: 640px ) {
	.wp-block-signijkerk-media-features {
		grid-template-columns: 1fr;
		gap: 2rem;
		padding: 2rem 0;
	}

	/* Op mobiel: afbeelding altijd bovenaan, ongeacht positie-instelling */
	.wp-block-signijkerk-media-features .media-features__image-col,
	.wp-block-signijkerk-media-features.media-features--image-right .media-features__image-col {
		order: 1;
	}
	.wp-block-signijkerk-media-features .media-features__items-col,
	.wp-block-signijkerk-media-features.media-features--image-right .media-features__items-col {
		order: 2;
	}

	.wp-block-signijkerk-media-features .media-features__items-col {
		gap: 2rem;
	}
}

.hover\:opacity-90:hover {
	opacity: 0.9;
}

@media (min-width: 768px) {

	.md\:text-5xl {
		font-size: 3rem;
		line-height: 1;
	}
}