/**
 * King-Media: preview-popup voor projecten (zie assets/js/project-preview.js).
 *
 * Niet schermvullend: rondom wat ruimte, zodat duidelijk is dat je nog op King-Media bent.
 */

html.km-preview-open {
	overflow: hidden;
}

.km-preview {
	position: fixed;
	inset: clamp(0.5rem, 0.25rem + 2vw, 2rem);
	width: auto;
	height: auto;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--xl);
	background: var(--wp--preset--color--surface-0);
	color: var(--wp--preset--color--ink-900);
	box-shadow: 0 24px 80px rgb(0 20 60 / 0.35);
	overflow: hidden;
}

.km-preview[open] {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
}

.km-preview::backdrop {
	background: rgb(10 20 40 / 0.6);
	backdrop-filter: blur(4px);
}

.km-preview p {
	margin: 0;
}

.km-preview svg {
	display: block;
	width: 1.125rem;
	height: 1.125rem;
	fill: currentColor;
}

/* Balk */
.km-preview__bar {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--line-subtle);
}

.km-preview__info {
	display: flex;
	flex: 1;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	min-width: 0;
}

.km-preview__dots {
	display: flex;
	gap: 0.375rem;
}

.km-preview__dots i {
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	background: var(--wp--preset--color--line-strong);
}

.km-preview__title {
	overflow: hidden;
	font-weight: 600;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.km-preview__host {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--ink-600);
}

.km-preview__devices {
	display: flex;
	gap: 0.25rem;
	padding: 0.25rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--brand-50);
}

.km-preview__devices button {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.875rem;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: none;
	color: var(--wp--preset--color--ink-700);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	cursor: pointer;
}

.km-preview__devices [aria-pressed="true"] {
	background: var(--wp--preset--color--surface-0);
	color: var(--wp--preset--color--brand-600);
	box-shadow: 0 1px 3px rgb(0 20 60 / 0.12);
}

.km-preview__actions {
	display: flex;
	flex: 1;
	justify-content: flex-end;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

/* Knoppen: markup en stijl van het Knop-blok (huisstijl, hover), alleen compacter. */
.km-preview .wp-block-button__link {
	padding: 0.5rem 1rem;
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
	cursor: pointer;
}

/* Outline: de stijlen van een variant hangen in WP 7.1 aan een klasse per blok (is-style-outline--3),
   dus hier dezelfde waarden als in theme.json. De vul-animatie komt uit assets/css/blocks/core-button.css. */
.km-preview .is-style-outline .wp-block-button__link {
	padding: calc(0.5rem - 2px) calc(1rem - 2px); /* rand van 2px meegerekend: even hoog als primair */
	border: 2px solid var(--wp--preset--color--brand-600);
	background-color: transparent;
	color: var(--wp--preset--color--brand-600);
}

.km-preview .is-style-outline .wp-block-button__link:is(:hover, :active) {
	color: var(--wp--preset--color--surface-0);
}

.km-preview__icon {
	display: inline-grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--wp--preset--color--line-subtle);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--surface-0);
	color: var(--wp--preset--color--ink-900);
	cursor: pointer;
	transition: border-color 0.15s ease-out, color 0.15s ease-out;
}

.km-preview__icon:hover {
	border-color: var(--wp--preset--color--brand-600);
	color: var(--wp--preset--color--brand-600);
}

/* Weergave */
.km-preview__stage {
	position: relative;
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--brand-50);
	overflow: hidden;
}

.km-preview__frame {
	position: relative;
	width: 100%;
	height: 100%;
	background: var(--wp--preset--color--surface-0);
}

.km-preview__stage.is-mobile .km-preview__frame {
	width: min(390px, 100% - 2rem);
	height: min(844px, 100% - 2rem);
	border: 10px solid var(--wp--preset--color--ink-900);
	border-radius: 2.25rem;
	box-shadow: 0 16px 48px rgb(0 20 60 / 0.25);
	overflow: hidden;
}

.km-preview iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	opacity: 0;
}

.km-preview__stage.is-loaded iframe {
	opacity: 1;
}

.km-preview__loader {
	position: absolute;
	inset: 50% auto auto 50%;
	width: 2.5rem;
	height: 2.5rem;
	margin: -1.25rem 0 0 -1.25rem;
	border: 3px solid var(--wp--preset--color--brand-100);
	border-top-color: var(--wp--preset--color--brand-600);
	border-radius: 50%;
}

.km-preview__stage.is-loaded .km-preview__loader {
	display: none;
}

/* CTA-melding */
.km-preview__toast {
	position: absolute;
	right: var(--wp--preset--spacing--40);
	bottom: var(--wp--preset--spacing--40);
	display: grid;
	gap: var(--wp--preset--spacing--40);
	width: min(24rem, 100% - 2rem);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60) var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--line-subtle);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--surface-0);
	box-shadow: 0 16px 48px rgb(0 20 60 / 0.22);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-700);
	visibility: hidden;
	opacity: 0;
}

.km-preview__toast.is-visible {
	visibility: visible;
	opacity: 1;
}

.km-preview__person {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
}

.km-preview__person img {
	flex: none;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 3px var(--wp--preset--color--brand-50);
}

.km-preview__toast-title {
	font-weight: 600;
	color: var(--wp--preset--color--ink-900);
}

.km-preview__toast-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.km-preview__toast-close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	background: none;
	color: var(--wp--preset--color--ink-600);
	cursor: pointer;
}

.km-preview__toast-close:hover {
	color: var(--wp--preset--color--ink-900);
}

.km-preview__toast-close svg {
	width: 1rem;
	height: 1rem;
}

/* Kleinere schermen: geen weergaveknoppen (je bent al mobiel), compacte balk */
@media (width <= 900px) {
	.km-preview__devices,
	.km-preview__dots,
	.km-preview__cta-intro {
		display: none;
	}
}

@media (width <= 600px) {
	.km-preview__bar {
		gap: var(--wp--preset--spacing--20);
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	}
	.km-preview__toast {
		right: var(--wp--preset--spacing--20);
		bottom: var(--wp--preset--spacing--20);
		width: calc(100% - 1rem);
	}
}

/* Beweging */
@keyframes km-preview-in {
	from {
		opacity: 0;
		transform: translateY(1rem) scale(0.98);
	}
}

@keyframes km-preview-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.km-preview[open] {
		animation: km-preview-in 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
	}
	.km-preview__loader {
		animation: km-preview-spin 0.8s linear infinite;
	}
	.km-preview iframe {
		transition: opacity 0.3s ease-out;
	}
	.km-preview__frame {
		transition: width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), height 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), border-radius 0.35s ease-out;
	}
	.km-preview__toast {
		transform: translateY(1rem);
		transition: opacity 0.3s ease-out, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0.3s;
	}
	.km-preview__toast.is-visible {
		transform: none;
	}
}