/* Configurator teaser: brand brown block, text beside a render with decor swatches. Mobile-first. */

.iw-config {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--iw-color-brown);
	color: var(--iw-color-on-ink);
}

.iw-config__inner {
	position: relative;
	display: grid;
	gap: var(--iw-space-12);
	max-width: var(--iw-container);
	margin: 0 auto;
	padding: var(--iw-space-24) var(--iw-gutter);
}

/* Text */
.iw-config__kicker {
	display: flex;
	align-items: center;
	gap: var(--iw-space-4);
	margin: 0 0 var(--iw-space-6);
	color: var(--iw-color-taupe-light);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.iw-config__kicker::before {
	content: "";
	flex: none;
	width: 40px;
	height: 2px;
	background: var(--iw-color-primary);
}

.iw-config__title {
	max-width: 16ch;
	margin: 0 0 var(--iw-space-6);
	color: var(--iw-color-on-ink);
	font-size: var(--iw-text-h2);
}

.iw-config__lead {
	max-width: 30rem;
	margin: 0 0 var(--iw-space-8);
	color: rgb(255 255 255 / 78%);
	font-size: var(--iw-text-lg);
}

/* The one clear call to action: same green button as "Konfigurator" in the header, a size larger */
.iw-config__text .iw-config__link {
	display: inline-block;
	padding: var(--iw-space-4) var(--iw-space-8);
	border-radius: var(--iw-radius);
	background: var(--iw-color-primary);
	color: var(--iw-color-on-primary);
	font-size: 1.0625rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.iw-config__text .iw-config__link:hover {
	background: var(--iw-color-primary-dark);
	color: var(--iw-color-on-primary);
}

/* Render with a thin outline frame shifted right and down behind it (client's idea),
   echoing the technical drawing on the left */
.iw-config__preview {
	--iw-frame-offset: var(--iw-space-4);
	position: relative;
	/* Room on the right for the shifted frame, so it ends on the content edge.
	   Padding, not margin: Elementor zeroes figure margins with a stronger selector. */
	margin: 0;
	padding-right: var(--iw-frame-offset);
}

.iw-config__preview::before {
	content: "";
	position: absolute;
	top: var(--iw-frame-offset);
	left: var(--iw-frame-offset);
	width: calc(100% - var(--iw-frame-offset));
	aspect-ratio: 16 / 9;
	border: 1px solid rgb(255 255 255 / 28%);
	pointer-events: none;
}

.iw-config__stage {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--iw-color-taupe);
}

.iw-config__frame {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.45s ease;
}

.iw-config__frame.is-active {
	opacity: 1;
}

.iw-config__frame picture,
.iw-config__frame img {
	display: block;
	width: 100%;
	height: 100%;
}

.iw-config__frame img {
	object-fit: cover;
}

/* Swatches */
.iw-config__controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: var(--iw-space-4) var(--iw-space-8);
	padding-top: calc(var(--iw-frame-offset) + var(--iw-space-6));
}

/* Phone: all combinations, three in a row, swatch above the name. From 600 px one row;
   script.js hides the combinations that do not fit in it (without script they wrap). */
.iw-config__swatches {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--iw-space-4) var(--iw-space-2);
	flex-basis: 100%;
}

@media (min-width: 600px) {
	.iw-config__swatches {
		display: flex;
		flex-wrap: wrap;
		gap: var(--iw-space-2) var(--iw-space-6);
	}
}

/* One quiet line naming the decors of the chosen combination. All lines share one grid cell,
   so the block keeps the height of the longest and nothing below moves when switching. */
.iw-config__summaries {
	display: grid;
	flex-basis: 100%;
}

.iw-config__summaries:empty {
	display: none;
}

.iw-config__summary {
	grid-area: 1 / 1;
	color: rgb(255 255 255 / 60%);
	font-size: 0.8125rem;
	font-variant-numeric: lining-nums;
	line-height: var(--iw-leading-body);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.iw-config__summary-part {
	white-space: nowrap;
}

.iw-config__summary.is-active {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.3s ease;
}

.iw-config__swatch {
	display: flex;
	align-items: center;
	gap: var(--iw-space-3);
	padding: var(--iw-space-1) 0;
	border: 0;
	background: none;
	color: rgb(255 255 255 / 72%);
	font: inherit;
	font-size: var(--iw-text-sm);
	cursor: pointer;
	transition: color 0.15s ease;
}

.iw-config__swatch[hidden] {
	display: none;
}

@media (max-width: 599px) {
	.iw-config__swatch {
		flex-direction: column;
		gap: var(--iw-space-2);
		text-align: center;
	}
}

.iw-config__swatch:hover,
.iw-config__swatch[aria-pressed="true"] {
	color: var(--iw-color-on-ink);
}

.iw-config__chip {
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--iw-chip);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 25%);
	outline: 1.5px solid transparent;
	outline-offset: 3px;
	transition: outline-color 0.15s ease;
}

.iw-config__swatch[aria-pressed="true"] .iw-config__chip {
	outline-color: var(--iw-color-on-ink);
}

@media (min-width: 1024px) {
	.iw-config__inner {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: center;
		gap: var(--iw-space-16);
	}

	/* Faint technical drawing of a kitchen front, tone on tone. It runs from the left edge of the
	   screen and stops halfway into the column gap, so it never reaches the render.
	   The SVG is a mask, so its colour comes from the token below. */
	.iw-config__inner::before {
		content: "";
		position: absolute;
		bottom: var(--iw-space-12);
		left: calc((100% - 100vw) / 2);
		right: calc(100% - var(--iw-gutter) - (100% - 2 * var(--iw-gutter) - var(--iw-space-16)) * 5 / 12 - var(--iw-space-16) / 2);
		z-index: -1;
		aspect-ratio: 1600 / 740;
		background: var(--iw-color-taupe);
		opacity: 0.14;
		-webkit-mask: url("../../assets/images/configurator/kitchen-elevation.svg") right bottom / contain no-repeat;
		mask: url("../../assets/images/configurator/kitchen-elevation.svg") right bottom / contain no-repeat;
		pointer-events: none;
	}

	.iw-config__preview {
		--iw-frame-offset: var(--iw-space-10);
	}
}