/* Components (EduPro structure, Haibo palette). */

/* Card whose whole surface is one link (from the title). */
.hai-stretched {
	color: inherit;
	text-decoration: none;
}

.hai-stretched::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.hai-stretched:focus-visible {
	outline: none;
}

:is(.hai-cat-card, .hai-course-card, .hai-mentor):has(.hai-stretched:focus-visible) {
	outline: 3px solid var(--hai-accent);
	outline-offset: 4px;
}

/* 1. Eyebrow pill ---------------------------------------------------- */
.hai-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-bottom: 1.1rem;
	padding: 0.45em 1em;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: var(--hai-white);
	background: var(--hai-gradient);
	border-radius: var(--hai-radius-pill);
	transform: rotate(-10deg);
	transform-origin: left center;
}

.hai-eyebrow .hai-icon {
	width: 1em;
	height: 1em;
}

/* 2–3. Section headers ------------------------------------------------ */
.hai-sh {
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.hai-sh__heading {
	margin: 0;
	font-size: var(--hai-fs-h2);
	line-height: 1.1;
}

.hai-sh__line2 {
	display: block;
	color: var(--hai-accent);
}

.hai-sh__text {
	margin: 0;
	color: var(--hai-text);
}

.hai-sh--split {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: end;
}

.hai-sh__aside {
	display: grid;
	gap: 1rem;
}

.hai-sh__rule {
	position: relative;
	height: 1px;
	margin-bottom: 0.75rem;
	background: var(--hai-border);
}

.hai-sh__rule span {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	color: var(--hai-accent);
	background: var(--hai-white);
	border: 1px solid var(--hai-border);
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.hai-band--alt .hai-sh__rule span {
	background: var(--hai-alt-bg);
}

.hai-sh__rule .hai-icon {
	width: 16px;
	height: 16px;
}

/* The "View All" button sits over a big soft circle. */
.hai-sh__cta {
	position: relative;
	isolation: isolate;
	justify-self: start;
	padding-left: 18px;
}

.hai-sh__cta::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 0;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: var(--hai-border);
	opacity: 0.55;
	transform: translate(-30%, -50%);
}

.hai-sh--centre {
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
}

.hai-sh--centre .hai-eyebrow {
	transform-origin: center;
}

.hai-sh--centre .hai-sh__text {
	margin-top: 1rem;
}

@media (max-width: 1024px) {
	.hai-sh--split {
		grid-template-columns: 1fr;
		text-align: center;
		justify-items: center;
	}

	.hai-sh--split .hai-eyebrow {
		transform-origin: center;
	}

	.hai-sh__aside {
		max-width: 560px;
		justify-items: center;
	}

	.hai-sh__rule {
		width: 100%;
	}

	.hai-sh__cta {
		justify-self: center;
	}
}

/* Notched corner: the top-right corner is cut out around a ↗ circle, with
   concave fillets so the card's edges curve into the cut. The cut is painted
   in the colour behind the card (--notch-bg). */
.hai-notched {
	--notch-bg: var(--hai-white);
	--notch-r: 18px;
	position: relative;
}

.hai-band--alt .hai-notched {
	--notch-bg: var(--hai-alt-bg);
}

.hai-notched__cut {
	position: absolute;
	z-index: 2;
	top: -1px;
	right: -1px;
	padding: 0 0 8px 8px;
	background: var(--notch-bg);
	border-bottom-left-radius: var(--notch-r);
	pointer-events: none;
}

.hai-notched__cut::before,
.hai-notched__cut::after {
	content: "";
	position: absolute;
	width: var(--notch-r);
	height: var(--notch-r);
	background: radial-gradient(circle at 0 100%, transparent calc(var(--notch-r) - 0.5px), var(--notch-bg) var(--notch-r));
}

.hai-notched__cut::before {
	top: 0;
	left: calc(var(--notch-r) * -1);
}

.hai-notched__cut::after {
	right: 0;
	bottom: calc(var(--notch-r) * -1);
}

/* 4. Category card --------------------------------------------------- */
.hai-cat-card {
	height: 100%;
	transition: transform var(--hai-speed) var(--hai-ease);
}

.hai-cat-card__surface {
	display: flex;
	gap: 1.1rem;
	align-items: center;
	height: 100%;
	padding: 1.5rem;
	padding-right: 4rem;
	background: var(--hai-alt-bg);
	border-radius: var(--hai-radius-card);
	transition: background var(--hai-speed) ease;
}

.hai-band--alt .hai-cat-card__surface {
	background: var(--hai-white);
}

.hai-cat-card__art {
	flex: none;
	width: 72px;
	height: 72px;
}

.hai-cat-card__art img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hai-cat-card__icon {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--hai-accent);
	background: var(--hai-white);
	border-radius: 18px;
}

