/* ==========================================================================
   Metamorph Pre School — Awards page
   Breakpoints: laptop <= 1366px, tablet <= 1024px, mobile <= 767px
   ========================================================================== */

/* ---------- Title banner ---------- */
.awards-hero {
	margin-top: -187px;
	background-color: #BAE4F4;
}

.awards-hero .page-hero__overlay {
	background-color: var(--accent-5);
	opacity: .5;
}

.awards-hero .page-hero__title {
	color: var(--accent-3);
	text-transform: uppercase;
}

.awards-hero__text p {
	line-height: 1;
}

/* ---------- Meet our visionary leader ---------- */
.leader-intro {
	padding: 3% 0 0;
	background-color: #BAE4F4;
}

.leader-intro__inner {
	padding: 10px;
}

.leader-intro__title {
	text-align: center;
}

/* ---------- Leader profile ---------- */
.leader {
	position: relative;
	overflow: hidden;
	padding: 65px 30px 154px;
	background-color: #BAE4F4;
}

.leader__shape .shape-fill {
	fill: #DDF1FA;
}

.leader__shape svg {
	height: 98px;
}

.leader__row {
	display: flex;
	position: relative;
	max-width: 1260px;
	margin: 0 auto;
}

.leader__col {
	display: flex;
	flex-direction: column;
	position: relative;
	width: 50%;
}

.leader__card {
	z-index: 1;
	justify-content: center;
	padding: 60px;
	border-radius: 8px;
	background-color: #FFFFFF;
}

.leader__name {
	margin: 0;
	color: var(--accent-3);
	font-family: var(--font-comic);
	font-size: 32px;
	font-weight: 800;
	line-height: 1.1em;
}

.leader__credentials {
	font-weight: 500;
	line-height: 1.7em;
}

.leader__photo {
	margin: 51px 0 -77px -40px;
	text-align: center;
}

.leader__photo img {
	display: block;
	width: 100%;
	max-width: 100%;
	border-radius: 57% 56% 57% 57%;
}

/* ---------- Founder portrait ---------- */
.founder {
	position: relative;
	padding: 2% 0 4%;
	background-color: #DDF1FA;
}

.founder__inner {
	max-width: 1260px;
	margin: 0 auto;
	padding: 10px;
}

.founder__title {
	margin: 2% 0 calc(2% + 20px);
	text-align: center;
}

.founder__portrait-row {
	display: flex;
	padding: 0 30px;
}

.founder__portrait-col {
	width: 33.333%;
	min-height: 1px;
}

.founder__portrait-col--image {
	padding: 10px;
}

.founder__portrait {
	text-align: center;
}

.founder__portrait img {
	width: 88%;
	border-radius: 9px;
}

.founder__text-row {
	margin-top: 2%;
	padding: 0 30px;
}

.founder__text-col {
	padding: 10px;
	border-radius: 8px;
}

.founder__text {
	font-weight: 500;
}

/* ---------- Expertise ---------- */
.expertise {
	position: relative;
	overflow: hidden;
	padding: 65px 30px 80px;
	background-color: #F3D1D1;
}

.expertise__overlay {
	position: absolute;
	inset: 0;
	background-image: url("../images/awards/bg-stars.webp");
	background-position: top right;
	background-repeat: no-repeat;
	background-size: contain;
}

.expertise__row {
	display: flex;
	position: relative;
	max-width: 1260px;
	margin: 0 auto;
}

.expertise__col {
	display: flex;
	flex-direction: column;
	position: relative;
	width: 50%;
}

.expertise__photo {
	margin: 0 -40px 0 0;
	text-align: center;
}

.expertise__photo img {
	display: block;
	width: 100%;
	max-width: 100%;
	border-radius: 50px;
}

.expertise__card {
	z-index: 1;
	padding: 60px;
	border-radius: 8px;
	background-color: #FFFFFF;
}

.expertise__title {
	margin: 2% 0;
	line-height: 1.3em;
}

.expertise__text {
	line-height: 1.7em;
}

.expertise__list {
	--icon-size: 17px;
	--icon-color: #E86936;
	--text-color: #E86936;
	font-family: var(--font-comic);
	font-size: 17px;
	line-height: 1.7em;
}

.expertise__list .icon-list__item:not(:last-child) {
	padding-bottom: 3px;
}

