/* ============================================================
   KosovaJob redesign — Company profile (business.php)
   Figma: desktop CompanyProfile 532:26742, mobile Profile 537:39274.
   IMPORTANT: the job cards on this page are injected by AJAX
   (getJobOpeningsPerUser.php) with LEGACY class names (.jobListCnts,
   .jobListImage, .jobListTitle, .jobListExpires, .jobListCity,
   .jobListHeaders, .setToTopListRight, .premiumListCnt,
   .newJobOpeningCnt) and the page JS keys on .listCnt /
   .listCntsBusHToR / .listCntB / .busHrefHome — this file re-skins
   those classes; do not rename them.
   ============================================================ */

/* ---------- Cover band ----------
   Batch 1 KJCompany measures this at 260px, navy gradient base with a dark
   overlay (so the breadcrumb + a real cover photo both stay legible) — not
   the old Figma-era 348px peach band. The overlay gradient is baked into
   the DEFAULT background-image here; business.php's inline style, when a
   real cover photo exists, layers that same overlay OVER the photo (see
   the style= attribute on .kj-cover), so the visual treatment is identical
   whether or not this company has uploaded a cover. */
.kj-cover {
  height: 260px;
  background-image: linear-gradient(rgba(4,30,66,.15), rgba(4,30,66,.55)), var(--kj-b3-gradient-navy, linear-gradient(150deg, #0A2C57 0%, #041E42 60%, #03152E 100%));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

/* ---------- Page column ----------
   Batch-1 KJCompany: 772px main / 340px sidebar, gap 24 -> 1136, matching
   the header/footer's --kj-b1-container. Replaces the old fluid 1112px
   single column. */
.kj-main { padding-bottom: 8px; }
.kj-container:has(.kj-company) { max-width: var(--kj-b1-container, 1200px); padding-left: 32px; padding-right: 32px; }
@media (max-width: 759px) {
  /* was locked at 32px on every width (higher specificity than base
     .kj-container's own 20px mobile rule) — matches the b1 convention
     used elsewhere this session (b1-public.css .kj-b1-wrap: 20px <=759px). */
  .kj-container:has(.kj-company) { padding-left: 20px; padding-right: 20px; }
}
.kj-company {
  position: relative;
  z-index: 1;
  max-width: none;
  /* KJCompany: the -84px overlap onto the 260px cover belongs to the whole
     two-column wrap ([data-wrap][data-sec-end] "margin: -84px auto 0"), so the
     header card AND the sidebar's rate card start on the same line. It used
     to sit on .kj-ph alone, which left the aside 84px lower than the header
     (operator screenshot, 2026-09-16). */
  margin: -84px 0 0;
  display: grid;
  grid-template-columns: 772px 340px;
  gap: 24px;
  align-items: start;
}
/* Grid items default to min-width:auto, sizing to their content's unwrapped
   min-content width. Below 1099px .kj-company collapses to a single 1fr
   track, but without this the track still can't shrink past whatever its
   widest unwrapped child demands (confirmed on stage: the header card's
   meta row + share button pushed the whole column ~100px past the 393px
   viewport) — min-width:0 lets normal wrapping/overflow-wrap do its job. */
.kj-co-main, .kj-co-side { min-width: 0; }
@media (max-width: 1099px) {
  .kj-company { grid-template-columns: 1fr; }
}
/* bugs-1020 (2026-10-20, R1 / R2): the company's own account and an employer-only session get no rate card and no
   follow nudge, so a company without "Çfarë ofrojnë" leaves NO rail — business.php then prints no aside at all and the
   main column takes the whole row instead of leaving the 340px track empty. Specificity 0,2,0: wins at every width. */
.kj-company:not(:has(> .kj-co-side)) { grid-template-columns: minmax(0, 1fr); }
.kj-co-main > * + * { margin-top: 18px; }   /* bundle main column: flex gap 18 */

/* breadcrumb, on the cover band. */
.kj-co-crumb {
  /* Batch 1 KJCompany: the crumb sits INSIDE the cover (absolute, top:18px),
     not as a separate flow block below it — so it never needs the profile
     card's negative margin to "clear" it (see .kj-ph below). */
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 18px;
  max-width: var(--kj-b1-container, 1200px);
  margin: 0 auto;
  padding: 0 32px;
}
/* KJCompany crumb (bundle): h34 pill, padding 0 14px 0 10px, rgba(255,255,255,.14),
   14px/700, blur(6px) backdrop, 15px chevron; hover .26 */
.kj-co-crumb a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.kj-co-crumb a svg { width: 15px; height: 15px; }
.kj-co-crumb a:hover { background: rgba(255,255,255,.26); color: #fff; text-decoration: none; }

/* ---------- Batch-1 sidebar: rating panel + follow nudge ----------
   Bundle aside: 340px column, flex gap 18, sticky top 92 (static <1024). */
.kj-co-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 92px; }
.kj-co-side .kj-sec-h { font-size: 18px; line-height: 1.3; letter-spacing: 0; margin-bottom: 12px; }
.kj-co-rate {
  background: #fff;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  border-radius: 24px;
  box-shadow: var(--kj-shadow-md, 0 8px 20px -6px rgba(4,30,66,.12));
  padding: 24px;
}
.kj-co-rate h2 {
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--kj-b3-title, #041E42);
  margin: 0 0 4px;
}
.kj-co-rate p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--kj-b3-muted, #6B7890);
}
/* count row: 40/800 -.03em number + 14/600 caption on one baseline */
.kj-co-rate__row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.kj-co-rate__n {
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--kj-b3-title, #041E42);
}
.kj-co-rate__cap { font-size: 14px; font-weight: 600; color: var(--kj-b3-body, #313C53); }
/* two-segment bar: insiders coral / outsiders gold, h8 r8, margin 14 0 12 */
.kj-co-rate__bar {
  display: flex;
  height: 8px;
  border-radius: 8px;
  overflow: hidden;
  margin: 14px 0 12px;
  background: var(--kj-b3-sunken, #EEF1F6);
}
.kj-co-rate__bar-in  { display: block; height: 100%; background: var(--kj-coral-500, #FE616C); }
.kj-co-rate__bar-out { display: block; height: 100%; flex: 1; background: var(--kj-gold-400, #FFC473); }
.kj-co-rate__legend { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kj-co-rate__legend > div { display: flex; align-items: flex-start; gap: 9px; }
.kj-co-rate__legend b { display: block; font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif); font-size: 17px; font-weight: 800; line-height: 1.1; color: var(--kj-b3-title, #041E42); }
.kj-co-rate__legend span { display: block; margin-top: 2px; font-size: 13px; color: var(--kj-b3-muted, #6B7890); }
.kj-co-rate__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 4px; }
.kj-co-rate__dot--in  { background: var(--kj-coral-500, #FE616C); }
.kj-co-rate__dot--out { background: var(--kj-gold-400, #FFC473); }
/* DS Button primary md block: h46, pad 0 22, 700/15, ls .01em, Mulish.
   Scoped under .kj-co-rate so it outranks rate.css's generic .kj-rate-open
   (48px, coral outline), which loads after this file. */
.kj-co-rate .kj-co-rate__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  margin-top: 18px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--kj-b3-gradient, linear-gradient(120deg,#FFC473 0%,#FE616C 100%));
  color: #fff;
  font-family: var(--kj-font-mulish, var(--kj-font));
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
  box-shadow: var(--kj-shadow-accent, 0 10px 24px -8px rgba(254,97,108,.45));
  cursor: pointer;
  transition: transform .15s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)), box-shadow .2s;
}
/* rate.css's generic .kj-rate-open:hover paints the trigger near-white; it ties
   the rule above on specificity and loads later, so the gradient vanished on
   hover. Three classes outrank it: the CTA stays the gradient and lifts. */
.kj-co-rate .kj-co-rate__cta:hover,
.kj-co-rate .kj-co-rate__cta:focus-visible {
  background: var(--kj-b3-gradient, linear-gradient(120deg,#FFC473 0%,#FE616C 100%));
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -8px rgba(254, 97, 108, .55);
}
/* "Ke vlerësuar tashmë këtë kompani" (Batch 3, 2026-10-13 — D38): the line a signed-in candidate
   who has rated gets where the button stood (kj_co_rate_rated_html()). It keeps the button's box —
   46px at least, 18px under the card's content — so the card does not jump when the dialog's script
   swaps it in after a save; a status, not a control: the "Ke aplikuar" banner's success colours,
   12px corners like the privacy note under it. Two classes outrank .kj-co-rate p.
   Gap 6 + side padding 8: the English sentence (247.3px at 14/700) + the 16px check need 269.3 — one
   line in the rail card's 290 (274 of content) and on phones down to 376px wide. Narrower phones give
   less (269 of content at 375, 254 at 360) and the sentence wrapped to two lines there (59.2px, so the
   card grew when the line was swapped in): under 380px the line is 13px with 6px side padding — it
   needs 251.6 of the 258 the 360px card gives. So the swap is 46px for 46px in both languages at
   every tier from 360 up (measured 2026-10-13); under 354px the English sentence wraps and
   min-height keeps the box. */
.kj-co-rate .kj-co-rate__rated {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  margin: 18px 0 0;
  padding: 10px 8px;
  border-radius: 12px;
  background: var(--kj-b3-success-bg, #E7F6EF);
  color: #0F7A50;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
.kj-co-rate .kj-co-rate__rated svg { flex: none; }
@media (max-width: 379px) {
  .kj-co-rate .kj-co-rate__rated {
    padding: 10px 6px;
    font-size: 13px;
  }
}
.kj-co-rate__priv {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--kj-b3-page, #F6F8FB);
  font-size: 13px;
  line-height: 1.45;
  color: var(--kj-b3-body, #313C53);
}
.kj-co-rate__priv svg { flex: none; margin-top: 2px; color: var(--kj-b3-navy, #041E42); }
.kj-co-rate__priv strong { color: var(--kj-b3-title, #041E42); }
/* "Temë e nxehtë / HOT" nudge — takes the numbers' place below KJ_PERC_MIN_PUBLIC
   ratings (kj-co-rate.php) */
.kj-co-rate__hot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--kj-coral-100, #FFE0DC);
  background: linear-gradient(120deg, #FFF7EC 0%, var(--kj-coral-50, #FFF1EF) 100%);
}
.kj-co-rate__hoticon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--kj-b3-gradient, linear-gradient(120deg, #FFC473 0%, #FE616C 100%));
  color: #fff;
  box-shadow: var(--kj-shadow-accent, 0 10px 24px -8px rgba(254, 97, 108, .45));
}
.kj-co-rate__hotbody { min-width: 0; }
.kj-co-rate__hothead { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.kj-co-rate__hothead strong {
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 16px;
  font-weight: 800;
  color: var(--kj-b3-title, #041E42);
}
.kj-co-rate__hotpill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--kj-coral-500, #FE616C);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}
.kj-co-rate .kj-co-rate__hotbody p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--kj-b3-body, #313C53); }

/* jobs section heading: coral count span */
.kj-sec-h__n { color: var(--kj-coral-600, #EE4753); }

/* (share button styling lives with .kj-ph__actrow below) */

/* section cards. UPDATED 2026-09-11: the Figma frame cited above (r=24,
   #FFFEFD, pad 48, no shadow) does not match the actual reference bundle
   (KosovaJob Batch 1 standalone.html) — measured directly off its rendered
   company-profile cards (About/Jobs/Gallery/Testimonials all agree): bg
   #fff, border var(--kj-b3-stroke) #E2E7EF, pad 24px 28px, shadow
   var(--kj-shadow-sm). The bundle is the ground truth per the exact-parity
   mandate, so this replaces the stale Figma-derived values. */
.kj-card {
  background: #fff;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  border-radius: 24px;
  padding: 24px 28px;
  box-shadow: var(--kj-shadow-sm, 0 2px 6px rgba(4, 30, 66, .07));
}

/* section headings. UPDATED 2026-09-11 (see .kj-card note above): measured
   22px/700/var(--kj-b3-title) #041E42 on the bundle, not 28px/#383838. */
.kj-sec-h {
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);   /* --font-display, not Montserrat */
  font-weight: 700;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--kj-b3-title, #041E42);
  margin: 0 0 14px;
}
.kj-about .kj-sec-h { margin-bottom: 10px; }
.kj-jobs__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.kj-jobs__head .kj-sec-h { margin: 0; }

/* ---------- Profile header card (Figma Frame 919: pad 48/36,
     150px logo r=24, name 36/700 #1E1E1E, overlaps the cover) ---------- */
.kj-ph {
  position: relative;
  z-index: 1;
  /* The -84px cover overlap is NOT here any more: it is on .kj-company (the
     bundle puts it on the [data-wrap] that holds both columns), otherwise the
     sidebar starts 84px below this card. The crumb is absolutely positioned
     inside .kj-cover, so nothing here needs to clear it. */
  margin-top: 0;
  /* KJCompany header (bundle, 2026-09-15): the same #fff / r24 / 24px 28px
     card as every section, with --shadow-md; row = flex, gap 22, items
     flex-START (the 104px avatar tops out with the name). The old 150px
     logo / 36px name / 36×48 padding came from the superseded Figma frame. */
  padding: 24px 28px;
  box-shadow: var(--kj-shadow-md, 0 8px 20px -6px rgba(4,30,66,.12));
  display: flex;
  align-items: flex-start;
  gap: 22px;
}
/* DS Avatar size=104 shape=rounded (--radius-md 14px), 4px white ring,
   --shadow-md; initials on --gradient-navy at 0.38 × size when no logo */
.kj-ph__logo {
  flex: 0 0 104px;
  width: 104px;
  height: 104px;
  border-radius: 14px;
  border: 4px solid #fff;
  box-shadow: var(--kj-shadow-md, 0 8px 20px -6px rgba(4,30,66,.12));
  background-color: #fff;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.kj-ph__logo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  /* the same deterministic hue as the company's cover bloom (kj-company-cover.php) */
  background: var(--hue, var(--kj-b3-gradient-navy, linear-gradient(150deg, #0A2C57 0%, #041E42 60%, #03152E 100%)));
  color: #fff;
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 700;
  font-size: 39.5px;   /* 0.38 × 104 */
  letter-spacing: .01em;
}
.kj-ph__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* h1 32/800 -.02em --text-strong (26px on phones) */
.kj-ph__name {
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--kj-b3-title, #041E42);
  overflow-wrap: anywhere;
}
/* "<b>12.4k</b> ndjekës · <b>48k</b> shikime · <b>2</b> shpallje aktive":
   15px/600 --text-body, strong --text-strong, gap 6 18, margin-top 8 */
.kj-ph__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--kj-b3-body, #313C53);
}
.kj-ph__stats .kj-stat span:first-child,
.kj-ph__stats .kj-ph__followers,
.kj-ph__stats .kj-ph__views,
.kj-ph__stats .kj-ph__jobs { font-weight: 700; color: var(--kj-b3-title, #041E42); }
/* address / web rows: 14px --text-muted, gap 6 18, margin-top 10, 15px coral glyphs */
.kj-ph__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin-top: 10px;
}
.kj-ph__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  font-size: 14px;
  color: var(--kj-b3-muted, #6B7890);
  min-width: 0;
  overflow-wrap: anywhere;
}
.kj-ico { display: inline-flex; flex: 0 0 auto; color: var(--kj-coral-500, #FE616C); }
.kj-ico svg { display: block; width: 15px; height: 15px; }
a.kj-ph__chip--link:hover { color: var(--kj-coral-600, #EE4753); }

/* ---------- Follow CTA column (right edge of the header card) ----------
   PDF p126: the pill's outer border rows measure x 1089..1263 / y 359..406
   => 176x48, and 1263 is exactly the card's 48px inner right edge
   (1112px column at x 200..1312 minus 48 padding). Border pixel sampled
   (255,80,103) = #FF5067, NOT the gold secondary.
   The design's column also carries a "Rate a company" link and a rating
   note under the pill; neither is rendered here (no rating backend, no
   translation row), so the design's 23px top offset of the pill is a
   3-item-stack artifact and is NOT transferable — the single pill is
   centred against the 150px logo like the rest of the row. */
.businessFollowCnt {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
/* Batch 1: Follow is the page's one solid gradient CTA (matches every other
   primary action on this redesign), not an outline pill — the outline
   treatment is reserved for the secondary "Vlerëso" action next to it. */
.followCompanyBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  min-width: 176px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--kj-r-pill);
  color: #fff;
  background: var(--kj-b3-gradient, linear-gradient(120deg,#FFC473 0%,#FE616C 100%));
  box-shadow: 0 10px 24px -10px rgba(254,97,108,.5);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  cursor: pointer;
  transition: filter .15s ease;
}
.followCompanyBtn:hover { filter: brightness(1.05); }
/* the "+" belongs to the follow state only; the subscribe handler flips the
   type attribute after a successful save, so this stays in sync */
.followCompanyBtn[type="1"]::before {
  content: '';
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* ---- KJCompany follow labels (2026-09-15) ----
   The visible word is drawn from data-lbl / data-lbl-on (business.php sets
   them) because saveSubscribe.php answers with translation 685/686 and the
   handler .html()s that into the pill — "Unfollow", English in both
   languages. Same transport as cards.css's .kj-cc__follow: the text node is
   collapsed and the attribute is printed by ::after, so whatever the AJAX
   writes back, the pill reads "Ndiqe" / "Po e ndjek" (and the CTA card
   "Ndiqe kompaninë" / "Po e ndjek kompaninë"). */
.followCompanyBtn[data-lbl] { font-size: 0; }
.followCompanyBtn[data-lbl]::after { content: attr(data-lbl); font-size: 15px; font-weight: 800; line-height: 1; }
.followCompanyBtn[data-lbl][type="2"]::after { content: attr(data-lbl-on); }
/* following = the bundle's success state on the header button: --success-bg
   fill, #0F7A50 text, a check instead of the plus, no accent shadow. The
   sidebar nudge CTA and the "Qëndro i informuar" pill stay the gradient
   primary in both states, as their Button does in the design (KJCompany.html:123,
   variant primary; 2026-10-18 T-pages — the band's pill had this success state too). */
.kj-ph__follow[type="2"] {
  background: var(--kj-b3-success-bg, #E7F6EF);
  color: #0F7A50;
  box-shadow: none;
}
.kj-ph__follow[type="2"]::before {
  content: '';
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' stroke='%230F7A50' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- Sidebar nudge "Nuk ka pozitë për ty tani?" (KJCompany, 2026-09-15) ----
   Bundle: --gradient-navy, #fff, r24, pad 24, overflow hidden, a 180px coral
   radial glow at right:-60/bottom:-60; title display 800/17; copy 14px/1.5
   --text-on-navy-muted, margin 8 0 14; block primary md Button (46px). */
.kj-nudge {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 24px;
  background: var(--kj-b3-gradient-navy, linear-gradient(150deg, #0A2C57 0%, #041E42 60%, #03152E 100%));
  color: #fff;
}
.kj-nudge__glow {
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(254, 97, 108, .45), transparent 70%);
  pointer-events: none;
}
.kj-nudge__h {
  position: relative;
  margin: 0;
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.3;
  color: #fff;
}
.kj-nudge__p {
  position: relative;
  margin: 8px 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--kj-b3-on-navy-muted, #A9B6CC);
}
.kj-nudge__follow.followCompanyBtn {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--kj-b3-gradient, linear-gradient(120deg, #FFC473 0%, #FE616C 100%));
  color: #fff;
  box-shadow: var(--kj-shadow-accent, 0 10px 24px -8px rgba(254, 97, 108, .45));
}
.kj-nudge__follow.followCompanyBtn::before { display: none; }
/* Batch 3 (2026-10-13, D38): a signed-in candidate who has rated gets no rate button — the 44px share
   disc then stands alone at the row's start and the stack shrinks to the hint's width (195.9 at 1440),
   exactly as the design draws it (#/kompanite/{id} with the company rated). No rule needed for it. */
.kj-ph__actrow { display: flex; align-items: center; gap: 8px; }
.kj-ph__actrow .kj-rate-open { flex: 1 1 auto; min-width: 0; }
.kj-ph__actrow .kj-ph__share { flex: 0 0 auto; }
/* KJCompany: outline rate button (h44, pad 0 18, 1.5px --border-default, #fff,
   --text-strong 700/14, 16px star; coral on hover) beside a 44px share disc */
.kj-ph .kj-rate-open.kj-ph__rate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 1.5px solid var(--kj-b3-stroke-2, #CBD3E0);
  border-radius: 999px;
  background: #fff;
  color: var(--kj-b3-title, #041E42);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  transition: border-color .2s ease, color .2s ease;
}
.kj-ph .kj-rate-open.kj-ph__rate:hover { border-color: var(--kj-coral-300, #FF9D96); color: var(--kj-coral-600, #EE4753); }
.kj-ph .kj-rate-open.kj-ph__rate svg { flex: none; }
.kj-ph .kj-ph__share.kj-shr-btn {
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--kj-b3-stroke-2, #CBD3E0);
  background: #fff;
  color: var(--kj-b3-title, #041E42);
}
.kj-ph .kj-ph__share.kj-shr-btn:hover { border-color: var(--kj-coral-300, #FF9D96); color: var(--kj-coral-600, #EE4753); background: #fff; }
/* "Vlerësimin e sheh vetëm KosovaJob" — 12px --text-faint, centred under the stack
   (rate.css hides .kj-rate-hint by default; the bundle draws it here) */
.kj-ph .kj-rate-hint.kj-ph__hint {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: var(--kj-b3-faint, #9BA7BC);
  text-align: center;
}

/* ---------- About card ("Rreth Kompanisë", readonly TinyMCE) ---------- */
.kj-about__body { min-height: 40px; }
/* a long About is clamped to ~5 lines (16px x 1.7) with "Lexo më shumë" (2026-10-04); the
   TinyMCE setup in business.php adds .is-clamped only when the text is clearly longer */
.kj-about__body.is-clamped { position: relative; max-height: 140px; overflow: hidden; }
.kj-about__body.is-clamped::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
}
.kj-about__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--kj-coral-600, #EE4753);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.kj-about__more:hover { color: var(--kj-coral-700, #CE3340); }
.kj-about__more:focus-visible { outline: none; box-shadow: var(--kj-ring, 0 0 0 3px rgba(254, 97, 108, .30)); border-radius: 8px; }
.kj-about__more svg { transition: transform .2s; }
.kj-about__more.is-open svg { transform: rotate(180deg); }
.kj-about__more[hidden] { display: none; }
/* blend the readonly TinyMCE viewer into the card (v4 .mce-*, v5+ .tox-*) */
.kj-about__body .mce-tinymce,
.kj-about__body .tox-tinymce {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.kj-about__body .mce-panel { background: transparent !important; }
/* fallback styling if TinyMCE doesn't initialize */
.kj-about__body pre.defaultSettings {
  margin: 0;
  white-space: pre-wrap;
  overflow-x: auto;
  font-family: var(--kj-font-mulish, var(--kj-font));
  font-size: 16px;
  /* KJCompany about copy: 16px / 1.7 --text-body */
  line-height: 1.7;
  color: var(--kj-b3-body, #313C53);
}

/* ---------- Jobs card — KJJobCard compact (2026-09-15) ----------
   business.php now renders the open positions server-side through
   kj_job_card_html() (variant compact), whose visual rules live in
   new-ui/cards.css (.kj-jc*). The legacy re-skin of the AJAX markup that used
   to live here (.jobListCnts > a, 80px .jobListImage, ::before icons,
   .premiumListCnt …) is GONE: it collided with the shared card's own
   selectors. Only the grid and the empty panel remain.
   Bundle: [data-cols-2] grid, 2 × minmax(0,1fr), gap 12; 1 column < 768. */
.listCnt.kj-jobs__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}
@media (max-width: 759px) {
  .listCnt.kj-jobs__grid { grid-template-columns: minmax(0, 1fr); }
}

/* empty state. KJCompany.noOpen: pad 24, r16, --surface-muted (#F6F8FB),
   centred 15px --text-muted copy. */
.listCnt.listCntB {
  display: block;
  text-align: center;
  padding: 24px;
  border-radius: 16px;
  background: var(--kj-b3-page, #F6F8FB);
  font-size: 15px;
  line-height: 1.5;
  color: var(--kj-b3-muted, #6B7890);
}

/* ("Stay Updated" band removed 2026-09-15 — the bundle's sidebar draws the
   .kj-nudge card above instead; business.php no longer emits .kj-stay.) */

/* ---------- "Qëndro i informuar" band (bundle's own inline CTA, new
   2026-09-12 — was missing from business.php entirely) ---------- */
.kj-informed.kj-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: 28px;
  background: var(--kj-b3-navy, #041E42);
  color: #fff;
  border: 0;
}
/* the bundle's decorative logo mark: 220px, top-right, 10% opacity, rotate 10° */
.kj-informed__mark {
  position: absolute;
  right: -30px;
  top: -40px;
  width: 220px;
  max-width: none;
  opacity: .1;
  transform: rotate(10deg);
  pointer-events: none;
}
.kj-informed__body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  /* the design's row (KJCompany.html:120-126): text and buttons on ONE line, the text shrinks and the
     buttons never do — so the card keeps its 140 px when the rate button leaves (apply-anim-job-21;
     with wrap it was 206 -> 140 at 1440 / 900). At <=759 the column rule below stacks text over buttons. */
  flex-wrap: nowrap;
}
.kj-informed__body > :first-child { min-width: 0; }
.kj-informed__h {
  margin: 0;
  font-family: var(--kj-font);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: #fff;
}
.kj-informed__p {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--kj-b3-on-navy-muted, #A9B6CC);
  max-width: 520px;
}
.kj-informed__actions { display: flex; gap: 10px; flex-wrap: wrap; flex: none; }
.kj-informed__follow.followCompanyBtn {
  height: 46px;
  min-width: 0;                      /* the design's Button md has no floor (KJCompany.html:123): .followCompanyBtn's 176 px is the hero's;
                                        at 390 the two pills then share one row, rated or not (2026-10-18, T-pages) */
  /* the rest of the design's Button md (the bundle's components/core/Button.jsx): 0 22px inside a 1px transparent border,
     15px / 700 / .01em, no icon in either state — "Ndiqe" 88.8 and "Po e ndjek" 121.2 wide, so at 390 the two pills keep one
     row for a follower too (with the "+" / check and 800 it was 118.7 / 151.2, and following + not rated wrapped: 268.5).
     gap 0: with no icon the collapsed fallback text node and the ::after label sit flush (the 8px gap stood between them). */
  padding: 0 22px;
  border: 1px solid transparent;
  gap: 0;
  border-radius: 999px;
  background: var(--kj-b3-gradient, linear-gradient(120deg, #FFC473 0%, #FE616C 100%));
  color: #fff;
  font-weight: 800;
  /* no font-size here: .followCompanyBtn[data-lbl] keeps the fallback text at 0 and
     ::after draws the label at 15px — a 15px here showed both ("Follow Follow", 2026-10-04) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.kj-informed__follow.followCompanyBtn[type="1"]::before,
.kj-informed__follow.followCompanyBtn[type="2"]::before { content: none; }
.kj-informed__follow.followCompanyBtn[data-lbl]::after { font-weight: 700; letter-spacing: .01em; }
/* scoped under .kj-informed so rate.css's later, generic .kj-rate-open
   (coral outline on white) cannot repaint the band's white ghost button */
.kj-informed .kj-informed__rate.kj-rate-open {
  height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.35);
  background: transparent;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
}
.kj-informed .kj-informed__rate.kj-rate-open:hover { background: rgba(255,255,255,.1); }
/* phones: the design's column (KJCompany.html:120-126 under root.x-dc.txt's [data-stack]) — text over the pills, both
   LEFT-aligned (it was centred); the pills stay one row (the follow pill has no floor, above). From 767 down, the design's
   own [data-stack] breakpoint (root.x-dc.txt:114 / :159), not the page's house 759: as a row at 760-767 the text of a
   follower who has not rated ran to 3 lines (162.5 against 140 once rated). The card keeps its 28px padding there. */
@media (max-width: 767px) {
  .kj-informed__body { flex-direction: column; align-items: stretch; text-align: start; }
}

/* ---------- Similar companies (bundle's own bottom section, new
   2026-09-12 — was missing entirely; reuses the shared KJCompanyCard
   also used by /kompanite, kj-companycard.php) ---------- */
.kj-similar { margin-top: 28px; }   /* bundle: section margin-top 10 on top of the 18 gap */
.kj-similar__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
/* three across down to 900, two from 899 (the design's [data-cols-3], root.x-dc.txt:79-81), one on phones (2026-10-18, T-pages) */
@media (max-width: 899px)  { .kj-similar__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 759px)  { .kj-similar__grid { grid-template-columns: 1fr; } }
/* one height per row and the buttons at the foot, as KJCompanyCard draws them (KJCompanyCard.html:17 body flex 1, :33 the
   actions margin-top auto) — they stood 19.5 px apart at 1440 when one card's name ran longer; the /kompanite grid does the
   same (companies.css .kj-ki) */
.kj-similar .kj-comp-card.kj-cc { display: flex; flex-direction: column; }
.kj-similar .kj-comp-card.kj-cc .kj-cc__cover { flex: none; }
.kj-similar .kj-comp-card.kj-cc .kj-cc__body { flex: 1 1 auto; }
.kj-similar .kj-cc .kj-comp-card__actions.kj-cc__actions { margin-top: auto; }

/* ---------- Verified badge (KJCompany header) — new 2026-09-11 ----------
   companyVerified table; row existence = verified, admin-set only. Exact
   icon/colour measured off the bundle's own header badge (a blue starburst
   + checkmark), distinct from the smaller green pill the card grid uses. */
.kj-ph__name { display: inline-flex; align-items: center; gap: 8px; }
.kj-ph__verified {
  display: inline-flex;
  color: #1D9BF0;
  cursor: help;
  flex: 0 0 auto;
}

/* ---------- Gallery (KJCompany "Foto & video") — new 2026-09-11 ----------
   Measured off the bundle: horizontal scroll strip, not a grid — 200x150
   tiles, r=14, snap-scroll. companyGallery, employer-submitted. */
.kj-gallery__strip { position: relative; }
.kj-gallery__grid {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 6px 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;   /* "<" ">" instead of the scrollbar (2026-10-04); touch / trackpad still scroll */
}
.kj-gallery__grid::-webkit-scrollbar { display: none; }
.kj-gallery__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  border-radius: 50%;
  background: #fff;
  color: var(--kj-b3-title, #041E42);
  box-shadow: 0 6px 16px -6px rgba(4, 30, 66, .35);
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.kj-gallery__nav:hover { border-color: var(--kj-coral-300, #FF9D96); color: var(--kj-coral-600, #EE4753); }
.kj-gallery__nav:focus-visible { outline: none; box-shadow: var(--kj-ring, 0 0 0 3px rgba(254, 97, 108, .30)); }
.kj-gallery__nav--prev { left: -14px; }
.kj-gallery__nav--next { right: -14px; }
.kj-gallery__nav[hidden] { display: none; }
.kj-gallery__item {
  display: block;
  width: 200px;
  height: 150px;
  flex: 0 0 auto;
  scroll-snap-align: start;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  background-size: cover;
  background-position: center;
  transition: transform .25s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1));
}
.kj-gallery__item:hover { transform: scale(1.03); }
/* a photo opens the viewer (new-ui/js/kj-lightbox.js, 2026-10-06) */
.kj-gallery__item[data-kj-lb-item] { cursor: zoom-in; }
.kj-gallery__item:focus-visible { outline: 2px solid var(--kj-coral-500, #FE616C); outline-offset: 2px; }
.kj-gallery__item--video { width: 200px; height: 150px; border-radius: 14px; overflow: hidden; border: 1px solid var(--kj-b3-stroke, #E2E7EF); }
.kj-gallery__item--video iframe { width: 100%; height: 100%; display: block; border: 0; }

/* ---------- Employee testimonials (KJCompany "Punonjësit thonë") — new
   2026-09-11. Measured off the bundle: 2-col grid, muted card, circular
   initials avatar. companyTestimonials, admin-moderated (status=1 only). */
.kj-testimonials__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.kj-testimonial {
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  background: var(--kj-b3-sunken, #EEF1F6);
}
.kj-testimonial__avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--kj-b3-gradient, linear-gradient(120deg, #FFC473 0%, #FE616C 100%));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  font-family: var(--kj-font-2, var(--kj-font));
  font-weight: 800;
  font-size: 16px;
}
.kj-testimonial > div:first-child { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.kj-testimonial__name { font-weight: 700; font-size: 15px; color: var(--kj-b3-title, #041E42); }
.kj-testimonial__role { font-size: 13px; color: var(--kj-b3-muted, #6B7890); }
.kj-testimonial__quote { margin: 0; font-size: 14px; line-height: 1.6; color: var(--kj-b3-body, #313C53); }
@media (max-width: 759px) {
  .kj-testimonials__list { grid-template-columns: 1fr; }
}

/* ---------- Benefits tags (KJCompany sidebar "Çfarë ofrojnë") — new
   2026-09-11. Measured off the bundle: coral pill chips. companyBenefits,
   fixed catalog (kjBenefitsCatalog()), employer-set. */
.kj-benefits__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.kj-benefits__tag {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 13px;
  font-family: var(--kj-font);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1;
  border-radius: 999px;
  border: 1px solid var(--kj-coral-300, #FF9D96);
  background: var(--kj-coral-50, #FFF1EF);
  color: var(--kj-coral-700, #CE3340);
}

/* ---------- Follow / subscribe dialog (markup from getFollowPopUp) ---------- */
.fixedPopUpCnt {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  background: rgba(21, 23, 55, 0.45);
}
.fixedPopUpCntSub {
  position: fixed;
  z-index: 1002;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, 92vw);
  max-height: 88vh;
  overflow: auto;
  padding: 40px 32px 32px;
  background: var(--kj-surface);
  border-radius: 24px;
  box-shadow: 0 24px 64px rgba(16, 24, 40, 0.22);
  text-align: center;
}
.fixedPopUpCntSub .divider { display: none; }
.fixedPopUpCntSub .popUpCloseBtn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--kj-stroke);
  border-radius: 50%;
  cursor: pointer;
  background: var(--kj-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23383838' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.fixedPopUpCntSub .popUpCloseBtn:hover { background-color: var(--kj-surface-2); }
.fixedPopUpCntSubDarkCover {
  width: 88px;
  height: 88px;
  margin: 0 auto 20px;
  border: 1px solid var(--kj-stroke);
  border-radius: 20px;
  background-color: #fff;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.fixedPopUpCntSubDarkCoverH {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.35;
  color: #1E1E1E;
  margin-bottom: 10px;
}
.fixedPopUpCntSubDarkCoverHD {
  font-size: 15px;
  line-height: 1.5;
  color: #727272;
  margin-bottom: 20px;
}
.fixedPopUpCntSubDarkCoverCnt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  text-align: left;
}
.fixedPopUpCntSubDarkCoverCnt label {
  font-size: 14px;
  line-height: 1.5;
  color: #383838;
  cursor: pointer;
}
.fixedPopUpCntSubDarkCoverCnt .checkboxes {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--kj-primary);
  cursor: pointer;
}
.fixedPopUpCntSubDarkCoverCntErr { display: none; }
.fixedPopUpCntSubDarkCoverCntErr label { color: var(--kj-primary); font-weight: 600; }
.subscribeBTn, .subscribeBTnNoBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin: 20px auto 0;
  padding: 12px 28px;
  border-radius: var(--kj-r-pill);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  background: var(--kj-gradient);
  color: #fff;
  transition: filter .15s ease, background-color .15s ease;
}
.subscribeBTn:hover { filter: brightness(1.05); }
.subscribeBTnNoBtn {
  margin-top: 12px;
  background: transparent;
  border: 1px solid var(--kj-secondary);
  color: var(--kj-primary);
}
.subscribeBTnNoBtn:hover { background: var(--kj-scrim-primary); filter: none; }

/* mobile app bottom banner (legacy markup emitted by footer_new.php;
   same treatment as home.css) */
.appBottomImgCnt { position: fixed; bottom: 0; left: 0; right: 0; z-index: 900; }
.appBottomImgCnt img { width: 100%; display: block; }
.appBottomImgCnt .closeNotifier {
  position: absolute; top: -14px; right: 10px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--kj-text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat;
  cursor: pointer;
}

/* ---------- Responsive ---------- */
@media (max-width: 1099px) {
  /* bundle <1024: [data-side] collapses to one column and the aside goes
     static; card geometry is unchanged until the phone rules below */
  .kj-co-side { position: static; }
}
@media (max-width: 759px) {
  /* bundle <768: [data-pad-m] -> 20px card padding; [data-stack-start] ->
     header row stacks, LEFT-aligned (not centred); [data-h2] 26px; [data-h3]
     20px; [data-full-m] -> the action stack spans the card */
  .kj-company > * + * { margin-top: 24px; }
  .kj-card { padding: 20px; }
  .kj-ph {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }
  .kj-ph__body { width: 100%; }
  .kj-ph__name { font-size: 26px; }
  .kj-sec-h { font-size: 20px; }
  .businessFollowCnt { width: 100%; align-items: stretch; }
  .kj-ph .followCompanyBtn { width: 100%; min-width: 0; }
  .kj-informed.kj-card { padding: 20px; }
}

/* ---------- "Artikuj në KosovaJob" (2026-10-04) — blog posts about the company,
   kj-company-articles.php. Up to 3 cards: cover, title (2 lines), date. ---------- */
.kj-co-articles__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kj-co-art {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}
.kj-co-art:hover { border-color: var(--kj-coral-300, #FF9D96); box-shadow: 0 10px 24px -14px rgba(4, 30, 66, .35); text-decoration: none; }
.kj-co-art:focus-visible { outline: none; box-shadow: var(--kj-ring, 0 0 0 3px rgba(254, 97, 108, .30)); }
.kj-co-art__img { display: block; aspect-ratio: 16 / 9; background: var(--kj-b3-sunken, #F2F4F8) center / cover no-repeat; }
.kj-co-art__body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.kj-co-art__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--kj-b3-title, #041E42);
}
.kj-co-art:hover .kj-co-art__title { color: var(--kj-coral-700, #CE3340); }
.kj-co-art__date { font-size: 13px; color: var(--kj-b3-muted, #6B7890); }
@media (max-width: 759px) {
  .kj-co-articles__list { grid-template-columns: minmax(0, 1fr); }
  .kj-co-art { flex-direction: row; }
  .kj-co-art__img { flex: 0 0 112px; aspect-ratio: auto; min-height: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .kj-about__more svg, .kj-gallery__nav, .kj-co-art { transition: none; }
}


/* ---------------------------------------------------------------------------
   home-lists-14 (2026-10-16): the open-positions grid takes the design's
   "search" card WITHOUT the company line (KJCompany.html:67; KJJobCard.html:75
   `padding ... 14`, `avatarSize ... full ? 56`, `titleSize '16px'`).
   Ref lists-home/company-rate-entries__1440__sq: card 351 x 96, the inner row
   321 x 56 CENTRED in it (at +15 / +20 = border 1 + pad 14, the remaining 10 px
   split by the stretched row), the body column 251 x 47.5 (title row 23 with the
   20 px "E re" badge, the title 20 = 16 x 1.25, + 5 + the 19.5 items row), the
   bookmark 30 x 30 at +314 / +48.7 = 7 px inside the right edge; 320 x 96 at 390
   with a two-line title. ADDITIVE only: every block above is untouched, and these
   rules win on source order (same specificity) / by the extra class.
   --------------------------------------------------------------------------- */
.listCnt.kj-jobs__grid { grid-auto-rows: minmax(96px, auto); }
.listCnt.kj-jobs__grid .jobListCnts.kj-jc { padding: 14px; min-height: 96px; }
.listCnt.kj-jobs__grid .kj-jc .jobListImage.kj-jc__logo { width: 56px; height: 56px; }
.listCnt.kj-jobs__grid .kj-jc .kj-jc__logo--initials { font-size: 21.28px; }   /* 0.38 x 56 */
.listCnt.kj-jobs__grid .kj-jc .jobListTitle.kj-jc__title { font-size: 16px; -webkit-line-clamp: 1; line-clamp: 1; }
@media (max-width: 759px) {
  .listCnt.kj-jobs__grid .kj-jc .jobListTitle.kj-jc__title { -webkit-line-clamp: 2; line-clamp: 2; }
}


/* ---------------------------------------------------------------------------
   bugs-1020 wave C, item 3 (2026-10-20) — "Shiko si kandidat": the owner's
   candidate preview of this page (business.php ?preview=candidate; markup and
   script in kj-co-preview.php). The slim banner right under the header: the
   page's navy (--kj-b3-title) with white text, an eye, and the way back to
   /company-profile in gold — one line at 1440, it wraps on a phone. The NOTE a
   pressed follow / rate / save control shows instead of acting: a small navy
   bubble placed by the script next to the control (never past the screen's
   edges), not a target itself (pointer-events none); the same sentence goes to
   a visually hidden aria-live region. ADDITIVE only.
   --------------------------------------------------------------------------- */
.kj-cpv { background: var(--kj-b3-title, #041E42); color: #fff; }
.kj-cpv__in {
  max-width: var(--kj-b1-container, 1200px); margin: 0 auto; padding: 10px 32px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 10px;
  font-family: var(--kj-font-mulish, 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); font-size: 14px; font-weight: 600; line-height: 1.45; text-align: center;
}
.kj-cpv__ico { flex: none; color: var(--kj-gold-400, #FFC473); }
.kj-cpv__dot { opacity: .55; }
.kj-cpv__back { color: var(--kj-gold-400, #FFC473); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.kj-cpv__back:hover { color: #fff; }
.kj-cpv__back:focus-visible { color: #fff; outline: 2px solid #fff; outline-offset: 2px; border-radius: 4px; }
@media (max-width: 759px) {
  .kj-cpv__in { padding: 9px 20px; font-size: 13.5px; }
}
.kj-cpv-note {
  position: absolute; z-index: 1100; max-width: min(280px, calc(100vw - 24px)); box-sizing: border-box; padding: 9px 13px; border-radius: 12px;
  background: var(--kj-b3-title, #041E42); color: #fff; box-shadow: 0 10px 24px -8px rgba(4, 30, 66, .45);
  font-family: var(--kj-font-mulish, 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); font-size: 13px; font-weight: 600; line-height: 1.4; text-align: left;
  pointer-events: none;
}
.kj-cpv-note[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .kj-cpv-note { animation: kjCpvNoteIn .16s ease-out; }
}
@keyframes kjCpvNoteIn { from { opacity: 0; } to { opacity: 1; } }
.kj-cpv-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }