/**
 * Offer Details Widget – Premium Design 2026
 * BEM: kw-inclusion  |  Wrapper: kw-inclusion-wrapper
 * 3 Layouts: Grid, List, Inline
 */

/* =========================================================
   1. Custom Properties (Widget-Scope)
   ========================================================= */

.kw-inclusion-wrapper {
	--kwl-od-card-bg: var(--kwl-bg-alt, #f7fafc);
	--kwl-od-card-border: var(--kwl-border, #e2e8f0);
	--kwl-od-accent: var(--kwl-accent, #BD9B5C);
	--kwl-od-card-radius: var(--kwl-radius-lg, 12px);
	--kwl-od-card-padding: var(--kwl-space-md, 1rem);
	--kwl-od-card-shadow: var(--kwl-shadow-md);
	--kwl-od-card-shadow-hover: var(--kwl-shadow-hover);
	--kwl-od-icon-size: 28px;
	--kwl-od-icon-color: var(--kwl-od-accent);
	--kwl-od-name-color: var(--kwl-text, #1a202c);
	--kwl-od-desc-color: var(--kwl-text-muted, #718096);
}

/* Kein data-kwl-card — Inklusivleistungen sind keine eigenständigen Cards */

/* =========================================================
   1b. Heading
   ========================================================= */

.kw-od-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-od-heading + [data-kwl-separator] {
	margin-bottom: var(--kwl-space-md, 1rem);
}

/* =========================================================
   2. Grid Layout
   ========================================================= */

.kw-inclusion-wrapper.kw-layout-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--kwl-space-md, 1rem);
}

.kw-layout-grid .kw-inclusion-card {
	display: flex;
	flex-direction: row;
	align-items: center;
	text-align: left;
	gap: var(--kwl-space-sm, 0.5rem);
	background: var(--kwl-od-card-bg);
	border: 1px solid var(--kwl-od-card-border);
	border-radius: var(--kwl-od-card-radius);
	padding: var(--kwl-od-card-padding);
	min-height: 44px;
}

/* Ab Tablet: Grid-Cards vertikal zentriert, gleiche Höhe */
@media (min-width: 481px) {
	.kw-layout-grid .kw-inclusion-card {
		flex-direction: column;
		align-items: center;
		text-align: center;
		height: 100%;
	}

	/* Beschreibung nach unten drücken für visuellen Rhythmus */
	.kw-layout-grid .kw-inclusion-desc {
		margin-top: auto;
	}

	.kw-inclusion-wrapper.kw-layout-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 769px) {
	.kw-inclusion-wrapper.kw-layout-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* =========================================================
   3. List Layout — Premium Checklist
   ========================================================= */

.kw-inclusion-wrapper.kw-layout-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding-left: var(--kwl-space-sm, 0.5rem);
	border-left: 3px solid var(--kwl-od-accent);
}

.kw-layout-list .kw-inclusion-card {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--kwl-space-sm, 0.5rem);
	min-height: 44px;
	padding: var(--kwl-space-sm, 0.5rem) var(--kwl-space-sm, 0.5rem);
	border-bottom: 1px solid color-mix(in srgb, var(--kwl-od-card-border) 50%, transparent);
}

.kw-layout-list .kw-inclusion-card:last-child {
	border-bottom: none;
}

/* List: Icon kleiner, dezenter Tint statt vollem Glassmorphism */
.kw-layout-list .kw-inclusion-icon[data-kwl-icon-circle] {
	--kwl-icon-size: 24px;
	--kwl-icon-svg-size: 16px;
	background: color-mix(in srgb, var(--kwl-od-accent) 8%, transparent);
	backdrop-filter: none;
	border: none;
	box-shadow: none;
}

/* =========================================================
   4. Inline Layout (Icons kompakt — Glassmorphism-Kreise)
   ========================================================= */

.kw-inclusion-wrapper.kw-layout-inline {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kwl-space-sm, 0.5rem);
	align-items: center;
}

.kw-layout-inline .kw-inclusion-card {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	transition: transform 200ms ease;
}

@media (hover: hover) {
	.kw-layout-inline .kw-inclusion-card:hover {
		transform: scale(1.08);
	}
}

.kw-layout-inline .kw-inclusion-card:active {
	transform: scale(0.95);
}

/* =========================================================
   5. Content Wrapper (List-Layout)
   ========================================================= */

.kw-layout-list .kw-inclusion-content {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* =========================================================
   6. Icon — Glassmorphism-Kreis
   ========================================================= */

/* Icon-Circle Bridge: Widget → Shared [data-kwl-icon-circle] */
.kw-inclusion-icon[data-kwl-icon-circle] {
	--kwl-icon-color: var(--kwl-od-icon-color, var(--kwl-accent, #BD9B5C));
}

.kw-inclusion-icon img {
	display: block;
	width: 20px;
	height: 20px;
	object-fit: contain;
}

/* Inline-Layout: Größere Icons */
.kw-layout-inline .kw-inclusion-icon[data-kwl-icon-circle] {
	--kwl-icon-size: 44px;
	--kwl-icon-svg-size: 24px;
}

.kw-layout-inline .kw-inclusion-icon img {
	width: 24px;
	height: 24px;
}

/* =========================================================
   7. Name
   ========================================================= */

.kw-inclusion-name {
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-body, 1rem);
	font-weight: var(--kwl-fw-medium);
	line-height: var(--kwl-lh-body, 1.5);
	color: var(--kwl-od-name-color);
}

/* =========================================================
   7b. Quantity Badge (z.B. "4×")
   ========================================================= */

.kw-inclusion-qty {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.6em;
	padding: 0.1em 0.35em;
	margin-right: 0.3em;
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-small, 0.875rem);
	font-weight: var(--kwl-fw-semibold);
	font-variant-numeric: tabular-nums;
	line-height: var(--kwl-lh-tight, 1.2);
	color: var(--kwl-od-accent);
	background: color-mix(in srgb, var(--kwl-od-accent) 10%, transparent);
	border-radius: var(--kwl-radius-sm, 4px);
	vertical-align: baseline;
}

/* =========================================================
   8. Description
   ========================================================= */

.kw-inclusion-desc {
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-caption, 0.75rem);
	line-height: var(--kwl-lh-body, 1.5);
	color: var(--kwl-od-desc-color);
}

/* =========================================================
   9. Accessibility: Focus Visible
   ========================================================= */

.kw-inclusion-card:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
	border-radius: var(--kwl-od-card-radius);
}

/* =========================================================
   10. Sidebar-Modus (Angebotsseite rechte Spalte)
   ========================================================= */

.kw-od-sidebar {
	background: var(--kwl-bg, #ffffff);
	border: 1px solid var(--kwl-border, #e2e8f0);
	border-top: 3px solid var(--kwl-accent, #BD9B5C);
	border-radius: var(--kwl-radius-lg, 12px);
	padding: var(--kwl-space-xl, 2rem);
	box-shadow: var(--kwl-shadow-md);
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-md, 1rem);
}

.kw-od-sidebar .kw-od-heading {
	font-size: var(--kwl-fsize-h4, 1.25rem);
	margin-bottom: 0;
}

.kw-od-sidebar [data-kwl-separator] {
	margin: 0;
}

.kw-od-sidebar .kw-inclusion-wrapper.kw-layout-list {
	padding-left: 0;
	border-left: none;
}

.kw-od-sidebar .kw-layout-list .kw-inclusion-card {
	padding: var(--kwl-space-sm, 0.5rem) 0;
	min-height: 40px;
}

.kw-od-sidebar .kw-inclusion-name {
	font-size: var(--kwl-fsize-small, 0.875rem);
}

/* Key-Facts (Personen, Preis, Gültigkeit) */
.kw-od-keyfacts {
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-md, 1rem);
	margin: 0;
}

.kw-od-keyfact {
	display: flex;
	align-items: flex-start;
	gap: var(--kwl-space-sm, 0.5rem);
}

.kw-od-keyfact dt {
	flex-shrink: 0;
	color: var(--kwl-accent, #BD9B5C);
}

.kw-od-keyfact dt > svg {
	width: 18px;
	height: 18px;
}

.kw-od-keyfact dd {
	margin: 0;
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-small, 0.875rem);
	font-weight: var(--kwl-fw-medium);
	line-height: var(--kwl-lh-body, 1.5);
	color: var(--kwl-text, #1a202c);
}

.kw-od-keyfact-sub {
	font-weight: var(--kwl-fw-regular);
	color: var(--kwl-text-muted, #718096);
	font-size: var(--kwl-fsize-caption, 0.75rem);
}

/* CTA-Button */
.kw-od-sidebar-cta {
	margin-top: auto;
	padding-top: var(--kwl-space-sm, 0.5rem);
}

.kw-od-sidebar-btn {
	display: flex;
	justify-content: center;
	min-height: 44px;
	width: 100%;
}

/* =========================================================
   11. Dark Mode
   ========================================================= */

@media (prefers-color-scheme: dark) {
	.kw-od-heading {
		color: var(--kwl-text, #f7fafc);
	}

	.kw-inclusion-wrapper {
		--kwl-od-card-bg: var(--kwl-bg, #1a202c);
		--kwl-od-card-border: var(--kwl-border, #4a5568);
		--kwl-od-accent: var(--kwl-accent, #d4b87a);
		--kwl-od-name-color: var(--kwl-text, #f7fafc);
		--kwl-od-desc-color: var(--kwl-text-muted, #a0aec0);
	}

	.kw-inclusion-card:focus-visible {
		outline-color: var(--kwl-focus, #c9a84c);
	}

	.kw-layout-list .kw-inclusion-card {
		border-bottom-color: rgba(74, 85, 104, 0.4);
	}

	.kw-layout-list .kw-inclusion-icon[data-kwl-icon-circle] {
		background: rgba(189, 155, 92, 0.12);
	}

	.kw-inclusion-qty {
		color: #d4b87a;
		background: rgba(189, 155, 92, 0.25);
	}

	.kw-od-sidebar {
		background: var(--kwl-bg, #1a202c);
		border-color: var(--kwl-border, #4a5568);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	}

	.kw-od-keyfact dd {
		color: var(--kwl-text, #f7fafc);
	}

	.kw-od-keyfact-sub {
		color: var(--kwl-text-muted, #a0aec0);
	}
}

/* =========================================================
   11. Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.kw-layout-grid .kw-inclusion-card,
	.kw-layout-inline .kw-inclusion-card {
		transition: none;
	}

	@media (hover: hover) {
		.kw-layout-inline .kw-inclusion-card:hover {
			transform: none;
		}
	}
}