.hai-cat-card__icon[style*="--tile"] {
	color: var(--hai-white);
	background: var(--tile);
}

.hai-cat-card__icon.is-light-tile {
	color: var(--hai-heading);
}

.hai-cat-card__icon .hai-icon {
	width: 34px;
	height: 34px;
}

.hai-cat-card__title {
	margin: 0 0 0.25rem;
	font-size: var(--hai-fs-h5);
	line-height: 1.3;
}

.hai-cat-card__text {
	margin: 0;
	font-size: var(--hai-fs-small);
	color: var(--hai-muted);
}

.hai-cat-card:hover {
	transform: translateY(-5px);
}

.hai-cat-card:hover .hai-arrow-btn {
	background: var(--hai-accent-dark);
	transform: rotate(45deg);
}

/* Chips -------------------------------------------------------------- */
.hai-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.3em 0.8em;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--hai-accent-dark);
	background: var(--hai-alt-bg);
	border-radius: var(--hai-radius-pill);
}

.hai-chip .hai-icon {
	width: 1em;
	height: 1em;
}

.hai-chip--plain {
	color: var(--hai-text);
	background: transparent;
	border: 1px solid var(--hai-border);
}

/* 5. Course card ----------------------------------------------------- */
.hai-course-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 12px;
	background: var(--hai-white);
	border: 1px solid var(--hai-border-soft);
	border-radius: var(--hai-radius-card);
	box-shadow: var(--hai-shadow-card);
	transition:
		transform var(--hai-speed) var(--hai-ease),
		box-shadow var(--hai-speed) ease;
}

.hai-course-card .hai-course-card__media {
	--notch-bg: var(--hai-white);
	--notch-r: 14px;
}

.hai-course-card__img {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 12px;
}

.hai-course-card__img img,
.hai-course-card__img svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--hai-ease);
}

.hai-course-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1rem 0.5rem 0.4rem;
}

.hai-course-card__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.hai-course-card__title {
	margin: 0;
	font-size: var(--hai-fs-h5);
	line-height: 1.35;
}

.hai-course-card__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin: auto 0 0;
	padding: 0.9rem 0 0;
	list-style: none;
	border-top: 1px solid var(--hai-border);
	font-size: var(--hai-fs-small);
	font-weight: 700;
	color: var(--hai-heading);
}

.hai-course-card__meta li {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.hai-course-card__meta .hai-icon {
	width: 16px;
	height: 16px;
	color: var(--hai-accent);
}

.hai-course-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--hai-shadow-card-hover);
}

.hai-course-card:hover .hai-course-card__img img,
.hai-course-card:hover .hai-course-card__img svg {
	transform: scale(1.05);
}

.hai-course-card:hover .hai-arrow-btn {
	background: var(--hai-accent-dark);
	transform: rotate(45deg);
}

