/* hybrid--2024-flex-block.css */

/* @todo 
 * 1. Check if being matched anywhere in the codebase (use Site Improve) and remove if not needed: body.hybrid.hybridCourse, body.hybrid.hybridCourse #course-page-wrapper, 
 * 1. reduce the number of selectors used - specificity is too high. 
 * 2. use fr and gap rules instead of calc for grid spacing 
*/

body.hybrid.hybridCourse #course-page-wrapper .inner.flex--block,
.inner.flex--block {
	display: grid !important;
	grid-template-columns: calc((100% * 1 / 3) - 2rem) calc(100% * 2 / 3);
	gap: var(--lt-layout-gap);
}

body.hybrid.hybridCourse #course-page-wrapper .inner.flex--block .flex--title,
.inner.flex--block .flex--title {
	height: 100%;
}

body.hybrid.hybridCourse #course-page-wrapper .inner.flex--block .flex--title .flex--title-container,
.inner.flex--block .flex--title .flex--title-container {
	position: sticky;
	top: 200px;
}

body.hybrid.hybridCourse #course-page-wrapper .inner.flex--block .flex--title .flex--title-container h2,
.inner.flex--block .flex--title .flex--title-container h2 {
	position: unset;
	top: auto;
}

body.hybrid.hybridCourse #course-page-wrapper .inner.flex--block .flex--title h2,
.inner.flex--block .flex--title h2 {
	padding-right: 2.75rem;
	font-size: 3rem !important;
	font-weight: 400 !important;
	position: sticky;
	top: 200px;
	padding-bottom: 2rem;
}

body.hybrid.hybridCourse #course-page-wrapper .inner.flex--block .flex--content,
.inner.flex--block .flex--content {
	overflow: hidden;
}

.inner.flex--block .flex--content h3 {
	margin-top: 2rem;
	margin-bottom: 0.75rem;
}

.inner.flex--block .flex--content h4 {
	margin-bottom: 2rem;
	padding-left: 0.25rem;
}

.inner.flex--block .flex--content ul.li-two-col {
	columns: 1;
	-webkit-columns: 1;
	-moz-columns: 1;
}

@media (max-width: 768px) {
	body.hybrid.hybridCourse #course-page-wrapper .inner.flex--block,
	.inner.flex--block {
		display: block !important;
	}
}

