/* --- ActivityDetails (#48) — Sidebar Key Facts, Ampel, Kontakt --- */

/* --- Custom Properties --- */

.kw-ad {
	--kwl-ad-bg: var(--kwl-activity-details-bg, var(--kwl-bg-alt, #f7fafc));
	--kwl-ad-border: var(--kwl-activity-details-border, var(--kwl-border, #e2e8f0));
	--kwl-ad-radius: var(--kwl-activity-details-radius, var(--kwl-radius-lg, 12px));
	--kwl-ad-padding: var(--kwl-activity-details-padding, var(--kwl-space-md, 24px));
	background: var(--kwl-ad-bg);
	border: 1px solid var(--kwl-ad-border);
	border-radius: var(--kwl-ad-radius);
	padding: var(--kwl-ad-padding);
}

/* --- Heading --- */

.kw-ad__heading {
	font-family: var(--kwl-font-heading);
	font-size: var(--kwl-fsize-h4, 1.25rem);
	font-weight: var(--kwl-fw-semibold);
	line-height: var(--kwl-lh-heading, 1.2);
	color: var(--kwl-text, #1a202c);
	margin: 0 0 var(--kwl-space-xs, 0.25rem);
}

.kw-ad__heading + [data-kwl-separator] {
	margin-bottom: var(--kwl-space-md, 1rem);
}

/* --- Key Facts --- */

.kw-ad__facts {
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-xs, 8px);
	margin: 0 0 var(--kwl-space-md, 16px);
	padding: 0;
}

.kw-ad__fact {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var(--kwl-space-xs, 8px);
	padding: var(--kwl-space-xs, 8px);
	background: var(--kwl-bg, #ffffff);
	border-radius: var(--kwl-radius-sm, 6px);
	min-height: 44px;
}

.kw-ad__fact-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	vertical-align: middle;
}

.kw-ad__fact-label {
	display: flex;
	align-items: center;
	gap: var(--kwl-space-xs, 8px);
	margin: 0;
	font-size: var(--kwl-fsize-small, 0.875rem);
	color: var(--kwl-text-muted, #64748b);
}

.kw-ad__fact-value {
	margin: 0;
	font-size: var(--kwl-fsize-small, 0.875rem);
	font-weight: var(--kwl-fw-semibold, 600);
	color: var(--kwl-text, #1a202c);
	text-align: right;
}

/* --- Familienfreundlichkeit Ampel --- */

.kw-ad__family {
	display: flex;
	align-items: center;
	gap: var(--kwl-space-xs, 8px);
	padding: var(--kwl-space-sm, 12px);
	border-radius: var(--kwl-radius-sm, 6px);
	margin-bottom: var(--kwl-space-md, 16px);
	font-size: var(--kwl-fsize-small, 0.875rem);
	font-weight: var(--kwl-fw-medium, 500);
}

.kw-ad__family-dot {
	width: 12px;
	height: 12px;
	border-radius: var(--kwl-radius-full, 9999px);
	flex-shrink: 0;
}

.kw-ad__family--yes {
	background: color-mix(in srgb, var(--kwl-success, #2f855a) 10%, var(--kwl-bg, #ffffff));
	color: var(--kwl-success, #2f855a);
}

.kw-ad__family--yes .kw-ad__family-dot {
	background: var(--kwl-success, #2f855a);
	box-shadow: 0 0 6px color-mix(in srgb, var(--kwl-success, #2f855a) 40%, transparent);
}

.kw-ad__family--limited {
	background: color-mix(in srgb, var(--kwl-warning, #c05621) 10%, var(--kwl-bg, #ffffff));
	color: var(--kwl-warning, #c05621);
}

.kw-ad__family--limited .kw-ad__family-dot {
	background: var(--kwl-warning, #c05621);
	box-shadow: 0 0 6px color-mix(in srgb, var(--kwl-warning, #c05621) 40%, transparent);
}

.kw-ad__family--no {
	background: color-mix(in srgb, var(--kwl-error, #c53030) 10%, var(--kwl-bg, #ffffff));
	color: var(--kwl-error, #c53030);
}

.kw-ad__family--no .kw-ad__family-dot {
	background: var(--kwl-error, #c53030);
	box-shadow: 0 0 6px color-mix(in srgb, var(--kwl-error, #c53030) 40%, transparent);
}

/* --- Entfernung --- */

.kw-ad__distance {
	display: flex;
	align-items: center;
	gap: var(--kwl-space-xs, 8px);
	padding: var(--kwl-space-xs, 8px) var(--kwl-space-sm, 12px);
	margin-bottom: var(--kwl-space-md, 16px);
	font-size: var(--kwl-fsize-small, 0.875rem);
	color: var(--kwl-text-muted, #64748b);
}

.kw-ad__distance-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--kwl-accent, #BD9B5C);
}

.kw-ad__distance-icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* --- Sections (Oeffnungszeiten, Eintritt, Adresse, Kontakt) --- */

.kw-ad__section {
	padding-top: var(--kwl-space-md, 16px);
	margin-top: var(--kwl-space-md, 16px);
	border-top: 1px solid var(--kwl-ad-border);
}

.kw-ad__section-title {
	font-family: var(--kwl-font-heading);
	font-size: var(--kwl-fsize-small, 0.875rem);
	font-weight: var(--kwl-fw-semibold, 600);
	letter-spacing: var(--kwl-ls-wide, 0.04em);
	text-transform: uppercase;
	color: var(--kwl-text-muted, #64748b);
	margin: 0 0 var(--kwl-space-sm, 12px);
}

/* --- Oeffnungszeiten --- */

.kw-ad__hours {
	margin: 0;
}

.kw-ad__hours-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 0;
	font-size: var(--kwl-fsize-small, 0.875rem);
}

.kw-ad__hours-row--today {
	background: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 8%, transparent);
	border-radius: var(--kwl-radius-sm, 6px);
	padding: 6px 8px;
	font-weight: var(--kwl-fw-semibold, 600);
}

.kw-ad__hours-day {
	display: flex;
	align-items: center;
	gap: var(--kwl-space-xs, 8px);
	color: var(--kwl-text, #1a202c);
}

.kw-ad__hours-badge {
	font-size: var(--kwl-fsize-caption, 0.75rem);
	background: var(--kwl-accent, #BD9B5C);
	color: var(--kwl-accent-contrast, #00315d);
	padding: 1px 6px;
	border-radius: var(--kwl-radius-sm, 6px);
	font-weight: var(--kwl-fw-semibold, 600);
	text-transform: uppercase;
	letter-spacing: var(--kwl-ls-wide, 0.04em);
}

.kw-ad__hours-time {
	margin: 0;
	color: var(--kwl-text, #1a202c);
	tabular-nums: true;
	font-variant-numeric: tabular-nums;
}

.kw-ad__hours-time--closed {
	color: var(--kwl-error, #c53030);
	font-style: italic;
}

.kw-ad__hours-hint {
	margin: var(--kwl-space-xs, 8px) 0 0;
	font-size: var(--kwl-fsize-caption, 0.75rem);
	font-style: italic;
	color: var(--kwl-text-muted, #64748b);
}

/* --- Eintrittspreise --- */

.kw-ad__prices {
	margin: 0;
}

.kw-ad__price-row {
	display: flex;
	justify-content: space-between;
	padding: 4px 0;
	font-size: var(--kwl-fsize-small, 0.875rem);
}

.kw-ad__price-row dt {
	color: var(--kwl-text-muted, #64748b);
}

.kw-ad__price-row dd {
	margin: 0;
	font-weight: var(--kwl-fw-semibold, 600);
	color: var(--kwl-text, #1a202c);
}

.kw-ad__price-free {
	font-size: var(--kwl-fsize-small, 0.875rem);
	font-weight: var(--kwl-fw-semibold, 600);
	color: var(--kwl-success, #2f855a);
	margin: 0;
}

.kw-ad__price-event {
	font-size: var(--kwl-fsize-h4, 1.25rem);
	font-weight: var(--kwl-fw-bold, 700);
	color: var(--kwl-text, #1a202c);
	margin: 0;
}

.kw-ad__admission-hint {
	margin: var(--kwl-space-xs, 8px) 0 0;
	font-size: var(--kwl-fsize-caption, 0.75rem);
	font-style: italic;
	color: var(--kwl-text-muted, #64748b);
}

/* --- Adresse --- */

.kw-ad__address {
	font-style: normal;
	font-size: var(--kwl-fsize-small, 0.875rem);
	line-height: var(--kwl-lh-body, 1.5);
	color: var(--kwl-text, #1a202c);
}

/* --- Kontakt-Links --- */

.kw-ad__links {
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-xs, 8px);
}

.kw-ad__link {
	display: inline-flex;
	align-items: center;
	gap: var(--kwl-space-xs, 8px);
	font-size: var(--kwl-fsize-small, 0.875rem);
	min-height: 44px;
	width: 100%;
	justify-content: center;
}

.kw-ad__link svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* --- Dark Mode --- */

@media (prefers-color-scheme: dark) {
	.kw-ad {
		--kwl-ad-bg: var(--kwl-activity-details-bg, var(--kwl-bg, #1a202c));
		--kwl-ad-border: var(--kwl-activity-details-border, var(--kwl-border, #4a5568));
	}

	.kw-ad__fact {
		background: var(--kwl-bg-alt, #2d3748);
	}

	.kw-ad__family--yes {
		background: rgba(72, 187, 120, 0.15);
		color: var(--kwl-success, #48bb78);
	}

	.kw-ad__family--limited {
		background: rgba(237, 137, 54, 0.15);
		color: var(--kwl-warning, #ed8936);
	}

	.kw-ad__family--no {
		background: rgba(252, 129, 129, 0.15);
		color: var(--kwl-error, #fc8181);
	}

	.kw-ad__hours-time--closed {
		color: var(--kwl-error, #fc8181);
	}

	.kw-ad__price-free {
		color: var(--kwl-success, #48bb78);
	}
}

/* --- Reduced Motion --- */

@media (prefers-reduced-motion: reduce) {
	.kw-ad,
	.kw-ad * {
		transition-duration: 0.01ms;
	}
}

/* V4 Pink-Reset: Alle .kw-ad__link haben data-kwl-btn — zentral in kwl-shared-components.css (§261/§281) */