/* 6. Stat card ------------------------------------------------------- */
.hai-stat {
	display: flex;
	gap: 1rem;
	align-items: center;
	padding: 1.5rem;
	color: var(--hai-white);
	background: linear-gradient(135deg, var(--hai-red) 0%, var(--hai-accent-dark) 100%);
	border-radius: var(--hai-radius-card);
	box-shadow: 0 20px 40px -20px rgb(168 18 43 / 0.55);
}

.hai-stat__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 58px;
	height: 58px;
	background: rgb(255 255 255 / 0.14);
	border-radius: 14px;
}

.hai-stat__icon .hai-icon {
	width: 28px;
	height: 28px;
}

.hai-stat__body {
	display: grid;
	margin: 0;
}

.hai-stat__value {
	white-space: nowrap;
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
	font-weight: 800;
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
}

.hai-stat__label {
	font-weight: 600;
	opacity: 0.92;
}

/* A row of stat cards that straddles two sections. */
.hai-stats-straddle {
	position: relative;
	z-index: 3;
	margin-block: calc(clamp(3rem, 6vw, 4rem) * -1);
}

/* 7. Mentor card ----------------------------------------------------- */
.hai-mentor {
	position: relative;
	padding: 12px 12px 1.25rem;
	text-align: center;
	background: var(--hai-white);
	border: 1px solid var(--hai-border-soft);
	border-radius: var(--hai-radius-card);
	box-shadow: var(--hai-shadow-card);
	transition: transform var(--hai-speed) var(--hai-ease);
}

.hai-mentor__media {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 12px;
}

.hai-mentor__media img,
.hai-mentor__media svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hai-mentor__badge {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	color: var(--hai-white);
	background: var(--hai-gradient);
	border-radius: 50%;
}

.hai-mentor__badge .hai-icon {
	width: 16px;
	height: 16px;
}

/* Hover reveal: slides up from translateY(79%) (EduPro). */
.hai-mentor__reveal {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.9rem;
	font-weight: 700;
	color: var(--hai-white);
	background: linear-gradient(0deg, rgb(168 18 43 / 0.92), rgb(168 18 43 / 0.6));
	transform: translateY(101%);
	transition: transform 0.45s var(--hai-ease);
}

.hai-mentor:hover .hai-mentor__reveal,
.hai-mentor:focus-within .hai-mentor__reveal {
	transform: translateY(0);
}

.hai-mentor__name {
	margin: 1rem 0 0.2rem;
	font-size: var(--hai-fs-h5);
}

.hai-mentor__focus {
	margin: 0;
	font-size: var(--hai-fs-small);
	color: var(--hai-muted);
}

.hai-mentor:hover {
	transform: translateY(-5px);
}

/* 8. Testimonial slider ---------------------------------------------- */
.hai-slider__viewport {
	overflow: hidden;
}

.hai-slider__track {
	display: flex;
	gap: 1.5rem;
	transition: transform 0.6s var(--hai-ease);
}

.hai-slider__slide {
	flex: 0 0 calc((100% - 1.5rem) / 2);
}

@media (max-width: 1024px) {
	.hai-slider__slide {
		flex-basis: 100%;
	}
}

/* Without JS: a plain stacked list. */
:root:not(.hai-js) .hai-slider__track {
	flex-wrap: wrap;
}

.hai-testimonial {
	position: relative;
	height: 100%;
	margin: 0;
	padding: 2rem;
	background: var(--hai-white);
	border: 1px solid var(--hai-border-soft);
	border-radius: var(--hai-radius-card);
	box-shadow: var(--hai-shadow-card);
}

.hai-testimonial__mark {
	position: absolute;
	top: 1.25rem;
	right: 1.5rem;
	color: var(--hai-alt-bg);
}

.hai-testimonial__mark .hai-icon {
	width: 70px;
	height: 70px;
}

.hai-testimonial__stars {
	display: flex;
	gap: 0.15rem;
	margin: 0 0 1rem;
	color: var(--hai-border);
}

.hai-testimonial__stars .is-on {
	color: #e8a100;
}

