/* Scene 03 uses an open list with shared media and information stages. */
.axw-home-classes {
	position: relative;
	z-index: 3;
	min-height: 130svh !important;
	margin-top: -9svh;
	padding: 19svh var( --axw-home-gutter ) 14svh !important;
	background: var( --axw-home-bg );
	overflow: hidden;
}

.axw-home-classes__heading {
	position: relative;
	z-index: 2;
	width: min( 100%, 92rem );
	margin-inline: auto;
	align-items: flex-start !important;
}

.axw-home .axw-home-classes__marker,
.axw-home .axw-home-classes__marker p {
	margin: 0;
	color: var( --axw-home-muted );
	font: 500 0.66rem/1.2 Arial, sans-serif;
	letter-spacing: 0.16em;
}

.elementor .axw-home .elementor-element.axw-home-classes__title .elementor-heading-title {
	margin: clamp( 1.15rem, 2.4vw, 2rem ) 0 0;
	color: var( --axw-home-text );
	font-family: var( --axw-font-display, "Intro", Arial, sans-serif );
	font-size: clamp( 3.2rem, 7.1vw, 7.4rem );
	font-weight: 400;
	line-height: 0.83;
	letter-spacing: -0.068em;
	text-transform: uppercase;
}

.axw-home-classes__stage {
	position: relative;
	width: min( 100%, 92rem );
	min-height: clamp( 43rem, 82svh, 76rem ) !important;
	margin: clamp( 2.5rem, 5vw, 5rem ) auto 0;
	align-items: stretch !important;
}

.axw-home-classes__list {
	position: relative;
	z-index: 2;
	--width: 77% !important;
	flex: 0 0 77% !important;
	width: 77% !important;
	min-height: clamp( 39rem, 72svh, 68rem ) !important;
	justify-content: center !important;
	align-items: flex-start !important;
	gap: clamp( 0.5rem, 1.8vh, 1.45rem );
}

.axw-home-class {
	position: relative;
	--width: max-content !important;
	flex: 0 1 auto !important;
	width: max-content !important;
	max-width: 100%;
	cursor: pointer;
	transition: opacity 260ms ease, transform 360ms cubic-bezier( 0.22, 1, 0.36, 1 );
}

.axw-home-class:nth-child(2) { margin-left: clamp( 1.5rem, 8vw, 8rem ); }
.axw-home-class:nth-child(3) { margin-left: clamp( 0.5rem, 3vw, 3rem ); }
.axw-home-class:nth-child(4) { margin-left: clamp( 2rem, 11vw, 10rem ); }

.elementor .axw-home .elementor-element.axw-home-class .elementor-heading-title {
	margin: 0;
	color: var( --axw-home-text );
	font-family: var( --axw-font-display, "Intro", Arial, sans-serif );
	font-size: clamp( 3.4rem, 7.3vw, 7.6rem );
	font-weight: 400;
	line-height: 0.82;
	letter-spacing: -0.07em;
	text-transform: uppercase;
	transition: color 260ms ease;
}

.axw-home-class:not(.is-active) { opacity: 0.58; }
.axw-home-class.is-active { opacity: 1; transform: translateX( 0.18em ); }
.axw-home-classes:not(.is-ready) .axw-home-class:first-child { opacity: 1; }
.axw-home-class:hover,
.axw-home-class:focus-visible { opacity: 1; }
.axw-home-class:focus-visible { outline: 1px solid var( --axw-home-text ); outline-offset: 0.32rem; }

