/* --- 1. Custom Properties --- */

.kw-ap-wrapper {
	--kwl-ap-bg: var(--kwl-bg, #ffffff);
	--kwl-ap-border: var(--kwl-border, #e2e8f0);
	--kwl-ap-radius: var(--kwl-radius-md, 8px);
	--kwl-ap-padding: var(--kwl-space-lg, 1.5rem);
	--kwl-ap-name-color: var(--kwl-text, #1a202c);
	--kwl-ap-bio-color: var(--kwl-text-muted, #718096);
	--kwl-ap-gold: var(--kwl-accent, #BD9B5C);
	--kwl-ap-tile-size: 120px;
	--kwl-ap-tile-radius: 6px;
	--kwl-ap-tile-gap: 12px;
	--kwl-ap-easing: var(--kwl-ease-default);
}

.kw-ap-wrapper[data-kwl-card] {
	--kwl-card-bg: var(--kwl-ap-bg);
}

/* --- 2. Base --- */

.kw-ap-wrapper {
	font-family: var(--kwl-font-body);
	padding: var(--kwl-ap-padding);
	box-sizing: border-box;
	position: relative;
}

.kw-ap-headline {
	display: block;
	font-family: var(--kwl-font-heading);
	font-size: var(--kwl-fsize-small, 0.875rem);
	text-transform: uppercase;
	letter-spacing: var(--kwl-ls-broad);
	color: var(--kwl-text-muted, #718096);
	margin: 0 0 var(--kwl-space-md, 1rem) 0;
	padding-bottom: var(--kwl-space-sm, 0.5rem);
	line-height: var(--kwl-lh-body, 1.5);
	font-weight: var(--kwl-fw-semibold);
}

/* --- 3. Kachel-Grid --- */

.kw-ap-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--kwl-ap-tile-size), 1fr));
	gap: var(--kwl-ap-tile-gap);
	justify-items: center;
}

/* --- 4. Tile (Button) --- */

.kw-ap-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--kwl-space-xs, 0.25rem);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	min-height: 44px;
	min-width: 44px;
	appearance: none;
	-webkit-appearance: none;
	color: var(--kwl-ap-name-color);
	font: inherit;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	width: 100%;
}

.kw-ap-tile-portrait {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--kwl-ap-tile-radius);
	border: 2px solid transparent;
	transition: border-color 300ms var(--kwl-ap-easing),
	            box-shadow 300ms var(--kwl-ap-easing);
	box-shadow: var(--kwl-shadow-sm);
}

.kw-ap-tile-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 400ms var(--kwl-ap-easing);
}

.kw-ap-tile-label {
	font-family: var(--kwl-font-heading);
	font-size: var(--kwl-fsize-caption, 0.75rem);
	font-weight: var(--kwl-fw-semibold);
	color: var(--kwl-ap-name-color);
	line-height: var(--kwl-lh-snug, 1.3);
	text-align: center;
	display: block;
	max-width: 100%;
	overflow-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
	padding-top: 2px;
}

.kw-ap-tile-placeholder {
	background: color-mix(in srgb, var(--kwl-ap-border) 40%, var(--kwl-ap-bg));
	display: flex;
	align-items: center;
	justify-content: center;
	color: color-mix(in srgb, var(--kwl-text-muted, #718096) 40%, transparent);
}

/* --- 5. Tile Hover/Active (Desktop) --- */

@media (hover: hover) {
	.kw-ap-tile:hover .kw-ap-tile-portrait {
		border-color: var(--kwl-ap-gold);
		box-shadow: var(--kwl-shadow-lg);
	}

	.kw-ap-tile:hover .kw-ap-tile-img {
		transform: scale(1.04);
	}

	.kw-ap-tile:hover .kw-ap-tile-label {
		color: var(--kwl-ap-gold);
	}
}

.kw-ap-tile:active .kw-ap-tile-img {
	transform: scale(0.97);
}

/* --- 6. Focus Visible --- */

.kw-ap-tile:focus-visible .kw-ap-tile-portrait {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
	border-color: var(--kwl-ap-gold);
}

.kw-ap-tile:focus:not(:focus-visible) {
	outline: none;
}

/* =========================================================
   7. Dialog (Profil-Detail)
   Kein Inner-Wrapper — Header + Slides direkt im <dialog>.
   Dialog selbst ist der Scroll-Container.
   ========================================================= */

dialog.kw-ap-dialog {
	border: none;
	border-radius: var(--kwl-radius-md, 8px);
	padding: 0;
	max-width: min(640px, calc(100vw - 2rem));
	max-height: min(85vh, 800px);
	width: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--kwl-bg, #ffffff);
	color: var(--kwl-text, #1a202c);
	box-shadow: var(--kwl-shadow-lg);
	color-scheme: light dark;
}

dialog.kw-ap-dialog::backdrop {
	background: color-mix(in srgb, var(--kwl-primary, #00315d) 60%, transparent);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

dialog.kw-ap-dialog[open] {
	animation: kw-ap-dialog-in 300ms var(--kwl-ease-entrance, ease-out);
}

@keyframes kw-ap-dialog-in {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.97);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* --- Dialog Header --- */

dialog.kw-ap-dialog .kw-ap-dialog-header {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--kwl-space-xs, 0.25rem);
	padding: var(--kwl-space-sm, 0.5rem) var(--kwl-space-md, 1rem);
	background: color-mix(in srgb, var(--kwl-bg, #ffffff) 92%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--kwl-border, #e2e8f0);
}

/* --- Dialog Navigation --- */

dialog.kw-ap-dialog .kw-ap-dialog-nav {
	display: flex;
	align-items: center;
	gap: var(--kwl-space-xs, 0.25rem);
	margin-right: auto;
}

dialog.kw-ap-dialog .kw-ap-dialog-prev,
dialog.kw-ap-dialog .kw-ap-dialog-next {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 1px solid var(--kwl-border, #e2e8f0);
	border-radius: var(--kwl-radius-sm, 4px);
	cursor: pointer;
	color: var(--kwl-text-muted, #718096);
	transition: color 200ms, border-color 200ms, background 200ms;
	appearance: none;
	-webkit-appearance: none;
	padding: 0;
}

dialog.kw-ap-dialog .kw-ap-dialog-prev:disabled,
dialog.kw-ap-dialog .kw-ap-dialog-next:disabled {
	opacity: 0.35;
	cursor: default;
}

@media (hover: hover) {
	dialog.kw-ap-dialog .kw-ap-dialog-prev:not(:disabled):hover,
	dialog.kw-ap-dialog .kw-ap-dialog-next:not(:disabled):hover {
		color: var(--kwl-text, #1a202c);
		border-color: var(--kwl-accent, #BD9B5C);
		background: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 8%, transparent);
	}
}

dialog.kw-ap-dialog .kw-ap-dialog-counter {
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-caption, 0.75rem);
	font-variant-numeric: tabular-nums;
	color: var(--kwl-text-muted, #718096);
	min-width: 4ch;
	text-align: center;
}

/* --- Dialog Close --- */

dialog.kw-ap-dialog .kw-ap-dialog-close {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 1px solid var(--kwl-border, #e2e8f0);
	border-radius: var(--kwl-radius-sm, 4px);
	cursor: pointer;
	color: var(--kwl-text-muted, #718096);
	transition: color 200ms, border-color 200ms;
	appearance: none;
	-webkit-appearance: none;
	padding: 0;
}

@media (hover: hover) {
	dialog.kw-ap-dialog .kw-ap-dialog-close:hover {
		color: var(--kwl-text, #1a202c);
		border-color: var(--kwl-text-muted, #718096);
	}
}

/* --- Dialog Focus --- */

dialog.kw-ap-dialog .kw-ap-dialog-close:focus-visible,
dialog.kw-ap-dialog .kw-ap-dialog-prev:focus-visible,
dialog.kw-ap-dialog .kw-ap-dialog-next:focus-visible,
dialog.kw-ap-dialog .kw-ap-artwork-trigger:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

/* --- 8. Slides --- */

dialog.kw-ap-dialog .kw-ap-dialog-slide[hidden] {
	display: none;
}

/* --- Slide Body: Portrait + Content --- */

dialog.kw-ap-dialog .kw-ap-dialog-body {
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-lg, 1.5rem);
	padding: var(--kwl-space-lg, 1.5rem);
}

dialog.kw-ap-dialog .kw-ap-dialog-portrait {
	flex-shrink: 0;
	align-self: center;
	max-width: 200px;
	width: 100%;
}

dialog.kw-ap-dialog .kw-ap-dialog-portrait-img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	border-radius: var(--kwl-radius-md, 8px);
}

dialog.kw-ap-dialog .kw-ap-dialog-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-sm, 0.5rem);
}

/* --- Dialog Title (im Header) --- */

dialog.kw-ap-dialog .kw-ap-dialog-title {
	flex: 1;
	min-width: 0;
	font-family: var(--kwl-font-heading);
	font-size: var(--kwl-fsize-h3, 1.25rem);
	font-weight: var(--kwl-fw-semibold);
	line-height: var(--kwl-lh-heading, 1.2);
	color: var(--kwl-ap-name-color);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
	padding: 0 var(--kwl-space-sm, 0.5rem);
}

dialog.kw-ap-dialog .kw-ap-dialog-bio {
	font-size: var(--kwl-fsize-small, 0.875rem);
	line-height: var(--kwl-lh-prose, 1.65);
	color: var(--kwl-ap-bio-color);
}

dialog.kw-ap-dialog .kw-ap-dialog-bio a {
	color: var(--kwl-accent, #BD9B5C);
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (hover: hover) {
	dialog.kw-ap-dialog .kw-ap-dialog-bio a:hover {
		color: var(--kwl-primary, #00315d);
	}
}

dialog.kw-ap-dialog .kw-ap-dialog-bio a:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

dialog.kw-ap-dialog a[target="_blank"]::after {
	content: " ↗";
	font-size: 0.75em;
}

/* --- Shared Button Bridge --- */

dialog.kw-ap-dialog [data-kwl-btn] {
	--kwl-btn-radius: var(--kwl-radius-sm, 4px);
	align-self: flex-start;
	margin-top: var(--kwl-space-xs, 0.25rem);
}

/* --- 9. Artwork Grid (innerhalb Dialog) --- */

.kw-ap-artworks {
	margin: var(--kwl-space-sm, 0.5rem) 0;
	padding-top: var(--kwl-space-sm, 0.5rem);
	border-top: 1px solid color-mix(in srgb, var(--kwl-border, #e2e8f0) 50%, transparent);
}

.kw-ap-artwork-label {
	display: block;
	font-family: var(--kwl-font-heading);
	font-size: var(--kwl-fsize-small, 0.875rem);
	font-weight: var(--kwl-fw-semibold);
	color: var(--kwl-ap-name-color);
	margin: 0 0 var(--kwl-space-xs, 0.25rem) 0;
	line-height: var(--kwl-lh-heading, 1.2);
}

.kw-ap-artwork-grid {
	display: grid;
	grid-template-columns: repeat(var(--kwl-ap-artwork-cols, 3), 1fr);
	gap: var(--kwl-space-xs, 0.25rem);
}

.kw-ap-artwork-figure {
	margin: 0;
	overflow: hidden;
	border-radius: var(--kwl-radius-sm, 4px);
	aspect-ratio: 1;
}

.kw-ap-artwork-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 400ms var(--kwl-ap-easing);
}

@media (hover: hover) {
	.kw-ap-artwork-figure:hover .kw-ap-artwork-img {
		transform: scale(1.06);
	}
}

.kw-ap-artwork-desc {
	font-size: var(--kwl-fsize-caption, 0.75rem);
	line-height: var(--kwl-lh-body, 1.6);
	color: var(--kwl-ap-bio-color);
	margin: var(--kwl-space-xs, 0.25rem) 0 0;
	font-style: italic;
}

.kw-ap-artwork-trigger {
	display: block;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	color: var(--kwl-text, #1a202c);
}

.kw-ap-artwork-trigger:active {
	opacity: 0.8;
}

/* --- 10. Slide-Transition --- */

dialog.kw-ap-dialog .kw-ap-dialog-slide:not([hidden]) {
	animation: kw-ap-slide-in 250ms var(--kwl-ease-entrance, ease-out);
}

@keyframes kw-ap-slide-in {
	from {
		opacity: 0;
		transform: translateX(12px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* --- 11. Dark Mode --- */

@media (prefers-color-scheme: dark) {
	.kw-ap-wrapper {
		--kwl-ap-bg: var(--kwl-bg, #1a202c);
		--kwl-ap-border: var(--kwl-border, #4a5568);
		--kwl-ap-name-color: var(--kwl-text, #f7fafc);
		--kwl-ap-bio-color: var(--kwl-text-muted, #a0aec0);
	}

	.kw-ap-tile-placeholder {
		background: color-mix(in srgb, var(--kwl-ap-border) 20%, var(--kwl-ap-bg));
	}

	dialog.kw-ap-dialog {
		background: var(--kwl-bg, #1a202c);
		color: var(--kwl-text, #f7fafc);
		box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
	}

	dialog.kw-ap-dialog::backdrop {
		background: rgba(0, 0, 0, 0.7);
	}

	dialog.kw-ap-dialog .kw-ap-dialog-header {
		background: color-mix(in srgb, var(--kwl-bg, #1a202c) 92%, transparent);
		border-bottom-color: var(--kwl-border, #4a5568);
	}

	dialog.kw-ap-dialog .kw-ap-dialog-prev,
	dialog.kw-ap-dialog .kw-ap-dialog-next,
	dialog.kw-ap-dialog .kw-ap-dialog-close {
		border-color: var(--kwl-border, #4a5568);
		color: var(--kwl-text-muted, #a0aec0);
	}

	@media (hover: hover) {
		dialog.kw-ap-dialog .kw-ap-dialog-prev:not(:disabled):hover,
		dialog.kw-ap-dialog .kw-ap-dialog-next:not(:disabled):hover,
		dialog.kw-ap-dialog .kw-ap-dialog-close:hover {
			color: var(--kwl-text, #f7fafc);
		}
	}

	@media (hover: hover) {
		dialog.kw-ap-dialog .kw-ap-dialog-bio a:hover {
			color: var(--kwl-primary, #63b3ed);
		}
	}

	.kw-ap-artworks {
		border-top-color: rgba(255, 255, 255, 0.08);
	}

	.kw-ap-tile:focus-visible .kw-ap-tile-portrait,
	dialog.kw-ap-dialog .kw-ap-dialog-close:focus-visible,
	dialog.kw-ap-dialog .kw-ap-dialog-prev:focus-visible,
	dialog.kw-ap-dialog .kw-ap-dialog-next:focus-visible,
	dialog.kw-ap-dialog .kw-ap-artwork-trigger:focus-visible {
		outline-color: var(--kwl-focus, #c9a84c);
	}
}

/* --- 12. Reduced Motion --- */

@media (prefers-reduced-motion: reduce) {
	.kw-ap-tile-img,
	.kw-ap-tile-portrait,
	.kw-ap-artwork-img {
		transition: none;
	}

	dialog.kw-ap-dialog .kw-ap-dialog-prev,
	dialog.kw-ap-dialog .kw-ap-dialog-next,
	dialog.kw-ap-dialog .kw-ap-dialog-close {
		transition: none;
	}

	dialog.kw-ap-dialog[open] {
		animation: none;
	}

	dialog.kw-ap-dialog .kw-ap-dialog-slide:not([hidden]) {
		animation: none;
	}

	@media (hover: hover) {
		.kw-ap-tile:hover .kw-ap-tile-img,
		.kw-ap-artwork-figure:hover .kw-ap-artwork-img {
			transform: none;
		}
	}
}

/* --- 13. Responsive --- */

@media (min-width: 481px) {
	.kw-ap-wrapper {
		--kwl-ap-padding: var(--kwl-space-xl, 2rem);
	}

	dialog.kw-ap-dialog .kw-ap-dialog-body {
		flex-direction: row;
		align-items: flex-start;
	}

	dialog.kw-ap-dialog .kw-ap-dialog-portrait {
		width: 200px;
		align-self: flex-start;
	}
}


/* =========================================================
   15. V4 Reset — :hover + :active + :focus PFLICHT
   ========================================================= */

.elementor-widget .kw-ap-wrapper .kw-ap-tile {
	background: none;
}

.elementor-widget .kw-ap-wrapper .kw-ap-tile:hover,
.elementor-widget .kw-ap-wrapper .kw-ap-tile:active,
.elementor-widget .kw-ap-wrapper .kw-ap-tile:focus {
	color: var(--kwl-ap-name-color);
	background: none;
}

.elementor-widget .kw-ap-wrapper .kw-ap-tile .kw-ap-tile-label {
	color: var(--kwl-ap-name-color);
	background: none;
}

@media (hover: hover) {
	.elementor-widget .kw-ap-wrapper .kw-ap-tile:hover .kw-ap-tile-label {
		color: var(--kwl-ap-gold);
	}
}

dialog.kw-ap-dialog .kw-ap-dialog-close:hover,
dialog.kw-ap-dialog .kw-ap-dialog-close:active,
dialog.kw-ap-dialog .kw-ap-dialog-close:focus {
	color: var(--kwl-text-muted, #718096);
	background: none;
}

dialog.kw-ap-dialog .kw-ap-dialog-prev:hover,
dialog.kw-ap-dialog .kw-ap-dialog-prev:active,
dialog.kw-ap-dialog .kw-ap-dialog-prev:focus,
dialog.kw-ap-dialog .kw-ap-dialog-next:hover,
dialog.kw-ap-dialog .kw-ap-dialog-next:active,
dialog.kw-ap-dialog .kw-ap-dialog-next:focus {
	color: var(--kwl-text-muted, #718096);
	background: none;
}

dialog.kw-ap-dialog .kw-ap-dialog-link:hover,
dialog.kw-ap-dialog .kw-ap-dialog-link:active,
dialog.kw-ap-dialog .kw-ap-dialog-link:focus {
	color: var(--kwl-btn-text, #ffffff);
}

dialog.kw-ap-dialog .kw-ap-dialog-bio a:active,
dialog.kw-ap-dialog .kw-ap-dialog-bio a:focus {
	color: var(--kwl-accent, #BD9B5C);
}

dialog.kw-ap-dialog .kw-ap-artwork-trigger:hover,
dialog.kw-ap-dialog .kw-ap-artwork-trigger:active,
dialog.kw-ap-dialog .kw-ap-artwork-trigger:focus {
	color: var(--kwl-text, #1a202c);
	background: transparent;
}