/* UI cards across the site, 27 October 2026.

   The ten ideas from the Iconly "10 UI ideas to steal" slides the owner sent, applied to the
   components the site already has, with no change to markup, copy or behaviour:

     empty and success states   a clear card with a next step (404, form confirmations)
     profiles                   faculty cards: the portrait in a soft frame, name and role under it
     at-a-glance cards          fee figures and values as separate cards with depth
     data cards                 the cost figures, one card each
     lists                      FAQ rows, news cards, calendar rows, contact details
     status chips               dates and categories as small pills

   Same recipe throughout so it reads as one system: a soft white-to-lilac gradient, a hairline
   border, a long soft shadow, 20 to 28 px corners, and the school red only for the small pills.
   The homepage cards live in mcis-home-cards.css. */
:root {
	--mcis-card-bg: linear-gradient(165deg, #ffffff 0%, #f4f5fb 100%);
	--mcis-card-line: rgba(20, 24, 60, 0.07);
	--mcis-card-shadow: 0 18px 40px -26px rgba(20, 24, 60, 0.35), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
	--mcis-card-shadow-up: 0 26px 48px -26px rgba(20, 24, 60, 0.45), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
	--mcis-pill-bg: rgba(236, 32, 39, 0.09);
	--mcis-pill-ink: #b3141a;
}

/* ---- lists: the FAQ rows are cards, closed and open ---- */
.accordion-item,
.mcis-lp-faq,
.le-faq {
	border: 1px solid var(--mcis-card-line) !important;
	border-radius: 20px !important;
	background: var(--mcis-card-bg) !important;
	box-shadow: var(--mcis-card-shadow);
	overflow: hidden;
}

.accordion-item + .accordion-item,
.mcis-lp-faq + .mcis-lp-faq,
.le-faq + .le-faq {
	margin-top: 12px;
}

/* only the closed row is transparent; the open row keeps the site's red header and white question, which a transparent
   header turned into white text on white */
.accordion-button.collapsed {
	background: transparent !important;
	box-shadow: none;
}

/* ---- profiles: the portrait in a soft frame ---- */
.mcis-team-item {
	padding: 14px 14px 22px;
	border: 1px solid var(--mcis-card-line);
	border-radius: 28px;
	background: var(--mcis-card-bg);
	box-shadow: var(--mcis-card-shadow);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mcis-team-item:hover {
	transform: translateY(-4px);
	box-shadow: var(--mcis-card-shadow-up);
}

.mcis-team-item .team-item-image,
.mcis-team-item .team-item-image figure,
.mcis-team-item .team-item-image img {
	border-radius: 22px;
	overflow: hidden;
}

/* ---- news: a card with the date as a pill ---- */
.post-item {
	overflow: hidden;
	border: 1px solid var(--mcis-card-line);
	border-radius: 24px;
	background: var(--mcis-card-bg);
	box-shadow: var(--mcis-card-shadow);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.post-item:hover {
	transform: translateY(-4px);
	box-shadow: var(--mcis-card-shadow-up);
}

.post-item .post-featured-image {
	margin-bottom: 0;
}

.post-item .post-item-body {
	padding: 22px 22px 8px;
}

.post-item .post-item-meta {
	margin-bottom: 14px;
}

.post-item .post-item-meta ul li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--mcis-pill-bg);
	color: var(--mcis-pill-ink);
	font-size: 13px;
	font-weight: 600;
}

/* ---- contact details: one card each ---- */
.contact-info-item {
	padding: 22px 24px;
	border: 1px solid var(--mcis-card-line);
	border-radius: 24px;
	background: var(--mcis-card-bg);
	box-shadow: var(--mcis-card-shadow);
}

.contact-info-item::before {
	display: none;
}

/* ---- the calendar as a list with a date pill ---- */
.mcis-calendar-item {
	padding: 14px 18px;
	margin-bottom: 10px;
	border: 1px solid var(--mcis-card-line);
	border-radius: 16px;
	background: var(--mcis-card-bg);
	align-items: center;
}

.mcis-calendar-date {
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--mcis-pill-bg);
	color: var(--mcis-pill-ink);
	font-weight: 600;
	white-space: nowrap;
}

/* ---- values and fee figures as data cards ---- */
.mcis-value-item {
	border-radius: 28px;
	background: var(--mcis-card-bg);
	border-color: var(--mcis-card-line);
	box-shadow: var(--mcis-card-shadow);
}

.mcis-cost-figures > div {
	padding: 20px 22px;
	border: 1px solid var(--mcis-card-line);
	border-radius: 24px;
	background: var(--mcis-card-bg);
	box-shadow: var(--mcis-card-shadow);
}

