/* Dónde Jugar Listings — Gallery + lightbox. */

/* Gallery (single-listing detail). */
/* Prefixed with `button` so width:100% outranks hello-elementor's
   [type=button] rule (same specificity as a plain class) — see board.css. */
button.djl-gallery__main {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: #eef1f4;
	cursor: zoom-in;
	border-radius: 8px;
	overflow: hidden;
	/* Uniform frame for the main image regardless of the source aspect ratio,
	   so swapping in a tall/short image never resizes the frame or shifts the
	   thumbs. The image is taken out of flow (absolute) so its intrinsic size
	   can't drag the frame height — the height comes purely from the ratio. */
	aspect-ratio: 4 / 3;
}

.djl-gallery__main .djl-detail__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.djl-gallery__thumbs {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 0.35rem;
	scrollbar-width: thin;
}

.djl-gallery__thumb {
	flex: 0 0 84px;
	width: 84px;
	height: 84px;
	min-width: 84px;
	max-width: 84px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 6px;
	background: none;
	cursor: pointer;
	overflow: hidden;
	scroll-snap-align: start;
}

.djl-gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.djl-gallery__thumb.is-active {
	border-color: var(--djl-accent, #d35400);
}

/* Lightbox overlay. */
body.djl-lightbox-lock {
	overflow: hidden;
}

.djl-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(0, 0, 0, 0.85);
	align-items: center;
	justify-content: center;
	padding: 2rem;
}

.djl-lightbox.is-open {
	display: flex;
}

/* Shrink-wraps to the image's own rendered size (inline-flex sizes to
 * content) so the close/nav buttons — positioned absolutely against THIS
 * frame, not the full-screen overlay — hug the image itself instead of
 * sitting pinned to the screen's corners (Walter, 2026-08-20: "aparecen al
 * límite de la pantalla ... muy separadas" from the image). --djl-lb-gap
 * is the target offset outside the image edge; smaller on narrow viewports
 * (media queries below) so the buttons can't land off-screen. */
.djl-lightbox__frame {
	--djl-lb-gap: 100px;
	position: relative;
	display: inline-flex;
}

.djl-lightbox__img {
	/* Slightly under the frame/overlay's old 92vw/88vh cap so there's
	 * always at least --djl-lb-gap of breathing room around the image for
	 * the offset buttons, even on a viewport that's exactly image-shaped. */
	max-width: 84vw;
	max-height: 78vh;
	display: block;
	object-fit: contain;
	border-radius: 6px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* box-sizing/padding/flex-centering set explicitly (same reasoning as
 * .djl-modal__close in board.css) — this overlay is appended straight to
 * <body>, outside .djl-board/.djl-listing-detail's box-sizing:border-box
 * reset, so without this the theme's own <button> padding was adding onto
 * the explicit width/height at these larger sizes.
 *
 * `button.` prefix (21-Ago-2026 fix, Walter: el botón de cerrar del zoom
 * del flyer "se ve mal" — a small unstyled default button instead of this
 * circle): a bare `.djl-lightbox__close` class ties in specificity with
 * hello-elementor's `[type=button]` reset (both 0,1,0) and loses on load
 * order; `button.djl-lightbox__close` (0,1,1) always wins, same trick
 * already used for .djl-gallery__main/.djl-promo-editor__btn. */
button.djl-lightbox__close {
	position: absolute;
	top: calc(var(--djl-lb-gap) * -1);
	right: calc(var(--djl-lb-gap) * -1);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 7.5rem;
	height: 7.5rem;
	padding: 0;
	font-size: 5.4rem;
	line-height: 1;
	color: #fff;
	background: rgba(0, 0, 0, 0.4);
	border: 0;
	/* !important: hello-elementor's own button:focus outline (the pink/red
	 * ring) ties in specificity with a plain `outline: none` here and can
	 * still win — same fix as .djl-modal__close in board.css. */
	outline: none !important;
	border-radius: 50%;
	cursor: pointer;
}

button.djl-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 9rem;
	height: 9rem;
	padding: 0;
	font-size: 6rem;
	line-height: 1;
	color: #fff;
	background: rgba(0, 0, 0, 0.4);
	border: 0;
	outline: none !important;
	border-radius: 50%;
	cursor: pointer;
}

.djl-lightbox__nav--prev { left: calc(var(--djl-lb-gap) * -1); }
.djl-lightbox__nav--next { right: calc(var(--djl-lb-gap) * -1); }

button.djl-lightbox__close:hover,
button.djl-lightbox__nav:hover {
	background: var(--djl-accent, #d35400);
}

/* Compact close button for single-image lightboxes opened from a small,
 * fixed-size frame — the storefront's promo flyer (Walter, 21-Ago-2026:
 * "aplicar el mismo estilo de boton en modal del detalle de juegos"). The
 * big offset circle above is right for the full-screen /juego/ page
 * lightbox; here it's swapped for .djl-modal__close's own look (board.css)
 * and pinned to the image's own corner instead of floating outside it.
 * Scoped via .djl-lightbox--compact (set in lightbox.js when the opening
 * .djl-gallery has .djl-gallery--flyer) so the standalone page keeps its
 * existing design untouched. */
.djl-lightbox--compact button.djl-lightbox__close {
	top: 0.75rem;
	right: 0.75rem;
	width: 40px;
	height: 40px;
	font-size: 1.5rem;
	color: #748B9C;
	background: #FFFFFF;
	border: 1.5px solid #748B9C;
	border-radius: 6px;
}

.djl-lightbox--compact button.djl-lightbox__close:hover {
	background: #748B9C;
	color: #fff;
}

/* Smaller viewports: --djl-lb-gap alone can't stop the tripled-size buttons
 * from running off-screen once the image is already close to full width, so
 * the gap steps down instead of staying a flat 100px everywhere. */
@media (max-width: 900px) {
	.djl-lightbox__frame {
		--djl-lb-gap: 56px;
	}

	.djl-lightbox__close {
		width: 4.5rem;
		height: 4.5rem;
		font-size: 3rem;
	}

	.djl-lightbox__nav {
		width: 5rem;
		height: 5rem;
		font-size: 3.2rem;
	}
}

@media (max-width: 600px) {
	.djl-lightbox__frame {
		--djl-lb-gap: 12px;
	}
}