/* ==========================================================================
   Card image zoom — trigger button + shared full-screen lightbox.
   Used on product/puppy listing cards (loop-product.php, and loop-pet.php via
   partial-petdetail-gallery.php). The #cardLightbox modal markup is printed
   once in wp_footer; behaviour lives in js/card-lightbox.js.
   ========================================================================== */

/* --- Zoom trigger button on each card image --------------------------------
   The button sits inside a Bootstrap .ratio container, whose `.ratio > *` rule
   force-stretches direct children to fill the box. The wrapper overrides that
   with !important so the control sits in a corner instead. */
.card-zoom-wrap {
	position: absolute !important;
	width: auto !important;
	height: auto !important;
	top: auto !important;
	left: auto !important;
	z-index: 5; /* above stretched-link (1), carousel controls (2), deposit btn (2) */
	pointer-events: none; /* only the button itself is clickable */
}
.card-zoom-wrap.pos-br { bottom: 12px !important; right: 12px !important; }
.card-zoom-wrap.pos-tr { top: 12px !important; right: 12px !important; }

.card-zoom-trigger {
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.45 );
	color: #fff;
	cursor: pointer;
	-webkit-backdrop-filter: blur( 2px );
	backdrop-filter: blur( 2px );
	transition: background 0.2s ease, transform 0.2s ease;
}
.card-zoom-trigger:hover,
.card-zoom-trigger:focus-visible {
	background: rgba( 0, 0, 0, 0.7 );
	color: #fff;
	transform: scale( 1.08 );
	outline: none;
}
.card-zoom-trigger svg { width: 18px; height: 18px; display: block; }

/* Desktop (hover-capable): reveal on card hover / keyboard focus only. */
@media ( hover: hover ) {
	.card-zoom-wrap { opacity: 0; transition: opacity 0.2s ease; }
	.card:hover .card-zoom-wrap,
	.card-zoom-trigger:focus-visible { opacity: 1; }
}
/* Touch (no hover): always visible so it's discoverable and tappable. */
@media ( hover: none ) {
	.card-zoom-wrap { opacity: 1; }
}

/* --- Shared full-screen lightbox modal -------------------------------------
   Re-scoped copy of the per-product lightbox styling. */
#cardLightbox .modal-content { background: #000 !important; border: none; }
#cardLightbox .modal-body { min-height: 100vh; padding: 60px 80px !important; }
#cardLightbox-img {
	max-width: calc( 100vw - 200px );
	max-height: calc( 100vh - 120px );
	width: auto;
	height: auto;
	object-fit: contain;
	transition: opacity 0.3s ease;
}
#cardLightbox .lightbox-nav-btn {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.1 );
	border: none;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	transition: all 0.3s ease;
	cursor: pointer;
}
#cardLightbox .lightbox-nav-btn:hover { background: rgba( 255, 255, 255, 0.2 ); transform: translateY( -50% ) scale( 1.1 ); }
#cardLightbox .lightbox-nav-btn svg { width: 28px; height: 28px; }
#cardLightbox .lightbox-nav-btn.prev { left: 20px; }
#cardLightbox .lightbox-nav-btn.next { right: 20px; }
#cardLightbox .lightbox-close-btn {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.1 );
	border: none;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1001;
	transition: all 0.3s ease;
	cursor: pointer;
	padding: 0;
}
#cardLightbox .lightbox-close-btn:hover { background: rgba( 255, 255, 255, 0.2 ); transform: scale( 1.1 ); }
#cardLightbox .lightbox-close-btn svg { width: 24px; height: 24px; }
#cardLightbox .lightbox-counter {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX( -50% );
	color: rgba( 255, 255, 255, 0.8 );
	font-size: 14px;
	background: rgba( 0, 0, 0, 0.5 );
	padding: 8px 16px;
	border-radius: 20px;
	z-index: 1000;
}
@media ( max-width: 768px ) {
	#cardLightbox .modal-body { padding: 40px 10px !important; }
	#cardLightbox-img { max-width: 100vw; width: 100%; max-height: calc( 100vh - 100px ); object-fit: contain; }
	#cardLightbox .lightbox-nav-btn { width: 44px; height: 44px; }
	#cardLightbox .lightbox-nav-btn svg { width: 22px; height: 22px; }
	#cardLightbox .lightbox-nav-btn.prev { left: 10px; }
	#cardLightbox .lightbox-nav-btn.next { right: 10px; }
	#cardLightbox .lightbox-close-btn { top: 10px; right: 10px; width: 36px; height: 36px; }
	#cardLightbox .lightbox-close-btn svg { width: 20px; height: 20px; }
	#cardLightbox .lightbox-counter { bottom: 10px; font-size: 12px; padding: 6px 12px; }
}