/**
 * Careers Page Stylesheet
 *
 * Distinctive Deep Royal Emerald & Midnight Ocean Header with Career Floating Icons
 * Modern 3D Elevated Job Opening Cards, Requirements Checklist & Application CTA
 * Consistent 1680px Container Width & Soft Sky Gradient Canvas matching Theme Standards
 *
 * @package IISAUH_Theme2026
 */

/* ==========================================================================
   1. HERO HEADER BANNER (DEEP ROYAL EMERALD & MIDNIGHT OCEAN)
   ========================================================================== */

.careers-hero {
	position: relative;
	background: 
		radial-gradient(ellipse at 85% 20%, rgba(0, 168, 150, 0.32) 0%, transparent 50%),
		radial-gradient(ellipse at 15% 85%, rgba(2, 196, 174, 0.22) 0%, transparent 50%),
		linear-gradient(135deg, #04202c 0%, #073b4c 38%, #006d77 72%, #00a896 100%);
	padding: clamp(32px, 3.5vw, 48px) 0 clamp(32px, 3.5vw, 48px);
	overflow: hidden;
	color: #ffffff;
	isolation: isolate;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.careers-hero__backdrop {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}

/* Luminous Orbital Geometry & Radiant Rings */
.careers-hero__orbital-pattern {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0.95;
	mask-image: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 70%, transparent 95%);
	-webkit-mask-image: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 70%, transparent 95%);
}

.careers-hero__orbital-pattern svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: drop-shadow(0 0 8px rgba(0, 168, 150, 0.25));
}

/* Ambient Sweep Light Beam */
.careers-hero__light-beam {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		115deg,
		transparent 20%,
		rgba(0, 168, 150, 0.04) 45%,
		rgba(2, 196, 174, 0.10) 50%,
		rgba(56, 189, 248, 0.04) 55%,
		transparent 80%
	);
	background-size: 250% 100%;
	animation: careersHeroBeamSweep 14s ease-in-out infinite;
	pointer-events: none;
}

@keyframes careersHeroBeamSweep {
	0% {
		background-position: 150% 0;
	}
	100% {
		background-position: -150% 0;
	}
}

/* Glowing Ambient Orbs (Emerald Teal & Ocean Aurora Glow) */
.careers-hero__glow {
	position: absolute;
	top: -40px;
	right: 5%;
	width: 520px;
	height: 380px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 168, 150, 0.35) 0%, rgba(2, 196, 174, 0.1) 50%, transparent 70%);
	filter: blur(60px);
	opacity: 0.85;
}

.careers-hero__glow--left {
	top: auto;
	bottom: -50px;
	left: -40px;
	width: 460px;
	height: 320px;
	background: radial-gradient(circle, rgba(6, 182, 212, 0.28) 0%, rgba(0, 168, 150, 0.08) 50%, transparent 72%);
	filter: blur(55px);
	opacity: 0.75;
}

.careers-hero__pattern {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
	background-size: 26px 26px;
	opacity: 0.45;
}

/* ==========================================================================
   2. FLOATING MOVING CAREER ICONS (MULTI-AXIS DRIFT)
   ========================================================================== */

.careers-floating-icon {
	position: absolute;
	color: #ffffff;
	pointer-events: none;
	user-select: none;
	will-change: transform;
	filter: drop-shadow(0 0 10px rgba(2, 196, 174, 0.35));
	z-index: 2;
}