.hai-testimonial__stars .is-on .hai-icon {
	fill: currentColor;
}

.hai-testimonial__quote {
	margin: 0 0 1.5rem;
	font-size: 1.0625rem;
	color: var(--hai-heading);
}

.hai-testimonial__who {
	display: flex;
	gap: 0.85rem;
	align-items: center;
}

.hai-testimonial__who img,
.hai-testimonial__who svg {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}

.hai-testimonial__who span {
	display: grid;
	font-size: var(--hai-fs-small);
	color: var(--hai-muted);
}

.hai-testimonial__who strong {
	font-size: 1rem;
	color: var(--hai-heading);
}

.hai-slider__controls {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 1.5rem;
}

.hai-slider__controls[hidden] {
	display: none;
}

.hai-slider__btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	color: var(--hai-accent);
	background: var(--hai-white);
	border: 1px solid var(--hai-border);
	border-radius: 50%;
	cursor: pointer;
	transition: background var(--hai-speed) ease, color var(--hai-speed) ease;
}

.hai-slider__btn:hover {
	color: var(--hai-white);
	background: var(--hai-accent);
}

.hai-slider__btn .hai-icon--play,
.hai-slider.is-paused .hai-slider__btn .hai-icon--pause {
	display: none;
}

.hai-slider.is-paused .hai-slider__btn .hai-icon--play {
	display: block;
}

/* 9. Accordion ------------------------------------------------------- */
.hai-accordion {
	display: grid;
	gap: 0.85rem;
}

.hai-accordion__item {
	overflow: hidden;
	background: var(--hai-white);
	border: 1px solid var(--hai-border);
	border-radius: 10px;
	transition: background var(--hai-speed) ease, border-color var(--hai-speed) ease;
}

.hai-accordion__heading {
	margin: 0;
	font-size: 1.0625rem;
}

.hai-accordion__btn {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	width: 100%;
	padding: 18px 30px;
	font: inherit;
	font-weight: 700;
	text-align: start;
	color: var(--hai-heading);
	background: none;
	border: 0;
	cursor: pointer;
}

.hai-accordion__btn > span:first-child {
	flex: 1;
}

.hai-accordion__chev {
	color: var(--hai-accent);
	transition: transform var(--hai-speed) var(--hai-ease);
}

.hai-accordion__lock .hai-icon {
	width: 18px;
	height: 18px;
	color: var(--hai-muted);
}

.hai-accordion__item.is-open {
	background: var(--hai-accent-dark);
	border-color: var(--hai-accent-dark);
}

.hai-accordion__item.is-open .hai-accordion__btn,
.hai-accordion__item.is-open .hai-accordion__chev,
.hai-accordion__item.is-open .hai-accordion__lock .hai-icon {
	color: var(--hai-white);
}

.hai-accordion__item.is-open .hai-accordion__chev {
	transform: rotate(180deg);
}

.hai-accordion__panel {
	overflow: hidden;
}

/* Closed panels hide only once JS is running (no JS = everything readable). */
.hai-js .hai-accordion__item:not(.is-open) .hai-accordion__panel {
	height: 0;
}

.hai-accordion__inner {
	padding: 0 30px 30px;
	color: var(--hai-white);
}

.hai-accordion__item:not(.is-open) .hai-accordion__inner {
	color: var(--hai-text);
}

.hai-accordion__inner > :last-child {
	margin-bottom: 0;
}

.hai-accordion__item.is-open .hai-accordion__inner a {
	color: var(--hai-white);
}

/* 10. Post card ------------------------------------------------------ */
.hai-post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 12px;
	background: var(--hai-white);
	border: 1px solid var(--hai-border-soft);
	border-radius: var(--hai-radius-card);
	box-shadow: var(--hai-shadow-card);
	transition: transform var(--hai-speed) var(--hai-ease);
}

.hai-post-card__img {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 12px;
}

.hai-post-card__img img,
.hai-post-card__img svg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--hai-ease);
}