.expertise__list .icon-list__item:not(:first-child) {
	margin-top: 3px;
}

/* ---------- Awards and rewards ---------- */
.rewards {
	position: relative;
	padding: 4% 0 9%;
	background-color: #B1D27C;
}

.rewards__inner {
	position: relative;
	max-width: 1260px;
	margin: 0 auto;
	padding: 10px;
}

.rewards__title {
	margin: 0 0 calc(2% + 20px);
	text-align: center;
}

.rewards__row {
	display: flex;
	padding: 0 30px;
}

.rewards__col {
	display: flex;
	flex-direction: column;
	width: 33.333%;
}

.rewards__card {
	flex-grow: 1;
	margin: 8px;
	padding: 8% 3%;
	background-color: #F5F5F5;
	box-shadow: 0 0 4px 0 rgba(0, 0, 0, .5);
}

.rewards__card--a { border-radius: 0 25% 0 25%; }
.rewards__card--b { border-radius: 25% 0 25% 0; }

.rewards__list {
	--icon-size: 17px;
	--icon-color: #E86936;
	font-family: var(--font-comic);
	font-size: 17px;
	line-height: 1.7em;
}

.rewards__list .icon-list__item:not(:last-child) {
	padding-bottom: 8px;
}

.rewards__list .icon-list__item:not(:first-child) {
	margin-top: 8px;
}

/* ---------- Our founder's awards ---------- */
.founder-awards {
	margin: 2% 0 3%;
	padding: 0 30px;
}

.founder-awards__inner {
	padding: 10px;
}

.founder-awards__title {
	text-align: center;
}

/* ---------- Gallery (masonry) ---------- */
.awards-gallery {
	margin: 0 0 3%;
}

.awards-gallery .gallery-grid {
	--gap: 7px;
	--radius: 9px;
}

/* ==========================================================================
   RESPONSIVE — LAPTOP (<= 1366px)
   ========================================================================== */
@media (max-width: 1366px) {
	.awards-gallery .gallery-grid {
		--gap: 10px;
	}
}

/* ==========================================================================
   RESPONSIVE — TABLET (<= 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
	.awards-hero {
		margin-top: 0;
	}

	.leader-intro__inner,
	.founder-awards__inner {
		max-width: 1024px;
	}

	.leader {
		padding: 50px 30px 100px;
	}

	.leader__row {
		flex-wrap: wrap;
	}

	.leader__col {
		width: 100%;
	}

	.leader__card {
		padding: 20px;
	}

	.leader__name {
		line-height: 1.2em;
	}

	.leader__photo-col {
		margin-top: 10px;
	}

	.leader__photo {
		margin: 0;
		transform: none !important;
	}

	.founder__inner,
	.rewards__inner {
		max-width: 1024px;
	}

	.expertise__card {
		padding: 20px;
	}

}

/* ==========================================================================
   RESPONSIVE — MOBILE (<= 767px)
   ========================================================================== */
@media (max-width: 767px) {
	.awards-hero {
		margin-top: 0;
	}

	.awards-hero__text {
		font-size: 15px;
		line-height: 1.7em;
	}

	.leader {
		padding: 0 20px 70px;
	}

	.leader__row {
		flex-direction: column-reverse;
	}

	.leader__card {
		margin-top: 72px;
	}

	.leader__photo-col {
		margin-top: 38px;
	}

	.leader__credentials,
	.leader__bio {
		text-align: justify;
		line-height: 1.7em;
	}

	.founder__portrait-row {
		flex-wrap: wrap;
		padding: 0 20px;
	}

	.founder__portrait-col {
		width: 100%;
	}

	.founder__text-row {
		padding: 0 0 10%;
	}

	.founder__text {
		line-height: 1.7em;
	}

	.expertise {
		padding: 70px 20px 60px;
	}

	.expertise__row {
		flex-wrap: wrap;
	}

	.expertise__col {
		width: 100%;
	}

	.expertise__card {
		margin-top: 20px;
	}

	.expertise .stack > * + * {
		margin-top: 20px;
	}

	.expertise__photo {
		margin: 0;
		transform: none !important;
	}

	.rewards__row {
		flex-wrap: wrap;
		padding: 0 20px;
	}

	.rewards__col {
		width: 100%;
	}

	.founder-awards {
		padding: 0 20px;
	}
}