/* ═══════════════════════════════════════════════════════════════════════════
   Public careers board — /careers, /careers/c/{slug} and the advert page
   ---------------------------------------------------------------------------
   Linked only from Views/Careers/Index + Category (@section Styles). A public,
   brand-facing page, not an admin console, so it keeps its own .cj-* vocabulary
   instead of the .zd-* shells.

   Colour roles (from the approved reference):
     navy  — brand, primary text, active pager
     gold  — the hero call to action, section icon
     tile  — one soft tint per job family (CareersJobVisual picks it server-side)
     chips — green location, gold employment, blue workplace, purple experience
     flags — green «جدید», blue «پرنیاز», orange «لیست انتظار»

   Of the older .careers-* rules in site.css only .careers-apply-modal is still used.
   Mobile-first: base rules are the phone layout, min-width queries add.
   ═══════════════════════════════════════════════════════════════════════════ */

.cj {
  --cj-navy: #1b3461;
  --cj-navy-2: #244478;
  --cj-navy-ink: #13284c;
  --cj-brand: #2f6fd6;
  --cj-gold: #e2b247;
  --cj-gold-2: #edc15c;
  --cj-gold-ink: #2a1f04;
  --cj-bg: #f5f7fb;
  --cj-surface: #ffffff;
  --cj-line: #e4e9f1;
  --cj-line-strong: #cfd8e5;
  --cj-ink: #16233d;
  --cj-ink-2: #4c5872;
  --cj-ink-3: #66718a;
  --cj-focus: #2f6fd6;
  --cj-radius: 1rem;
  --cj-radius-sm: .75rem;
  --cj-shadow: 0 1px 2px rgba(16, 32, 64, .04), 0 6px 18px rgba(16, 32, 64, .05);
  --cj-shadow-hover: 0 4px 10px rgba(16, 32, 64, .06), 0 14px 32px rgba(16, 32, 64, .10);

  /* Tone tints: background / icon ink. Inks are ≥4.5:1 on their tint. */
  --t-blue-bg: #e7efff;   --t-blue: #2458c7;
  --t-green-bg: #e3f5eb;  --t-green: #17824a;
  --t-amber-bg: #fdf1d8;  --t-amber: #a86a00;
  --t-orange-bg: #feeadd; --t-orange: #c2501a;
  --t-rose-bg: #fde7ec;   --t-rose: #c32a4f;
  --t-purple-bg: #f0e9fd; --t-purple: #7040c9;
  --t-teal-bg: #dff4f3;   --t-teal: #0f7c78;
  --t-indigo-bg: #e8eafd; --t-indigo: #4450c4;
  --t-slate-bg: #eceff4;  --t-slate: #4a5670;

  background: var(--cj-bg);
  color: var(--cj-ink);
  min-height: 100%;
  padding-bottom: 3rem;
  line-height: 1.8;
}

html[data-theme="modern"] .cj {
  --cj-navy: #3b6fc4;
  --cj-navy-2: #4a7fd6;
  --cj-navy-ink: #cfdcf3;
  --cj-brand: #7aa7ff;
  --cj-bg: #0f1522;
  --cj-surface: #182133;
  --cj-line: #283349;
  --cj-line-strong: #36445f;
  --cj-ink: #e6ebf3;
  --cj-ink-2: #b4bfd1;
  --cj-ink-3: #a3afc3;
  --cj-focus: #7aa7ff;
  --cj-shadow: none;
  --cj-shadow-hover: 0 8px 24px rgba(0, 0, 0, .35);

  --t-blue-bg: rgba(96, 145, 255, .16);   --t-blue: #9dbcff;
  --t-green-bg: rgba(52, 199, 120, .16);  --t-green: #8fe3b4;
  --t-amber-bg: rgba(229, 181, 68, .16);  --t-amber: #f1d28a;
  --t-orange-bg: rgba(249, 128, 64, .16); --t-orange: #ffb58c;
  --t-rose-bg: rgba(240, 90, 125, .16);   --t-rose: #ffa3b8;
  --t-purple-bg: rgba(150, 110, 240, .18); --t-purple: #c9b1ff;
  --t-teal-bg: rgba(40, 190, 180, .16);   --t-teal: #8ee0da;
  --t-indigo-bg: rgba(110, 120, 240, .18); --t-indigo: #b8bfff;
  --t-slate-bg: rgba(148, 163, 184, .16); --t-slate: #d3dbe8;
}

