/**
 * Trainer Slider
 *
 * Card stack: a white surface holding a square photo, then the trainer's name,
 * then their function. The card carries its own background so the type keeps its
 * contrast wherever the slider is placed - it is dropped onto the #440099
 * .home-banner row on the homepage, and the name is painted in that same #440099.
 *
 * Whole cards only: 3 from 981px, 2 on tablet, 1 on mobile. There is no peeking
 * half card, so trainer-slider.js no longer computes an Owl stagePadding.
 *
 * Chrome follows the group-lesson slider (assets/css/photo-slider.css): a bare
 * chevron in the gutter beside the cards, cyan on hover, no dots above mobile.
 * On mobile the arrows drop to the bottom corners and flank a progress bar.
 *
 * About the `:not(#_)` on every selector: Divi scopes its element styling under
 * an ID (`#et-boc .et-l ...`), which outranks a plain class, so inside the
 * builder the cards lost their brand colour, weights and rounding. `:not(#_)`
 * matches everything but counts as an ID, so two of them lift each rule above
 * anything Divi scopes that way without changing what it selects.
 */

/*
 * Colours that have to change with the surface behind the slider live here as
 * custom properties. These defaults suit a light page; the block below re-points
 * them for the purple banner.
 *
 * --trainer-gutter is the space the arrows sit in, either side of the cards.
 */
.trainer-slider:not(#_):not(#_) {
	--trainer-card-bg: #fff;
	--trainer-card-shadow: 0 2px 12px rgba(20, 0, 50, 0.18);
	--trainer-gutter: 52px;
	--trainer-nav-icon: #440099;
	--trainer-nav-icon-hover: #6244bb;
	--trainer-dot-track: #e6e0f0;
	--trainer-dot-active: #440099;
	position: relative;
	padding: 0 var(--trainer-gutter);
}

/*
 * On a dark surface the chrome was drawn in #440099 - the exact background
 * colour of the .home-banner row - so the arrows and the active dot simply
 * disappeared. White and cyan are what the group-lesson slider uses over the
 * same purple. Colours only: the banner row owns its own spacing.
 *
 * .home-banner covers the homepage placement without touching the page content;
 * .trainer-slider--on-dark is the opt-in for any other dark section.
 */
