/**
 * KAWAI USP Blocks — shared lightbox styles.
 *
 * All theming flows through CSS custom properties on .kwusp-lightbox so the
 * host theme can override colors without touching this file.
 */

.kwusp-lightbox {
	--kwusp-lightbox-bg: rgba(8, 10, 14, 0.92);
	--kwusp-lightbox-fg: #f5f5f5;
	--kwusp-lightbox-muted: rgba(245, 245, 245, 0.7);
	--kwusp-lightbox-accent: #d62828;
	--kwusp-lightbox-control-bg: rgba(245, 245, 245, 0.08);
	--kwusp-lightbox-control-bg-hover: rgba(245, 245, 245, 0.18);
	--kwusp-lightbox-radius: 0.5rem;
	--kwusp-lightbox-transition: 200ms ease;
	--kwusp-lightbox-max-width: min(96vw, 1200px);
	--kwusp-lightbox-max-height: min(92vh, 900px);

	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--kwusp-lightbox-fg);
	font-family: inherit;
	box-sizing: border-box;
}

.kwusp-lightbox[hidden] {
	display: none;
}

.kwusp-lightbox *,
.kwusp-lightbox *::before,
.kwusp-lightbox *::after {
	box-sizing: inherit;
}

.kwusp-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: var(--kwusp-lightbox-bg);
	cursor: pointer;
}

.kwusp-lightbox__dialog {
	position: relative;
	max-width: var(--kwusp-lightbox-max-width);
	max-height: var(--kwusp-lightbox-max-height);
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1rem 1.25rem 1.25rem;
	background: rgba(20, 22, 26, 0.92);
	border-radius: var(--kwusp-lightbox-radius);
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
	outline: none;
}

.kwusp-lightbox__dialog:focus-visible {
	outline: 2px solid var(--kwusp-lightbox-accent);
	outline-offset: 2px;
}

.kwusp-lightbox__header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-height: 1.75rem;
}

.kwusp-lightbox__title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kwusp-lightbox__title[hidden] {
	display: none;
}

.kwusp-lightbox__counter {
	font-size: 0.8rem;
	color: var(--kwusp-lightbox-muted);
	flex: 0 0 auto;
}

.kwusp-lightbox__close {
	flex: 0 0 auto;
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	background: var(--kwusp-lightbox-control-bg);
	color: inherit;
	border-radius: 999px;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background var(--kwusp-lightbox-transition);
}

.kwusp-lightbox__close:hover,
.kwusp-lightbox__close:focus-visible {
	background: var(--kwusp-lightbox-control-bg-hover);
	outline: none;
}

.kwusp-lightbox__stage {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	min-width: 0;
}

.kwusp-lightbox__image,
.kwusp-lightbox__video {
	max-width: 100%;
	max-height: calc(var(--kwusp-lightbox-max-height) - 6rem);
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
	border-radius: calc(var(--kwusp-lightbox-radius) * 0.75);
	background: #000;
}

.kwusp-lightbox__audio-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 0;
	width: 100%;
}

.kwusp-lightbox__audio-poster {
	max-width: min(420px, 100%);
	max-height: 50vh;
	border-radius: calc(var(--kwusp-lightbox-radius) * 0.75);
}

.kwusp-lightbox__audio {
	width: 100%;
	max-width: 480px;
}

.kwusp-lightbox__caption {
	font-size: 0.9rem;
	color: var(--kwusp-lightbox-muted);
	text-align: center;
}

.kwusp-lightbox__caption[hidden] {
	display: none;
}

.kwusp-lightbox__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	pointer-events: none;
	position: absolute;
	inset: 0;
	padding: 0 0.5rem;
}

.kwusp-lightbox__nav-btn {
	pointer-events: auto;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	border: 0;
	background: var(--kwusp-lightbox-control-bg);
	color: inherit;
	font-size: 1.25rem;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background var(--kwusp-lightbox-transition), opacity var(--kwusp-lightbox-transition);
}

.kwusp-lightbox__nav-btn[hidden] {
	display: none;
}

.kwusp-lightbox__nav-btn:hover,
.kwusp-lightbox__nav-btn:focus-visible {
	background: var(--kwusp-lightbox-control-bg-hover);
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.kwusp-lightbox,
	.kwusp-lightbox__close,
	.kwusp-lightbox__nav-btn {
		transition: none;
	}
}

/* KAWAI reference lightbox treatment: blurred active media behind the focused item. */
.kwusp-lightbox {
	--kwusp-lightbox-bg: rgba(0, 0, 0, 0.88);
	--kwusp-lightbox-radius: 0.35rem;
}

.kwusp-lightbox__backdrop {
	background: rgba(0, 0, 0, 0.88);
	overflow: hidden;
}

.kwusp-lightbox--has-media-backdrop .kwusp-lightbox__backdrop::before {
	content: "";
	position: absolute;
	inset: -3rem;
	background-image: var(--kwusp-lightbox-backdrop-image);
	background-position: center;
	background-size: cover;
	filter: blur(28px) brightness(0.34) saturate(0.95);
	transform: scale(1.08);
	opacity: 0.76;
}

.kwusp-lightbox--has-media-backdrop .kwusp-lightbox__backdrop::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at center, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.78) 72%);
}

.kwusp-lightbox__dialog {
	background: transparent;
	box-shadow: none;
	padding: 2.25rem clamp(1.5rem, 4vw, 4rem) 2rem;
	max-width: min(96vw, 1280px);
}

.kwusp-lightbox__header {
	position: absolute;
	top: 0.6rem;
	right: 0.7rem;
	left: 0.7rem;
	z-index: 3;
}

.kwusp-lightbox__title,
.kwusp-lightbox__counter {
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
}

.kwusp-lightbox__close {
	margin-left: auto;
	background: transparent !important;
	color: rgba(255, 255, 255, 0.7) !important;
	font-size: 1.8rem;
	font-weight: 400;
	transition: color var(--kwusp-lightbox-transition), opacity var(--kwusp-lightbox-transition);
}

.kwusp-lightbox__image,
.kwusp-lightbox__video {
	max-height: min(68vh, 720px);
	box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.55);
	background: transparent;
}

.kwusp-lightbox__caption {
	max-width: min(64rem, 86vw);
	margin-inline: auto;
	font-size: 16px;
	line-height: 26px;
	font-weight: 300;
	color: #fff !important;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

.kwusp-lightbox__nav {
	padding: 0 1rem;
}

.kwusp-lightbox__nav-btn {
	background: transparent;
	font-size: 2rem;
	color: rgba(255, 255, 255, 0.7);
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85);
}

/* #121: original KAWAI controls brighten from 70% to full white on hover.
 * Keep their approved positions and avoid the inherited grey control pill. */
.kwusp-lightbox__close:hover,
.kwusp-lightbox__close:focus-visible,
.kwusp-lightbox__nav-btn:hover,
.kwusp-lightbox__nav-btn:focus-visible {
	background: transparent !important;
	color: #fff !important;
}

/* Reference pass 15: captions are the only textual overlay in the lightbox. */
.kwusp-lightbox__title[hidden] {
	display: none;
}

.kwusp-lightbox__caption {
	margin-top: 1.35rem;
	text-align: center;
}