/*
 * MK Kataloog — jagatud suurendusvaade (assets/js/lightbox.js).
 *
 * Teema enda <dialog class="mk-lightbox">: suur pilt, nooled, asukoht „3 / 24“
 * ja „Vali see kangas“. Laaditakse igal lehel, kus lightbox.js on järjekorras —
 * tootelehel ja ostukorvi teel (ostukorv, kassa, tellimus saadud, konto).
 *
 * NB: kangaste lehel (/kangad/) ehitab dialoogi plugin ise (assets/kangad.js)
 * ja sellel on oma märgendus (mk-lightbox__prev / __next / __nav) — see elab
 * edasi failis fabrics-page.css.
 */

.mk-lightbox {
	max-width: min(92vw, 1100px);
	max-height: 92vh;
	padding: 0;
	border: 0;
	border-radius: var(--mk-radius);
	background: var(--mk-bg);
	color: var(--mk-ink);
	overflow: hidden;
}

/* NB: display'd tohib anda ainult [open]-olekule — muidu lööks autori
   reegel üle brauseri `dialog:not([open]) { display: none }` reegli. */
.mk-lightbox[open] {
	display: flex;
	flex-direction: column;
}

.mk-lightbox::backdrop {
	background: rgba(0, 0, 0, 0.8);
}

.mk-lightbox__stage {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	min-height: 0;
	background: var(--mk-media-bg);
}

/* Lauaarvutis jääb pilt oma mõõtu (dialoog kahaneb pildi järgi), telefonis
   venib kogu vaateakna laiusele — vt allpool 560 px reegleid. max-height
   jätab ribale ruumi, et see ei kataks kunagi pilti. */
.mk-lightbox .mk-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: calc(92vh - 76px);
	height: auto;
	margin: 0;
	object-fit: contain;
	background: var(--mk-surface);
}

.mk-lightbox__arrow {
	position: absolute;
	top: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	transform: translateY(-50%);
	border: 1px solid var(--mk-line-2);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--mk-ink);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.mk-lightbox__arrow--prev {
	left: 8px;
}

.mk-lightbox__arrow--next {
	right: 8px;
}

.mk-lightbox__arrow:hover {
	border-color: var(--mk-ink);
	background: #fff;
}

.mk-lightbox__arrow[hidden] {
	display: none;
}

.mk-lightbox__bar {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border-top: 1px solid var(--mk-line);
	background: var(--mk-bg);
}

.mk-lightbox__text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 8px;
	min-width: 0;
}

.mk-lightbox__title {
	font-family: var(--mk-font-display);
	font-size: 14px;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.mk-lightbox__pos {
	font-size: var(--mk-fs-meta);
	color: var(--mk-muted);
	font-variant-numeric: tabular-nums;
}

.mk-lightbox__pos[hidden] {
	display: none;
}

.mk-lightbox__actions {
	display: flex;
	flex: none;
	align-items: center;
	gap: 8px;
}

.mk-lightbox__pick[hidden] {
	display: none;
}

.mk-lightbox__close {
	flex: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--mk-line-2);
	border-radius: var(--mk-radius);
	background: var(--mk-bg);
	color: var(--mk-ink);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.mk-lightbox__close:hover {
	border-color: var(--mk-ink);
}

@media (prefers-reduced-motion: no-preference) {
	.mk-lightbox[open] .mk-lightbox__stage {
		animation: mk-lightbox-fade var(--mk-ease, 160ms ease);
	}
}

@keyframes mk-lightbox-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* Telefonis läheb suur vaade üle terve ekraani: pilt keskel, riba all.
   dvh võtab arvesse brauseri kahaneva aadressiriba; vh on varuks. */
@media (max-width: 560px) {
	.mk-lightbox {
		width: 100vw;
		max-width: 100vw;
		height: 100vh;
		height: 100dvh;
		max-height: 100vh;
		max-height: 100dvh;
		margin: 0;
		border-radius: 0;
	}

	.mk-lightbox .mk-lightbox__img {
		width: 100%;
		height: 100%;
		max-height: 100%;
	}

	.mk-lightbox__bar {
		flex-wrap: wrap;
	}

	.mk-lightbox__actions {
		width: 100%;
	}

	.mk-lightbox__pick {
		flex: 1 1 auto;
		height: var(--mk-control-h);
	}
}