/**
 * Shared "click an image, see it larger in a lightbox" modal — the overlay/
 * dialog look itself. Pulled out of assets/css/cards-simple.css into its own
 * file the moment a second consumer (the Room Image Carousel,
 * inc/image-carousel.php) needed the exact same lightbox, mirroring how
 * inc/collection-breadcrumbs.php was pulled out of inc/storage-solution.php
 * for Finishing Touches.
 *
 * Class names (.cards-simple-modal, .cards-simple-modal-trigger, etc.) are
 * unchanged from when this only served Cards Simple — kept as-is rather than
 * renamed, so both consumers just "reference the same file" instead of a
 * rename touching everything that already points at them. The markup itself
 * lives in inc/image-modal.php (medallion_render_image_modal_shell()); the
 * open/close behavior is assets/js/image-modal.js. Enqueue is gated by
 * medallion_uses_image_modal() in functions.php.
 */

.cards-simple-modal[hidden] {
	display: none;
}

.cards-simple-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
}

.cards-simple-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
}

.cards-simple-modal-dialog {
	position: relative;
	z-index: 1;
	max-width: 90vw;
	max-height: 90vh;
	display: flex;
}

.cards-simple-modal-img {
	display: block;
	max-width: 90vw;
	max-height: 90vh;
	width: auto;
	height: auto;
	margin: 0 auto;
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5);
}

.cards-simple-modal-close {
	position: absolute;
	top: -1.25rem;
	right: -1.25rem;
	background: black;
	border: 2px solid white;
	padding: 0.5rem;
	margin: 0;
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
  border-radius: 99rem;
}

.cards-simple-modal-close:hover,
.cards-simple-modal-close:focus-visible {
	background-color: var(--goldHex);
  color: black;
  border-color: black;
}

.cards-simple-modal-close:focus-visible {
	outline: 2px solid var(--goldHex);
	outline-offset: 2px;
}

body.cards-simple-modal-open {
	overflow: hidden;
}