/* equal grids start */
.flex--content-grid-2 {
	display: grid;
	gap: var(--lt-layout-gap);
	grid-template-columns: 1fr 1fr;
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.flex--content-grid-3 {
	display: grid;
	gap: var(--lt-layout-gap);
	grid-template-columns: 1fr 1fr 1fr;
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.flex--content-grid-4 {
	display: grid;
	gap: var(--lt-layout-gap);
	grid-template-columns: 1fr 1fr 1fr 1fr;
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.flex--content-grid-5 {
	display: grid;
	gap: var(--lt-layout-gap);
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	margin-top: 2rem;
	margin-bottom: 2rem;
}

/* equal grids end */

/* temporarily added here for testing school pages in dev */

/* info box start */
.flex--content .info-box {
	background-color: #dcd2c1;
	color: #000;
	padding-bottom: 2rem;
	img {
		margin-bottom: 0rem !important;
	}
	.info-box__content {
		padding: 2rem;
	}
	.lt-button {
		margin-left: 2rem;
	}
}

.rose-deepred .flex--content .info-box {
	background-color: var(--lt-rose);
	color: #000;
}

@media (max-width: 768px) {
	.flex--content-grid-2,
	.flex--content-grid-3,
	.flex--content-grid-4,
	.flex--content-grid-5 {
		display: block !important;
	}

	.flex--content .info-box {
		margin-bottom: 2rem;
	}
}

/* info box end */

/* extra school overrides to merge start */
section:not(:first-child) {
	margin-top: 3rem;
	margin-bottom: 3rem;
}

.inner.flex--block .flex--content .general-content {
	margin-top: 2rem;
	margin-bottom: 3rem;
}

.general-content.two-column-hybrid:first-of-type {
	margin-top: 2rem;
}

.general-content.two-column-hybrid {
	margin-top: 0;
	margin-bottom: 0;
}

.inner.flex--block .flex--content .grid--card .image-container {
	max-width: 400px;
	max-height: 280px;
	vertical-align: middle;
	align-items: center;
	display: flex;
	margin-bottom: 2rem;
}

.inner.flex--block .flex--content .grid--card .grid__main {
	margin-bottom: 2rem;
}

#peopleList td {
	vertical-align: top;
}

.lt-section-course-list-by-school {
	background-color: #dcd2c1;
	padding-top: 3rem;
	padding-bottom: 3rem;

	.ootb-tabcordion--entry-content {
		padding-left: 0;
		padding-right: 0;
	}

	.ootb-tabcordion--entry-content table.course--table thead tr {
		display: none;
	}

	.ootb-tabcordion--entry-content table.course--table td,
	#course--people--list table.course--table td {
		vertical-align: middle;
		width: 25%;
	}

	.ootb-tabcordion--entry-content table.course--table td:nth-of-type(1) {
		width: 25%;
		padding-right: 1.75rem;
	}

	.ootb-tabcordion--entry-content table.course--table td:nth-of-type(2) {
		width: 20%;
		padding-right: 1rem;
	}

	.ootb-tabcordion--entry-content table.course--table td:nth-of-type(3) {
		text-align: center;
	}

	.ootb-tabcordion--entry-content table.course--table td:nth-of-type(4),
	#course--people--list table.course--table td:nth-of-type(4) {
		text-align: right;
	}

	#course--people--list table.course--table td:nth-of-type(1) img {
		max-width: 100px;
	}

	@media (max-width: 768px) {
		.ootb-tabcordion--entry-content table.course--table td,
		#course--people--list table.course--table td {
			width: 100%;
			text-align: left !important;
		}

		#course--people--list table.course--table td:nth-of-type(1) img {
			max-width: unset !important;
			min-width: 400px !important;
		}

		.ootb-tabcordion--entry-content table.course--table td:nth-of-type(1) {
			width: 100%;
			padding-right: 0;
		}

		.ootb-tabcordion--entry-content table.course--table td:nth-of-type(2) {
			width: 100%;
			padding-right: 0;
		}

		.ootb-tabcordion--entry-content table.course--table td:nth-of-type(3),
		.ootb-tabcordion--entry-content table.course--table td:nth-of-type(4),
		#course--people--list table.course--table td:nth-of-type(4) {
			text-align: left;
		}
	}

	/* meet the team table override start - replace with lt-layout-grid class in CT layout */
	#course--people--list .dt-layout-row:first-of-type {
		display: grid;
		grid-template-columns: calc((100% * 1 / 2) - 2rem) calc(100% * 1 / 2);
		gap: var(--lt-layout-gap);
	}

	#course--people--list .dt-layout-row select,
	#course--people--list .dt-layout-row input[type="search"] {
		border-radius: 0;
		background-color: var(--lt-rose);
		border: 0.15rem solid var(--primary);
		border-color: var(--lt-rose);
	}

	#course--people--list .dt-layout-row label {
		display: inline-block;
	}

	#course--people--list .dt-layout-row .dt-search {
		text-align: right;
	}

	#course--people--list .dt-layout-row .dt-search label {
		padding-left: 0;
		padding-right: 1.5rem;
	}

	#course--people--list .dt-layout-row.dt-layout-table table#peopleList thead tr th {
		text-align: left;
		padding-left: 0;
	}

	#course--people--list .dt-layout-row.dt-layout-table {
		margin-bottom: 2rem;
	}

	#course--people--list .dt-layout-row #peopleList_info {
		margin-bottom: 2rem;
	}

	#course--people--list .dt-layout-row .dt-paging nav button.next {
		/* needed as there is an override from some other style on this particular one - next */
		padding: 0.6875rem 1.25rem 0.5625rem;
	}

	#course--people--list .dt-layout-row .dt-paging nav button {
		background-color: var(--lt-rose25);
	}

	#course--people--list .dt-layout-row .dt-paging nav button:hover {
		background-color: var(--lt-rose75);
	}

	#course--people--list .dt-layout-row .dt-paging nav button.current {
		background-color: var(--lt-rose);
	}
}

@media (max-width: 768px) {
	.lt-section-course-list-by-school #course--people--list .dt-layout-row:first-of-type {
		display: block;
		margin-bottom: 1rem;
	}

	.lt-section-course-list-by-school #course--people--list .dt-layout-row .dt-search {
		text-align: left;
	}
}

/* meet the team table override end */

/* extra school overrides to merge end */