/* Blog & Portfolio Rollover with Description/Content */

/* Ensure rollover has proper positioning */
.fusion-blog-rollover .fusion-rollover,
.fusion-portfolio .fusion-rollover {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

/* Add description container to rollover */
.fusion-blog-rollover .fusion-rollover-content,
.fusion-portfolio .fusion-rollover-content {
	position: relative !important;
	height: 100% !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
	padding: 20px !important;
	z-index: 10 !important;
	width: 100% !important;
}

/* Ensure rollover itself is positioned correctly */
.fusion-rollover {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-direction: column !important;
}

/* Description text styling */
.fusion-rollover-description {
	color: #fff !important;
	font-size: 14px !important;
	line-height: 1.6 !important;
	text-align: center !important;
	margin-top: 15px !important;
	padding: 10px 15px !important;
	opacity: 0 !important;
	transform: translateY(10px) !important;
	transition: opacity 0.3s ease, transform 0.3s ease !important;
	display: block !important;
	position: relative !important;
	z-index: 100 !important;
	background: rgba(0, 0, 0, 0.3) !important;
	border-radius: 4px !important;
	pointer-events: none !important;
	width: 80% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Show description when hovering over the portfolio item container */
/* Target the parent containers that trigger the rollover */
.fusion-portfolio-content-wrapper:hover .fusion-rollover-description,
.fusion-image-wrapper:hover .fusion-rollover-description,
.fusion-masonry-element-container:hover .fusion-rollover-description,
.fusion-portfolio-post:hover .fusion-rollover-description,
article.post:hover .fusion-rollover-description,
.fusion-post-grid:hover .fusion-rollover-description,
.fusion-has-rollover:hover .fusion-rollover-description {
	opacity: 1 !important;
	transform: translateY(0) !important;
	visibility: visible !important;
}

/* Also show when the rollover itself is hovered */
.fusion-rollover:hover .fusion-rollover-description {
	opacity: 1 !important;
	transform: translateY(0) !important;
	visibility: visible !important;
}

/* Backup: Show when rollover itself is visible (has opacity) */
.fusion-rollover[style*="opacity"][style*="1"] .fusion-rollover-description,
.fusion-rollover.fusion-visible .fusion-rollover-description {
	opacity: 1 !important;
	transform: translateY(0) !important;
	visibility: visible !important;
}

/* Ensure descriptions are visible when parent has hover class */
.fusion-portfolio-content-wrapper.fusion-hover .fusion-rollover-description,
.fusion-image-wrapper.fusion-hover .fusion-rollover-description {
	opacity: 1 !important;
	transform: translateY(0) !important;
	visibility: visible !important;
}

/* Debug mode: Make descriptions always visible (remove this after testing) */
body.rollover-debug-mode .fusion-rollover-description {
	opacity: 1 !important;
	transform: translateY(0) !important;
	visibility: visible !important;
	background: rgba(255, 0, 0, 0.8) !important;
	border: 2px solid yellow !important;
}

/* Reorganize rollover elements to show description below icons */
.fusion-rollover .fusion-rollover-description {
	order: 2;
	margin-top: 15px;
}

.fusion-rollover .fusion-link-wrapper,
.fusion-rollover .fusion-rollover-gallery {
	order: 1;
}

/* Adjust rollover icons spacing when description is present */
.fusion-rollover-content .fusion-rollover-description ~ .fusion-rollover-gallery,
.fusion-rollover-content .fusion-rollover-description ~ .fusion-link-wrapper {
	margin-top: 10px;
}

/* Ensure rollover links/icons remain visible */
.fusion-rollover .fusion-link-wrapper a,
.fusion-rollover .fusion-rollover-gallery a {
	position: relative;
	z-index: 15;
}

/* Style scrollbar for description overflow */
.fusion-rollover-description::-webkit-scrollbar {
	width: 4px;
}

.fusion-rollover-description::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.1);
}

.fusion-rollover-description::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.5);
	border-radius: 2px;
}

.fusion-rollover-description::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.7);
}

/* Grid and Masonry layout specific styles */
.fusion-post-grid .fusion-rollover-description,
.fusion-post-masonry .fusion-rollover-description {
	font-size: 13px;
	max-height: 120px;
}

/* Timeline layout specific styles */
.fusion-post-timeline .fusion-rollover-description {
	font-size: 13px;
	max-height: 100px;
}

/* Large and Medium layout specific styles */
.fusion-post-large .fusion-rollover-description,
.fusion-post-medium .fusion-rollover-description,
.fusion-post-large-alternate .fusion-rollover-description,
.fusion-post-medium-alternate .fusion-rollover-description {
	font-size: 14px;
	max-height: 180px;
}

/* Responsive adjustments */
@media only screen and (max-width: 800px) {
	.fusion-rollover-description {
		font-size: 12px;
		max-height: 100px;
		padding: 0 10px;
		margin-top: 10px;
	}
}

@media only screen and (max-width: 640px) {
	.fusion-rollover-description {
		font-size: 11px;
		max-height: 80px;
	}
}