/**
 * Portfolio Hover Overlay
 * Displays "More Information" text overlay when hovering over portfolio images
 * Used on ArtRooms and Gallery pages
 */

/* ArtRooms: Position grid item for overlay */
.cpf-artrooms .w-grid .w-grid-item-h,
.layout_4190 .w-grid-item-h {
	position: relative;
	overflow: hidden;
}

/* Gallery: Position image container for overlay (constrains to image area) */
.cpf-gallery .w-grid .w-grid-item-h .usg_post_image_1,
.layout_3642 .w-grid-item-h .usg_post_image_1 {
	position: relative;
	overflow: hidden;
}

/* Ensure child elements stay below the overlay */
.cpf-artrooms .w-grid .w-grid-item-h > *,
.layout_4190 .w-grid-item-h > * {
	position: relative;
	z-index: 1;
}

/* Hover overlay with centered text - Common styles */
.cpf-artrooms .w-grid .w-grid-item-h::before,
.layout_4190 .w-grid-item-h::before,
.cpf-gallery .w-grid .w-grid-item-h .usg_post_image_1::before,
.layout_3642 .w-grid-item-h .usg_post_image_1::before {
	content: var(--cpf-hover-label, "More Information");
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.75);
	color: #FFEDD4;
	font-weight: normal;
	font-size: 1.1rem;
	text-transform: none;
	text-align: center;
	padding: 12px;
	opacity: 0;
	border-radius: inherit;
	pointer-events: none;
	z-index: 10;
	will-change: opacity;
}

/* ArtRooms: Add scale transform for synchronized zoom effect */
.cpf-artrooms .w-grid .w-grid-item-h::before,
.layout_4190 .w-grid-item-h::before {
	transform: scale(1);
	transform-origin: 50% 50%;
	transition: opacity 160ms ease, transform 0.2s ease;
	will-change: transform, opacity;
}

/* Gallery: Simple fade transition without scale */
.cpf-gallery .w-grid .w-grid-item-h .usg_post_image_1::before,
.layout_3642 .w-grid-item-h .usg_post_image_1::before {
	transition: opacity 160ms ease;
}

/* Show overlay on hover and keyboard focus */
/* ArtRooms: With scale effect */
.cpf-artrooms .w-grid .w-grid-item-h:hover::before,
.cpf-artrooms .w-grid .w-grid-item-h:focus-within::before,
.layout_4190 .w-grid-item-h:hover::before,
.layout_4190 .w-grid-item-h:focus-within::before {
	opacity: 1;
	transform: scale(1.075);
}

/* Gallery: Fade only, no scale */
.cpf-gallery .w-grid .w-grid-item-h:hover .usg_post_image_1::before,
.cpf-gallery .w-grid .w-grid-item-h:focus-within .usg_post_image_1::before,
.layout_3642 .w-grid-item-h:hover .usg_post_image_1::before,
.layout_3642 .w-grid-item-h:focus-within .usg_post_image_1::before {
	opacity: 1;
}

/* Prevent container fade from dimming overlay (Gallery only) */
.cpf-gallery .w-grid .w-grid-item-h:hover .usg_post_image_1,
.layout_3642 .w-grid-item-h:hover .usg_post_image_1 {
	opacity: 1 !important;
}

/* Apply fade to image elements instead (preserves theme effect) */
.cpf-gallery .w-grid .w-grid-item-h:hover .usg_post_image_1 > img,
.cpf-gallery .w-grid .w-grid-item-h:hover .usg_post_image_1 > a > img,
.cpf-gallery .w-grid .w-grid-item-h:hover .usg_post_image_1 picture > img,
.layout_3642 .w-grid-item-h:hover .usg_post_image_1 > img,
.layout_3642 .w-grid-item-h:hover .usg_post_image_1 > a > img,
.layout_3642 .w-grid-item-h:hover .usg_post_image_1 picture > img {
	opacity: 0.5;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
	.cpf-artrooms .w-grid .w-grid-item-h::before,
	.layout_4190 .w-grid-item-h::before,
	.cpf-gallery .w-grid .w-grid-item-h .usg_post_image_1::before,
	.layout_3642 .w-grid-item-h .usg_post_image_1::before {
		transition: opacity 160ms ease;
	}
}