/* 1. Briefcase / Career (Top Left) */
.careers-floating-icon--1 {
	top: 18%;
	left: 6%;
	opacity: 0.35;
	color: #2dd4bf;
	animation: careerDrift1 19s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

/* 2. Graduation Cap / Academic Excellence (Top Center-Right) */
.careers-floating-icon--2 {
	top: 14%;
	right: 28%;
	opacity: 0.38;
	color: #38bdf8;
	animation: careerDrift2 23s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

/* 3. Resume Document / Qualifications (Far Right) */
.careers-floating-icon--3 {
	top: 26%;
	right: 7%;
	opacity: 0.34;
	color: #fbbf24;
	animation: careerDrift3 21s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

/* 4. Career Compass / Growth (Bottom Left) */
.careers-floating-icon--4 {
	bottom: 22%;
	left: 17%;
	opacity: 0.32;
	color: #a78bfa;
	animation: careerDrift4 20s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

/* 5. Lightbulb / Pedagogy & Innovation (Bottom Center) */
.careers-floating-icon--5 {
	bottom: 16%;
	left: 48%;
	opacity: 0.35;
	color: #fde047;
	animation: careerDrift5 24s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

/* 6. Faculty Team Users (Bottom Right) */
.careers-floating-icon--6 {
	bottom: 20%;
	right: 18%;
	opacity: 0.35;
	color: #34d399;
	animation: careerDrift6 22s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

@keyframes careerDrift1 {
	0%   { transform: translate(0, 0) rotate(0deg); }
	33%  { transform: translate(16px, -18px) rotate(6deg); }
	66%  { transform: translate(-12px, 12px) rotate(-4deg); }
	100% { transform: translate(10px, -24px) rotate(8deg); }
}

@keyframes careerDrift2 {
	0%   { transform: translate(0, 0) rotate(0deg); }
	33%  { transform: translate(-20px, 14px) rotate(-7deg); }
	66%  { transform: translate(14px, -16px) rotate(5deg); }
	100% { transform: translate(-14px, 20px) rotate(-8deg); }
}

@keyframes careerDrift3 {
	0%   { transform: translate(0, 0) rotate(0deg); }
	33%  { transform: translate(15px, 20px) rotate(8deg); }
	66%  { transform: translate(-18px, -10px) rotate(-6deg); }
	100% { transform: translate(12px, 16px) rotate(7deg); }
}

@keyframes careerDrift4 {
	0%   { transform: translate(0, 0) rotate(0deg); }
	33%  { transform: translate(-14px, -16px) rotate(-8deg); }
	66%  { transform: translate(18px, 12px) rotate(6deg); }
	100% { transform: translate(-10px, -22px) rotate(-5deg); }
}

@keyframes careerDrift5 {
	0%   { transform: translate(0, 0) rotate(0deg); }
	33%  { transform: translate(22px, -12px) rotate(7deg); }
	66%  { transform: translate(-15px, 18px) rotate(-6deg); }
	100% { transform: translate(14px, -16px) rotate(5deg); }
}

@keyframes careerDrift6 {
	0%   { transform: translate(0, 0) rotate(0deg); }
	33%  { transform: translate(-16px, 16px) rotate(-6deg); }
	66%  { transform: translate(14px, -18px) rotate(8deg); }
	100% { transform: translate(-8px, 12px) rotate(-4deg); }
}

/* ==========================================================================
   3. HERO SHELL & TITLE (EXACT SAME 1680px WIDTH AS EVENTS PAGE)
   ========================================================================== */

.careers-hero__shell {
	position: relative;
	z-index: 3;
	width: min(100%, var(--container-max, 1680px));
	max-width: var(--container-max, 1680px);
	margin: 0 auto;
	padding: 0 var(--gutter, clamp(16px, 3.5vw, 40px));
	box-sizing: border-box;
}

.careers-hero__title {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: #ffffff;
	font-size: clamp(22px, 2.6vw, 32px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.015em;
}

.careers-hero__title-icon.about-hero__badge-icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #00a896;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	box-shadow: 0 4px 14px rgba(0, 168, 150, 0.4);
}

.careers-hero__title-icon svg {
	width: 14px;
	height: 14px;
	display: block;
}

.careers-hero__title-text {
	display: inline-block;
	color: #ffffff;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   4. BODY SECTION: MODERN LIGHT GRADIENT CANVAS (EXACT 1680px MATCH)
   ========================================================================== */

.careers-page {
	background: #f8fafc;
	min-height: 100vh;
	overflow-x: hidden;
}

.careers-page .careers-body-section {
	position: relative;
	background: linear-gradient(180deg, #f0f7ff 0%, #f8fafc 30%, #f1f5f9 70%, #ffffff 100%);
	padding: clamp(20px, 2.4vw, 36px) 0 clamp(60px, 7.5vw, 100px);
	overflow: hidden;
	color: #334155;
}

.careers-page .careers-body-section .container {
	position: relative;
	z-index: 2;
	width: min(100%, var(--container-max, 1680px));
	max-width: var(--container-max, 1680px);
	margin: 0 auto;
	padding: 0 var(--gutter, clamp(16px, 3.5vw, 40px));
	box-sizing: border-box;
}

/* Soft Ambient Backdrop Orbs & Grid */
.careers-page .careers-outer-backdrop {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
	max-width: 100%;
}

.careers-page .careers-ambient-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(75px);
	opacity: 0.65;
	pointer-events: none;
	will-change: transform;
}

.careers-page .careers-ambient-orb--left {
	top: 10%;
	left: -120px;
	width: 520px;
	height: 520px;
	background: radial-gradient(circle, rgba(0, 168, 150, 0.18) 0%, rgba(56, 189, 248, 0.05) 55%, transparent 75%);
	animation: careerOrbFloat1 20s ease-in-out infinite alternate;
}

.careers-page .careers-ambient-orb--right {
	top: 42%;
	right: -120px;
	width: 550px;
	height: 550px;
	background: radial-gradient(circle, rgba(56, 189, 248, 0.20) 0%, rgba(2, 196, 174, 0.04) 55%, transparent 75%);
	animation: careerOrbFloat2 24s ease-in-out infinite alternate;
}

.careers-page .careers-ambient-orb--center {
	bottom: 5%;
	left: 28%;
	width: 480px;
	height: 480px;
	background: radial-gradient(circle, rgba(245, 158, 11, 0.12) 0%, transparent 70%);
	animation: careerOrbFloat3 22s ease-in-out infinite alternate;
}

@keyframes careerOrbFloat1 {
	0%   { transform: translate(0, 0) scale(1); }
	50%  { transform: translate(35px, 45px) scale(1.1); }
	100% { transform: translate(-25px, 20px) scale(0.95); }
}

@keyframes careerOrbFloat2 {
	0%   { transform: translate(0, 0) scale(1); }
	50%  { transform: translate(-40px, 30px) scale(1.08); }
	100% { transform: translate(25px, -35px) scale(0.98); }
}

@keyframes careerOrbFloat3 {
	0%   { transform: translate(0, 0) scale(1); }
	50%  { transform: translate(30px, -25px) scale(1.05); }
	100% { transform: translate(-20px, 35px) scale(0.95); }
}

.careers-page .careers-outer-pattern-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0.95;
}

/* ==========================================================================
   5. SECTION 1: SHAPING THE FUTURE & WHY CHOOSE US (REFINED MODERN DUO)
   ========================================================================== */

.careers-intro-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: clamp(20px, 2.5vw, 32px);
	align-items: stretch;
	margin-bottom: clamp(38px, 4.5vw, 56px);
}

/* Left Column: Shaping the Future */
.careers-intro-card {
	background: #ffffff;
	border-radius: 20px;
	padding: clamp(24px, 2.8vw, 34px);
	box-shadow: 0 10px 28px -4px rgba(15, 42, 74, 0.06), 0 4px 10px rgba(15, 42, 74, 0.02);
	border: 1px solid rgba(15, 42, 74, 0.08);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	overflow: hidden;
	gap: 12px;
}

.careers-intro__header {
	display: flex;
	align-items: center;
	gap: 10px;
}

.careers-intro__icon-badge {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(56, 189, 248, 0.22) 0%, rgba(2, 196, 174, 0.18) 100%);
	border: 1px solid rgba(56, 189, 248, 0.45);
	box-shadow: 0 0 14px rgba(2, 196, 174, 0.35);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.careers-ai-sparkle-svg {
	display: block;
	overflow: visible;
	width: 20px;
	height: 20px;
}

.careers-ai-spark-core {
	transform-origin: 12px 12px;
	animation: careersAiPulse 2.4s ease-in-out infinite alternate;
}

.careers-ai-particle--1 {
	transform-origin: 12px 12px;
	animation: careersAiOrbit1 3s linear infinite;
}

.careers-ai-particle--2 {
	transform-origin: 12px 12px;
	animation: careersAiOrbit2 3.6s linear infinite;
}

@keyframes careersAiPulse {
	0% {
		transform: scale(0.85) rotate(0deg);
		filter: drop-shadow(0 0 2px rgba(0, 168, 150, 0.4));
		opacity: 0.85;
	}
	50% {
		transform: scale(1.12) rotate(12deg);
		filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.9));
		opacity: 1;
	}
	100% {
		transform: scale(0.92) rotate(-8deg);
		filter: drop-shadow(0 0 4px rgba(2, 196, 174, 0.6));
		opacity: 0.9;
	}
}

@keyframes careersAiOrbit1 {
	0% {
		transform: rotate(0deg);
		opacity: 0.3;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: rotate(360deg);
		opacity: 0.3;
	}
}

@keyframes careersAiOrbit2 {
	0% {
		transform: rotate(0deg);
		opacity: 0.4;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: rotate(-360deg);
		opacity: 0.4;
	}
}

.careers-intro__heading {
	font-size: clamp(18px, 1.4vw, 21px);
	font-weight: 800;
	color: #0f2a4a;
	margin: 0;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.careers-intro__text-wrap {
	margin-top: 2px;
}

.careers-intro__text {
	font-size: 13.5px;
	color: #475569;
	line-height: 1.7;
	margin: 0;
}

.careers-intro__features {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
	padding-top: 12px;
	border-top: 1px solid #f1f5f9;
}

.careers-intro__feat-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 700;
	color: #00a896;
	background: rgba(0, 168, 150, 0.08);
	border: 1px solid rgba(0, 168, 150, 0.18);
	padding: 4px 10px;
	border-radius: 50px;
	letter-spacing: 0.02em;
}

/* Right Column: Why Choose Us Card */
.careers-why-card {
	background: linear-gradient(135deg, #07172b 0%, #0d284a 50%, #084c61 100%);
	border-radius: 20px;
	padding: clamp(24px, 2.8vw, 34px);
	color: #ffffff;
	box-shadow: 0 14px 36px -6px rgba(7, 23, 43, 0.22);
	border: 1px solid rgba(255, 255, 255, 0.12);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
}

.careers-why-card__glow {
	position: absolute;
	top: -30%;
	right: -20%;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 168, 150, 0.3) 0%, transparent 70%);
	filter: blur(40px);
	pointer-events: none;
}

.careers-why-card__header {
	display: flex;
	align-items: center;
	gap: 10px;
	position: relative;
	z-index: 2;
}

.careers-why-card__icon-badge {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #38bdf8;
	flex-shrink: 0;
}

.careers-why-card__title {
	font-size: clamp(16px, 1.25vw, 18.5px);
	font-weight: 700;
	color: #ffffff;
	margin: 0;
	letter-spacing: -0.01em;
}

.careers-why-card__text {
	font-size: 13px;
	color: #e2e8f0;
	line-height: 1.65;
	margin: 0;
	position: relative;
	z-index: 2;
	opacity: 0.95;
}

/* ==========================================================================
   6. SECTION 2: CURRENT OPENINGS (MODERN ROLE SHOWCASE & AVATARS)
   ========================================================================== */

.careers-openings-section {
	margin-bottom: clamp(48px, 6vw, 76px);
}

.careers-section-header {
	margin-bottom: clamp(24px, 3vw, 36px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.careers-section-title-wrap {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.careers-section-title {
	font-size: clamp(19px, 1.5vw, 23px);
	font-weight: 800;
	color: #0f2a4a;
	margin: 0;
	letter-spacing: -0.015em;
}

.careers-section-subtitle {
	color: #64748b;
	font-size: 13.5px;
	margin: 0;
	max-width: 480px;
	line-height: 1.55;
}

/* Modern 3D Responsive Grid */
.careers-openings-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
	gap: clamp(22px, 2.5vw, 32px);
}

/* 3D Elevated Career Card with Dynamic Top Accent */
.career-job-card {
	background: #ffffff;
	border-radius: 22px;
	border: 1px solid rgba(15, 42, 74, 0.08);
	box-shadow: 0 10px 30px -4px rgba(15, 42, 74, 0.07), 0 4px 10px rgba(15, 42, 74, 0.03);
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.career-job-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--card-accent-gradient, linear-gradient(90deg, #00a896, #0284c7));
	opacity: 0.85;
	transition: height 0.3s ease, opacity 0.3s ease;
}

.career-job-card:hover {
	transform: translateY(-8px) scale(1.008);
	box-shadow: 0 22px 48px -6px rgba(15, 42, 74, 0.16), 0 0 0 2px var(--card-accent-border, rgba(0, 168, 150, 0.4));
	border-color: transparent;
}

.career-job-card:hover::before {
	height: 5px;
	opacity: 1;
}

.career-job-card__inner {
	padding: clamp(24px, 3vw, 30px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	box-sizing: border-box;
	gap: 20px;
}

/* Right Edge Tab: Employment Type (Full Time) with Special Background */
.career-job-card__edge-tag {
	position: absolute;
	top: 18px;
	right: 0;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--card-tag-bg, linear-gradient(135deg, rgba(0, 168, 150, 0.12) 0%, rgba(2, 132, 199, 0.18) 100%));
	border: 1.5px solid var(--card-tag-border, rgba(0, 168, 150, 0.35));
	border-right: none;
	border-radius: 50px 0 0 50px;
	padding: 4px 13px 4px 10px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var(--card-tag-color, #007a6c);
	box-shadow: -2px 3px 10px var(--card-tag-shadow, rgba(0, 168, 150, 0.15));
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.career-job-card__edge-tag svg {
	color: currentColor;
	flex-shrink: 0;
}

.career-job-card:hover .career-job-card__edge-tag {
	transform: translateX(-3px);
	box-shadow: -4px 5px 14px var(--card-tag-shadow, rgba(0, 168, 150, 0.25));
	filter: brightness(1.05);
}

/* Card Header: Avatar Icon + Title/Dept side-by-side */
.career-job-card__header {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;
	padding-right: 85px;
}

.career-job-card__avatar {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--card-avatar-bg, linear-gradient(135deg, rgba(0, 168, 150, 0.15) 0%, rgba(2, 196, 174, 0.25) 100%));
	border: 1.5px solid var(--card-avatar-border, rgba(0, 168, 150, 0.3));
	color: var(--card-avatar-color, #00a896);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: var(--card-avatar-shadow, 0 6px 18px rgba(0, 168, 150, 0.22));
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.career-job-card:hover .career-job-card__avatar {
	transform: scale(1.08) rotate(-3deg);
}

.career-job-card__avatar svg {
	width: 25px;
	height: 25px;
	display: block;
}

.career-job-card__title-wrap {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.career-job-card__dept {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--card-dept-color, #00a896);
	line-height: 1.2;
}

.career-job-card__title {
	font-size: clamp(15.5px, 1.15vw, 17.5px);
	font-weight: 800;
	color: #0f2a4a;
	margin: 0;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

/* Card Content Bottom Gap / Highlights */
.career-job-card__highlights {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-top: 4px;
}

.career-job-card__status-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: rgba(16, 185, 129, 0.1);
	color: #059669;
	border: 1px solid rgba(16, 185, 129, 0.25);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 50px;
}

.career-job-card__status-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #10b981;
}

.career-job-card__highlight-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
	color: #64748b;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	padding: 4px 10px;
	border-radius: 50px;
}

.career-job-card__highlight-item--badge {
	background: rgba(245, 158, 11, 0.08);
	color: #b45309;
	border-color: rgba(245, 158, 11, 0.22);
}

/* ==========================================================================
   ROLE COLOR THEMES (CYAN, AMBER, INDIGO, EMERALD, PURPLE, TEAL)
   ========================================================================== */

/* 1. Cyan Theme (KG / Early Years / STEM) */
.career-job-card--cyan {
	--card-accent-gradient: linear-gradient(90deg, #06b6d4, #0284c7);
	--card-accent-border: rgba(6, 182, 212, 0.45);
	--card-avatar-bg: linear-gradient(135deg, rgba(6, 182, 212, 0.16) 0%, rgba(14, 165, 233, 0.28) 100%);
	--card-avatar-border: rgba(6, 182, 212, 0.35);
	--card-avatar-color: #0284c7;
	--card-avatar-shadow: 0 6px 18px rgba(6, 182, 212, 0.24);
	--card-dept-color: #0284c7;
	--card-tag-bg: linear-gradient(135deg, rgba(6, 182, 212, 0.14) 0%, rgba(2, 132, 199, 0.22) 100%);
	--card-tag-border: rgba(6, 182, 212, 0.4);
	--card-tag-color: #0284c7;
	--card-tag-shadow: rgba(6, 182, 212, 0.2);
}

/* 2. Amber Theme (Physical Education & Athletics) */
.career-job-card--amber {
	--card-accent-gradient: linear-gradient(90deg, #f59e0b, #ea580c);
	--card-accent-border: rgba(245, 158, 11, 0.45);
	--card-avatar-bg: linear-gradient(135deg, rgba(245, 158, 11, 0.16) 0%, rgba(234, 88, 12, 0.26) 100%);
	--card-avatar-border: rgba(245, 158, 11, 0.35);
	--card-avatar-color: #d97706;
	--card-avatar-shadow: 0 6px 18px rgba(245, 158, 11, 0.24);
	--card-dept-color: #d97706;
	--card-tag-bg: linear-gradient(135deg, rgba(245, 158, 11, 0.14) 0%, rgba(234, 88, 12, 0.22) 100%);
	--card-tag-border: rgba(245, 158, 11, 0.4);
	--card-tag-color: #d97706;
	--card-tag-shadow: rgba(245, 158, 11, 0.2);
}

/* 3. Indigo Theme (Languages & Islamic / MOE) */
.career-job-card--indigo {
	--card-accent-gradient: linear-gradient(90deg, #6366f1, #4338ca);
	--card-accent-border: rgba(99, 102, 241, 0.45);
	--card-avatar-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.16) 0%, rgba(129, 140, 248, 0.26) 100%);
	--card-avatar-border: rgba(99, 102, 241, 0.35);
	--card-avatar-color: #4f46e5;
	--card-avatar-shadow: 0 6px 18px rgba(99, 102, 241, 0.24);
	--card-dept-color: #4f46e5;
	--card-tag-bg: linear-gradient(135deg, rgba(99, 102, 241, 0.14) 0%, rgba(79, 70, 229, 0.22) 100%);
	--card-tag-border: rgba(99, 102, 241, 0.4);
	--card-tag-color: #4f46e5;
	--card-tag-shadow: rgba(99, 102, 241, 0.2);
}

/* 4. Emerald Theme (Special Education & Inclusion) */
.career-job-card--emerald {
	--card-accent-gradient: linear-gradient(90deg, #10b981, #059669);
	--card-accent-border: rgba(16, 185, 129, 0.45);
	--card-avatar-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.16) 0%, rgba(5, 150, 105, 0.26) 100%);
	--card-avatar-border: rgba(16, 185, 129, 0.35);
	--card-avatar-color: #059669;
	--card-avatar-shadow: 0 6px 18px rgba(16, 185, 129, 0.24);
	--card-dept-color: #059669;
	--card-tag-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.14) 0%, rgba(5, 150, 105, 0.22) 100%);
	--card-tag-border: rgba(16, 185, 129, 0.4);
	--card-tag-color: #059669;
	--card-tag-shadow: rgba(16, 185, 129, 0.2);
}

/* 5. Purple Theme (Student Affairs & Activities) */
.career-job-card--purple {
	--card-accent-gradient: linear-gradient(90deg, #a855f7, #7e22ce);
	--card-accent-border: rgba(168, 85, 247, 0.45);
	--card-avatar-bg: linear-gradient(135deg, rgba(168, 85, 247, 0.16) 0%, rgba(147, 51, 234, 0.26) 100%);
	--card-avatar-border: rgba(168, 85, 247, 0.35);
	--card-avatar-color: #9333ea;
	--card-avatar-shadow: 0 6px 18px rgba(168, 85, 247, 0.24);
	--card-dept-color: #9333ea;
	--card-tag-bg: linear-gradient(135deg, rgba(168, 85, 247, 0.14) 0%, rgba(147, 51, 234, 0.22) 100%);
	--card-tag-border: rgba(168, 85, 247, 0.4);
	--card-tag-color: #9333ea;
	--card-tag-shadow: rgba(168, 85, 247, 0.2);
}

/* 6. Teal Theme (General Academic Faculty) */
.career-job-card--teal {
	--card-accent-gradient: linear-gradient(90deg, #00a896, #0284c7);
	--card-accent-border: rgba(0, 168, 150, 0.45);
	--card-avatar-bg: linear-gradient(135deg, rgba(0, 168, 150, 0.16) 0%, rgba(2, 196, 174, 0.26) 100%);
	--card-avatar-border: rgba(0, 168, 150, 0.35);
	--card-avatar-color: #00a896;
	--card-avatar-shadow: 0 6px 18px rgba(0, 168, 150, 0.24);
	--card-dept-color: #00a896;
	--card-tag-bg: linear-gradient(135deg, rgba(0, 168, 150, 0.14) 0%, rgba(2, 196, 174, 0.22) 100%);
	--card-tag-border: rgba(0, 168, 150, 0.4);
	--card-tag-color: #00a896;
	--card-tag-shadow: rgba(0, 168, 150, 0.2);
}

/* Empty Openings State */
.careers-empty-card {
	background: #ffffff;
	border-radius: 20px;
	padding: 40px 24px;
	text-align: center;
	border: 1px dashed rgba(15, 42, 74, 0.18);
	box-shadow: 0 10px 30px rgba(15, 42, 74, 0.05);
	max-width: 680px;
	margin: 0 auto;
}

.careers-empty-icon {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: rgba(0, 168, 150, 0.1);
	color: #00a896;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

.careers-empty-text {
	font-size: 15px;
	color: #64748b;
	line-height: 1.65;
	margin: 0;
}

/* ==========================================================================
/* ==========================================================================
   7. SECTION 3: CANDIDATE REQUIREMENTS & ELIGIBILITY (SIMPLE MODERN PANEL)
   ========================================================================== */

.careers-reqs-card {
	background: #ffffff;
	border-radius: 20px;
	padding: clamp(24px, 3vw, 36px);
	border: 1px solid rgba(15, 42, 74, 0.08);
	box-shadow: 0 10px 28px -4px rgba(15, 42, 74, 0.06), 0 4px 10px rgba(15, 42, 74, 0.02);
	margin-bottom: clamp(38px, 4.5vw, 56px);
	position: relative;
	overflow: hidden;
}

.careers-reqs-card__header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: clamp(18px, 2vw, 24px);
}

.careers-reqs-card__icon {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: rgba(0, 168, 150, 0.1);
	color: #00a896;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(0, 168, 150, 0.15);
}

.careers-reqs-card__title {
	font-size: clamp(17px, 1.35vw, 20px);
	font-weight: 800;
	color: #0f2a4a;
	margin: 0;
	letter-spacing: -0.01em;
}

.careers-reqs-card__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: 12px 16px;
}

/* Sleek Minimal Requirement Item */
.career-req-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 12px 15px;
	transition: all 0.25s ease;
}

.career-req-item:hover {
	background: #ffffff;
	border-color: rgba(0, 168, 150, 0.35);
	box-shadow: 0 4px 14px rgba(15, 42, 74, 0.05);
	transform: translateY(-1px);
}

.career-req-item__icon {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--req-item-bg, rgba(0, 168, 150, 0.1));
	color: var(--req-item-color, #00a896);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 1px;
}

.career-req-item__icon svg {
	width: 16px;
	height: 16px;
	display: block;
}

.career-req-item__content {
	flex: 1;
}

.career-req-item__text {
	font-size: 13px;
	color: #334155;
	line-height: 1.55;
	margin: 0;
	font-weight: 500;
}

/* Item Color Variants */
.career-req-item--cyan {
	--req-item-bg: rgba(6, 182, 212, 0.12);
	--req-item-color: #0284c7;
}

.career-req-item--amber {
	--req-item-bg: rgba(245, 158, 11, 0.12);
	--req-item-color: #d97706;
}

.career-req-item--teal {
	--req-item-bg: rgba(0, 168, 150, 0.12);
	--req-item-color: #00a896;
}

.career-req-item--indigo {
	--req-item-bg: rgba(99, 102, 241, 0.12);
	--req-item-color: #4f46e5;
}

.career-req-item--emerald {
	--req-item-bg: rgba(16, 185, 129, 0.12);
	--req-item-color: #059669;
}

/* ==========================================================================
/* ==========================================================================
   8. SECTION 4: APPLICATION CALL TO ACTION (MODERN 2-COLUMN ACTION HUB)
   ========================================================================== */

.careers-cta-card {
	background: linear-gradient(135deg, #041a2f 0%, #072e44 40%, #005f6b 80%, #008f80 100%);
	border-radius: 24px;
	padding: clamp(30px, 4vw, 48px);
	color: #ffffff;
	box-shadow: 0 20px 48px -8px rgba(7, 23, 43, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.14);
	position: relative;
	overflow: hidden;
}

.careers-cta-card__glow {
	position: absolute;
	top: -30%;
	right: -10%;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 168, 150, 0.32) 0%, transparent 65%);
	filter: blur(50px);
	pointer-events: none;
}

.careers-cta-card__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: clamp(28px, 3.5vw, 48px);
	align-items: center;
}

/* Left Column: Info & Steps */
.careers-cta__info {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.careers-cta__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #5eead4;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 50px;
	width: fit-content;
}

.careers-cta__pulse-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #2dd4bf;
	box-shadow: 0 0 10px #2dd4bf;
	animation: pulseLive 2s infinite;
}

@keyframes pulseLive {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.5; transform: scale(1.3); }
}

.careers-cta__heading {
	font-size: clamp(20px, 1.8vw, 26px);
	font-weight: 800;
	color: #ffffff;
	margin: 0;
	letter-spacing: -0.015em;
	line-height: 1.25;
}

.careers-cta__note {
	font-size: 13.5px;
	color: #cbd5e1;
	line-height: 1.65;
	margin: 0;
	opacity: 0.95;
}

.careers-cta__checklist {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
}

.careers-cta__check-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: #e2e8f0;
	font-weight: 500;
}