.axw-home-classes__visual {
	position: absolute !important;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.axw-home-classes__media {
	position: absolute !important;
	--width: 40% !important;
	flex: 0 0 40% !important;
	top: 4%;
	right: -3.5vw;
	width: 40% !important;
	height: 50% !important;
	overflow: hidden;
	background: #141413;
}

.axw-home-classes__media-item {
	position: absolute !important;
	inset: 0;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden;
	background: #171716;
	will-change: clip-path, transform, opacity;
}

.axw-home-classes__media-item--heels { background: #1a1918; }
.axw-home-classes__media-item--twerk { background: #151515; }
.axw-home-classes__media-item--commercial { background: #1a1a19; }

.axw-home .axw-home-classes__placeholder-label,
.axw-home .axw-home-classes__placeholder-label p {
	margin: 0;
	color: #696863;
	font: 500 0.62rem/1.4 Arial, sans-serif;
	letter-spacing: 0.17em;
	text-align: center;
}

.axw-home-classes__information {
	position: absolute !important;
	--width: min( 34%, 23rem ) !important;
	flex: 0 0 min( 34%, 23rem ) !important;
	right: 0;
	bottom: 6%;
	z-index: 3;
	width: min( 34%, 23rem ) !important;
	min-height: 12rem;
	align-items: flex-start !important;
	justify-content: flex-end !important;
	text-align: left;
}

.axw-home-class__info { pointer-events: none; }
.axw-home-class__info[hidden],
.axw-home-classes__media-item[hidden] { display: none !important; }
.axw-home-classes:not(.is-ready) .axw-home-classes__media-item:not(:first-child),
.axw-home-classes:not(.is-ready) .axw-home-class__info:not(:first-child) { display: none !important; }

.elementor .axw-home .elementor-element.axw-home-class__info-title .elementor-heading-title {
	margin: 0 0 0.7rem;
	color: var( --axw-home-text );
	font-family: var( --axw-font-display, "Intro", Arial, sans-serif );
	font-size: clamp( 1.45rem, 2.2vw, 2.2rem );
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: -0.045em;
	text-transform: uppercase;
}

.axw-home .axw-home-class__level,
.axw-home .axw-home-class__instructor,
.axw-home .axw-home-class__description,
.axw-home .axw-home-class__view { margin: 0; }

.axw-home .axw-home-class__level,
.axw-home .axw-home-class__level p {
	margin: 0 0 0.8rem;
	color: var( --axw-home-muted );
	font: 500 0.6rem/1.3 Arial, sans-serif;
	letter-spacing: 0.14em;
}

.axw-home .axw-home-class__instructor,
.axw-home .axw-home-class__instructor p {
	margin: 0 0 0.5rem;
	color: var( --axw-home-text );
	font: 500 0.76rem/1.3 Arial, sans-serif;
	letter-spacing: 0.05em;
}

.axw-home .axw-home-class__description,
.axw-home .axw-home-class__description p {
	max-width: 19rem;
	margin: 0;
	color: var( --axw-home-muted );
	font: 400 0.85rem/1.5 Arial, sans-serif;
}

.axw-home .axw-home-class__view,
.axw-home .axw-home-class__view p {
	margin: 1.25rem 0 0;
	color: var( --axw-home-text );
	font: 500 0.62rem/1.2 Arial, sans-serif;
	letter-spacing: 0.12em;
}

@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.axw-home-classes { min-height: 125svh !important; padding-top: 17svh !important; }
	.axw-home-classes__stage { min-height: 72svh !important; }
	.axw-home-classes__list { --width: 80% !important; flex-basis: 80% !important; width: 80% !important; min-height: 68svh !important; }
	.elementor .axw-home .elementor-element.axw-home-class .elementor-heading-title { font-size: clamp( 3.7rem, 8vw, 6.6rem ); }
	.axw-home-classes__media { --width: 40% !important; flex-basis: 40% !important; right: -2vw; width: 40% !important; height: 52% !important; }
	.axw-home-classes__information { --width: 36% !important; flex-basis: 36% !important; width: 36% !important; bottom: 4%; }
}

@media ( max-width: 767px ) {
	/* Small fit adjustments avoid clipping in the approved Hero and Introduction. */
	.axw-home-hero__copy { width: auto !important; }
	.axw-home .axw-home-intro__copy {
		width: min( 20rem, calc( 100vw - ( 2 * var( --axw-home-gutter ) ) - clamp( 1rem, 14vw, 5rem ) ) ) !important;
	}
	.axw-home-classes {
		min-height: 0 !important;
		margin-top: -5svh;
		padding-top: 15svh !important;
		padding-bottom: 15svh !important;
	}
	.axw-home .axw-home-classes__marker,
	.axw-home .axw-home-classes__marker p { font-size: 0.59rem; }
	.elementor .axw-home .elementor-element.axw-home-classes__title .elementor-heading-title {
		margin-top: 1rem;
		font-size: clamp( 2.8rem, 12.6vw, 5.3rem );
	}
	.axw-home-classes__stage {
		display: flex !important;
		flex-direction: column !important;
		min-height: 0 !important;
		margin-top: 2.5rem;
		gap: 1.7rem;
	}
	.axw-home-classes__list {
		--width: 100% !important;
		flex: 0 0 100% !important;
		width: 100% !important;
		min-height: 0 !important;
		gap: 0.2rem;
	}
	.axw-home-class,
	.axw-home-class:nth-child(n) {
		--width: 100% !important;
		flex: 0 0 100% !important;
		width: 100% !important;
		margin-left: 0;
		padding: 0.65rem 0;
	}
	.elementor .axw-home .elementor-element.axw-home-class .elementor-heading-title {
		font-size: clamp( 3.1rem, 13.5vw, 5.7rem );
		line-height: 0.9;
	}
	.axw-home-class.is-active { transform: translateX( 0.08em ); }
	.axw-home-class:focus-visible { outline-offset: -0.1rem; }
	.axw-home-classes__visual {
		position: relative !important;
		inset: auto;
		display: flex !important;
		flex-direction: column !important;
		width: 100%;
		height: auto;
		gap: 1.5rem;
	}
	.axw-home-classes__media {
		position: relative !important;
		--width: 88% !important;
		flex: 0 0 88% !important;
		top: auto;
		right: auto;
		width: 88% !important;
		min-height: 0 !important;
		height: auto !important;
		aspect-ratio: 0.92;
		margin-left: auto;
	}
	.axw-home-classes__information {
		position: relative !important;
		--width: 80% !important;
		flex: 0 0 80% !important;
		right: auto;
		bottom: auto;
		width: 80% !important;
		min-height: 0 !important;
		margin-left: auto;
	}
	.elementor .axw-home .elementor-element.axw-home-class__info-title .elementor-heading-title { font-size: 1.8rem; }
}

@media ( prefers-reduced-motion: reduce ) {
	.axw-home-class,
	.axw-home-class .elementor-heading-title { transition: none !important; }
	.axw-home-classes__media-item { will-change: auto; }
}