.cj .container { padding-inline: 1rem; }

.cj-tone--blue   { background: var(--t-blue-bg);   color: var(--t-blue); }
.cj-tone--green  { background: var(--t-green-bg);  color: var(--t-green); }
.cj-tone--amber  { background: var(--t-amber-bg);  color: var(--t-amber); }
.cj-tone--orange { background: var(--t-orange-bg); color: var(--t-orange); }
.cj-tone--rose   { background: var(--t-rose-bg);   color: var(--t-rose); }
.cj-tone--purple { background: var(--t-purple-bg); color: var(--t-purple); }
.cj-tone--teal   { background: var(--t-teal-bg);   color: var(--t-teal); }
.cj-tone--indigo { background: var(--t-indigo-bg); color: var(--t-indigo); }
.cj-tone--slate  { background: var(--t-slate-bg);  color: var(--t-slate); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.cj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.75rem;               /* 44px touch target */
  padding: .5rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--cj-radius-sm);
  font: inherit;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.cj-btn:focus-visible,
.cj-chip:focus-visible,
.cj-link-btn:focus-visible,
.cj-pager__btn:focus-visible,
.cj-card__link:focus-visible {
  outline: 3px solid var(--cj-focus);
  outline-offset: 2px;
}
.cj-btn .bi { font-size: .95em; }
.cj-btn--primary { background: var(--cj-navy); color: #fff; }
.cj-btn--primary:hover { background: var(--cj-navy-2); color: #fff; }
.cj-btn--ghost { background: transparent; color: var(--cj-ink-2); border-color: var(--cj-line-strong); }
.cj-btn--ghost:hover { background: var(--t-slate-bg); color: var(--cj-ink); }
.cj-btn--gold { background: var(--cj-gold); color: var(--cj-gold-ink); }
.cj-btn--gold:hover { background: var(--cj-gold-2); color: var(--cj-gold-ink); }
.cj-btn--on-dark { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .45); }
.cj-btn--on-dark:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.cj-btn--lg { min-height: 3rem; padding-inline: 1.35rem; font-size: 1rem; }

/* Arrows point "forward" = left in RTL; mirror them for the Russian LTR page. */
[dir="ltr"] .cj-dir-icon { transform: scaleX(-1); }

.cj-link-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2.75rem;
  padding: 0 .25rem;
  border: 0;
  background: none;
  color: var(--cj-brand);
  font: inherit;
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
}
.cj-link-btn:hover { text-decoration: underline; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.cj-hero {
  color: #e8edf6;
  background:
    radial-gradient(ellipse at 0% 100%, rgba(226, 178, 71, .14), transparent 55%),
    linear-gradient(160deg, #14274a 0%, #1b3461 55%, #22406f 100%);
  background-size: cover;
  background-position: center;
  padding-block: 1.75rem 3.25rem;    /* bottom room for the overlapping toolbar */
}
/* Admin photo: the gradient in the inline style keeps the text side (right, in RTL) dark and
   lets the picture show through on the other side, as in the reference. */
.cj-hero--image {
  background-position: left center;
  /* The inline style replaces only the image layers. If the photo 404s (it did on 2026-09-14),
     this colour keeps the fading side navy instead of showing the page behind it. */
  background-color: #1b3461;
}

.cj-hero__inner { display: grid; gap: .75rem; }

.cj-hero__brand { display: flex; align-items: center; gap: .75rem; }
.cj-hero__logo {
  width: 2.75rem;
  height: 2.75rem;
  padding: .3rem;
  border-radius: .7rem;
  background: #fff;
  object-fit: contain;
  flex: none;
}
.cj-hero__eyebrow { font-size: .875rem; font-weight: 700; color: #f1d28a; }

.cj-hero__title {
  margin: .25rem 0 0;
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.75rem);
  font-weight: 900;
  line-height: 1.5;
  color: #fff;
  text-wrap: balance;
}
.cj-hero__subtitle {
  margin: 0;
  max-width: 40rem;
  font-size: .9375rem;
  line-height: 2;
  color: rgba(232, 237, 246, .88);
}

.cj-hero__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: .5rem;
}
.cj-hero__actions { display: flex; flex-wrap: wrap; gap: .625rem; }

.cj-hero__stats { display: flex; flex-wrap: wrap; gap: .5rem 0; margin: 0; }
.cj-hero__stats > div {
  display: flex;
  flex-direction: column-reverse;    /* number above its label, dt stays first for AT */
  padding-inline: 1rem;
  border-inline-start: 1px solid rgba(255, 255, 255, .18);
}
.cj-hero__stats > div:first-child { padding-inline-start: 0; border-inline-start: 0; }
.cj-hero__stats dt { font-size: .8125rem; font-weight: 500; color: rgba(232, 237, 246, .78); }
.cj-hero__stats dd { margin: 0; font-size: 1.2rem; font-weight: 800; line-height: 1.5; color: #fff; }

/* ── Body / toolbar ──────────────────────────────────────────────────────── */
.cj-body { display: grid; gap: 1.5rem; }

.cj-toolbar {
  position: relative;
  margin-top: -2rem;
  padding: .75rem;
  display: grid;
  gap: .625rem;
  background: var(--cj-surface);
  border: 1px solid var(--cj-line);
  border-radius: var(--cj-radius);
  box-shadow: var(--cj-shadow-hover);
}

.cj-search { position: relative; min-width: 0; }
.cj-search__icon {
  position: absolute;
  inset-inline-start: .95rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cj-ink-3);
  font-size: 1.05rem;
  pointer-events: none;
}
.cj-search__input {
  width: 100%;
  min-height: 3rem;
  padding-block: .5rem;
  padding-inline: 2.75rem .9rem;
  border: 1px solid var(--cj-line-strong);
  border-radius: var(--cj-radius-sm);
  background: var(--cj-surface);
  color: var(--cj-ink);
  font: inherit;
  font-size: 1rem;                   /* ≥16px: iOS does not zoom on focus */
}
.cj-search__input::placeholder { color: var(--cj-ink-3); opacity: 1; }
.cj-search__input:focus,
.cj .cj-field__select:focus {
  outline: none;
  border-color: var(--cj-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cj-focus) 22%, transparent);
}

