/**
 * DROP solution page — scoped styles for the "How it works" screenshot lightbox.
 *
 * Loaded ONLY on /solutions/drop-compliance/ (functions/drop_compliance.php).
 * Everything is scoped under `.sh-2024 .module-imagecards` so it cannot leak to the
 * other templates that share the image_cards module. Pairs with
 * assets/js/interactive/drop-compliance-lightbox.js, which adds the .imagecard-img--zoomable
 * class and the .dg-expand-badge element.
 */

/* Clickable screenshot: zoom cursor + a positioning context for the overlay/badge. */
.sh-2024 .module-imagecards .imagecard-img--zoomable {
	cursor: zoom-in;
	position: relative;
}

/* Dim layer that fades in on hover/focus to confirm interactivity. */
.sh-2024 .module-imagecards .imagecard-img--zoomable::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: rgba(11, 27, 38, 0.18);
	opacity: 0;
	transition: opacity 0.18s ease;
	pointer-events: none;
	z-index: 1;
}
.sh-2024 .module-imagecards .imagecard-img--zoomable:hover::after,
.sh-2024 .module-imagecards .imagecard-img--zoomable:focus-visible::after {
	opacity: 1;
}

/*
 * Persistent "expand" chip in the top-right corner. Always visible (at a subtle
 * opacity) so users can tell the screenshot is clickable WITHOUT hovering, then it
 * pops to brand green on hover/focus for confirmation. Magnifier-plus icon.
 */
.sh-2024 .module-imagecards .dg-expand-badge {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 3.8rem;
	height: 3.8rem;
	border-radius: 50%;
	background-color: rgba(11, 27, 38, 0.72);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1.9rem 1.9rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E");
	opacity: 0.9;
	transform: scale(1);
	transition: opacity 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
	box-shadow: 0 0.2rem 0.6rem rgba(11, 27, 38, 0.25);
	pointer-events: none;
	z-index: 2;
}
.sh-2024 .module-imagecards .imagecard-img--zoomable:hover .dg-expand-badge,
.sh-2024 .module-imagecards .imagecard-img--zoomable:focus-visible .dg-expand-badge {
	opacity: 1;
	transform: scale(1.08);
	background-color: #00b583;
}

/* Visible focus ring for keyboard users. */
.sh-2024 .module-imagecards .imagecard-img--zoomable:focus-visible {
	outline: 2px solid #00b583;
	outline-offset: 3px;
}

/* Caption bar: the theme's global typography colors headings dark, which is
   unreadable on the dark lightbox caption. Force high-contrast light text. The
   triple-class selectors out-specify both GLightbox's defaults and `.sh-2024 h4`. */
.glightbox-clean .gslide-description {
	background: #0b1b26;
}
.glightbox-clean .gslide-description .gslide-title,
.glightbox-clean .gslide-description .gslide-desc,
.glightbox-clean .gslide-description .gdesc-inner {
	color: #ffffff;
	font-family: 'Manrope', system-ui, sans-serif;
}