/**
 * VM Why Choose Block - Styles
 *
 * @package VM_Base_Theme
 * @since 1.0.0
 */

/* ==========================================================================
   Block wrapper
   ========================================================================== */

.vm-cb-main.vm-why-choose-block {
	max-width: unset !important;
	width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-inline: auto;
}

/* ==========================================================================
   Left column — title & subtitle
   ========================================================================== */

.vm-why-choose-title {
	margin: 0 0 var(--wp--preset--spacing--small);
	font-family: var(--wp--preset--font-family--zilla-slab, Georgia, serif);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--foreground);
}

.vm-why-choose-subtitle {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--neutral-medium);
	line-height: 1.7;
	margin-bottom: var(--wp--preset--spacing--large);
}

.why-choose-content {
	display: flex;
	flex-direction: row;
	gap: var(--wp--preset--spacing--large);
	gap: 40px;
}

/* Column reveal — parent is the observer target; columns slide in from sides. */
.vm-why-choose-columns.vm-animate {
	opacity: 1;
	transform: none;
	animation: none;
}

@keyframes vm-why-choose-from-left {
	from {
		opacity: 0;
		transform: translateX(-2.5rem);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes vm-why-choose-from-right {
	from {
		opacity: 0;
		transform: translateX(2.5rem);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.vm-why-choose-columns:not(.is-visible) .why-choose-content-left {
	opacity: 0;
	transform: translateX(-2.5rem);
}

.vm-why-choose-columns:not(.is-visible) .why-choose-content-right {
	opacity: 0;
	transform: translateX(2.5rem);
}

.vm-why-choose-columns.is-visible .why-choose-content-left {
	animation: vm-why-choose-from-left 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: 0.2s;
}

.vm-why-choose-columns.is-visible .why-choose-content-right {
	animation: vm-why-choose-from-right 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
	animation-delay: 0.2s;
}

.why-choose-content-left, 
.why-choose-content-right {
	width: 50%;
}

.why-choose-content-right img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 4px solid var(--wp--preset--color--primary);
	border-radius: 3px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   Points grid
   ========================================================================== */

.vm-why-choose-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	/* display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--wp--preset--spacing--medium); */
	max-width: var(--wp--style--global--wide-size) !important;
	margin-inline: auto;
}

/* ==========================================================================
   Point card
   ========================================================================== */

.vm-why-choose-card {
	display: flex;
	gap: var(--wp--preset--spacing--medium);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	margin-bottom: var(--wp--preset--spacing--large);
}

/* .vm-why-choose-card:hover {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
} */

/* ==========================================================================
   Card number badge
   ========================================================================== */

.vm-why-choose-card-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1;
	flex-shrink: 0;
}

/* ==========================================================================
   Card text
   ========================================================================== */

.vm-why-choose-card-title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--wp--preset--color--foreground);
	line-height: 1.1;
	margin-bottom: 5px;
}

.vm-why-choose-card-content {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--neutral-medium);
	line-height: 1.6;
}

/* ==========================================================================
   Editor placeholder
   ========================================================================== */

.vm-why-choose-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	background: var(--wp--preset--color--neutral-lighter);
	border: 2px dashed var(--wp--preset--color--neutral-light);
	border-radius: var(--vm-radius-lg, 8px);
	color: var(--wp--preset--color--neutral-medium);
	font-size: var(--wp--preset--font-size--medium);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media ( max-width: 640px ) {
	.vm-why-choose-grid {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 850px ) {
	.why-choose-content{
		flex-direction: column;
	}

	.why-choose-content-left, 
	.why-choose-content-right {
		width: 100%;
	}

	.vm-why-choose-title,
	.vm-why-choose-subtitle {
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vm-why-choose-columns:not(.is-visible) .why-choose-content-left,
	.vm-why-choose-columns:not(.is-visible) .why-choose-content-right,
	.vm-why-choose-columns.is-visible .why-choose-content-left,
	.vm-why-choose-columns.is-visible .why-choose-content-right {
		opacity: 1;
		transform: none;
		animation: none;
	}
}