/* Phone: the three filters share one row under the search, like the reference. */
.cj-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: .5rem;
}
.cj-field { position: relative; min-width: 0; }
.cj-field__icon {
  position: absolute;
  inset-inline-start: .7rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cj-ink-3);
  font-size: .9rem;
  pointer-events: none;
}
.cj .cj-field__select {
  min-height: 2.75rem;
  padding-inline-start: 2rem;
  border-color: var(--cj-line-strong);
  border-radius: var(--cj-radius-sm);
  background-color: var(--cj-surface);
  color: var(--cj-ink);
  font-size: .875rem;
  font-weight: 600;
  text-overflow: ellipsis;
}
.cj-field.is-active .cj-field__select { border-color: var(--cj-brand); background-color: var(--t-blue-bg); }
.cj-field.is-active .cj-field__icon { color: var(--t-blue); }

/* ── Category chips ──────────────────────────────────────────────────────── */
.cj-cats { display: grid; gap: .5rem; min-width: 0; }
.cj-cats__title { margin: 0; font-size: .875rem; font-weight: 700; color: var(--cj-ink-2); }
.cj-cats__list {
  display: flex;
  gap: .5rem;
  margin: 0;
  padding: 0 0 .25rem;
  list-style: none;
  overflow-x: auto;                  /* one swipeable row on phones */
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.cj-cats__list::-webkit-scrollbar { display: none; }
.cj-cats__list > li { flex: none; scroll-snap-align: start; }
.cj-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .35rem 1rem;
  border: 1px solid var(--cj-line-strong);
  border-radius: 999px;
  background: var(--cj-surface);
  color: var(--cj-ink-2);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.cj-chip:hover { border-color: var(--cj-brand); color: var(--cj-brand); }

/* ── Results ─────────────────────────────────────────────────────────────── */
.cj-results { display: grid; gap: 1rem; }

.cj-results__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .25rem 1rem;
}
.cj-results__title {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem);
  font-weight: 800;
}
.cj-results__title .bi { color: var(--cj-gold); font-size: .9em; }
.cj-results__side { display: flex; align-items: center; gap: .75rem; }
.cj-results__count { margin: 0; font-size: .875rem; font-weight: 600; color: var(--cj-ink-2); }

