:root {
	--btnDuration: 10s;
}

.center {
	margin: 3rem auto;
	width: fit-content;
}

.container {
	position: relative;
}

.hero-cta.hidden,
picture.hidden {
	display: none;
}

video.hidden {
	visibility: hidden;
	position: absolute;
}

@media screen and (max-width: 1079px) {
	video.full-bg-img {
		width: auto;
		height: 70vh;
		object-fit: cover;
	}
}

button.hidden {
	visibility: hidden;
}

.play-video {
	position: relative;
	/* translate: 2rem -3rem; */
	/* top: 3%;
	right: 3%; */
	overflow: hidden;
	isolation: isolate;
	color: var(--textDark);
}

.play-video::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	transition: 0;
	height: 100%;
	width: 0%;
	background: var(--bgLogo);
	z-index: -1;
}

.play-video.play::after {
	transition: var(--btnDuration);
	width: 100%;
}
/*  */

/* Panels */

.panel {
}

.page-count {
	bottom: 0;
	right: 0;
}

.page-count .flex-row {
	align-items: center;
	gap: 1rem;
}

.page-divider {
	height: 2px;
	background-color: var(--bgLogo);
	width: 150px;
}

.page-divider-text {
	max-width: 20ch;
	text-align: right;
}

.panel button {
	margin: auto;
}

.panel .grid {
	gap: 3rem;
}

.panel-card {
	justify-content: flex-start;
	gap: 0.2rem;
	height: max-content;
	font-size: calc(var(--defaultFontSize) + 2px);
}

.panel-card img {
	width: 100%;
}

.panel-name {
	margin: 1rem 0;
	font-size: calc(var(--fontSizeOK) + 2px);
	letter-spacing: 0.1rem;
	font-weight: 600;
}

.panel-highlight {
	font-weight: 600;
}

.panel-expand {
	max-height: 0;
	transition: max-height 1s;
	overflow: hidden;
}

.panel-expand.expand {
	max-height: 50rem;
}

/* awards */
.awards svg {
	fill: var(--colorAward);
	stroke: var(--colorAward);
	stroke-width: 0.5;
	height: auto;
}

.awards .flex-row {
	justify-content: space-around;
	padding: 2rem 0;
}

/* programmes */
.programmes svg {
	width: 30px;
	height: auto;
	fill: var(--textGrey);
}

/* Executing BAD practice here, simply do no mimic such act */
.programme-card.ocean-blue .hint {
	letter-spacing: -5px;
}

.hint {
	transition: var(--speedOK);
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 1;
	font-family: var(--ff-noto-san-jp);
	font-size: 6rem;
	line-height: 1;
	/* text-shadow: 2px 2px 3px rgb(255, 255, 255); */
	/* color: #4d4d4d94; */
	color: #000000d1;
	text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff,
		2px 2px 0 #fff;
	/* -webkit-text-stroke: 2px #fff; */
	letter-spacing: 0;
	line-height: 0.9;
	user-select: none;
	pointer-events: none;

	opacity: 0;
}

.selected .hint {
	opacity: 0.15;
}

/* switch-slide is programme-left/right shared */
.programmes .switch-slide {
	width: fit-content;
	position: absolute;
	top: 50%;
	cursor: pointer;
}

.switch-slide:hover svg {
	fill: var(--bgLogo);
}

.switch-slide.left {
	left: -75px;
	transform: translateY(-50%);
}

.switch-slide.right {
	right: -75px;
	transform: translateY(-50%) rotateY(-180deg);
}

.programmes .flex-row {
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
}
/* img-size = 351 x 481 */

