/**
 * Translation Compatibility Fixes
 * Fixes for homepage boxes and tool cards when translated
 */

/* Allow tool cards to expand for translated content */
.ai-tool-card,
.tool-card {
	min-height: auto !important;
	height: auto !important;
	max-height: none !important;
	display: flex;
	flex-direction: column;
	overflow: visible !important;
}

/* Override overflow hidden from taxonomy and other templates */
body.translated .ai-tool-card,
body.translated .tool-card {
	overflow: visible !important;
}

.ai-tool-card .tool-card-link,
.tool-card .tool-card-link {
	overflow: visible !important;
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Ensure tool descriptions can expand */
.tool-description {
	max-height: none !important;
	overflow: visible !important;
	text-overflow: clip !important;
	line-height: 1.6;
	flex: 1;
	min-height: auto !important;
	-webkit-line-clamp: none !important;
	display: block !important;
	white-space: normal !important;
}

/* Fix for translated tool cards - allow full content to show */
.ai-tool-card.translated .tool-description,
.tool-card.translated .tool-description {
	max-height: none !important;
	overflow: visible !important;
	padding-bottom: 8px;
}

/* Ensure tool tags/categories are visible */
.tool-tags {
	margin-top: 12px;
	padding-top: 8px;
	flex-shrink: 0;
	visibility: visible !important;
	opacity: 1 !important;
	display: flex !important;
	overflow: visible !important;
}

.tool-tag {
	display: inline-block;
	margin: 4px 4px 4px 0;
	padding: 4px 12px;
	background: #f3f4f6;
	border-radius: 6px;
	font-size: 0.875rem;
	color: #667eea;
	font-weight: 500;
	visibility: visible !important;
	opacity: 1 !important;
	white-space: normal !important;
}

/* Prevent text truncation in translated cards */
body.translated .ai-tool-card,
body.translated .tool-card {
	overflow: visible !important;
}

body.translated .tool-description {
	-webkit-line-clamp: none !important;
	display: block !important;
	overflow: visible !important;
}

/* Ensure cards maintain proper spacing when expanded */
.ai-tool-card + .ai-tool-card,
.tool-card + .tool-card {
	margin-top: 0;
}

/* Fix for grid layouts - allow cards to grow */
.tool-grid,
.ai-tools-grid,
[class*="grid"] {
	align-items: stretch;
}

.tool-grid .ai-tool-card,
.tool-grid .tool-card,
.ai-tools-grid .ai-tool-card,
.ai-tools-grid .tool-card {
	height: auto !important;
	min-height: auto !important;
	display: flex;
	flex-direction: column;
}

/* Ensure all grid containers allow expansion */
.grid,
[class*="grid"],
[class*="Grid"] {
	align-items: stretch !important;
}

.grid .ai-tool-card,
.grid .tool-card,
[class*="grid"] .ai-tool-card,
[class*="grid"] .tool-card {
	height: auto !important;
}

/* Loading state - show skeleton while translating */
.translating .ai-tool-card,
.translating .tool-card {
	opacity: 0.7;
	pointer-events: none;
}

/* Smooth transition when translation completes */
.ai-tool-card.translated,
.tool-card.translated {
	transition: all 0.3s ease;
}

/* Override any text truncation styles */
body.translated .tool-description,
body.translated .ai-tool-card .tool-description,
body.translated .tool-card .tool-description {
	display: -webkit-box !important;
	-webkit-line-clamp: unset !important;
	-webkit-box-orient: vertical !important;
	overflow: visible !important;
	text-overflow: clip !important;
	max-height: none !important;
	line-height: 1.6 !important;
}

/* Ensure cards don't have fixed heights in grids */
body.translated .grid .ai-tool-card,
body.translated .grid .tool-card,
body.translated [class*="grid"] .ai-tool-card,
body.translated [class*="grid"] .tool-card {
	align-self: stretch;
	height: auto !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
	.tool-description {
		font-size: 0.9rem;
		line-height: 1.5;
	}
	
	.ai-tool-card,
	.tool-card {
		padding: 16px !important;
	}
	
	body.translated .tool-description {
		font-size: 0.9rem !important;
		line-height: 1.5 !important;
	}
}