/* =========================================================
   التوظيف — assets/css/careers.css

   الصفحة تستعير نظام نموذج «واصل» (services.css تحت page-wasel-a) لحقول النموذج،
   وحقل المرفق من supplier.css. هنا ما يخصّها وحدها: أقسام ما قبل النموذج.
   كل شيء مقيّد بـ body.page-careers-a فلا يتسرّب إلى صفحة أخرى.
   ========================================================= */

body.page-careers-a .reveal { transition-delay: var(--d, 0ms); }

/* ---------- الهيرو: أزرار تحت النص ---------- */
body.page-careers-a .cr-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-block-start: 26px;
}

/* ---------- عنوان قسم ---------- */
body.page-careers-a .cr-head { max-width: 640px; margin: 0 0 34px; }
body.page-careers-a .cr-head h2 {
	margin: 0 0 10px;
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -.015em;
	color: var(--svc-navy, #002d62);
}
body.page-careers-a .cr-head p { margin: 0; font-size: 1rem; line-height: 1.9; color: var(--svc-ink-2, #56606f); }

/* =========================================================
   1) لماذا أسمنت نجران
   ========================================================= */
body.page-careers-a .cr-values { padding-block: clamp(56px, 7vw, 92px); background: var(--svc-paper, #f3f1ec); }

body.page-careers-a .cr-values-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

body.page-careers-a .cr-value {
	padding: 26px 24px 28px;
	border: 1px solid var(--svc-line, rgba(8, 17, 31, .1));
	border-radius: 16px;
	background: #fff;
	transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
body.page-careers-a .cr-value:hover {
	transform: translateY(-3px);
	border-color: rgba(0, 165, 181, .35);
	box-shadow: 0 14px 34px rgba(8, 17, 31, .07);
}
body.page-careers-a .cr-value-ico {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin-block-end: 16px;
	border-radius: 12px;
	background: rgba(0, 165, 181, .1);
	color: var(--svc-teal-d, #007f8c);
}
body.page-careers-a .cr-value-ico svg { width: 22px; height: 22px; }
body.page-careers-a .cr-value h3 { margin: 0 0 8px; font-size: 1.0625rem; font-weight: 700; color: var(--svc-navy, #002d62); }
body.page-careers-a .cr-value p { margin: 0; font-size: .875rem; line-height: 1.85; color: var(--svc-ink-2, #56606f); }

/* =========================================================
   2) النموذج
   ========================================================= */
body.page-careers-a .cr-form-head { margin-block-end: 22px; }
body.page-careers-a .cr-form-head h2 { margin: 0 0 8px; font-size: 1.375rem; font-weight: 800; color: var(--svc-navy, #002d62); }
body.page-careers-a .cr-form-head p { margin: 0; font-size: .9375rem; line-height: 1.8; color: var(--svc-ink-2, #56606f); }

/* بطاقة البوابة: كحلية لتُقرأ كمسار بديل لا كتكرار للنموذج */
body.page-careers-a .cr-card-portal {
	background: var(--svc-navy, #002d62);
	border-color: transparent;
}
body.page-careers-a .cr-card-portal h2 { color: #fff; }
body.page-careers-a .cr-card-portal p { color: rgba(255, 255, 255, .74); }
body.page-careers-a .cr-portal-btn { width: 100%; justify-content: center; gap: 8px; }
body.page-careers-a .cr-portal-btn svg { width: 16px; height: 16px; flex: none; }

/* ---------- التقديم عبر البوابة (بدل النموذج) ---------- */
body.page-careers-a .cr-portal-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
body.page-careers-a .cr-portal-btn svg { width: 16px; height: 16px; flex: none; }
body.page-careers-a .cr-steps {
	list-style: none;
	margin: 6px 0 26px;
	padding: 0;
	display: grid;
	gap: 14px;
	counter-reset: none;
}
body.page-careers-a .cr-steps li {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
	padding: 18px 20px;
	border: 1px solid var(--svc-line, rgba(8, 17, 31, .1));
	border-radius: 14px;
	background: #fff;
}
body.page-careers-a .cr-step-n {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(0, 165, 181, .1);
	color: var(--svc-teal-d, #007f8c);
	font-family: var(--font-en);
	font-size: 1.125rem;
	font-weight: 800;
}
body.page-careers-a .cr-steps h3 { margin: 2px 0 4px; font-size: 1rem; font-weight: 700; color: var(--svc-navy, #002d62); }
body.page-careers-a .cr-steps p { margin: 0; font-size: .875rem; line-height: 1.8; color: var(--svc-ink-2, #56606f); }
body.page-careers-a .cr-portal-actions { display: flex; justify-content: flex-start; }
body.page-careers-a .cr-portal-actions .cr-portal-btn { width: auto; min-width: 260px; flex: 0 0 auto; }
body.page-careers-a .wf-card-contact > p { margin: 0 0 12px; font-size: .875rem; line-height: 1.8; color: var(--svc-ink-2, #56606f); }

/* =========================================================
   3) الشاشات الأصغر
   ========================================================= */
@media (max-width: 1080px) {
	body.page-careers-a .cr-values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	body.page-careers-a .cr-values-grid { grid-template-columns: minmax(0, 1fr); }
	body.page-careers-a .cr-hero-actions .svc-btn { width: 100%; justify-content: center; }
	body.page-careers-a .cr-portal-actions .cr-portal-btn { width: 100%; min-width: 0; }
}