/*
 * I Already Won Fitness: Other Ways To Train  (v1.0.0)
 * Prompt 13 (CUSTOM-AVADA-ELEMENT v5.6). Styles [iawf_other_ways] only.
 * Root: .iawf-ways. Layout around it (Container, Column, width, margins)
 * belongs to the Avada Builder.
 *
 * Shared from assets/css/iawf-components.css (IAWF-RCM-20261019):
 *   iawf-btn, iawf-btn--small, iawf-btn--arrow (the "Learn more" button),
 *   --iawf-ease-out
 * Geometry from the design: the open tile is a square whose side is the
 * tile row width minus 244px (two 110px closed tiles and two 12px gaps),
 * at least 260px and at most 580px. Phones (559px and below): the tiles
 * stack, closed tiles are 88px bars and the open tile is as tall as the
 * row is wide.
 */

.iawf-ways {
	container-type: inline-size;
	width: 100%;
	font-style: normal;
}

.iawf-ways__track {
	--iawf-ways-side: clamp(260px, calc(100cqw - 244px), 580px);
	display: flex;
	flex-direction: row;
	gap: 12px;
}

.iawf-ways .iawf-ways__tile {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	height: var(--iawf-ways-side);
	border-radius: 24px;
	overflow: hidden;
	isolation: isolate;
	background: var(--awb-color2);
	cursor: pointer;
	transition: flex .6s var(--iawf-ease-out), height .6s var(--iawf-ease-out);
}

.iawf-ways .iawf-ways__tile.is-open {
	flex: 0 0 var(--iawf-ways-side);
	cursor: default;
}

/* Photo: grayscale until the tile is open */
.iawf-ways .iawf-ways__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	object-position: center 30%;
	filter: grayscale(1);
	transition: filter .5s;
}

.iawf-ways .iawf-ways__tile.is-open .iawf-ways__img {
	filter: none;
}

/* Photo focus per page, in design order */
.iawf-ways--pt .iawf-ways__tile:nth-child(1) .iawf-ways__img,
.iawf-ways--bt .iawf-ways__tile:nth-child(1) .iawf-ways__img,
.iawf-ways--nc .iawf-ways__tile:nth-child(1) .iawf-ways__img,
.iawf-ways--nc .iawf-ways__tile:nth-child(2) .iawf-ways__img {
	object-position: center 45%;
}

.iawf-ways--pt .iawf-ways__tile:nth-child(2) .iawf-ways__img,
.iawf-ways--gf .iawf-ways__tile:nth-child(2) .iawf-ways__img,
.iawf-ways--nc .iawf-ways__tile:nth-child(3) .iawf-ways__img {
	object-position: center 25%;
}

/* Shade: flat dim when closed, bottom gradient when open */
.iawf-ways .iawf-ways__shade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(0, 0, 0, .55);
	pointer-events: none;
	transition: background .5s;
}

.iawf-ways .iawf-ways__tile.is-open .iawf-ways__shade {
	background: linear-gradient(180deg, rgba(0, 0, 0, .05) 35%, rgba(0, 0, 0, .88) 100%);
}

/* The whole tile is the open/close button (under the open tile's text) */
.iawf-ways button.iawf-ways__toggle,
.iawf-ways button.iawf-ways__toggle:hover,
.iawf-ways button.iawf-ways__toggle:focus,
.iawf-ways button.iawf-ways__toggle:active {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 24px;
	background: transparent;
	box-shadow: none;
	color: var(--awb-color8);
	font-style: normal;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.iawf-ways .iawf-ways__tile.is-open button.iawf-ways__toggle {
	cursor: default;
}

.iawf-ways button.iawf-ways__toggle:focus {
	outline: none;
}

.iawf-ways button.iawf-ways__toggle:focus-visible {
	outline: 2px solid var(--awb-color8);
	outline-offset: -4px;
}

/* Side title on closed tiles, reading bottom to top */
.iawf-ways .iawf-ways__label {
	position: absolute;
	left: 22px;
	bottom: 26px;
	display: flex;
	align-items: center;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-size: clamp(20px, 1.8vw, 28px);
	font-weight: 800;
	font-style: normal;
	line-height: normal;
	letter-spacing: 0;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--awb-color8);
	opacity: 1;
	pointer-events: none;
	transition: opacity .3s;
}

.iawf-ways .iawf-ways__tile.is-open .iawf-ways__label {
	opacity: 0;
}

/* Open tile text */
.iawf-ways .iawf-ways__body {
	position: absolute;
	left: clamp(20px, 2.4vw, 32px);
	right: clamp(20px, 2.4vw, 32px);
	bottom: clamp(20px, 2.4vw, 32px);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .4s .15s;
}

.iawf-ways .iawf-ways__tile.is-open .iawf-ways__body {
	opacity: 1;
	pointer-events: auto;
}

.iawf-ways .iawf-ways__body .iawf-ways__title {
	margin: 0;
	padding: 0;
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-size: clamp(28px, 2.6vw, 40px);
	font-weight: 800;
	font-style: normal;
	line-height: .95;
	letter-spacing: -.015em;
	text-transform: uppercase;
	color: var(--awb-color8);
}

.iawf-ways .iawf-ways__body .iawf-ways__desc {
	margin: 0;
	padding: 0;
	font-family: var(--awb-typography3-font-family), system-ui, sans-serif;
	font-size: clamp(15px, 1.1vw, 16px);
	font-weight: 400;
	font-style: normal;
	line-height: 1.55;
	letter-spacing: normal;
	text-transform: none;
	color: var(--awb-color10);
}

.iawf-ways .iawf-ways__body .fusion-button.iawf-ways__btn {
	margin-top: 6px;
	white-space: nowrap;
}

/* Phones: stacked bars */
@media (max-width: 559px) {
	.iawf-ways__track {
		flex-direction: column;
	}

	.iawf-ways .iawf-ways__tile,
	.iawf-ways .iawf-ways__tile.is-open {
		flex: 0 0 auto;
		height: 88px;
	}

	.iawf-ways .iawf-ways__tile.is-open {
		height: 100cqw;
	}

	.iawf-ways .iawf-ways__label {
		left: 20px;
		top: 0;
		bottom: 0;
		writing-mode: horizontal-tb;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.iawf-ways .iawf-ways__tile,
	.iawf-ways .iawf-ways__img,
	.iawf-ways .iawf-ways__shade,
	.iawf-ways .iawf-ways__label,
	.iawf-ways .iawf-ways__body {
		transition: none;
	}
}