/* ============================================
   COMPONENT: Training Orientation
   For displaying training program details
   Breakpoints: Desktop (default), Tablet (max-width: 1199px), Mobile (max-width: 575px)
   ============================================ */

/* Desktop-first base styles */
.training-orientation {
	padding: var(--sp-7) 0 0;
	background-color: var(--brand-primary);
	position: relative;
}

/* Mobile Title Box - Hidden on desktop */
.training-orientation > .container > .mobile-title-box {
	display: none;
}

.training-orientation__content {
	color: var(--color-light);
}

.training-orientation__title {
	font-family: var(--font-family-heading);
	font-size: var(--section-title);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading-tight);
	color: var(--color-light);
	text-transform: capitalize;
	margin-bottom: var(--sp-4);
}

.training-orientation__section {
	margin-bottom: var(--sp-5);
}

.training-orientation__subtitle {
	font-family: var(--font-family-heading);
	font-size: var(--section-subtitle);
	font-weight: var(--fw-semibold);
	line-height: 1.2;
	color: var(--color-light);
	text-transform: capitalize;
	margin-bottom: var(--sp-3);
}

.training-orientation__text {
	font-family: var(--font-family-heading);
	font-size: var(--section-description);
	font-weight: var(--fw-regular);
	line-height: 1.57;
	color: var(--color-light);
	margin: 0;
}

.training-orientation__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.training-orientation__list--ordered {
	list-style: none;
	padding-left: 0;
	counter-reset: item;
}

.training-orientation__item {
	font-family: var(--font-family-heading);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-regular);
	line-height: 1.57;
	color: var(--color-light);
	margin-bottom: var(--sp-4);
	padding-left: 0;
	counter-increment: item;
}

.training-orientation__item .training-orientation__subtitle {
	position: relative;
	padding-left: var(--sp-5);
	margin-top: 0;
	margin-bottom: var(--sp-2);
}

.training-orientation__item .training-orientation__subtitle::before {
	content: counter(item) ".";
	position: absolute;
	left: 0;
	font-family: var(--font-family-heading);
	font-size: var(--section-subtitle);
	font-weight: var(--fw-semibold);
	line-height: 1.2;
	color: var(--color-light);
}

.training-orientation__sublist {
	list-style: none;
	padding: 0;
	margin: var(--sp-2) 0 0 0;
}

.training-orientation__sublist li {
	position: relative;
	padding-left: var(--sp-5);
	font-family: var(--font-family-heading);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-regular);
	line-height: 1.57;
	color: var(--color-light);
	margin-bottom: var(--sp-2);
}

.training-orientation__sublist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7rem; /* 7px */
	width: 1.5rem; /* 15px */
	height: 1.5rem; /* 15px */
	background-image: url("../../assets/images/achievement.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.training-orientation__sublist li strong {
	font-weight: var(--fw-bold);
}

.training-orientation__image-wrapper {
	position: relative;
	padding: var(--sp-6) 0;
}

.training-orientation__image {
	width: 100%;
	height: auto;
	border-radius: var(--radius-20);
	max-width: 55rem; /* 550px */
	margin: 0 auto;
	display: block;
}

/* ================================================
   TABLET (max-width: 1199px)
   ================================================ */
@media (max-width: 1199px) {
	.training-orientation {
		padding: var(--sp-6) 0 0;
	}

	.training-orientation__title {
		font-size: var(--section-title-tablet);
	}

	.training-orientation__subtitle {
		font-size: var(--section-subtitle-tablet);
	}

	.training-orientation__image-wrapper {
		padding: var(--sp-5) 0;
	}

	.training-orientation__image {
		max-width: 45rem; /* 450px */
	}
}

/* ================================================
   MOBILE (max-width: 575px)
   ================================================ */
@media (max-width: 575px) {
	.training-orientation {
		padding: var(--sp-5) 0 0;
	}

	/* Show Mobile Title Box on mobile */
	.training-orientation > .container > .mobile-title-box {
		display: flex;
	}

	/* Hide desktop title on mobile */
	.training-orientation__title {
		display: none;
	}

	.training-orientation__subtitle {
		font-size: var(--section-subtitle-mobile);
	}

	.training-orientation__item .training-orientation__subtitle::before {
		font-size: var(--section-subtitle-mobile);
	}

	.training-orientation__text,
	.training-orientation__sublist li {
		font-size: var(--section-description-mobile);
	}

	.training-orientation__image-wrapper {
		padding: var(--sp-4) 0 0;
	}

	.training-orientation__image {
		max-width: 100%;
		border-radius: 0;
	}
}