.hai-post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 1rem 0.5rem 0.5rem;
}

.hai-post-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hai-post-card__title {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	font-size: var(--hai-fs-h5);
	line-height: 1.35;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.hai-post-card__title a {
	color: var(--hai-heading);
	text-decoration: none;
}

.hai-post-card__title a:hover {
	color: var(--hai-accent);
}

.hai-post-card .hai-btn {
	margin-top: auto;
}

.hai-btn--sm {
	padding: 10px 20px;
	font-size: 0.9375rem;
}

.hai-post-card:hover {
	transform: translateY(-5px);
}

.hai-post-card:hover .hai-post-card__img img,
.hai-post-card:hover .hai-post-card__img svg {
	transform: scale(1.05);
}

/* 11. Page banner ---------------------------------------------------- */
.hai-banner {
	position: relative;
	isolation: isolate;
	padding-block: clamp(4rem, 9vw, 7.5rem);
	text-align: center;
	background: var(--hai-wash);
}

.hai-banner__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
}

.hai-banner__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.25;
}

.hai-banner__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(255 255 255 / 0.75), rgb(255 241 244 / 0.85));
}

.hai-banner__title {
	margin-bottom: 0.75rem;
}

.hai-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
	font-weight: 700;
}

.hai-breadcrumbs li + li::before {
	content: "/";
	margin-right: 0.5rem;
	color: var(--hai-muted);
}

.hai-breadcrumbs a {
	color: var(--hai-heading);
	text-decoration: none;
}

.hai-breadcrumbs [aria-current] {
	color: var(--hai-accent);
}

/* 12. Contact row ---------------------------------------------------- */
.hai-contact-row {
	display: flex;
	gap: 1rem;
	align-items: center;
}

.hai-contact-row__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 52px;
	height: 52px;
	color: var(--hai-white);
	background: var(--hai-gradient);
	border-radius: 50%;
}

.hai-contact-row p {
	display: grid;
	margin: 0;
}

.hai-contact-row__label {
	font-size: var(--hai-fs-small);
	font-weight: 700;
	color: var(--hai-accent);
}

.hai-contact-row__value {
	font-weight: 700;
	color: var(--hai-heading);
	text-decoration: none;
}

/* Logo (interim lockup until the Institute logo is supplied) --------- */
.hai-logo {
	display: inline-flex;
	gap: 0.55rem;
	align-items: center;
	color: var(--hai-heading);
	text-decoration: none;
}

.hai-logo__mark {
	width: 40px;
	height: auto;
}

.hai-logo__text {
	display: grid;
	line-height: 1;
}

.hai-logo__small {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hai-accent);
}

.hai-logo__big {
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.hai-logo--light {
	color: var(--hai-white);
}

.hai-logo--light .hai-logo__small {
	color: #ffb3c4;
}

.hai-logo__img {
	height: 58px;
	width: auto;
}

.hai-logo--light .hai-logo__img:not([src$="logo-hai-light.svg"]) {
	filter: brightness(0) invert(1); /* uploaded custom logo: force white */
}

/* Placeholder artwork ------------------------------------------------- */
.hai-placeholder {
	width: 100%;
	height: 100%;
}

/* Scroll reveals (armed by haibo.js only for elements below the fold). ---- */
@media (prefers-reduced-motion: no-preference) {
	.hai-js [data-anim].is-armed {
		opacity: 0;
	}

	.hai-js [data-anim="fade-in-up"].is-armed {
		transform: translate3d(0, 40px, 0);
	}

	.hai-js [data-anim="fade-in-left"].is-armed {
		transform: translate3d(-40px, 0, 0);
	}

	.hai-js [data-anim].is-in {
		opacity: 1;
		transform: none;
		transition:
			opacity 0.8s var(--hai-ease),
			transform 0.8s var(--hai-ease);
		transition-delay: var(--hai-delay, 0ms);
	}
}