/* =========================================================
   SmartBee — "About Us" page family (About, Careers, Careers
   Details). All 3 share this one stylesheet on top of destination.css,
   which supplies .sbe-hero / .sbe-breadcrumb / .sbe-page-body /
   .sbe-sidebar / .sbe-lead-form-wrap / .sbe-bullets / .sbe-section as-is.
   This file adds only the components unique to this family: the
   Mission/Vision cards, the founder "Welcome to SmartBee" block, the
   destination teaser row, the closing dark panel, Careers' value list
   and openings list, and the Careers Details job-meta boxes + CV field.
   ========================================================= */

/* ---------- Hero ----------
   About / Careers / Careers Details all use the same hero photo (a
   full-bleed campus shot) and a lighter overlay than the Services/IELTS
   family — the source design keeps this one brighter, with the heading
   sitting bottom-left and no dark vignette crushing the photo. */
.sbe-hero-overlay {
	background: linear-gradient(180deg, rgba(46,18,68,.12) 0%, rgba(46,18,68,.18) 55%, rgba(30,6,48,.62) 100%);
}
.sbe-hero-lead {
	max-width: 560px;
	color: rgba(255, 255, 255, .88);
	font-size: 15.5px;
	margin: 14px 0 0;
	animation: sbe-fade-up .7s ease .2s both;
}

/* ---------- Section header row (heading left, intro/callout right) ----------
   Reused for "The principles behind every student journey" and "Explore
   your future across top study destinations". */
.sbe-about-section { padding: 64px 0; }
.sbe-about-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	gap: 40px;
	align-items: start;
	margin-bottom: 34px;
}
.sbe-about-head h2 { margin: 0; }
.sbe-about-head p { color: var(--sbe-text-light); font-size: 14.5px; margin: 0; }

/* ---------- Our Mission / Our Vision cards ---------- */
.sbe-principles-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}
.sbe-principle-card {
	position: relative;
	overflow: hidden;
	border-radius: var(--sbe-radius);
	padding: 30px 28px;
	background: var(--sbe-lavender-100);
}
.sbe-principle-card.is-dark { background: var(--sbe-purple-900); }
.sbe-principle-num {
	position: absolute;
	top: 6px;
	right: 22px;
	font-family: var(--sbe-font-heading);
	font-weight: 600;
	font-size: 72px;
	line-height: 1;
	color: rgba(46, 18, 68, .06);
}
.sbe-principle-card.is-dark .sbe-principle-num { color: rgba(255, 255, 255, .06); }
.sbe-principle-icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--sbe-radius-sm);
	background: var(--sbe-purple-700);
	color: #fff;
	margin-bottom: 20px;
}
.sbe-principle-card.is-dark .sbe-principle-icon { background: rgba(255, 255, 255, .12); }
.sbe-principle-card:not(.is-dark) .sbe-principle-icon { background: #fff; color: var(--sbe-purple-700); box-shadow: var(--sbe-shadow); }
.sbe-principle-icon .sbe-icon { width: 20px; height: 20px; }
.sbe-principle-card h3 { position: relative; z-index: 1; font-size: 22px; margin-bottom: 12px; }
.sbe-principle-card.is-dark h3 { color: #fff; }
.sbe-principle-card p { position: relative; z-index: 1; font-size: 14.5px; margin-bottom: 12px; }
.sbe-principle-card p:last-child { margin-bottom: 0; }
.sbe-principle-card.is-dark p { color: rgba(255, 255, 255, .78); }
.sbe-principle-card:not(.is-dark) p { color: var(--sbe-text-light); }

/* ---------- "Welcome to SmartBee" founder block ---------- */
.sbe-welcome-section { background: var(--sbe-purple-900); padding: 70px 0; }
.sbe-welcome-grid {
	display: grid;
	grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
	gap: 60px;
	align-items: center;
}
.sbe-welcome-photo {
	position: relative;
	border-radius: var(--sbe-radius);
	overflow: hidden;
}
.sbe-welcome-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; }
.sbe-welcome-caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 22px 24px;
	background: linear-gradient(0deg, rgba(15,4,26,.85) 0%, rgba(15,4,26,0) 100%);
}
.sbe-welcome-caption strong { display: block; color: var(--sbe-gold-500); font-family: var(--sbe-font-heading); font-size: 17px; }
.sbe-welcome-caption span { display: block; color: rgba(255, 255, 255, .78); font-size: 13px; margin-top: 4px; }
.sbe-welcome-copy h2 { color: #fff; margin-bottom: 18px; }
.sbe-welcome-copy h2 .sbe-gold-text { color: var(--sbe-gold-500); }
.sbe-welcome-copy p { color: rgba(255, 255, 255, .78); font-size: 14.5px; line-height: 1.75; }
.sbe-welcome-signature {
	margin-top: 18px;
	padding-left: 18px;
	border-left: 3px solid var(--sbe-gold-600);
}
.sbe-welcome-signature span { display: block; color: rgba(255, 255, 255, .6); font-size: 12.5px; }
.sbe-welcome-signature strong { color: #fff; font-family: var(--sbe-font-heading); font-size: 16px; }

/* ---------- Destination teaser cards ---------- */
.sbe-dest-teaser-grid { display: flex; gap: 20px; flex-wrap: wrap; }
.sbe-dest-teaser-card {
	position: relative;
	flex: 1 1 260px;
	min-width: 220px;
	height: 340px;
	border-radius: var(--sbe-radius);
	overflow: hidden;
}
.sbe-dest-teaser-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.sbe-dest-teaser-card:hover img { transform: scale(1.06); }
.sbe-dest-teaser-card::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(15,4,26,.75) 0%, rgba(15,4,26,0) 55%);
}
.sbe-dest-teaser-name {
	position: absolute;
	left: 20px; bottom: 18px;
	z-index: 1;
	color: #fff;
	font-family: var(--sbe-font-heading);
	font-weight: 600;
	font-size: 24px;
}