.careers-cta__check-item svg {
	color: #2dd4bf;
	flex-shrink: 0;
}

/* Right Column: Interactive Action Hub */
.careers-cta__action-hub {
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.16);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: 20px;
	padding: clamp(20px, 2.5vw, 28px);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.careers-cta__hub-header {
	display: flex;
	align-items: center;
	gap: 12px;
}

.careers-cta__hub-icon {
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: rgba(45, 212, 191, 0.18);
	border: 1px solid rgba(45, 212, 191, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #2dd4bf;
	flex-shrink: 0;
}

.careers-cta__hub-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #94a3b8;
}

.careers-cta__hub-status {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: #ffffff;
}

.careers-cta__email-box {
	background: rgba(15, 23, 42, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 12px;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	word-break: break-all;
}

.careers-cta__email-link {
	font-size: clamp(14px, 1.1vw, 16px);
	font-weight: 700;
	color: #38bdf8;
	text-decoration: none;
	letter-spacing: 0.01em;
	transition: color 0.2s ease;
}

.careers-cta__email-link:hover {
	color: #2dd4bf;
	text-decoration: underline;
}

.careers-cta__btn-group {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 10px;
}

.careers-cta__btn-send {
	background: linear-gradient(135deg, #00a896 0%, #0284c7 100%);
	color: #ffffff;
	padding: 10px 16px;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	box-shadow: 0 4px 14px rgba(0, 168, 150, 0.35);
	transition: all 0.25s ease;
}

.careers-cta__btn-send:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 168, 150, 0.45);
	color: #ffffff;
}

.careers-cta__btn-copy {
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.22);
	padding: 10px 16px;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: all 0.25s ease;
}

.careers-cta__btn-copy:hover {
	background: rgba(255, 255, 255, 0.22);
	transform: translateY(-2px);
}

/* ==========================================================================
   9. RESPONSIVE BREAKPOINTS
   ========================================================================== */

@media (max-width: 1024px) {
	.careers-intro-grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.careers-openings-grid {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	}

	.careers-cta-card__inner {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

@media (max-width: 768px) {
	.careers-floating-icon {
		opacity: 0.15;
		transform: scale(0.8);
	}

	.careers-page .careers-outer-pattern-svg,
	.careers-page .careers-ambient-orb--right,
	.careers-hero__glow {
		display: none;
	}

	.careers-openings-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.careers-cta__btn-group {
		grid-template-columns: 1fr;
	}
}