/* ============================================================
   CLASS LIBRARY TEMPLATE
   Scoped to .page-class-library
   ============================================================ */

.content {
	padding-right: 0 !important;
}

hr {
	background-color: #cbcfd3;
}

/* Page wrapper */

.page-class-library {
	max-width: 900px;
}

/* Promo banner */

.class-library-promo-banner {
	margin: 25px 0 40px;
}

.class-library-promo-banner img {
	display: block;
	width: 100%;
	height: auto;
}

/* Pricing intro text */

.class-library-pricing-intro {}

/* Jump navigation list */

.class-library-nav {
	margin: 25px 0;
}

.class-library-nav ul {
	columns: 2;
	column-gap: 2rem;
}

.class-library-nav-item {
	break-inside: avoid;
	margin-bottom: 10px;
}

.class-library-nav-item a {
	color: var(--color-alternate);
	font-weight: 700;
}

/* Credit legend */

.class-library-legend {
	margin: 25px 0;
}

/* ============================================================
		 CLASS CARDS (repeater)
		 ============================================================ */

.class-library-list {
	margin-top: 30px;
}

.class-card {
	margin-bottom: 15px;
}

/* Row 1: banner image + aside box side by side */

.class-card-upper {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-bottom: 20px;
}

.class-card-banner {
	flex: 1 1 auto;
}

.class-card-banner img {
	display: block;
	width: 100%;
	height: auto;
}

/* Aside box: watch button + credits */

.class-card-aside {
	background: var(--color-light);
	padding: 15px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex-shrink: 0;
}

.class-card-watch-btn {
	display: block;
	background: #5cb85c;
}

.class-card-watch-btn:hover,
.class-card-watch-btn:focus {
	background: #449d44;
	color: var(--color-white);
}

.class-card-credits {
	font-size: 0.9rem;
	line-height: 1.5;
}

.class-card-credits p {
	margin: 0 0 5px;
}

/* Row 2: speakers grid — full width below the banner/aside row */

.class-card-speakers {
	margin-bottom: 20px;
}

.class-card-speakers>p {
	margin-bottom: 10px;
	font-weight: 700;
}

.class-card-speakers-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	max-width: 610px;
}

.class-card-speaker {
	text-align: center;
	width: calc(50% - 0.5rem);
}

.class-card-speaker a {
	color: var(--color-alternate);
	text-decoration: none;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.class-card-speaker a:hover,
.class-card-speaker a:focus {
	text-decoration: underline;
}

.class-card-speaker img {
	display: block;
	width: 100%;
	max-width: 130px;
	height: auto;
	margin-bottom: 7px;
}

.class-card-speaker-name {
	display: block;
	font-size: 0.85rem;
	line-height: 1.3;
	padding: 0 12px;
}

/* Row 3: description */

.class-card-lower {
	margin-bottom: 15px;
}

/* ============================================================
		 BOTTOM ZONES
		 ============================================================ */

/* FAQ block */

.class-library-faq {}

/* Disclaimers block */

.class-library-disclaimers {}

/* ============================================================
		 RESPONSIVE — tablet and up
		 ============================================================ */

@media (min-width: 640px) {

	.class-card-speaker {
		width: calc(25% - 0.75rem);
	}

	.class-card-upper {
		flex-direction: row;
		align-items: flex-start;
	}

	.class-card-banner {
		flex: 0 0 65%;
	}

	.class-card-aside {
		flex: 0 0 calc(35% - 1rem);
	}

}

@media (min-width: 900px) {

	.class-library-nav ul {
		columns: 2;
		column-gap: 2.5rem;
	}

}