/*
 * Course detail template (templates/course-detail.php).
 *
 * Reproduces the previous Elementor build of /our-courses/detail/ to the pixel:
 * every size, weight, line-height, margin and breakpoint below was taken from
 * the computed styles of that page at 1440px, 900px and 390px.
 *
 * Colours come from the Elementor kit variables (--e-global-color-*). The theme
 * prints them on :root from the kit's saved palette (tscg_print_brand_palette),
 * so each college keeps its palette even though Elementor does not load here.
 * Breakpoints match Elementor's: tablet <= 1024px, mobile <= 767px.
 */

.tcg-cd {
	--tcg-cd-primary: var(--e-global-color-primary, #3E266A);
	--tcg-cd-secondary: var(--e-global-color-secondary, #693A83);
	--tcg-cd-accent: var(--e-global-color-accent, #947023);
	--tcg-cd-text: var(--e-global-color-text, #535353);
	--tcg-cd-muted: #615B6A;
	--tcg-cd-rule: #A09BA4;
	--tcg-cd-rule-dark: #575060;
	--tcg-cd-content: 1115px;
	display: block;
	width: 100%;
	font-family: "proxima-nova", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 22px;
	color: var(--tcg-cd-text);
}

.tcg-cd *,
.tcg-cd *::before,
.tcg-cd *::after {
	box-sizing: border-box;
}

.tcg-cd a {
	text-decoration: none;
	box-shadow: none;
}

.tcg-cd-container {
	width: 100%;
	max-width: var(--tcg-cd-content);
	margin: 0 auto;
}

/* Inline SVG icons scale with the surrounding font-size, like the old <i> glyphs. */
.tcg-cd .tcg-cd-icon {
	display: block;
	height: 1em;
	width: auto;
	fill: currentColor;
	flex: 0 0 auto;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                              */
/* ------------------------------------------------------------------ */

.tcg-cd .tcg-cd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 22px 45px;
	border-radius: 0;
	background-color: var(--tcg-cd-secondary);
	color: #FFFFFF;
	fill: #FFFFFF;
	font-family: "proxima-nova", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.75px;
	text-transform: uppercase;
	text-align: center;
	transition: all 0.3s;
}

.tcg-cd .tcg-cd-btn:hover,
.tcg-cd .tcg-cd-btn:focus,
.tcg-cd .tcg-cd-btn:visited {
	color: #FFFFFF;
}

.tcg-cd .tcg-cd-btn--secondary {
	background-color: var(--tcg-cd-secondary);
}

.tcg-cd .tcg-cd-btn--accent {
	background-color: var(--tcg-cd-accent);
}

.tcg-cd .tcg-cd-btn--pill {
	padding: 20px 45px;
	border-radius: 100px;
}

.tcg-cd .tcg-cd-btn--card {
	padding: 8px 20px;
	border-radius: 100px;
	background-color: var(--tcg-cd-primary);
}

/* Same hover scale the hero buttons had via the global .anm-elmnt rule. */
.tcg-cd .tcg-cd-anim {
	transition: transform 300ms ease 0ms;
}

.tcg-cd .tcg-cd-anim:hover {
	transform: scale(1.08);
}

/* ------------------------------------------------------------------ */
/* Hero                                                                 */
/* ------------------------------------------------------------------ */

.tcg-cd-hero {
	position: relative;
	padding: 30px 0;
	background-color: var(--tcg-cd-primary);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}

.tcg-cd-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.tcg-cd-hero__top {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
}

.tcg-cd-hero__back {
	flex: 0 0 50%;
	max-width: 50%;
	text-align: left;
}

.tcg-cd .tcg-cd-back {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 5px 5px 0;
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.75px;
	text-transform: uppercase;
}

.tcg-cd a.tcg-cd-back:hover {
	transform: scale(1.08);
	transition: transform 300ms ease 0ms;
}

.tcg-cd-share {
	flex: 0 0 50%;
	max-width: 50%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 30px;
}

.tcg-cd-share__label {
	display: block;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
}

.tcg-cd .tcg-cd-share__list {
	display: flex;
	gap: 0 5px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcg-cd .tcg-cd-share__list li {
	margin: 0;
	padding: 0;
}

.tcg-cd .tcg-cd-share__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 43px;
	height: 45px;
	color: #FFFFFF;
	font-size: 23px;
	line-height: 1;
}

.tcg-cd a.tcg-cd-share__btn:hover {
	opacity: 0.7;
}

.tcg-cd-crumbs {
	flex: 0 0 100%;
	max-width: 100%;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 700;
	line-height: 22px;
}

.tcg-cd .tcg-cd-crumbs p {
	margin: 0;
	color: #FFFFFF;
}

.tcg-cd .tcg-cd-crumbs a {
	color: #FFFFFF;
}

.tcg-cd .tcg-cd-crumbs a:hover {
	text-decoration: underline;
}

.tcg-cd-hero__title {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	width: 100%;
	margin-top: 25px;
}

/* White GM IoT logo, shown for GMIoTCourse courses only. */
.tcg-cd .tcg-cd-hero__gmiot {
	flex: 0 0 auto;
	display: block;
	height: 58px;
	width: auto;
}

.tcg-cd .tcg-cd-title {
	margin: 0;
	padding: 0;
	color: #FFFFFF;
	font-family: "proxima-nova", sans-serif;
	font-size: 40px;
	font-weight: 800;
	line-height: 45px;
	text-align: left;
}

.tcg-cd-hero__actions {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 20px;
	width: 100%;
	margin-top: 25px;
}

/* ------------------------------------------------------------------ */
/* Details: side panel + content                                        */
/* ------------------------------------------------------------------ */

.tcg-cd-details {
	padding: 60px 0 0;
}

/*
 * The "course not found" message is the only thing on the page, so it needs
 * its own bottom padding. The footer's social bar is pulled up across the join
 * with the page, and without this it would land on top of the message.
 */
.tcg-cd-details--empty {
	padding-bottom: 130px;
}

.tcg-cd-details__inner {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 10px;
}

.tcg-cd-side {
	flex: 0 1 30%;
	display: flex;
	flex-direction: column;
	padding-right: 25px;
}

.tcg-cd-main {
	flex: 0 1 70%;
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
	/* The Elementor build ended this column with an empty shortcode widget,
	   which contributed one 20px flex gap below the last section. Keep it so
	   the "Ready to begin" band sits at the same height. */
	padding-bottom: 20px;
}

.tcg-cd .tcg-cd-side__heading {
	position: relative;
	margin: 0;
	padding: 0;
	color: var(--tcg-cd-accent);
	font-family: "proxima-nova", sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 55px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

@media (min-width: 769px) {
	.tcg-cd .tcg-cd-side__heading::after {
		content: "";
		position: absolute;
		display: block;
		top: 50%;
		right: 0;
		width: 120px;
		height: 1px;
		background: var(--tcg-cd-rule);
	}
}

.tcg-cd-box {
	margin: 25px 0 0;
}

.tcg-cd-box--college {
	margin: 20px 0 0;
}

.tcg-cd-box--location {
	margin: 20px 0 40px;
}

.tcg-cd .tcg-cd-box__label {
	margin: 0;
	padding: 0;
	color: var(--tcg-cd-muted);
	font-family: "proxima-nova", sans-serif;
	font-size: 18px;
	font-weight: 800;
	line-height: 45px;
}

.tcg-cd .tcg-cd-box__value {
	margin: 0;
	color: var(--tcg-cd-muted);
	font-size: 15px;
	font-weight: 600;
	line-height: 22px;
}

.tcg-cd .tcg-cd-gmiot {
	display: block;
	height: 58px;
	width: auto;
}

.tcg-cd-section {
	margin: 0 0 15px;
}

.tcg-cd .tcg-cd-section__heading {
	margin: 0 0 8px;
	padding: 0;
	color: var(--tcg-cd-accent);
	font-family: "proxima-nova", sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 55px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.tcg-cd-section__body {
	font-size: 16px;
	font-weight: 600;
	line-height: 22px;
	color: var(--tcg-cd-text);
}

.tcg-cd .tcg-cd-section__body p {
	margin: 0 0 0.9rem;
}

.tcg-cd .tcg-cd-section__body p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* Apply band                                                           */
/* ------------------------------------------------------------------ */

.tcg-cd-apply {
	padding: 60px 0 120px;
}

.tcg-cd-apply__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.tcg-cd-apply__inner a:hover {
	transform: scale(1.08);
	transition: transform 300ms ease 0ms;
}

.tcg-cd-apply__eyebrow {
	position: relative;
	display: block;
	width: 100%;
	color: var(--tcg-cd-secondary);
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	text-align: center;
}

@media (min-width: 769px) {
	.tcg-cd-apply__eyebrow::before,
	.tcg-cd-apply__eyebrow::after {
		content: "";
		position: absolute;
		display: block;
		top: 50%;
		width: 160px;
		height: 1px;
		background: var(--tcg-cd-rule-dark);
	}

	.tcg-cd-apply__eyebrow::before {
		left: 20%;
	}

	.tcg-cd-apply__eyebrow::after {
		right: 20%;
	}
}

.tcg-cd .tcg-cd-apply__heading {
	margin: 20px 0 40px;
	padding: 0;
	color: var(--tcg-cd-primary);
	font-family: "proxima-nova", sans-serif;
	font-size: 50px;
	font-weight: 700;
	line-height: 55px;
	text-align: center;
}

/* ------------------------------------------------------------------ */
/* Similar courses                                                      */
/* ------------------------------------------------------------------ */

.tcg-cd-related {
	padding: 0 0 135px;
	background-color: var(--tcg-cd-secondary);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
}

.tcg-cd-related__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 1150px;
	margin: 0 auto;
}

.tcg-cd-related__inner .tcg-cd-card a:hover {
	transform: scale(1.08);
	transition: transform 300ms ease 0ms;
}

.tcg-cd-related__head {
	width: fit-content;
	max-width: 100%;
	margin-top: -40px;
	padding: 15px 45px;
	background-color: var(--tcg-cd-primary);
	text-align: center;
}

.tcg-cd .tcg-cd-related__heading {
	margin: 0;
	padding: 0;
	color: #FFFFFF;
	font-family: "proxima-nova", sans-serif;
	font-size: 40px;
	font-weight: 700;
	line-height: 45px;
	text-align: center;
}

.tcg-cd-related__sub {
	display: block;
	margin-top: 5px;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 700;
	line-height: 22px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.tcg-cd-cards {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 30px;
	width: 100%;
	margin-top: 37px;
}

.tcg-cd-card {
	flex: 0 1 32%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 30px 33px;
	background-color: #FFFFFF;
	box-shadow: -10px 10px 0 0 var(--tcg-cd-accent);
}

.tcg-cd .tcg-cd-card__title {
	width: 100%;
	margin: 0 0 10px;
	padding: 0;
	color: var(--tcg-cd-primary);
	font-family: "proxima-nova", sans-serif;
	font-size: 30px;
	font-weight: 700;
	line-height: 35px;
}

.tcg-cd .tcg-cd-card__title a {
	color: inherit;
}

.tcg-cd .tcg-cd-card__title a:hover {
	text-decoration: underline;
}

.tcg-cd .tcg-cd-card__dept {
	width: 100%;
	margin: 0;
	color: var(--tcg-cd-text);
	font-size: 16px;
	font-weight: 600;
	line-height: 22px;
}

.tcg-cd .tcg-cd-card__btn {
	margin-top: 20px;
}

/* ------------------------------------------------------------------ */
/* Tablet (Elementor: <= 1024px)                                        */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.tcg-cd-hero {
		padding: 30px 20px;
	}

	.tcg-cd-hero__top {
		row-gap: 15px;
	}

	.tcg-cd-hero__title {
		margin-top: 20px;
	}

	.tcg-cd-hero__actions {
		margin-top: 20px;
	}

	.tcg-cd-details {
		padding: 50px 20px;
	}

	.tcg-cd-side {
		padding-right: 0;
	}

	.tcg-cd .tcg-cd-side__heading,
	.tcg-cd .tcg-cd-section__heading {
		line-height: 36px;
	}

	.tcg-cd .tcg-cd-box__label {
		line-height: 30px;
	}

	.tcg-cd-apply {
		padding: 50px 20px 120px;
	}

	.tcg-cd .tcg-cd-apply__heading {
		margin: 10px 0 40px;
		font-size: 30px;
		line-height: 36px;
	}

	.tcg-cd-related {
		padding: 0 20px 100px;
	}

	.tcg-cd .tcg-cd-related__heading {
		font-size: 26px;
		line-height: 30px;
	}

	.tcg-cd-cards {
		flex-wrap: wrap;
		gap: 25px 4%;
	}

	.tcg-cd-card {
		flex-basis: 48%;
		padding: 25px;
	}

	.tcg-cd .tcg-cd-card__title {
		font-size: 26px;
		line-height: 32px;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.tcg-cd-side {
		flex-basis: 40%;
	}

	.tcg-cd-main {
		flex-basis: 69%;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile (Elementor: <= 767px)                                         */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.tcg-cd .tcg-cd-btn {
		font-size: 15px;
		padding: 20px 40px;
	}

	.tcg-cd .tcg-cd-btn--pill {
		padding: 20px 45px;
	}

	.tcg-cd .tcg-cd-btn--card {
		padding: 8px 20px;
	}

	.tcg-cd-hero {
		background-position: bottom left;
	}

	.tcg-cd-hero__back {
		flex-basis: 100%;
		max-width: 100%;
		text-align: center;
	}

	.tcg-cd-share {
		flex-basis: 100%;
		max-width: 100%;
		justify-content: center;
		align-items: center;
	}

	.tcg-cd-crumbs {
		display: none;
	}

	.tcg-cd .tcg-cd-title {
		font-size: 32px;
		line-height: 40px;
		text-align: center;
	}

	.tcg-cd-hero__title {
		flex-direction: column;
		gap: 20px;
	}

	.tcg-cd-hero__actions {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10px;
		margin-top: 30px;
	}

	.tcg-cd-hero__actions .tcg-cd-btn {
		width: 100%;
		margin-top: 0;
	}

	.tcg-cd-details {
		padding: 30px 20px;
	}

	.tcg-cd-details__inner {
		flex-wrap: wrap;
	}

	.tcg-cd-side,
	.tcg-cd-main {
		flex-basis: 100%;
	}

	.tcg-cd-box,
	.tcg-cd-box--college,
	.tcg-cd-box--age {
		margin: 0;
	}

	.tcg-cd-box--location,
	.tcg-cd-box--department {
		margin: 15px 0 20px;
	}

	.tcg-cd-box--course-start-date,
	.tcg-cd-box--course-duration,
	.tcg-cd-box--course-time,
	.tcg-cd-box--course-fee,
	.tcg-cd-box--course-code,
	.tcg-cd-box--gmiot {
		margin: 0 0 20px;
	}

	.tcg-cd-section {
		margin: 0;
	}

	/* The last section (Disclaimer) kept its 15px margin on mobile in the old build. */
	.tcg-cd-section:last-child {
		margin-bottom: 15px;
	}

	.tcg-cd-apply {
		padding: 30px 0 90px;
	}

	.tcg-cd .tcg-cd-apply__heading {
		margin: 10px 0 30px;
	}

	.tcg-cd-related__head {
		padding: 15px 25px;
	}

	.tcg-cd-cards {
		gap: 30px;
		margin-top: 20px;
	}

	.tcg-cd-card {
		flex-basis: 100%;
	}
}

/* ------------------------------------------------------------------ */
/* Admin-only "Refresh course data" control                            */
/* ------------------------------------------------------------------ */

/*
 * Sits in the gap below the hero, pinned to the right. The zero height keeps
 * it out of the flow so the page lays out for an administrator exactly as it
 * does for a visitor.
 */
.tcg-cd-refresh {
	position: relative;
	top: 20px;
	z-index: 5;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 12px;
	height: 0;
	padding: 0 25px;
	font-size: 14px;
}

.tcg-cd-refresh__btn {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	color: #fff;
	background: var(--e-global-color-primary, #3e266a);
	border-radius: 3px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.tcg-cd-refresh__btn:hover,
.tcg-cd-refresh__btn:focus {
	color: #fff;
	opacity: 0.85;
}

.tcg-cd-refresh__done {
	padding: 8px 12px;
	font-weight: 700;
	color: #12632b;
	background: #e6f4ea;
	border-radius: 3px;
}

/* Narrow screens: back into the flow, where there is no room to overlap. */
@media (max-width: 767px) {
	.tcg-cd-refresh {
		top: 0;
		height: auto;
		padding: 16px 25px 0;
	}
}

/* ------------------------------------------------------------------ */
/* Banner before / after the hero (Customizer → Course Detail Page)    */
/* ------------------------------------------------------------------ */

.tcg-cd-banner {
	--tcg-cd-banner-bg: var(--tcg-cd-accent);
	--tcg-cd-banner-fg: #FFFFFF;
	padding: 18px 25px;
	background-color: var(--tcg-cd-banner-bg);
	color: var(--tcg-cd-banner-fg);
}

.tcg-cd-banner--primary {
	--tcg-cd-banner-bg: var(--tcg-cd-primary);
}

.tcg-cd-banner--secondary {
	--tcg-cd-banner-bg: var(--tcg-cd-secondary);
}

.tcg-cd-banner--light {
	--tcg-cd-banner-bg: #F2F0F4;
	--tcg-cd-banner-fg: var(--tcg-cd-primary);
}

.tcg-cd-banner__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 30px;
}

.tcg-cd-banner__message {
	flex: 1 1 320px;
	margin: 0;
	font-size: 17px;
	line-height: 1.4;
}

.tcg-cd .tcg-cd-banner__message a {
	color: inherit;
	text-decoration: underline;
}

.tcg-cd .tcg-cd-banner__btn {
	flex: 0 0 auto;
	padding: 10px 24px;
	border: 2px solid currentColor;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: inherit;
	transition: background-color .2s, color .2s;
}

.tcg-cd .tcg-cd-banner__btn:hover,
.tcg-cd .tcg-cd-banner__btn:focus {
	background-color: var(--tcg-cd-banner-fg);
	color: var(--tcg-cd-banner-bg);
}

@media (max-width: 767px) {
	.tcg-cd-banner {
		padding: 16px 20px;
	}

	.tcg-cd-banner__message {
		flex-basis: 100%;
		font-size: 16px;
	}
}