/* Mandyju Testimonials styles */
.mj-testimonials { padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--30); background: transparent; }
.mj-testimonials .mj-eyebrow { text-align:center; color: var(--wp--preset--color--text-muted); text-transform:uppercase; letter-spacing:.08em; font-weight:600; margin:0 0 var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--small); }
.mj-testimonials .mj-title { text-align:center; color: var(--wp--preset--color--text-base); font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); font-weight: 600; margin:0 0 var(--wp--preset--spacing--70); }

.mj-carousel { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 calc(var(--wp--preset--spacing--40) + 20px); overflow: hidden; }
.mj-carousel::before,
.mj-carousel::after { content:""; position:absolute; top:0; bottom:0; width:14px; background: white; pointer-events:none; z-index:0; }
.mj-carousel::before { left:0; }
.mj-carousel::after { right:0; }
.mj-carousel .mj-track { display:flex; justify-content: center; gap: var(--wp--preset--spacing--40); overflow:hidden; scroll-behavior:smooth; scrollbar-gutter: stable both-edges; scroll-snap-type: x mandatory; padding: 0 20px; width: 100%; }
.mj-card { 
	flex: 0 0 auto; 
	max-width: 500px; 
	width: 100%; 
	background:#fff; 
	border:1px solid var(--wp--preset--color--border-subtle); 
	border-radius:0; 
	padding: var(--wp--preset--spacing--60); 
	box-shadow: 0 1px 2px rgba(0,0,0,.04); 
	box-sizing: border-box; 
	scroll-snap-align: center;
	min-width: 0 !important; /* Allow flex items to shrink below their content size */
	overflow: hidden !important; /* Prevent content from overflowing the card */
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
	position: relative; /* ensure card sits above edge masks */
	z-index: 1;
}

/* Remove empty paragraph tags that might cause layout issues */
.mj-card p:empty {
	display: none !important;
}

/* Universal text wrapping override for ALL text inside cards */
.mj-card * {
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
	white-space: normal !important;
	text-overflow: clip !important;
	max-width: 100% !important;
}
.mj-quote { color: var(--wp--preset--color--primary-alt); font-size: clamp(40px, 4vw, 72px); line-height:1; margin-bottom: var(--wp--preset--spacing--40); }
/* Force proper text wrapping with maximum specificity */
article.mj-card .mj-content,
.mj-card .mj-content { 
	color: var(--wp--preset--color--text-base); 
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
	word-break: break-word !important;
	hyphens: auto !important;
	max-width: 100% !important;
	width: 100% !important;
	white-space: normal !important;
	text-overflow: clip !important;
}

/* Ensure paragraphs inside content also wrap properly with high specificity */
article.mj-card .mj-content p,
.mj-card .mj-content p {
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
	word-break: break-word !important;
	hyphens: auto !important;
	max-width: 100% !important;
	width: 100% !important;
	margin-top: 0;
	white-space: normal !important;
	text-overflow: clip !important;
	display: block !important;
}
.mj-author { margin-top: var(--wp--preset--spacing--50); }
.mj-name { 
	font-weight:600; 
	word-wrap: break-word;
	overflow-wrap: break-word;
	max-width: 100%;
	display: block;
	margin-bottom: 0.25rem;
}
.mj-role { 
	color: var(--wp--preset--color--text-muted); 
	font-size: var(--wp--preset--font-size--small);
	word-wrap: break-word;
	overflow-wrap: break-word;
	max-width: 100%;
}

/* Prevent images/paragraphs from adding stray margins inside author/meta */
.mj-meta p { margin: 0; }
.mj-content p { margin-top: 0; }

/* Neutralize stray <p> wrappers WordPress may inject around buttons */
.mj-carousel > p { margin: 0; padding: 0; }

.mj-nav { position:absolute; top:50%; transform: translateY(-50%); background:rgba(0,0,0,0.0); border:0; color: var(--wp--preset--color--text-muted); font-size:28px; padding:.25rem .5rem; cursor:pointer; z-index:2; }
.mj-prev { left:6px; }
.mj-next { right:6px; }

.mj-dots { display:flex; gap:.5rem; justify-content:center; margin-top: var(--wp--preset--spacing--60) }
.mj-dots button { width:8px; height:8px; border-radius:0; border:0; background: #d9caa9; opacity:.6; }
.mj-dots button.is-active { opacity: 1; background: #c7a76e; }

@media (max-width: 900px) {
	.mj-card { 
		max-width: 100% !important; 
		width: 100% !important;
		min-width: 280px !important; /* Minimum width to prevent too narrow cards */
		overflow: hidden !important;
		word-wrap: break-word !important;
	}
	.mj-carousel .mj-track { 
		gap: 0; 
		padding: 0 var(--wp--preset--spacing--40); 
		justify-content: center; 
	}
	/* Remove edge masks on mobile since we're centering single cards */
	.mj-carousel::before,
	.mj-carousel::after { display: none; }
	/* Better text handling on mobile */
	.mj-content {
		font-size: var(--wp--preset--font-size--medium) !important;
		line-height: 1.6 !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		word-break: break-word !important;
		max-width: 100% !important;
		width: 100% !important;
	}
	
	.mj-content p {
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		word-break: break-word !important;
		max-width: 100% !important;
		width: 100% !important;
	}
	
	.mj-author {
		flex-wrap: wrap;
		gap: var(--wp--preset--spacing--20);
	}
}

/* Also hide edge masks up to large tablet to prevent occlusion in common mobile/tablet widths */
@media (max-width: 1200px) {
	.mj-carousel::before,
	.mj-carousel::after { display: none !important; width: 0 !important; }
}

/* Extra small screens */
@media (max-width: 480px) {
	.mj-card {
		padding: var(--wp--preset--spacing--40);
		margin: 0 var(--wp--preset--spacing--20);
		min-width: 260px;
	}
	
	.mj-carousel {
		padding: 0 var(--wp--preset--spacing--20);
	}
	
	.mj-content {
		font-size: var(--wp--preset--font-size--small);
	}
}

@media (min-width: 901px) {
	/* Larger gap on desktop for better separation */
	.mj-carousel .mj-track { gap: var(--wp--preset--spacing--60); justify-content: flex-start; }
	.mj-card { max-width: calc((100% - var(--wp--preset--spacing--60)) / 2); }
}
