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

/* Section headings shared by this page */
.school-intro__title,
.enrol__title,
.kits__title,
.parent-speak__title,
.faq__title,
.gallery-title__heading {
	margin: 0;
	color: #0a303a;
	font-family: var(--font-display);
	font-size: 48px;
	font-weight: 800;
	line-height: 1.1em;
	letter-spacing: 3.4px;
}

/* ---------- Title banner ---------- */
.admissions-hero {
	background-color: #B1D27C;
}

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

.admissions-hero .page-hero__title {
	color: #0a303a;
	text-transform: uppercase;
}

/* ---------- Metamorph Pre school ---------- */
.school-intro {
	padding: 5% 0 0;
	background-color: #B1D27C;
}

.school-intro__inner {
	padding: 10px;
}

.school-intro__title {
	font-size: 55px;
	line-height: 1.3em;
	text-align: center;
}

.school-intro__title span {
	color: #E74C25;
}

/* ---------- Info cards ---------- */
.info-cards {
	overflow: hidden;
	padding: 35px 20px 50px;
	background-color: #B1D27C;
}

.info-cards__row {
	display: flex;
	max-width: 1260px;
	margin: 0 auto;
}

.info-cards__col {
	display: flex;
	width: 25%;
}

.info-card {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	flex: none;
	width: calc(100% - 16px);
	margin: 8px;
	padding: 20px;
	border-radius: 14px;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, .5);
}

/* Percentage padding resolves against the column, as on the original */
.info-card--first {
	padding: 3%;
}

.info-card--second {
	align-items: center;
	width: calc(100% - 12px);
	margin: 6px;
}

/* The original's last card keeps the full column width (it overflows by 8px) */
.info-card--last {
	width: 100%;
}

.info-card__box {
	width: 100%;
	padding: 0 20px;
	text-align: center;
}

.info-card__box--sessions {
	padding-top: 3%;
}

.info-card__box--contact {
	width: calc(100% + 11px);
	margin-left: -11px;
}

.info-card__title {
	margin: 20px 0 .6em;
	color: #E74C25;
	font-family: var(--font-comic);
	font-size: 26px;
	font-weight: 900;
	line-height: 1.21em;
}

.info-card__text {
	margin: 0;
	color: #20323D;
	font-family: var(--font-text);
	font-size: 15px;
}

/* ---------- Green spacer ---------- */
.green-spacer {
	position: relative;
	z-index: 3;
	overflow: hidden;
	background-color: #B1D27C;
}

.green-spacer__inner {
	height: 62px;
}

/* ---------- Enquiry form ---------- */
.enrol {
	position: relative;
	overflow: hidden;
	padding: 70px 20px 130px;
	background-color: #F3D1D1;
}

.enrol__bg-scale {
	position: absolute;
	inset: 0;
}

.enrol__bg {
	position: absolute;
	inset: 0;
	background-image: url("../images/illustration-mountain.svg");
	background-position: bottom left;
	background-repeat: no-repeat;
	background-size: auto;
}

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

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

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

.enrol__title {
	margin-bottom: calc(3% + 20px);
	line-height: 1.3em;
	letter-spacing: normal;
}

.enrol__form-wrap {
	margin-right: 21%;
}

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

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

/* Enquiry form fields */
/* ---------- Student kits ---------- */
.kits {
	display: flex;
	align-items: center;
	position: relative;
	min-height: 710px;
	padding: 0 30px;
	background-color: rgba(178, 78, 154, .32);
}

.kits__overlay {
	position: absolute;
	inset: 0;
	background-image: url("../images/admissions/animal-cartoon.webp");
	background-position: center right;
	background-repeat: no-repeat;
	background-size: 18% auto;
	opacity: .5;
}

.kits__shape-top .shape-fill {
	fill: #F3D1D1;
}

.kits__shape-top svg {
	height: 101px;
}

.kits__shape-bottom svg {
	height: 98px;
}

.kits__inner {
	position: relative;
	width: 100%;
	max-width: 1260px;
	margin: 0 auto;
}

.kits__content {
	padding: 10px;
}

