/* Recruiting Jobs – front-end styles */
.rj-jobs {
	--rj-primary: #0f172a;
	--rj-accent: #2563eb;
	--rj-bg: #ffffff;
	--rj-muted: #64748b;
	--rj-border: #e2e8f0;
	font-family: inherit;
	color: var(--rj-primary);
}

.rj-jobs-head { text-align: center; margin-bottom: 24px; }
.rj-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--rj-accent); margin: 0 0 6px; }
.rj-title { font-size: clamp(26px, 4vw, 38px); margin: 0; }

.rj-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; margin-bottom: 22px; }
.rj-search {
	flex: 1 1 260px; max-width: 360px; padding: 11px 14px;
	border: 1px solid var(--rj-border); border-radius: 999px; font-size: 15px; background: var(--rj-bg);
}
.rj-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rj-chip {
	border: 1px solid var(--rj-border); background: #f8fafc; color: var(--rj-primary);
	border-radius: 999px; padding: 8px 14px; font-size: 14px; cursor: pointer;
}
.rj-chip.is-active { background: var(--rj-accent); border-color: var(--rj-accent); color: #fff; }

.rj-layout { display: grid; grid-template-columns: 1fr; gap: 22px; }
.rj-has-map .rj-layout { grid-template-columns: minmax(260px, 42%) 1fr; }
@media (max-width: 860px) { .rj-has-map .rj-layout { grid-template-columns: 1fr; } }

.rj-map {
	position: sticky; top: 24px; min-height: 380px; border-radius: 18px; overflow: hidden;
	border: 1px solid var(--rj-border);
	background: linear-gradient(140deg, #e0e7ff, #f1f5f9);
}
.rj-map-inner { position: relative; width: 100%; height: 100%; min-height: 380px; }
.rj-marker {
	position: absolute; transform: translate(-50%, -100%);
	background: var(--rj-accent); color: #fff; border-radius: 999px 999px 999px 4px;
	padding: 5px 10px; font-size: 12px; white-space: nowrap; box-shadow: 0 6px 16px rgba(37, 99, 235, .35);
}

.rj-list { display: grid; gap: 16px; }
.rj-card {
	display: grid; grid-template-columns: 132px 1fr; gap: 16px;
	border: 1px solid var(--rj-border); border-radius: 18px; background: var(--rj-bg);
	padding: 14px; transition: box-shadow .2s ease, transform .2s ease;
}
.rj-card:hover { box-shadow: 0 16px 34px rgba(15, 23, 42, .09); transform: translateY(-2px); }
.rj-card:not(:has(.rj-card-media)) { grid-template-columns: 1fr; }
@media (max-width: 560px) { .rj-card { grid-template-columns: 1fr; } }
.rj-card-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
.rj-card-title { margin: 8px 0 6px; font-size: 19px; }
.rj-card-title a { color: inherit; text-decoration: none; }
.rj-card-text { margin: 0 0 12px; color: var(--rj-muted); font-size: 15px; }

.rj-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.rj-badge {
	font-size: 12px; padding: 4px 10px; border-radius: 999px;
	background: #f1f5f9; color: var(--rj-muted); border: 1px solid var(--rj-border);
}
.rj-badge-loc { background: #eef2ff; color: #3730a3; border-color: #e0e7ff; }
.rj-badge-accent { background: var(--rj-accent); color: #fff; border-color: var(--rj-accent); }

.rj-btn {
	display: inline-block; background: var(--rj-accent); color: #fff; border: 0;
	border-radius: 999px; padding: 12px 22px; font-size: 15px; cursor: pointer; text-decoration: none;
}
.rj-btn:hover { filter: brightness(1.06); color: #fff; }
.rj-btn-sm { padding: 8px 16px; font-size: 14px; }
.rj-empty { color: var(--rj-muted); }

/* single job + form */
.rj-single { max-width: 820px; margin: 0 auto; }
.rj-form {
	margin-top: 28px; padding: 22px; border: 1px solid #e2e8f0; border-radius: 18px; background: #fff;
	display: grid; gap: 14px;
}
.rj-form-title { margin: 0; font-size: 20px; }
.rj-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.rj-field { display: grid; gap: 6px; font-size: 14px; }
.rj-field input, .rj-field textarea {
	width: 100%; padding: 11px 12px; border: 1px solid #e2e8f0; border-radius: 10px; font: inherit; background: #fff;
}
.rj-field small { color: #64748b; }
.rj-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #475569; }
.rj-form-msg { margin: 0; font-size: 14px; }
.rj-form-msg.is-error { color: #b91c1c; }
.rj-form-msg.is-success { color: #15803d; }
.rj-form.is-sending { opacity: .65; pointer-events: none; }

/* Job detail blocks */
.rj-block { margin: 0 0 28px; }
.rj-block-title { margin: 0 0 12px; }
.rj-job-figure { margin: 0 0 18px; position: relative; }
.rj-job-figure img { width: 100%; height: auto; border-radius: 12px; display: block; }
.rj-job-figure figcaption { font-size: 13px; color: #6b7280; margin-top: 6px; }
.rj-ai-note { position: absolute; right: 10px; bottom: 10px; background: rgba(15,23,42,.72); color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 999px; }
.rj-icon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rj-icon-list.rj-cols-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.rj-icon-list li { display: flex; gap: 10px; align-items: flex-start; }
.rj-icon-list .rj-icon { flex: 0 0 auto; font-size: 18px; line-height: 1.3; }

/* ── header / hero ─────────────────────────────────────── */
.rj-hero {
	position: relative; border-radius: 20px; overflow: hidden; margin-bottom: 24px;
	background-size: cover; background-position: center; background-color: #0f172a;
	color: #fff; padding: clamp(32px, 6vw, 72px) 24px; text-align: center;
}
.rj-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,.35), rgba(15,23,42,.7)); }
.rj-hero-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.rj-hero .rj-eyebrow { color: #c7d2fe; }
.rj-hero .rj-title { color: #fff; }
.rj-hero-text { margin-top: 10px; font-size: 17px; opacity: .92; }
.rj-hero-full {
	border-radius: 0; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; max-width: 100vw;
}

/* ── layout variants ───────────────────────────────────── */
.rj-richtext { margin: 0 0 22px; }
.rj-count { color: var(--rj-muted); font-size: 14px; margin: 0 0 12px; }
.rj-map-right .rj-layout { grid-template-columns: 1fr minmax(260px, 42%); }
.rj-map-right .rj-map { order: 2; }
.rj-map-top .rj-layout,
.rj-map-bottom .rj-layout { grid-template-columns: 1fr; }
.rj-map-bottom .rj-map { order: 2; }
.rj-map, .rj-map-inner { min-height: var(--rj-map-h, 420px); }
.rj-map-top .rj-map, .rj-map-bottom .rj-map { position: static; }
.rj-map .leaflet-container { height: var(--rj-map-h, 420px); width: 100%; border-radius: 18px; }

.rj-cols-2 .rj-list, .rj-cols-3 .rj-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rj-cols-3 .rj-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rj-has-map .rj-list { grid-template-columns: 1fr; }
@media (max-width: 860px) { .rj-cols-2 .rj-list, .rj-cols-3 .rj-list { grid-template-columns: 1fr; } }

.rj-layout-grid .rj-card { grid-template-columns: 1fr; }
.rj-layout-grid .rj-card-media img { height: 190px; }
.rj-layout-compact .rj-card-media { display: none; }
.rj-layout-compact .rj-card { grid-template-columns: 1fr; padding: 12px 14px; }
.rj-cards-bordered .rj-card { box-shadow: none; border-width: 2px; }
.rj-cards-elevated .rj-card { border-color: transparent; box-shadow: 0 12px 30px rgba(15, 23, 42, .10); }

.rj-type-filter {
	border: 1px solid var(--rj-border); border-radius: 999px; padding: 10px 14px; background: #fff; font-size: 14px;
}

/* ── widgets ───────────────────────────────────────────── */
.rj-widget-jobs, .rj-widget-areas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rj-widget-job { display: flex; gap: 10px; align-items: center; }
.rj-widget-thumb img { width: 54px; height: 54px; object-fit: cover; border-radius: 10px; display: block; }
.rj-widget-text { display: grid; }
.rj-widget-text small { color: #64748b; }
.rj-widget-areas li { display: flex; justify-content: space-between; border-bottom: 1px solid #e2e8f0; padding-bottom: 6px; }
.rj-widget-search { display: flex; gap: 8px; }
.rj-widget-search input { flex: 1; padding: 9px 12px; border: 1px solid #e2e8f0; border-radius: 10px; }
.rj-widget-cta { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 16px; padding: 16px; display: grid; gap: 8px; }