.programmes .img-container {
	width: clamp(200px, 20vw, 350px);
	height: calc(clamp(200px, 20vw, 350px) / 0.73);
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

.programme-card {
	position: relative;
	color: var(--textWhite);
	transition: var(--speedNormal);
	/* width: clamp(175px, 10vw, 225px); */
	flex: 0 1 clamp(175px, 10vw, 225px);
	overflow: hidden;
}

.programme-card.hidden {
	opacity: 0;
	visibility: hidden;
}

.programme-card:hover:not(.selected) {
	outline: 1px solid #525252;
}

.programme-card:hover:not(.selected) img {
	transform: translateX(10px);
}

.programme-card.selected {
	/* width: clamp(200px, 20vw, 350px); */
	flex: 0 0 clamp(200px, 20vw, 350px);
}

.programme-link {
	font-size: smaller;
	text-decoration: underline;
	color: var(--bgLogo);
	display: block;
	font-weight: 500;
	position: absolute;
	bottom: 5%;
	z-index: 5;
	pointer-events: all;
}

@media (hover: hover) {
	/* .panel a button {
		display: none;
	} */

	.programme-link,
	.diploma,
	.programme-desc {
		visibility: hidden;
	}

	.programme-sub {
		visibility: hidden;
	}

	.programme-card:not(.selected) .programme-name.Diploma::before {
		content: "Diploma in";
		position: absolute;
		top: -20px;
		font-size: 0.8rem;
		letter-spacing: 0.7px;
	}

	.programme-card:not(.selected) .programme-name.Degree::before {
		content: "Degree in";
		position: absolute;
		top: -20px;
		font-size: 0.8rem;
	}

	.programme-card:not(.selected) .programme-name.Foundation::before {
		content: "Foundation in";
		position: absolute;
		top: -20px;
		font-size: 0.8rem;
	}
}

.selected .programme-link,
.selected .diploma,
.selected .programme-desc,
.selected .programme-sub {
	visibility: visible;
}

.selected .programme-card-divider {
	/* height: calc(clamp(200px, 20vw, 350px) - 80px); */
	height: 100%;
	visibility: visible;
	display: unset;
	transition: var(--speedSlow);
}

.programme-name {
	position: relative;
	visibility: visible;
	z-index: 2;
	transition: var(--speedOK);
	font-weight: normal;
	letter-spacing: 1px;
}

.selected .programme-name {
	font-size: var(--fontSizeMedium);
}

.programme-card:not(.selected)::before {
	position: absolute;
	width: 100%;
	height: 100%;
	background: radial-gradient(
		circle,
		rgba(255, 255, 255, 0) 0%,
		rgba(0, 0, 0, 1) 100%
	);

	/* background: linear-gradient(
		0deg,
		rgba(0, 0, 0, 1) 0%,
		rgba(255, 255, 255, 0) 65%,
		rgba(0, 0, 0, 1) 100%
	); */
	content: "";
	z-index: 1;
}

.programme-card.selected::before {
	position: absolute;
	width: 100%;
	height: 100%;
	/* background: radial-gradient(
		circle,
		rgba(255, 255, 255, 0) 0%,
		rgba(0, 0, 0, 1) 100%
	); */

	background: linear-gradient(
		0deg,
		rgba(0, 0, 0, 1) 0%,
		rgba(255, 255, 255, 0) 65%,
		rgba(0, 0, 0, 1) 100%
	);
	content: "";
	z-index: 1;
}

.programme-card .flex-col {
	position: absolute;
	top: 0;
	left: 0;
	transition: var(--speedNormal);
	z-index: 1;
	user-select: none;
	padding: 2rem 1rem;
	height: 100%;
	justify-content: flex-start;
}

.programme-card-divider {
	visibility: collapse;
	display: none;
	width: 2px;
	height: 0;
	background-color: #fff;
	margin: 1rem 0;
}

.programme-desc {
	padding: 1rem 0;
	max-width: 80%;
}

.programmes img {
	width: 100%;
	height: 100%;
	transition: var(--speedNormal);
}

/* showcase */

.showcase {
}

.showcase img {
	width: 100%;
}

.showcase .flex-row.slide {
	display: grid;
	justify-content: space-between;
	touch-action: auto;
	grid-template-columns: repeat(4, auto);
	gap: 1rem;
	margin-top: 2rem;
	width: 100%;
}

.showcase .img-container {
	width: calc(var(--optimalWidth) / 4 - 1rem);
	height: fit-content;
}

.showcase-title {
	gap: 1rem;
	font-weight: 600;
	justify-content: space-between;
}

.showcase-title li {
	cursor: pointer;
	position: relative;
}

.showcase-title li.selected::after {
	content: "";
	width: 100%;
	height: 3px;
	position: absolute;
	bottom: -5px;
	left: 0;
	background-color: var(--bgLogo);
}

/* shoutout - splide */
.splide {
	padding-bottom: 2rem;
}

.splide__pagination__page.is-active {
	background-color: var(--bgLogo);
}
/* news */

.news .highlight {
	grid-template-columns: repeat(4, 1fr);
	gap: 3rem;
}

.news .flex-col {
	/* width: clamp(150px, 20vw, 350px); */
	width: 100%;
	gap: 1rem;
	justify-content: space-between;
}

.news img {
	width: 100%;
}

.news h6 {
	font-size: var(--fontSizeMedium);
	font-weight: 600;
	margin-top: 1rem;
}

.news h6,
.news p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.news h6 {
	-webkit-line-clamp: 2;
}

.news p {
	-webkit-line-clamp: 2;
}

.news p :not(:nth-child(1)) {
	display: none;
}

.news .date {
	margin-top: 1rem;
}

@media not all and (hover: hover) {
	@media only screen and (min-width: 300px) and (max-width: 1366px) {
		/* showcase */

		/* Works on Chrome, Edge, and Safari */
		.showcase .flex-row.slide::-webkit-scrollbar {
			width: 12px;
		}

		.showcase .flex-row.slide::-webkit-scrollbar-track {
			background: transparent;
		}

		.showcase .flex-row.slide::-webkit-scrollbar-thumb {
			background-color: var(--bgLogo);
			border-radius: 20px;
		}

		.showcase .img-container {
			flex: 0 0 auto;
			width: clamp(150px, 18vw, 350px);
			height: calc(clamp(150px, 20vw, 350px) / 1.32);
		}

		.showcase .flex-row.slide {
			flex-wrap: nowrap;
			overflow: scroll;
			position: relative;
			opacity: 1;
			scrollbar-color: var(--bgLogo) transparent;
			pointer-events: all;
			display: flex;
		}

		.showcase-title.flex-row {
			display: none;
		}

		.showcase .flex-row.slide:nth-child(1) .img-container {
			margin-top: 0;
		}

		.showcase .flex-row.slide .img-container {
			margin-top: 0.5rem;
		}

		.showcase .flex-row.slide:not(.active)::before {
			width: clamp(150px, 18vw, 350px);
			height: calc(clamp(150px, 20vw, 350px) / 1.32);
			background: #363636b2;
			color: var(--textWhite);
			content: "Digital Animation";
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			visibility: visible;
			pointer-events: none;

			/* Follow the margin-top of the img-container */
			top: 0.5rem;
		}

		.showcase .flex-row.slide::before {
			visibility: hidden;
			position: absolute;
		}

		#Digital-Animation::before {
			top: 0;
		}

		#Visual-Effects::before {
			content: "Visual Effects";
		}

		#Illustration::before {
			content: "Illustration";
		}

		#Advertising-Graphic-Design::before {
			content: "Advertising & Graphic Dessign";
		}

		#Digital-Media-Design::before {
			content: "Digital Media Design";
		}

		#Interior-Design::before {
			content: "Interior Design";
		}

		#Fashion-Design::before {
			content: "Fashion Design";
		}

		#Fine-Art::before {
			content: "Fine Arts";
		}
	}
}

@media only screen and (min-width: 300px) and (max-width: 910px) {
	/* across */
	h5 {
		font-size: calc(var(--fontSizeMedium) - 10px);
	}

	h1,
	h2 {
		font-size: calc(var(--fontSizeHuge) - 16px);
		line-height: calc(var(--fontSizeHuge) - 16px);
	}

	.page-count {
		bottom: 0%;
		align-self: flex-end;
	}

	.page-count.absolute {
		position: relative;
	}

	.page-count .page-divider {
		width: 50px;
	}

	.title-wrapper {
		margin: unset;
		margin-top: 1.5rem;
	}

	.title-wrapper::before {
		top: -5px;
	}

	/* panel */
	.panel .grid {
		grid-template-columns: repeat(1, 1fr);
	}

	/* awards */
	.awards .flex-row {
		padding: 0.5rem 1rem;
		justify-content: flex-start;
	}

	/* programmes */

	.programmes .flex-row {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	.programme-card-divider {
		height: 100%;
		visibility: visible;
	}

	.programme-desc {
		display: none;
	}

	/* .programme-desc {
		padding-top: 50%;
	} */

	.programme-card .flex-col {
		padding: 1rem;
	}

	.panel .grid {
		gap: 1rem;
	}

	.panel a.center {
		margin-top: 0;
	}

	/* programme */

	.switch-slide {
		display: none;
	}

	/* news */
	.news .highlight {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.2rem;
	}
}