.kits__title {
	margin-bottom: calc(3% + 20px);
	letter-spacing: 3.5px;
	text-align: center;
}

.kit-steps {
	display: flex;
	margin: 0 1.5em calc(.5em + 20px);
	padding: 20px;
	list-style: none;
}

.kit-steps__item {
	flex: 1 1 0;
	min-width: 0;
	position: relative;
}

.kit-steps__item:not(:last-child) {
	padding-bottom: 48px;
}

.kit-steps__marker {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 96px;
	height: 96px;
	margin: 0 auto;
	border-radius: 50%;
}

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

.kit-steps__content {
	padding: 5px 5px 0 0;
}

.kit-steps__title {
	color: #09303A;
	font-family: var(--font-comic);
	font-size: 20px;
	line-height: normal;
	text-align: center;
}

.kit-steps__desc {
	font-family: var(--font-text);
	font-size: 17px;
	text-align: center;
}

.kit-steps__desc p {
	margin: 0;
}

.kits__note {
	padding-top: 2%;
	font-family: var(--font-text);
	font-size: 17px;
	font-weight: 600;
	text-align: center;
}

.kits__note p {
	margin: 0;
}

.kits__note span {
	font-weight: 400;
}

.kits__note strong {
	font-weight: 700;
}

/* ---------- Age specific modules (shared block, page tweak) ---------- */

/* ---------- Parent speak ---------- */
.parent-speak {
	position: relative;
	overflow: hidden;
	margin-top: 5%;
	padding: 146px 20px 130px;
	background-color: #BAE4F4;
}

.parent-speak__bg-scale {
	position: absolute;
	inset: 0;
}

.parent-speak__bg {
	position: absolute;
	inset: 0;
	background-image: url("../images/admissions/illustration-right-cut-1.svg");
	background-position: bottom right;
	background-repeat: no-repeat;
	background-size: contain;
}

.parent-speak__row {
	position: relative;
	max-width: 1260px;
	margin: 0 auto;
}

.parent-speak__col {
	padding: 60px;
	border-radius: 8px;
}

.parent-speak__title {
	margin-bottom: calc(3% + 20px);
	text-align: center;
}

.parent-speak__swiper {
	width: 95%;
	padding-bottom: 40px;
}

.parent-speak__swiper .swiper-slide {
	padding: 20px;
	border-radius: 10px;
}

.speak {
	text-align: center;
}

.speak__content {
	position: relative;
	padding: 20px;
	border-radius: 14px;
	background-color: #F9FAFA;
}

.speak__content::after {
	content: "";
	display: block;
	position: absolute;
	bottom: -7px;
	left: calc(50% - 7px);
	width: 14px;
	height: 14px;
	background-color: inherit;
	transform: scaleX(.75) rotate(-45deg);
}

.speak__text {
	color: var(--text);
	font-family: var(--font-comic);
	font-size: 18px;
	font-style: italic;
	line-height: 1.7em;
}

.speak__footer {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 25px;
	padding: 0 20px;
}

.speak__image {
	line-height: 27px;
}

.speak__image img {
	width: 50px;
	height: 50px;
	border-radius: 999px;
	object-fit: cover;
	vertical-align: baseline;
}

.speak__cite {
	display: flex;
	flex-direction: column;
	margin-left: 20px;
	font-size: 14px;
	line-height: 1.5;
	text-align: start;
}

.speak__name {
	color: var(--text);
	font-family: var(--font-comic);
	font-weight: 700;
}

.parent-speak__pagination.swiper-pagination {
	bottom: 10px;
	line-height: 27px;
}

.parent-speak__pagination .swiper-pagination-bullet {
	width: 6px;
	height: 6px;
	margin: 0 6px !important;
	background: #000000;
	opacity: .2;
}

.parent-speak__pagination .swiper-pagination-bullet-active {
	opacity: 1;
}

/* ---------- FAQ ---------- */
.faq {
	margin: 4% 0;
	padding: 0 30px;
}

.faq__inner {
	padding: 10px;
}

.faq__anchor {
	position: relative;
	top: -150px;
}

.faq__title {
	margin-bottom: calc(3% + 20px);
	text-align: center;
}