.cj-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .875rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cj-list__item { display: flex; min-width: 0; }

/* ── Job card ────────────────────────────────────────────────────────────── */
.cj-card {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .875rem;
  padding: 1rem;
  background: var(--cj-surface);
  border: 1px solid var(--cj-line);
  border-radius: var(--cj-radius);
  box-shadow: var(--cj-shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cj-card:hover { border-color: var(--cj-line-strong); box-shadow: var(--cj-shadow-hover); }
.cj-card:focus-within { border-color: var(--cj-focus); }

.cj-card__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: .75rem;
}

.cj-card__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  font-size: 1.2rem;
  flex: none;
}

.cj-card__heading { min-width: 0; display: grid; gap: .125rem; }

.cj-card__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.cj-card__link { color: var(--cj-ink); text-decoration: none; border-radius: .25rem; }
.cj-card__link:hover { color: var(--cj-brand); }

.cj-card__summary {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.9;
  color: var(--cj-ink-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cj-card__flags {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .25rem;
  margin: .2rem 0 0;
  padding: 0;
  list-style: none;
}
.cj-flag {
  display: inline-flex;
  align-items: center;
  padding: .0625rem .6rem;
  border-radius: .5rem;
  font-size: .75rem;
  font-weight: 800;
  line-height: 1.8;
  white-space: nowrap;
}
.cj-flag--new    { background: var(--t-green-bg);  color: var(--t-green); }
.cj-flag--demand { background: var(--t-blue-bg);   color: var(--t-blue); }
.cj-flag--pool   { background: var(--t-orange-bg); color: var(--t-orange); }

/* Fact chips — small bordered pills, the icon carries the colour. */
.cj-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cj-meta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
  max-width: 100%;
  padding: .125rem .6rem;
  border: 1px solid var(--cj-line);
  border-radius: .5rem;
  background: var(--cj-surface);
  color: var(--cj-ink-2);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.9;
}
.cj-meta .bi { flex: none; font-size: .8rem; }
.cj-meta--location .bi   { color: var(--t-green); }
.cj-meta--employment .bi { color: var(--t-amber); }
.cj-meta--workplace .bi  { color: var(--t-blue); }
.cj-meta--experience .bi { color: var(--t-purple); }
.cj-meta--experience { white-space: normal; }

.cj-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
}
/* Card CTA follows the reference: outlined in brand blue, fills on hover. */
.cj-card .cj-btn--primary {
  background: transparent;
  color: var(--cj-brand);
  border-color: color-mix(in srgb, var(--cj-brand) 55%, transparent);
}
.cj-card .cj-btn--primary:hover { background: var(--cj-brand); border-color: var(--cj-brand); color: #fff; }
.cj-card .cj-btn--ghost { border-color: transparent; color: var(--cj-ink-3); padding-inline: .75rem; }
.cj-card .cj-btn--ghost:hover { background: var(--t-slate-bg); color: var(--cj-ink); }

/* ── Pager ───────────────────────────────────────────────────────────────── */
.cj-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .375rem;
  margin-top: .5rem;
}
.cj-pager__btn {
  display: inline-grid;
  place-items: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 .5rem;
  border: 1px solid transparent;
  border-radius: .75rem;
  background: transparent;
  color: var(--cj-ink-2);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.cj-pager__btn:hover:not(:disabled) { background: var(--t-slate-bg); color: var(--cj-ink); }
.cj-pager__btn--step { border-color: var(--cj-line-strong); background: var(--cj-surface); border-radius: 50%; }
.cj-pager__btn.is-current { background: var(--cj-brand); color: #fff; }
.cj-pager__btn.is-current:hover { background: var(--cj-brand); color: #fff; }
.cj-pager__btn:disabled { opacity: .4; cursor: default; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.cj-empty {
  display: grid;
  justify-items: center;
  gap: .5rem;
  padding: 2.5rem 1.25rem;
  text-align: center;
  background: var(--cj-surface);
  border: 1px dashed var(--cj-line-strong);
  border-radius: var(--cj-radius);
}
.cj-empty__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: .25rem;
  border-radius: 50%;
  background: var(--t-slate-bg);
  color: var(--cj-ink-2);
  font-size: 1.35rem;
}
.cj-empty__title { margin: 0; font-size: 1.1rem; font-weight: 800; }
.cj-empty__text { margin: 0 0 .5rem; max-width: 34rem; color: var(--cj-ink-2); font-size: .9375rem; }

/* ── Category + advert pages ─────────────────────────────────────────────── */
/* No overlapping toolbar below these headers, so the body starts on its own. */
.cj-hero--compact { padding-block: 1.25rem 2rem; }
.cj-body--flow { padding-top: 1.5rem; }

.cj-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .8125rem;
  color: rgba(232, 237, 246, .78);
}
.cj-crumbs li { min-width: 0; overflow-wrap: anywhere; }
.cj-crumbs li + li::before { content: "›"; margin-inline-end: .25rem; opacity: .7; }
[dir="ltr"] .cj-crumbs li + li::before { content: "‹"; }
.cj-crumbs a { color: #f1d28a; font-weight: 700; text-decoration: none; }
.cj-crumbs a:hover { text-decoration: underline; }
.cj-crumbs [aria-current] { color: #fff; font-weight: 600; }

.cj-hero__head { display: flex; align-items: center; gap: .875rem; min-width: 0; }
.cj-hero__heading { display: grid; gap: .375rem; min-width: 0; }
.cj-hero__head .cj-hero__title { margin: 0; overflow-wrap: anywhere; }
.cj-hero__tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  font-size: 1.5rem;
}
.cj-card__flags--row { flex-direction: row; flex-wrap: wrap; align-items: center; margin: 0; }

/* Fact chips on navy: translucent pills, icons in the light tone inks. */
.cj-hero__meta .cj-meta {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .2);
  color: #fff;
}
.cj-hero__meta .cj-meta--location .bi   { color: #8fe3b4; }
.cj-hero__meta .cj-meta--employment .bi { color: #f1d28a; }
.cj-hero__meta .cj-meta--workplace .bi  { color: #9dbcff; }
.cj-hero__meta .cj-meta--experience .bi { color: #c9b1ff; }
.cj-hero > .container > .cj-hero__actions { margin-top: .25rem; }

.cj-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.cj-layout__main, .cj-layout__side { display: grid; gap: 1rem; min-width: 0; }

.cj-panel {
  min-width: 0;
  padding: 1rem;
  background: var(--cj-surface);
  border: 1px solid var(--cj-line);
  border-radius: var(--cj-radius);
  box-shadow: var(--cj-shadow);
}
.cj-panel__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .75rem;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--cj-ink);
}
.cj-panel__title .bi { color: var(--cj-gold); font-size: .95em; }

/* pre-line: the admin types description line breaks; <p> alone collapsed them into one block. */
.cj-prose { margin: 0; white-space: pre-line; color: var(--cj-ink-2); font-size: .9375rem; line-height: 2; }
.cj-prose + .cj-prose { margin-top: .75rem; }
.cj-muted { color: var(--cj-ink-3); }

.cj-checklist { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.cj-checklist li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  color: var(--cj-ink-2);
  font-size: .9375rem;
  line-height: 1.9;
}
.cj-checklist .bi { flex: none; margin-top: .35rem; color: var(--t-green); font-size: .9rem; }

.cj-duties {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: cj-duty;
}
.cj-duties li {
  position: relative;
  padding-block: .6rem;
  padding-inline: 2.75rem .85rem;
  border: 1px solid var(--cj-line);
  border-radius: var(--cj-radius-sm);
  background: var(--cj-bg);
  color: var(--cj-ink-2);
  font-size: .9375rem;
  line-height: 1.9;
  counter-increment: cj-duty;
}
.cj-duties li::before {
  content: counter(cj-duty, persian);
  position: absolute;
  inset-inline-start: .7rem;
  top: .7rem;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--t-blue-bg);
  color: var(--t-blue);
  font-size: .75rem;
  font-weight: 800;
  line-height: 1;
}
[dir="ltr"] .cj-duties li::before { content: counter(cj-duty); }

.cj-facts { display: grid; margin: 0; }
.cj-facts__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  padding-block: .55rem;
  border-top: 1px solid var(--cj-line);
}
.cj-facts__row:first-child { border-top: 0; padding-top: 0; }
.cj-facts dt {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  flex: none;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--cj-ink-3);
}
.cj-facts dd { margin: 0; min-width: 0; text-align: end; font-size: .875rem; font-weight: 700; color: var(--cj-ink); overflow-wrap: anywhere; }
.cj-facts__icon--amber  { color: var(--t-amber); }
.cj-facts__icon--green  { color: var(--t-green); }
.cj-facts__icon--blue   { color: var(--t-blue); }
.cj-facts__icon--purple { color: var(--t-purple); }
.cj-facts__icon--rose   { color: var(--t-rose); }

.cj-summary__actions { display: grid; gap: .5rem; margin-top: 1rem; }
.cj-summary__share { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.cj-summary__share .cj-btn { padding-inline: .5rem; font-size: .875rem; }
.cj-btn--block { display: flex; width: 100%; }
.cj-back { background: var(--cj-surface); }

.cj-faq { display: grid; gap: .5rem; }
.cj-faq__item {
  border: 1px solid var(--cj-line);
  border-radius: var(--cj-radius-sm);
  background: var(--cj-surface);
}
.cj-faq__item[open] { border-color: var(--cj-line-strong); background: var(--cj-bg); }
.cj-faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  min-height: 2.75rem;
  padding: .55rem .9rem;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--cj-ink);
  cursor: pointer;
  list-style: none;
}
.cj-faq__q::-webkit-details-marker { display: none; }
.cj-faq__q::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--t-blue-bg);
  color: var(--t-blue);
  font-weight: 800;
  line-height: 1;
}
.cj-faq__item[open] .cj-faq__q::after { content: "−"; }
.cj-faq__q:focus-visible { outline: 3px solid var(--cj-focus); outline-offset: 2px; border-radius: var(--cj-radius-sm); }
.cj-faq__a { margin: 0; padding: 0 .9rem .8rem; color: var(--cj-ink-2); font-size: .9375rem; line-height: 2; }

