.wp-hotspot-container { position: relative; }
/* Ensure the image fills the container and is responsive */
.wp-hotspot-image {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	display: block !important;
}
.wp-hotspot { position: absolute; cursor: pointer; }
.wp-hotspot-dot { width: 18px; height: 18px; background: #e74c3c; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.2); display: block; }
.wp-hotspot-popup { display: none; position: absolute; top: 24px; left: 0; background: #fff; border: 1px solid #ccc; padding: 12px; min-width: 180px; z-index: 10; box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.wp-hotspot:hover .wp-hotspot-popup { display: block; }

/* Framed style for course approach images. */
.approach-framed-link {
	display: inline-block;
	background: #fff;
	padding: 8px;
	border: 6px solid #e0e0e0;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	line-height: 0;
}

.approach-framed-link img,
.approach-framed img,
img.approach-framed {
	display: block;
	border-radius: 8px;
	border: 2px solid #ccc;
	background: #fafafa;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
}

/* Reusable frame for non-image blocks (Group, Columns, etc.). */
.block-framed,
.blocked-frame {
	background: #fff;
	padding: 12px;
	border: 6px solid #e0e0e0;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}