/*
 * Education - Institutions.
 *
 * Read from cp-all-designer education.html:103-155 and
 * css/education.css:131-305.
 *
 * Colour, type, padding, the corners and the spaces between the parts arrive
 * from the Style tab and are not repeated here.
 */

.custom-education-institutions {
	--custom-education-institutions-veil: rgba(14, 30, 84, 0.9);
	--custom-education-institutions-veil-middle: rgba(16, 48, 95, 0.8);
	--custom-education-institutions-edge: rgba(22, 65, 140, 0.09);
	--custom-education-institutions-edge-on: rgba(80, 163, 213, 0.34);
	--custom-education-institutions-plate-from: #E8F4FB;
	--custom-education-institutions-plate-middle: #F0F9FD;
	--custom-education-institutions-plate-to: #FFFFFF;
	position: relative;
	overflow: hidden;
}

/* education.css:150 — the photograph is held still while the band scrolls past it */
.custom-education-institutions .custom-education-institutions__picture {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	pointer-events: none;
}

/* education.css:155-157 — a veil, so the cards are what the eye lands on */
.custom-education-institutions .custom-education-institutions__picture::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg,
		var(--custom-education-institutions-veil) 0%,
		var(--custom-education-institutions-veil-middle) 55%,
		var(--custom-education-institutions-veil) 100%);
}

.custom-education-institutions .custom-education-institutions__inner {
	position: relative;
	z-index: 1;
}

/* education.css:137-140 — three to a row */
.custom-education-institutions .custom-education-institutions__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* education.css:164-185 */
.custom-education-institutions .custom-education-institutions__card {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-width: 0;
	overflow: hidden;
	border: 2px solid var(--custom-education-institutions-edge);   /* education.css:175 measures 1px */
	box-shadow: 0 10px 26px -18px rgba(22, 65, 140, 0.34);   /* --inst-sh, education.css:147 */
	transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            box-shadow 400ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            border-color 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (hover: hover) {
	.custom-education-institutions .custom-education-institutions__card:hover {
		border-color: var(--custom-education-institutions-edge-on);
		box-shadow: 0 26px 50px -24px rgba(22, 65, 140, 0.34);   /* --inst-sh-hover, education.css:148 */
		transform: translateY(-6px);
	}
	.custom-education-institutions .custom-education-institutions__card:hover .custom-education-institutions__logo > img {
		transform: scale(1.05);
	}
}

/* education.css:229-236 — a pale plate the crest is mounted on, centred */
.custom-education-institutions .custom-education-institutions__plate {
	position: relative;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	border-bottom: 2px solid var(--custom-education-institutions-edge);   /* education.css:235 measures 1px */
	background: linear-gradient(180deg,
		var(--custom-education-institutions-plate-from) 0%,
		var(--custom-education-institutions-plate-middle) 42%,
		var(--custom-education-institutions-plate-to) 100%);
}

/* education.css:257-262 — the file's own white made a mounted tile */
.custom-education-institutions .custom-education-institutions__logo {
	max-width: 100%;
	aspect-ratio: 1 / 1;
	box-shadow: 0 8px 20px -12px rgba(22, 65, 140, 0.45);
}

.custom-education-institutions .custom-education-institutions__logo > img {
	object-fit: contain;
	transition: transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* education.css:266-273 — the buttons share a floor whatever the names above them run to */
.custom-education-institutions .custom-education-institutions__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	box-sizing: border-box;
}

/* education.css:286-291 — two lines held open (the Style tab's least height),
   so three cards read as one row */
.custom-education-institutions .custom-education-institutions__name {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-style: normal;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0;
	text-transform: none;
}

.custom-education-institutions .custom-education-institutions__button {
	align-self: flex-start;
	margin-top: auto;
}

/* Elementor's sheet (frontend.min.css, `.elementor img`) comes after the plugin's
   and sets a picture's height to auto and caps its width: a slot's picture says
   its own here, heavily enough to stand */
.custom-education-institutions .custom-education-institutions__logo > img {
	height: 100%;
	max-width: none;
}

/* ------------------------------------------------------------------ */
/* Tablet — 768px to 1024px (education.css:158-162, 334-336)           */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	/* a held picture judders under a finger, and iOS ignores it */
	.custom-education-institutions .custom-education-institutions__picture {
		background-attachment: scroll;
	}
	/* two to a row */
	.custom-education-institutions .custom-education-institutions__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------------ */
/* Mobile — up to 767px (education.css:337-349, drawn at 620)          */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.custom-education-institutions .custom-education-institutions__cards {
		grid-template-columns: minmax(0, 1fr);
	}
	/* the button runs the card's width, under the thumb wherever it is */
	.custom-education-institutions .custom-education-institutions__button {
		align-self: stretch;
	}
}

@media (prefers-reduced-motion: reduce) {
	.custom-education-institutions .custom-education-institutions__card,
	.custom-education-institutions .custom-education-institutions__logo > img {
		transition: none;
	}
	.custom-education-institutions .custom-education-institutions__card:hover {
		transform: none;
	}
}