/* ---- empty and success states: a card that says what happened and what to do next ---- */
.mcis-lp-success,
.mcis-tour-success {
	padding: 22px 24px;
	border: 1px solid rgba(24, 128, 72, 0.28);
	border-radius: 20px;
	background: linear-gradient(165deg, #ffffff 0%, #eef8f2 100%);
	box-shadow: var(--mcis-card-shadow);
}

.mcis-lp-success::before,
.mcis-tour-success::before {
	content: "\2713";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 0 12px;
	border-radius: 50%;
	background: #188048;
	color: #ffffff;
	font-size: 20px;
	font-weight: 700;
}

.error-page-image {
	padding: 28px;
	border-radius: 36px;
	background: radial-gradient(circle at 50% 42%, rgba(236, 32, 39, 0.1), rgba(236, 32, 39, 0) 68%);
}

@media only screen and (max-width: 991px) {
	.mcis-team-item {
		padding: 10px 10px 18px;
		border-radius: 22px;
	}

	.post-item,
	.contact-info-item,
	.mcis-value-item,
	.mcis-cost-figures > div {
		border-radius: 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mcis-team-item,
	.post-item {
		transition: none;
	}

	.mcis-team-item:hover,
	.post-item:hover {
		transform: none;
	}
}

/* ---- Admissions at a glance: four facts, each its own card (slide 3, key facts without overwhelming) ---- */
.mcis-glance {
	padding: 40px 0 0;
}

.mcis-glance-title {
	margin: 0 0 18px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mcis-pill-ink);
}

.mcis-glance-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mcis-glance-grid li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 20px 22px;
	border: 1px solid var(--mcis-card-line);
	border-radius: 24px;
	background: var(--mcis-card-bg);
	box-shadow: var(--mcis-card-shadow);
}

.mcis-glance-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: 6px;
	border-radius: 50%;
	background: var(--mcis-pill-bg);
	color: var(--mcis-pill-ink);
	font-size: 16px;
}

.mcis-glance-label {
	font-size: 13px;
	font-weight: 600;
	color: rgba(5, 5, 5, 0.62);
}

.mcis-glance-grid b {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--primary-color);
}

/* ---- the admissions journey as a timeline: a line through numbered steps (the order timeline slide) ---- */
.how-it-work-steps {
	position: relative;
}

.how-it-work-steps::before {
	content: "";
	position: absolute;
	inset-inline-start: 22px;
	top: 24px;
	bottom: 24px;
	width: 2px;
	background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.08));
}

.how-it-work-steps .how-work-step-item {
	position: relative;
	flex-wrap: nowrap;
	gap: 22px;
	padding-bottom: 0;
	margin-bottom: 34px;
	border-bottom: 0;
}

.how-it-work-steps .how-work-step-item .icon-box {
	position: relative;
	z-index: 1;
	flex: 0 0 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--accent-color);
	color: #ffffff;
	box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.1);
}

.how-it-work-steps .how-work-step-item-content {
	width: auto;
	flex: 1 1 auto;
}

/* ---- the 404: two next steps, side by side ---- */
.error-page-content-body .btn-default + .btn-default {
	margin-inline-start: 12px;
}

@media only screen and (max-width: 991px) {
	.mcis-glance-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media only screen and (max-width: 575px) {
	.mcis-glance-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.error-page-content-body .btn-default + .btn-default {
		margin-inline-start: 0;
		margin-top: 12px;
	}
}

/* the landing page FAQ rows (details.mcis-lp-faq) were flat list rows with no inner padding; as cards the question
   and the answer need room from the card's edge. The edu landing page's .le-faq already has its own. */
.mcis-lp-faq summary {
	padding: 18px 22px;
}

.mcis-lp-faq p {
	margin: 0;
	padding: 0 22px 20px;
}

/* timeline step icons: the glyph sits inside the red circle with room around it, not edge to edge */
.how-it-work-steps .how-work-step-item .icon-box {
	flex-basis: 52px;
	width: 52px;
	height: 52px;
	padding: 0;
}

.how-it-work-steps .how-work-step-item .icon-box i {
	font-size: 20px;
	line-height: 1;
	margin: 0;
}

.how-it-work-steps::before {
	inset-inline-start: 25px;
}

/* the enquiry form's left column: three fact cards under the text, so the column is as full as the form beside it */
.mcis-glance-stack {
	grid-template-columns: minmax(0, 1fr);
	margin-top: 26px;
}

.mcis-glance-stack li {
	display: grid;
	grid-template-columns: 40px 1fr;
	column-gap: 14px;
	row-gap: 2px;
	align-items: center;
	padding: 16px 18px;
}

.mcis-glance-stack .mcis-glance-icon {
	grid-row: 1 / span 2;
	margin: 0;
}

/* a faculty card with no photo: the school mark on a soft tile, the same size as a portrait */
.mcis-team-nophoto {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 400 / 453;
	background: linear-gradient(165deg, #ffffff 0%, #eceef7 100%);
}

.mcis-team-nophoto img {
	width: 52%;
	height: auto;
	opacity: 0.85;
}

/* the site's trimmed Bootstrap has no .justify-content-center; the faculty row on the About page uses it to centre three cards */
.our-team .row.justify-content-center {
	justify-content: center;
}