/**
 * Farm Gallery widget styles (additions on top of animal_grid.css).
 *
 * Purpose: Wide landscape card (galeri-kandang.html L229 grid-column: span 2 + 16:9 image) and the
 *          image lightbox dialog (PRD addition, styled with design tokens — DEVIATION F-13).
 * Dependencies: inc/elementor/widgets/animal_grid/animal_grid.css, assets/css/base.css.
 * Consumers: Widget acfarm_gallery.
 * Since: 0.1.0 Initial introduction; see CHANGELOG.md.
 */

.acfarm_animal_card_wide {
	grid-column: span 2;
}

.acfarm_gallery_zoom {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: zoom-in;
}

.acfarm_gallery_zoom:focus-visible {
	outline-offset: -4px;
}

.acfarm_lightbox {
	border: 0;
	padding: 0;
	max-width: min(92vw, 1100px);
	max-height: 92vh;
	background: transparent;
	overflow: visible;
	margin: auto;
}

.acfarm_lightbox::backdrop {
	background: rgba(44, 37, 33, 0.85);
}

.acfarm_lightbox_image {
	display: block;
	max-width: min(92vw, 1100px);
	max-height: 86vh;
	width: auto;
	height: auto;
	border-radius: var(--acfarm_radius_card);
	box-shadow: var(--acfarm_shadow_lg);
	object-fit: contain;
}

.acfarm_lightbox_close,
.acfarm_lightbox_nav {
	position: absolute;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--acfarm_color_paper);
	color: var(--acfarm_color_coffee);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--acfarm_shadow);
	font-size: 18px;
	z-index: 2;
}

.acfarm_lightbox_close { top: -14px; right: -14px; }
.acfarm_lightbox_prev { left: -22px; top: 50%; transform: translateY(-50%); }
.acfarm_lightbox_next { right: -22px; top: 50%; transform: translateY(-50%); }

.acfarm_lightbox_close svg,
.acfarm_lightbox_nav svg { width: 18px; height: 18px; fill: currentColor; }

@media (max-width: 560px) {
	.acfarm_lightbox_close { top: 8px; right: 8px; }
	.acfarm_lightbox_prev { left: 8px; }
	.acfarm_lightbox_next { right: 8px; }
}