/* ---------- Gallery ---------- */
.gallery-title {
	margin: 1% 0 2%;
}

.gallery-title__inner {
	padding: 10px;
}

.gallery-title__heading {
	text-align: center;
}

.admissions-gallery {
	margin: 0 0 4%;
	padding: 0 30px;
}

.admissions-gallery__inner {
	padding: 10px;
}

.admissions-gallery .gallery-grid {
	--gap: 2px;
}

/* ==========================================================================
   RESPONSIVE — LAPTOP (<= 1366px)
   ========================================================================== */
/* The gallery's JS breakpoint switches below 1366px */
@media (max-width: 1365px) {
	.admissions-gallery .gallery-grid {
		--gap: 10px;
	}
}

/* ==========================================================================
   RESPONSIVE — TABLET (<= 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
	.enrol__title,
	.kits__title,
	.parent-speak__title,
	.faq__title,
	.gallery-title__heading {
		font-size: 30px;
		line-height: 1.2em;
	}

	.enrol__title {
		line-height: 1.3em;
	}

	.info-cards {
		padding: 90px 30px 20px;
	}

	.info-card,
	.info-card--first {
		padding: 0 5px 0 0;
	}

	.info-card__box--sessions {
		padding-top: 3%;
	}

	.info-card__title {
		line-height: 1.2em;
	}

	.enrol {
		padding: 40px 30px 70px;
	}

	.enrol__bg {
		background-size: 153px auto;
	}

	.enrol__card {
		padding: 20px;
	}

	.enrol__photo-col {
		margin-top: 100px;
	}

	.enrol__photo {
		transform: none !important;
	}

	.kit-steps__desc {
		line-height: 24px;
	}

	.parent-speak {
		padding: 40px 30px 70px;
	}

	.parent-speak__bg {
		background-size: 153px auto;
	}

	.parent-speak__col {
		padding: 20px;
	}
}

/* ==========================================================================
   RESPONSIVE — MOBILE (<= 767px)
   ========================================================================== */
@media (max-width: 767px) {
	.admissions-hero .page-hero__title {
		font-size: 50px;
	}

	.admissions-hero .page-hero__text {
		font-size: 15px;
		line-height: 1.63em;
	}

	.school-intro__title {
		font-size: 30px;
	}

	.kits__title {
		line-height: 1.3em;
	}

	.gallery-title__heading {
		font-size: 26px;
	}

	.info-cards {
		padding: 40px 20px 0;
	}

	.info-cards__row {
		flex-wrap: wrap;
	}

	.info-cards__col {
		width: 100%;
	}

	.info-card,
	.info-card--first {
		padding: 0;
	}

	.info-card__title {
		font-size: 24px;
		line-height: 1.21em;
	}

	.green-spacer {
		padding: 40px 20px 0;
	}

	.green-spacer__inner {
		height: 10px;
	}

	.enrol {
		padding: 20px 20px 60px;
	}

	.enrol__row {
		flex-wrap: wrap;
	}

	.enrol__col {
		width: 100%;
	}

	.enrol__card {
		margin-top: 20px;
	}

	.enrol__photo-col {
		margin-top: 0;
	}

	.enrol__photo {
		margin: 0;
	}

	.kits {
		min-height: 1060px;
		padding: 0 20px;
	}

	.kits__overlay {
		background-size: 120px auto;
	}

	.kits__title {
		text-align: start;
	}

	.kit-steps {
		flex-direction: column;
		width: 100%;
	}

	.kit-steps__marker {
		margin: 0;
	}

	.kit-steps__content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 96px;
		margin: -96px 0 0 112px;
		padding: 5px 5px 0 16px;
	}

	.kit-steps__title,
	.kit-steps__desc {
		text-align: left;
	}

	.kits__note {
		padding-top: 0;
	}

	.admissions-modules-title {
		margin: 8% 0 1%;
	}

	.parent-speak {
		padding: 20px 20px 60px;
	}

	.parent-speak__col {
		margin-top: 20px;
	}

	.faq {
		padding: 0 20px;
	}

	.gallery-title {
		margin: 0 0 3%;
	}

	.admissions-gallery {
		padding: 0 20px;
	}
}