/*
 * LMS banner: "Hello, {name}" strip on the dashboard screens and My Courses.
 * Figma (Student_Dashboard / My Profile / Enrolled Courses, 1440 wide):
 * full-bleed image 1440x238, avatar 134 circle, "Hello," Poppins 300 and the
 * name Poppins 700 at 42px, cap top y228 / baseline y257 (banner top y109).
 * Content sits in the 1200px container (avatar at x120 at a 1440 window).
 */

.fdi-lms-banner {
	position: relative;
	height: 238px;
	overflow: hidden;
	background: var(--fdi-navy);
}

.fdi-lms-banner__bg,
.fdi-lms-banner img.fdi-lms-banner__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100% !important; /* Elementor content (My Courses) sets img height:auto. */
	object-fit: cover;
	object-position: left center; /* below 1440 keep the dark left part under the greeting */
}

.fdi-lms-banner__inner {
	position: relative;
	display: flex;
	align-items: center;
	gap: 40px;
	box-sizing: border-box;
	max-width: 1200px;
	height: 100%;
	margin: 0 auto;
	padding-top: 16px; /* avatar centre 8px below the banner centre */
}

.fdi-lms-banner__avatar {
	display: grid;
	place-items: center;
	flex: none;
	width: 134px;
	height: 134px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--fdi-white);
	color: var(--fdi-navy);
	font: 700 52px/1 var(--fdi-font-heading);
}

.fdi-lms-banner__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Poppins 300/700, self-hosted (assets/fonts). Figma ink box (262,227)-(486,268):
   225px wide, 177px right of the avatar's left edge. */
.fdi-lms-banner__hello {
	position: relative;
	top: 8px;
	margin: 0;
	color: var(--fdi-white);
	font: 300 43px/1.2 "Poppins", var(--fdi-font-body);
	white-space: nowrap;
}

.fdi-lms-banner__hello strong {
	font-weight: 700;
}

/* Signed-in account under the greeting: "Learner account · learner_a"
   (sheet 1.20). Not in Figma, so on desktop it hangs below the greeting
   (absolute) and the greeting keeps its Figma position; the pill's bottom
   lines up with the avatar's (banner y194). */
.fdi-lms-banner__text {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.fdi-lms-banner__who {
	position: absolute;
	top: calc(100% + 13px);
	left: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	max-width: 100%;
	margin: 0;
	padding: 5px 14px 5px 12px;
	border-radius: var(--fdi-radius-pill);
	background: var(--fdi-navy);
	color: var(--fdi-white);
	font: 400 14px/1.3 var(--fdi-font-body);
	white-space: nowrap;
}

.fdi-lms-banner__who::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--fdi-teal);
}

.fdi-lms-banner__role {
	font-weight: 700;
}

.fdi-lms-banner__login {
	overflow-wrap: anywhere;
}

/* Below 1248px: full width with a 24px gutter, like the dashboard layout
   (the avatar stays on the sidebar's edge). */
@media (max-width: 1247px) {
	.fdi-lms-banner__inner {
		max-width: none;
		padding-inline: 24px;
	}
}

@media (max-width: 768px) {
	/* 150px, growing only if a long name or login wraps. */
	.fdi-lms-banner {
		height: auto;
		min-height: 150px;
	}

	.fdi-lms-banner__inner {
		gap: 16px;
		min-height: 150px;
		padding: 12px 16px;
	}

	.fdi-lms-banner__avatar {
		width: 80px;
		height: 80px;
		font-size: 32px;
	}

	.fdi-lms-banner__hello {
		top: 0;
		font-size: 30px;
		white-space: normal;
	}

	/* In the flow here: greeting and pill are centred together. */
	.fdi-lms-banner__who {
		position: static;
		display: flex;
		width: fit-content;
		flex-wrap: wrap;
		column-gap: 5px;
		row-gap: 0;
		margin-top: 6px;
		padding: 4px 12px 4px 10px;
		font-size: 12px;
		white-space: normal;
	}
}