.home-banner .trainer-slider:not(#_):not(#_),
.trainer-slider--on-dark:not(#_):not(#_) {
	--trainer-nav-icon: #fff;
	--trainer-nav-icon-hover: #2ed7de;
	--trainer-dot-track: #fff;
	--trainer-dot-active: #2ed7de;
}

/*
 * Owl's stylesheet ships `.owl-carousel { display: none }` and only restores it
 * once its JS has added `.owl-loaded`. That makes the whole module vanish - not
 * degrade, vanish - whenever that JS does not run: a deferred jQuery, a blocked
 * CDN, a script error or a JS-combining optimiser are all enough. The trainers
 * are server-rendered, so there is no reason to hide them; this lays the cards
 * out as a plain row until Owl takes over, and is overridden the moment it does.
 *
 * The basis below is the same arithmetic Owl applies: N cards and N-1 gaps.
 */
.trainer-slider:not(#_):not(#_):not(.owl-loaded) {
	display: flex;
	gap: 20px;
	overflow: hidden;
}

.trainer-slider:not(#_):not(#_):not(.owl-loaded) .trainer-item {
	flex: 0 0 100%;
}

@media (min-width: 768px) {
	.trainer-slider:not(#_):not(#_):not(.owl-loaded) .trainer-item {
		flex-basis: calc((100% - 20px) / 2);
	}
}

@media (min-width: 981px) {
	.trainer-slider:not(#_):not(#_):not(.owl-loaded) .trainer-item {
		flex-basis: calc((100% - 40px) / 3);
	}
}

/* Stretches every card in the row to the tallest one; without it a card whose
   name wraps to two lines leaves its neighbours short, which is invisible on
   bare photos but obvious once each card is a white panel. */
.trainer-slider:not(#_):not(#_) .owl-stage {
	display: flex;
}

/* Owl writes an inline width on .owl-item; flex-shrink would fight it. */
.trainer-slider:not(#_):not(#_) .owl-item {
	display: flex;
	flex-shrink: 0;
}

.trainer-slider:not(#_):not(#_) .trainer-item {
	display: flex;
	width: 100%;
	height: 100%;
}

.trainer-slider:not(#_):not(#_) .trainer-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	text-align: left;
	background: var(--trainer-card-bg);
	border-radius: 12px;
	padding-bottom: 18px;
	/* Clips the photo's top corners to the card's radius. */
	overflow: hidden;
	box-shadow: var(--trainer-card-shadow);
	/* Divi forces `p { color: inherit !important }`, which nothing can outrank;
	   inheriting the role colour from here satisfies it and needs no !important. */
	color: #555;
}

.trainer-slider:not(#_):not(#_) .trainer-photo {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #f2f0f6;
}

/* Fallback for browsers without aspect-ratio support. */
@supports not (aspect-ratio: 1 / 1) {
	.trainer-slider:not(#_):not(#_) .trainer-photo {
		height: 0;
		padding-bottom: 100%;
	}
}

.trainer-slider:not(#_):not(#_) .trainer-photo img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.trainer-slider:not(#_):not(#_) .trainer-photo-placeholder {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40%;
	color: #cfc8dd;
}

.trainer-slider:not(#_):not(#_) .trainer-photo-placeholder svg {
	width: 100%;
	height: auto;
	fill: currentColor;
	display: block;
}

.trainer-slider:not(#_):not(#_) .trainer-name {
	margin: 16px 0 2px;
	padding: 0 18px;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.25;
	color: #440099;
}

.trainer-slider:not(#_):not(#_) .trainer-role {
	margin: 0;
	padding: 0 18px;
	font-size: 15px;
	line-height: 1.4;
	color: #555;
}

/* ------------------------------------------------------------------ navigation */

.trainer-slider:not(#_):not(#_) .owl-nav {
	margin: 0;
}

/*
 * A bare chevron sitting in the gutter, like the group-lesson slider - no circle
 * and no shadow. The gutter is this element's own horizontal padding, so the
 * arrows never overhang the purple row and can never give the page a horizontal
 * scrollbar the way a negative offset would.
 */
.trainer-slider:not(#_):not(#_) .owl-nav button.owl-prev,
.trainer-slider:not(#_):not(#_) .owl-nav button.owl-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.trainer-slider:not(#_):not(#_) .owl-nav button.owl-prev {
	left: 0;
}

.trainer-slider:not(#_):not(#_) .owl-nav button.owl-next {
	right: 0;
}

/*
 * review-slider.css ships an unscoped `.owl-nav svg { width: 60px !important }`,
 * and it is enqueued on any page carrying reviews - the homepage included - so
 * it reaches this slider too. The !important here is what takes the size back;
 * two `:not(#_)` out-specify that rule.
 */
.trainer-slider:not(#_):not(#_) .owl-nav button svg {
	width: 38px !important;
	height: auto;
	fill: var(--trainer-nav-icon);
	transition: fill 0.2s ease;
	display: block;
}

.trainer-slider:not(#_):not(#_) .owl-nav button:hover svg {
	fill: var(--trainer-nav-icon-hover);
}

.trainer-slider:not(#_):not(#_) .owl-nav button.disabled {
	opacity: 0.35;
	cursor: default;
}

/* ------------------------------------------------------------------ dots */

/*
 * Dots are a mobile-only affordance: above the phone breakpoint the arrows are
 * the whole control. Hiding the container rather than relying on Owl's `dots`
 * option also neutralises the unscoped `.owl-dots` rule review-slider.css
 * applies below 768px.
 */
@media (min-width: 768px) {
	.trainer-slider:not(#_):not(#_) .owl-dots {
		display: none !important;
	}
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 767px) {

	/* No side gutters: the arrows move to the bottom corners, either side of the
	   progress bar, so the single card gets the full width. */
	.trainer-slider:not(#_):not(#_) {
		--trainer-gutter: 0px;
		padding: 0 0 0;
	}

	.trainer-slider:not(#_):not(#_) .trainer-name {
		padding: 0 14px;
		font-size: 18px;
	}

	.trainer-slider:not(#_):not(#_) .trainer-card {
		padding-bottom: 14px;
	}

	.trainer-slider:not(#_):not(#_) .trainer-role {
		padding: 0 14px;
		font-size: 14px;
	}

	.trainer-slider:not(#_):not(#_) .owl-nav button.owl-prev,
	.trainer-slider:not(#_):not(#_) .owl-nav button.owl-next {
		top: auto;
		bottom: 3px;
		transform: translateY(50%);
	}

	.trainer-slider:not(#_):not(#_) .owl-nav button.owl-prev {
		left: 4px;
	}

	.trainer-slider:not(#_):not(#_) .owl-nav button.owl-next {
		right: 4px;
	}

	.trainer-slider:not(#_):not(#_) .owl-nav button svg {
		width: 20px !important;
	}

	/* A segmented progress bar rather than dots, matching the group-lesson
	   slider. Each segment is a dot button; Owl's own span inside it is hidden
	   so the segment itself carries the colour. */
	.trainer-slider:not(#_):not(#_) .owl-dots {
		display: flex !important;
		margin: 28px 12% 0 !important;
		padding: 0;
		background: var(--trainer-dot-track);
		border-radius: 100px;
		overflow: hidden;
	}

	.trainer-slider:not(#_):not(#_) .owl-dots button.owl-dot {
		flex: 1 0 auto;
		width: auto;
		height: 10px;
		margin: 0;
		padding: 0;
		background: transparent;
		border-radius: 100px;
		transition: background-color 0.2s ease;
	}

	.trainer-slider:not(#_):not(#_) .owl-dots button.owl-dot span {
		display: none;
	}

	.trainer-slider:not(#_):not(#_) .owl-dots button.owl-dot.active {
		background: var(--trainer-dot-active);
	}
}

/* Plain list rendered by the plugin when the AF theme is not active. */
.af-trainers-list:not(#_):not(#_) {
	list-style: none;
	margin: 0;
	padding: 0;
}

.af-trainers-list:not(#_):not(#_) .af-trainer-name {
	display: block;
	font-weight: 700;
}

.af-trainers-list:not(#_):not(#_) .af-trainer-role {
	display: block;
}