/* ---------- Closing dark panel ("Building your future...") ---------- */
.sbe-closing-panel {
	position: relative;
	overflow: hidden;
	background: var(--sbe-purple-900);
	padding: 80px 0;
}
.sbe-closing-panel::before {
	content: "";
	position: absolute; inset: 0;
	background: radial-gradient(60% 90% at 15% 30%, rgba(140, 91, 176, .28) 0%, rgba(46, 18, 68, 0) 60%);
	pointer-events: none;
}
.sbe-closing-grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
	gap: 50px;
	align-items: start;
}
.sbe-closing-grid h2 { color: #fff; margin: 0; }
.sbe-closing-grid p { color: rgba(255, 255, 255, .78); font-size: 14.5px; margin: 0 0 14px; }
.sbe-closing-grid p:last-child { margin-bottom: 0; }

/* ---------- CTA band (reuses the exact same graphic/copy as IELTS/Services) ---------- */
.sbe-cta-band-ielts {
	background-color: var(--sbe-purple-700);
	background-image: url('../images/cta-band-ielts.png');
	background-size: cover;
	background-position: center;
	min-height: 460px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 0;
}
.sbe-cta-band-ielts .sbe-cta-inner { z-index: 1; width: 100%; }
.sbe-cta-band-ielts h2 { color: #fff; }
.sbe-cta-band-ielts h2 .sbe-cta-highlight { color: var(--sbe-gold-500); }
.sbe-cta-band-ielts .sbe-cta-desc { color: rgba(255, 255, 255, .82); }
.sbe-cta-band-ielts .sbe-cta-buttons { position: relative; margin-top: 8px; }

/* =========================================================
   Careers listing page
   ========================================================= */

/* ---------- "We Empower People Who Empower Students" ---------- */
.sbe-empower-section { background: var(--sbe-purple-900); padding: 56px 0 46px; }
.sbe-empower-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	gap: 40px;
	align-items: start;
}
.sbe-empower-head h2 { color: #fff; margin: 0; }
.sbe-empower-callout {
	border-left: 3px solid var(--sbe-gold-600);
	background: rgba(255, 255, 255, .04);
	border-radius: 0 var(--sbe-radius-sm) var(--sbe-radius-sm) 0;
	padding: 18px 22px;
}
.sbe-empower-callout p { margin: 0; color: rgba(255, 255, 255, .85); font-size: 14.5px; }
.sbe-empower-body { margin-top: 34px; }
.sbe-empower-body p { color: rgba(255, 255, 255, .78); font-size: 14.5px; max-width: 1000px; }
.sbe-empower-body p strong { color: #fff; }

/* ---------- "We Bring Passion, Purpose, and Excellence" value list ----------
   Big pale numeral (not a filled badge), title, description, thin divider —
   distinct from the Services family's gold-circle .sbe-svc-list. */
.sbe-value-section { padding: 64px 0; background: var(--sbe-lavender-100); }
.sbe-value-section > .sbe-container > h2 { max-width: 640px; margin-bottom: 40px; }
.sbe-value-list { display: flex; flex-direction: column; }
.sbe-value-list li {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	padding: 22px 0;
	border-bottom: 1px solid var(--sbe-lavender-300);
}
.sbe-value-list li:last-child { border-bottom: none; }
.sbe-value-num {
	font-family: var(--sbe-font-heading);
	font-weight: 600;
	font-size: 42px;
	color: var(--sbe-lavender-300);
	line-height: 1;
}
.sbe-value-list h3 { font-size: 17px; margin-bottom: 6px; }
.sbe-value-list p { margin: 0; color: var(--sbe-text-light); font-size: 14.5px; max-width: 900px; }

/* ---------- "Join the SmartBee Team" + Current Openings ---------- */
.sbe-openings-section { padding: 70px 0; }
.sbe-openings-intro { max-width: 760px; margin-bottom: 36px; }
.sbe-openings-intro p { color: var(--sbe-text-light); font-size: 14.5px; }
.sbe-openings-list { display: flex; flex-direction: column; }
.sbe-opening-row {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) minmax(0, 280px) auto;
	gap: 24px;
	align-items: center;
	padding: 22px 0;
	border-bottom: 1px solid var(--sbe-lavender-300);
}
.sbe-opening-row:last-child { border-bottom: none; }
.sbe-opening-num {
	width: 30px; height: 30px;
	border-radius: 50%;
	background: var(--sbe-purple-700);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--sbe-font-heading);
	font-weight: 600;
	font-size: 13px;
}
.sbe-opening-title { font-family: var(--sbe-font-heading); font-weight: 600; color: var(--sbe-purple-700); font-size: 19px; margin: 0; line-height: 1.3; }
.sbe-opening-meta { display: flex; flex-direction: column; gap: 3px; }
.sbe-opening-meta div { font-size: 13.5px; color: var(--sbe-text-light); }
.sbe-opening-meta span { color: var(--sbe-purple-600); font-weight: 600; }

/* =========================================================
   Careers Details page
   ========================================================= */

/* Apply-for-this-role card reuses .sbe-lead-form-wrap/.sbe-lead-form as the
   sticky sidebar (same as every other page's "Connect with Us" form) — this
   just adds the file input + disclaimer text unique to a job application. */
.sbe-lead-form input[type="file"] {
	font-family: var(--sbe-font-body);
	font-size: 13px;
	padding: 9px 12px;
	border: 1px dashed #ddd3ea;
	border-radius: 8px;
	background: #fbf9fe;
	color: var(--sbe-text-light);
}
.sbe-apply-disclaimer { margin: 14px 0 0; font-size: 12px; font-style: italic; color: var(--sbe-text-light); }

.sbe-job-title { margin-bottom: 22px; }
.sbe-job-meta-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 34px;
}
.sbe-job-meta-box {
	border: 1px solid var(--sbe-lavender-300);
	border-radius: var(--sbe-radius-sm);
	padding: 14px 16px;
}
.sbe-job-meta-box span { display: block; font-size: 12px; color: var(--sbe-text-light); margin-bottom: 4px; }
.sbe-job-meta-box strong { font-family: var(--sbe-font-heading); font-size: 15px; color: var(--sbe-purple-700); }

