/**
 * Styles for pages built out of native Elementor elements.
 *
 * The homepage used to be PHP: one template per section, with the decorative
 * pieces — the soft blobs behind the hero, the plate under the dish, the
 * scrolling strip — written into the markup as extra elements. A page made of
 * Elementor widgets cannot carry those spare elements, because every element
 * in an Elementor page is something the owner can select and delete.
 *
 * So the decoration moves here, onto ::before and ::after of containers that
 * carry a wok- class. The look survives, and nothing in the editor is a
 * booby trap: if the owner deletes the heading, they lose the heading, not the
 * background.
 */

/* ------------------------------------------------------------------ hero */

.wok-el-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient( 1000px 520px at 78% 8%, rgba( var( --wok-accent-rgb ), .20 ), transparent 60% ),
		linear-gradient( 170deg, var( --wok-cream-light ) 0%, var( --wok-cream ) 100% );
}

.wok-el-hero::before,
.wok-el-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur( 6px );
	opacity: .45;
	pointer-events: none;
	z-index: 0;
}

.wok-el-hero::before {
	width: 460px;
	height: 460px;
	top: -140px;
	inset-inline-end: -120px;
	background: radial-gradient( circle at 35% 35%, rgba( var( --wok-primary-rgb ), .30 ), transparent 68% );
}

.wok-el-hero::after {
	width: 340px;
	height: 340px;
	bottom: 40px;
	inset-inline-start: -130px;
	background: radial-gradient( circle at 60% 40%, rgba( var( --wok-accent-rgb ), .34 ), transparent 70% );
}

/* Everything the owner can select sits above the decoration. */
.wok-el-hero > .e-con-inner,
.wok-el-hero > .elementor-container,
.wok-el-hero > .elementor-element {
	position: relative;
	z-index: 3;
}

.wok-el-badge .elementor-widget-container {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 10px 30px rgba( 24, 16, 10, .08 );
	font-weight: 700;
	font-size: .82rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --wok-primary );
}

.wok-el-badge p { margin: 0; }

.wok-el-hero-title h1,
.wok-el-hero-title h2 {
	font-size: clamp( 2.6rem, 6vw, 4.6rem );
	line-height: .98;
	letter-spacing: -.02em;
	text-transform: uppercase;
	margin: 0;
}

.wok-el-hero-title span,
.wok-el-hero-title em {
	color: var( --wok-primary );
	font-style: normal;
}

.wok-el-lead p {
	font-size: 1.08rem;
	line-height: 1.7;
	color: var( --wok-body );
	max-width: 46ch;
}

/* The round plate behind the hero dish. */
.wok-el-plate {
	position: relative;
}

.wok-el-plate::before {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate( -50%, -50% );
	width: min( 560px, 96% );
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient( circle at 50% 44%, #fff 0%, var( --wok-cream-light ) 58%, var( --wok-cream-deep ) 100% );
	box-shadow: 0 40px 90px rgba( 24, 16, 10, .18 ), inset 0 0 0 16px rgba( 255, 255, 255, .55 );
	z-index: 0;
}

.wok-el-plate img {
	position: relative;
	z-index: 2;
}

/* ------------------------------------------------------------- headings */

.wok-el-eyebrow p {
	margin: 0;
	font-size: .8rem;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var( --wok-primary );
}

.wok-el-title h2,
.wok-el-title h3 {
	font-size: clamp( 2rem, 4vw, 3rem );
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: -.01em;
	margin: 0;
}

.wok-el-title span,
.wok-el-title em {
	color: var( --wok-primary );
	font-style: normal;
}

/* --------------------------------------------------------------- points */

.wok-el-points .elementor-icon-list-items {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
}

.wok-el-points .elementor-icon-list-icon svg,
.wok-el-points .elementor-icon-list-icon i {
	color: var( --wok-primary );
}

/* ---------------------------------------------------------------- cards */

.wok-el-card {
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 18px 44px rgba( 24, 16, 10, .07 );
}

.wok-el-price .elementor-widget-container {
	display: inline-block;
	padding: 14px 22px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 18px 44px rgba( 24, 16, 10, .12 );
	text-align: center;
}

.wok-el-price small {
	display: block;
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var( --wok-body );
}

.wok-el-price strong {
	font-size: 1.6rem;
	color: var( --wok-primary );
}

.wok-el-price p { margin: 0; }

/* -------------------------------------------------------------- buttons */

.wok-el-btn .elementor-button {
	border-radius: 999px;
	padding: 16px 30px;
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.wok-el-btn-primary .elementor-button {
	background: var( --wok-primary );
	color: #fff;
}

.wok-el-btn-ghost .elementor-button {
	background: transparent;
	color: var( --wok-dark );
	border: 2px solid rgba( 24, 16, 10, .16 );
}

/* ----------------------------------------------------------- dark bands */

.wok-el-dark {
	background: var( --wok-dark );
	color: #fff;
}

.wok-el-dark h1,
.wok-el-dark h2,
.wok-el-dark h3,
.wok-el-dark p { color: #fff; }

@media ( max-width: 767px ) {
	.wok-el-hero::before,
	.wok-el-hero::after { display: none; }

	.wok-el-points .elementor-icon-list-items { gap: 8px 16px; }
}