/* ── ≥576 ────────────────────────────────────────────────────────────────── */
@media (min-width: 576px) {
  .cj-card { padding: 1.125rem 1.25rem; }
  .cj-card__icon { width: 3rem; height: 3rem; font-size: 1.3rem; }
  .cj-panel { padding: 1.25rem 1.5rem; }
  .cj-hero__tile { width: 4rem; height: 4rem; font-size: 1.8rem; }
}

/* ── ≥768: two-column board ──────────────────────────────────────────────── */
@media (min-width: 768px) {
  .cj-hero { padding-block: 2.75rem 4.5rem; }
  .cj-hero__subtitle { font-size: 1rem; }
  .cj-toolbar { padding: 1rem; }
  .cj-cats__list { flex-wrap: wrap; overflow: visible; }
  .cj-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.125rem; }
  .cj-body { gap: 1.75rem; }
  .cj-hero--compact { padding-block: 2rem 2.75rem; }
  .cj-body--flow { padding-top: 2rem; }
  .cj-duties { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── ≥992: search and filters on one line ────────────────────────────────── */
@media (min-width: 992px) {
  .cj-toolbar {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
    align-items: center;
    gap: .75rem;
  }
  .cj-filters { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
  .cj .cj-field__select { min-height: 3rem; font-size: .9375rem; }
  .cj-hero { padding-block: 3.5rem 5rem; }
  .cj-hero__title { max-width: 44rem; }
  .cj-hero--compact { padding-block: 2.5rem 3rem; }

  /* Advert page: text column + a summary box that stays in view while the text scrolls. */
  .cj-layout { grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.5rem; }
  .cj-layout__side { position: sticky; top: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cj-btn, .cj-card { transition: none; }
}