/* ==================================================================== *
 * 4. HOW IT WORKS (accordion)
 * ==================================================================== */

.wl-how {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background: var(--wl-cream);
	position: relative;
}

.wl-how::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: var(--wl-how-bar, 30px);
	background: var(--wl-rose);
}

.wl-how__left {
	/* left padding always clears the accent bar, whatever width it is set to */
	padding: 60px 60px 70px calc(var(--wl-how-bar, 30px) + 60px);
	min-width: 0;
}

.wl-how__title {
	font-family: var(--wl-font-display);
	font-size: clamp(32px, 3.4vw, 48px);
	margin: 0 0 34px;
	font-weight: 400;
}

.wl-acc__item + .wl-acc__item {
	margin-top: 10px;
}

.wl-acc__head {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	background: none;
	border: 0;
	padding: 14px 0;
	cursor: pointer;
	font-family: var(--wl-font-body);
	font-size: clamp(22px, 2.2vw, 31px);
	font-weight: 400;
	color: var(--wl-ink);
	text-align: left;
	line-height: 1.2;
	-webkit-tap-highlight-color: transparent;
}

/* Beat Elementor / Hello global button hover+focus fills */
.wl-acc__head:hover,
.wl-acc__head:focus,
.wl-acc__head:focus-visible,
.wl-acc__head:active {
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
}

.wl-acc__sign {
	color: var(--wl-rose);
	font-size: 0.9em;
	line-height: 1;
	transition: transform 0.35s ease;
	display: inline-block;
}

.wl-acc__item.is-open .wl-acc__sign {
	transform: rotate(45deg);
}

.wl-acc__panel {
	overflow: hidden;
	height: 0;
	transition: height 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wl-acc__panel-inner {
	padding: 0 0 18px 6px;
	max-width: 520px;
	font-size: 17px;
	line-height: 1.6;
	color: #444;
}

.wl-how__right {
	position: relative;
	min-height: var(--wl-how-h, 520px);
	background-size: cover;
	background-position: center;
}

.wl-how__media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.wl-how__media.is-active {
	opacity: 1;
}

/* Stack: media on top, accordion below. */
@media (max-width: 1024px) {
	.wl-how,
	.elementor-element .wl-how {
		grid-template-columns: 1fr !important;
	}

	.wl-how__left {
		padding: 50px 34px 56px calc(var(--wl-how-bar, 30px) + 26px);
		min-width: 0;
	}

	.wl-how__right {
		order: -1;
		width: 100%;
		min-height: min(var(--wl-how-h, 520px), 44vh);
	}
}

@media (max-width: 767px) {
	.wl-how__left {
		padding: 40px 20px 46px calc(var(--wl-how-bar, 30px) + 18px);
	}

	.wl-how__right {
		min-height: min(var(--wl-how-h, 520px), 40vh);
	}

	.wl-acc__head {
		font-size: 20px;
	}

	.wl-acc__panel-inner {
		font-size: 15px;
		max-width: none;
	}
}

@media (max-width: 480px) {
	.wl-how__left {
		padding: 34px 14px 40px calc(var(--wl-how-bar, 30px) + 14px);
	}
}