/* ==================================================================== *
 * MOBILE REFINEMENTS
 * Loaded last so it wins over the section blocks above. Heights use
 * min(var(), vh) — an Elementor per-device value still applies, it just
 * can never grow taller than the phone screen.
 * ==================================================================== */

@media (max-width: 1024px) {
	.wl-about {
		grid-template-columns: 1fr;
	}

	.wl-about__media {
		min-height: min(var(--wl-about-h, 640px), 46vh);
	}

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

@media (max-width: 767px) {
	.wl-section {
		max-width: 100%;
		overflow-wrap: break-word;
	}

	/* Hero ---------------------------------------------------------- */
	.wl-hero__stage {
		min-height: min(var(--wl-hero-h, 640px), 92vh);
	}

	.wl-hero__title {
		line-height: 1.12;
	}

	.wl-hero__sub {
		letter-spacing: 0.2em;
		line-height: 1.7;
	}

	.wl-hero__actions {
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	.wl-btn {
		width: 100%;
		max-width: 320px;
		min-width: 0;
	}

	.wl-search {
		padding-left: 18px;
	}

	/* 16px keeps iOS Safari from zooming the page when the field is tapped */
	.wl-search input[type="search"],
	.wl-search input[type="text"],
	.wl-subform input[type="email"] {
		font-size: 16px;
	}

	.wl-search input[type="search"],
	.wl-search input[type="text"] {
		height: 50px;
	}

	.wl-search__btn {
		width: 44px;
		height: 44px;
	}

	.wl-hero__note {
		padding: 22px 18px;
	}

	/* Scroll strips run to the screen edge so it reads as swipeable ---- */
	.wl-scroller .wl-track,
	.wl-ess .wl-track,
	.wl-community .wl-track,
	.wl-ig-feed .wl-track {
		margin-inline: -16px;
		padding-inline: 16px;
		scroll-padding-inline: 16px;
	}

	.wl-ess__foot {
		gap: 14px;
	}

	.wl-arrow {
		width: 40px;
		height: 40px;
	}

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

	.wl-acc__head {
		padding: 12px 0;
	}

	.wl-acc__panel-inner {
		font-size: 16px;
	}

	/* Rotating slider ------------------------------------------------ */
	.wl-rlb {
		min-height: min(var(--wl-rlb-h, 620px), 82vh);
	}

	.wl-dots {
		bottom: 26px;
	}

	.wl-dot {
		width: 13px;
		height: 13px;
	}

	/* About ---------------------------------------------------------- */
	.wl-about__media {
		min-height: min(var(--wl-about-h, 640px), 40vh);
	}

	/* Stories & quotes ----------------------------------------------- */
	.wl-story__meta span + span {
		margin-inline-start: 14px;
	}

	.wl-stories__more {
		font-size: 19px;
	}

	.wl-quote {
		padding: 0 10px;
	}

	.wl-quote__box {
		padding: 22px 20px;
	}

	.wl-love__title {
		margin-bottom: 34px;
	}

	/* Subscribe ------------------------------------------------------ */
	.wl-subform {
		gap: 10px;
	}

	.wl-subform button {
		font-size: 11px;
		letter-spacing: 0.08em;
	}
}

@media (max-width: 480px) {
	.wl-hero__sub {
		letter-spacing: 0.14em;
		font-size: 12px;
	}

	.wl-cat::before {
		padding-top: var(--wl-cat-pad-m, var(--wl-cat-pad, 100%));
	}

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

	.wl-feature {
		padding: 34px 18px 38px;
	}

	.wl-about__body {
		padding: 40px 20px 46px;
	}

	.wl-footer-inner {
		grid-template-columns: 1fr;
	}
}