.sbe-job-body h2 { font-size: 22px; margin-top: 36px; scroll-margin-top: 110px; }
.sbe-job-body h2:first-of-type { margin-top: 0; }
.sbe-job-body p { color: var(--sbe-text-light); font-size: 14.5px; line-height: 1.75; }
.sbe-job-body .sbe-bullets li { font-size: 14.5px; padding-left: 20px; }
.sbe-job-body .sbe-bullets li::before { top: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
	.sbe-welcome-grid { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 40px; }
	.sbe-job-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
	.sbe-about-head, .sbe-empower-head, .sbe-closing-grid { grid-template-columns: 1fr; }
	.sbe-opening-row { grid-template-columns: 36px minmax(0, 1fr); }
	.sbe-opening-meta { grid-column: 2; }
	.sbe-opening-row .sbe-btn { grid-column: 2; justify-self: start; margin-top: 6px; }
}

@media (max-width: 860px) {
	.sbe-principles-grid { grid-template-columns: 1fr; }
	.sbe-welcome-grid { grid-template-columns: 1fr; }
	.sbe-welcome-photo img { aspect-ratio: 16 / 10; }
	.sbe-value-list li { grid-template-columns: 1fr; gap: 6px; }
	.sbe-value-num { font-size: 30px; }
	.sbe-job-meta-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
	.sbe-dest-teaser-card { flex: 1 1 100%; height: 260px; }
	.sbe-job-meta-grid { grid-template-columns: 1fr; }
}