/*
 * Single training layout (ACF-driven, WPBakery-free).
 * Enqueued by inc/training-layout.php on single training pages only.
 */

.jtr-training {
	padding: 1.5rem 0 3rem;
}

.jtr-training__title {
	color: #00305b;
	font-weight: 700;
	margin-bottom: 1.5rem;
}

.jtr-training__intro-heading {
	color: #00305b;
	font-weight: 700;
	font-size: 1.5rem;
	margin-bottom: 1rem;
}

.jtr-training__description {
	font-size: 1.0625rem;
	line-height: 1.7;
}

.jtr-training__body {
	margin-bottom: 2rem;
}

/* Presenter cards */
.jtr-presenter {
	border: 1px solid #e3e6ea;
	max-width: 320px;
}

/* Render photos at natural size (centered) so small headshots don't upscale
   and blur; max-width still protects against oversized uploads. */
.jtr-presenter__photo {
	text-align: center;
	padding: 1rem 1rem 0;
}

.jtr-presenter__photo img {
	width: auto;
	max-width: 200px;
	max-height: 200px;
	height: auto;
	display: inline-block;
}

.jtr-presenter__name {
	color: #00305b;
	font-weight: 700;
}

.jtr-presenter__title {
	color: #555;
	font-size: 0.9375rem;
}

/* Featured image shown in the sidebar when no presenters are set */
.jtr-training__featured {
	text-align: center;
}

.jtr-training__featured img {
	width: auto;
	max-width: 100%;
	height: auto;
	display: inline-block;
}

/* Video / login gate — full-bleed grey band from screen edge to screen edge */
body.single-training {
	overflow-x: hidden; /* guard against the 100vw full-bleed band */
}

.jtr-training__video {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	background: #f2f2f2;
	padding: 3rem 1rem;
	margin-bottom: 2rem;
}

.jtr-video-gate.ratio {
	max-width: 900px;
	margin: 0 auto;
}

.jtr-video-gate.ratio iframe {
	border: 0;
}

.jtr-video-gate--login {
	max-width: 628px;
	margin: 0 auto; /* centered within the grey band */
	background: #fff;
	border: 1px solid #e3e6ea;
	padding: 1.5rem 2rem 2rem;
}

.jtr-video-gate--login h2 {
	text-align: center;
}

/* The shared login template carries legacy inline spacing (margin-top:15%,
   min-height:300px) from its WPBakery layout — neutralize it inside the gate. */
.jtr-video-gate--login [style*="margin-top"] {
	margin-top: 0 !important;
}

.jtr-video-gate--login [style*="min-height"] {
	min-height: 0 !important;
}

.jtr-video-gate--login h2 {
	margin-bottom: 1rem;
}

/* The shared login form button relies on WPBakery (vc_btn3) classes today.
   Style it directly so it survives once js_composer is removed. */
.jtr-video-gate--login button[name="login"] {
	background-color: #00305b;
	border: 0;
	color: #fff;
	padding: 10px 28px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	cursor: pointer;
}

.jtr-video-gate--login button[name="login"]:hover,
.jtr-video-gate--login button[name="login"]:focus {
	background-color: #004a8c;
	color: #fff;
}

/* Products used in this training */
.jtr-training__products {
	margin-bottom: 2.5rem;
}

.jtr-training__products-heading {
	color: #00305b;
	font-weight: 700;
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
}

/* Resources */
.jtr-training__resources {
	margin-bottom: 2rem;
}

.jtr-training__resources h2 {
	color: #00305b;
	font-weight: 700;
}

.jtr-training__resource-list {
	padding-left: 1.25rem;
}

.jtr-training__resource-list li {
	margin-bottom: 0.5rem;
}

@media (max-width: 991.98px) {
	.jtr-training__presenters {
		margin-top: 1.5rem;
	}

	.jtr-presenter {
		max-width: 100%;
	}
}