/* ============================================================
   KosovaJob redesign — single article (article.php)
   REBUILT 2026-09-15 to the Batch 1 bundle's KJBlog post view (the
   design export in stage/new-design-html-files/blog details.html). Every
   number below is the bundle's own inline style, not a Figma/PDF read.

     glow        absolute top -72, 760 tall, mask 30% -> 78%
     progress    sticky top 72, z 40, 3px, gradient-brand, width = read %
     back        wrap 1200/32, padding 20 32 0; 14/700 --text-muted
     header      wrap padding 18 32 0; grid 1.15fr / 1fr, gap 40, centred;
                 meta 14/600 muted; h1 32/800 1.15 -.02em, margin 14 0 14;
                 excerpt 18/1.55 --text-body, mb 22; byline row: 40px
                 avatar + 15/700 name + 13 muted sub; share = 40px outline
                 button; cover 4:3, r24, --shadow-lg
     body        wrap padding 64 32 80; grid 1fr / 300, gap 56, start;
                 article max 720, 18/1.75 --text-body; footer row border-top
                 --border-subtle, padding-top 22
     rail        sticky top 96, gap 18; TOC card pad 16 14 14 r20 --shadow-xs,
                 label 12/800 .06em uppercase, links 14/1.35 pad 8 12 r10
                 (active coral-50 / coral-700 700); "Lexo më tej" card pad
                 18 20 20, 64px r12 thumbs, 14/700 titles, 12/600 meta,
                 coral "Të gjithë artikujt" 14/700 mt 16
     <1024       [data-side] one column, rail static, TOC hidden
     <768        h1 26px, wrap 20px, body padding 40 20 56, byline stacks

   Legacy hooks kept as-is: .defaultSettings + the TinyMCE shell, the Revive
   slot, my-job-top-header's tab bar, the mobile app banner. The "KONKURSE PËR
   PUNE" grid holds the shared KJJobCard since 2026-10-06 (cards.css).
   ============================================================ */

body.kj-art-page { background: var(--kj-b1-page, #FFFEFD); }

.kj-art { position: relative; }
.kj-art__glow {
  position: absolute;
  top: -72px;
  left: 0;
  right: 0;
  height: 760px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, rgba(0, 0, 0, 0) 78%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 30%, rgba(0, 0, 0, 0) 78%);
}
.kj-art__glow::before,
.kj-art__glow::after {
  content: '';
  position: absolute;
  width: 820px;
  height: 820px;
  border-radius: 50%;
}
.kj-art__glow::before {
  top: -300px;
  left: -320px;
  background: radial-gradient(circle at 50% 50%, rgba(255, 196, 115, .30) 0%, rgba(254, 97, 108, .15) 52%, rgba(254, 97, 108, 0) 72%);
}
.kj-art__glow::after {
  top: -160px;
  right: -300px;
  background: radial-gradient(circle at 50% 50%, rgba(254, 97, 108, .20) 0%, rgba(255, 196, 115, .13) 52%, rgba(255, 196, 115, 0) 72%);
}

/* reading progress */
.kj-art__progress {
  position: sticky;
  top: 72px;
  z-index: 40;
  height: 3px;
  pointer-events: none;
}
.kj-art__progress-bar {
  height: 3px;
  width: 0%;
  background: var(--kj-b3-gradient, linear-gradient(120deg, #FFC473 0%, #FE616C 100%));
  border-radius: 0 3px 3px 0;
  transition: width .12s linear;
}

.kj-art__wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--kj-b1-container, 1200px);
  margin: 0 auto;
  padding: 0 32px;
}
.kj-art__back-wrap { padding-top: 20px; }
.kj-art__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--kj-b3-muted, #6B7890);
  transition: color .15s ease;
}
.kj-art__back:hover { color: var(--kj-coral-600, #EE4753); }

/* ---------- header ---------- */
.kj-art__head { padding-top: 18px; }
.kj-art__head-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
.kj-art__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 600;
  color: var(--kj-b3-muted, #6B7890);
  animation: kjFadeUp .45s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) both;
}
.kj-art__title {
  margin: 14px 0 14px;
  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);
  text-wrap: balance;
  overflow-wrap: anywhere;
  animation: kjFadeUp .5s .05s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) both;
}
.kj-art__excerpt {
  margin: 0 0 22px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--kj-b3-body, #313C53);
  text-wrap: pretty;
  animation: kjFadeUp .5s .1s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) both;
}
/* the intro is the article's first paragraph (2026-10-06): its links read as links */
.kj-art__excerpt a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.kj-art__byline {
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* no author box since 2026-10-06: the actions start on the left */
  gap: 14px;
  animation: kjFadeUp .5s .15s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) both;
}
.kj-art__actions { display: flex; align-items: center; gap: 8px; flex: none; }
/* the bundle's Shpërndaje button: h40, pad 0 16, 1.5px --border-default, #fff, 700/14 */
.kj-art .kj-art__share.kj-shr-btn--outline {
  height: 40px;
  padding: 0 16px;
  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;
  gap: 8px;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.kj-art .kj-art__share.kj-shr-btn--outline:hover { border-color: var(--kj-coral-300, #FF9D96); color: var(--kj-coral-600, #EE4753); background: var(--kj-coral-50, #FFF1EF); }
.kj-art .kj-art__share.kj-shr-btn--outline svg { width: 16px; height: 16px; }
/* signed-in save (not in the public artboard; same 40px outline disc) */
.kj-art__save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--kj-b3-stroke-2, #CBD3E0);
  border-radius: 50%;
  background: #fff;
  color: var(--kj-b3-title, #041E42);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.kj-art__save:hover { border-color: var(--kj-coral-300, #FF9D96); color: var(--kj-coral-600, #EE4753); }
.kj-art__save.is-on { border-color: var(--kj-coral-300, #FF9D96); color: var(--kj-coral-600, #EE4753); background: var(--kj-coral-50, #FFF1EF); }
.kj-art__save.is-on svg { fill: currentColor; }

/* The whole image, never cropped (reviewer 2026-10-06: "featured image must show the
   whole image, not cut it"): no 4:3 box — the cover takes the image's own shape and
   .kj-art__head-grid (align-items: center) centres the text against its height.
   A very tall (portrait) image stops at 720px, still whole (contain). */
.kj-art__cover {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--kj-shadow-lg, 0 18px 40px -12px rgba(4, 30, 66, .18));
  background: var(--kj-b3-sunken, #EEF1F6);
  animation: kjFadeUp .6s .1s var(--kj-ease-out, cubic-bezier(.22, .61, .36, 1)) both;
}
.kj-art__cover .articleCover { width: 100%; height: auto; max-height: 720px; object-fit: contain; display: block; }
/* The box is kept while the image loads (review 2026-10-06: the body jumped when it arrived):
   article.php gives the <img> the cover's own width / height, from which the browser takes the
   ratio. When the size could not be read, a 3:2 box (the median cover) until the image is in. */
.kj-art__cover .articleCover:not([width]) { aspect-ratio: auto 3 / 2; }

/* ---------- body + rail ---------- */
.kj-art__body-wrap { padding-top: 64px; padding-bottom: 80px; }
.kj-art__body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;   /* 350 since 2026-10-06 ("Lexo më tej" 50px wider) */
  gap: 56px;
  align-items: start;
}
.kj-art__article {
  max-width: 720px;
  min-width: 0;
  font-size: 18px;
  line-height: 1.75;
  color: var(--kj-b3-body, #313C53);
}
.kj-art__foot {
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* only the share button since 2026-10-06, on the left */
  gap: 14px;
  padding-top: 22px;
  margin-top: 30px;
  border-top: 1px solid var(--kj-b3-stroke, #E2E7EF);
}

.kj-art__aside {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.kj-art__aside-h {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--kj-b3-muted, #6B7890);
}
.kj-art__toc {
  padding: 16px 14px 14px;
  background: #fff;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  border-radius: 20px;
  box-shadow: var(--kj-b3-shadow-xs, 0 1px 2px rgba(4, 30, 66, .06));
}
.kj-art__toc .kj-art__aside-h { padding: 0 12px 10px; }
.kj-art__toc-list { display: flex; flex-direction: column; gap: 2px; }
.kj-art__toc-link {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--kj-b3-muted, #6B7890);
  text-decoration: none;
  transition: all .2s;
}
.kj-art__toc-link:hover { color: var(--kj-coral-700, #CE3340); }
.kj-art__toc-link.is-active {
  background: var(--kj-coral-50, #FFF1EF);
  color: var(--kj-coral-700, #CE3340);
  font-weight: 700;
}
.kj-art__related {
  padding: 18px 20px 20px;
  background: #fff;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  border-radius: 20px;
  box-shadow: var(--kj-b3-shadow-xs, 0 1px 2px rgba(4, 30, 66, .06));
}
.kj-art__related .kj-art__aside-h { margin-bottom: 14px; }
.kj-art__related-list { display: flex; flex-direction: column; gap: 14px; }
.kj-art__rel { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.kj-art__rel-img {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
  flex: none;
  background: var(--kj-b3-sunken, #EEF1F6);
}
.kj-art__rel-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kj-art__rel-title {
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  color: var(--kj-b3-title, #041E42);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.kj-art__rel-meta { font-size: 12px; font-weight: 600; color: var(--kj-b3-muted, #6B7890); }
.kj-art__related-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--kj-coral-600, #EE4753);
}
.kj-art__related-all:hover { color: var(--kj-coral-700, #CE3340); }

/* "Rreth kompanisë" / "About the company" — the company this post is linked to in the admin
   blog editor (blog.companyID); one link back to its profile (kj-company-articles.php, 2026-10-04) */
.kj-art__company {
  padding: 18px 20px 20px;
  background: #fff;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  border-radius: 20px;
  box-shadow: var(--kj-b3-shadow-xs, 0 1px 2px rgba(4, 30, 66, .06));
}
.kj-art__company .kj-art__aside-h { margin-bottom: 14px; }
.kj-art__co { display: flex; gap: 14px; align-items: center; color: inherit; text-decoration: none; border-radius: 14px; }
.kj-art__co:focus-visible { outline: 2px solid var(--kj-coral-600, #EE4753); outline-offset: 4px; }
.kj-art__co-logo {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 12px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
}
.kj-art__co-logo--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: var(--kj-b3-gradient-navy, linear-gradient(150deg, #0A2C57 0%, #041E42 60%, #03152E 100%));
  color: #fff;
  font-weight: 800;
  font-size: 17px;
}
.kj-art__co-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kj-art__co-name {
  font-family: var(--kj-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.3;
  color: var(--kj-b3-title, #041E42);
  overflow-wrap: anywhere;
}
.kj-art__co-meta { font-size: 12.5px; font-weight: 600; color: var(--kj-b3-muted, #6B7890); }
.kj-art__co-cta { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 13.5px; font-weight: 700; color: var(--kj-coral-600, #EE4753); }
.kj-art__co-cta::after { content: "\2192"; transition: transform .2s; }
.kj-art__co:hover .kj-art__co-cta { color: var(--kj-coral-700, #CE3340); }
.kj-art__co:hover .kj-art__co-cta::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .kj-art__co-cta::after { transition: none; } }

/* ---------- article body (TinyMCE readonly renders inside an iframe;
   these rules only cover the pre-init flash + non-iframe fallback) ---------- */
.kj-article__body pre.defaultSettings {
  margin: 0;
  padding: 0;
  white-space: normal;
  overflow-x: auto;
  font-family: var(--kj-font-mulish, var(--kj-font));
  font-size: 18px;
  line-height: 1.75;
  color: var(--kj-b3-body, #313C53);
}
.kj-article__body pre.defaultSettings img { max-width: 100%; height: auto; }
/* the TinyMCE shell: strip ALL editor chrome (menubar/toolbar/statusbar
   render even in readonly mode) so only the content iframe shows */
.kj-article__body .mce-tinymce.mce-container {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* legacy jobsNew.css forced these to 100% (the init uses width:'inherit',
   which otherwise overflows the column on mobile) — keep that behavior */
.kj-article__body .mce-container,
.kj-article__body .mce-container-body { width: 100% !important; max-width: 100% !important; }
.kj-article__body .mce-edit-area iframe { width: 100% !important; }
.kj-article__body .mce-edit-area { border: 0 !important; background: transparent !important; }
.kj-article__body .mce-panel { background: transparent !important; border: 0 !important; }
.kj-article__body .mce-menubar,
.kj-article__body .mce-toolbar-grp,
.kj-article__body .mce-statusbar,
.kj-article__body .mce-notification { display: none !important; }

/* ---------- Revive ad slot (fixed 320x266 iframe — keep id/src). Since
   2026-10-06 it lives in the jobs grid (.kj-ajobs__ad below); this is its
   frame. ---------- */
.kj-article__ad-frame {
  width: 320px;
  max-width: 100%;
  border-radius: var(--kj-r-lg);
  overflow: hidden;
  box-shadow: var(--kj-shadow-xs);
  line-height: 0;
}
.kj-article__ad-frame iframe { max-width: 100%; }

/* legacy empty KSP slot (include is commented out) */
.containerRightAreaAdsOtherKSP { display: none; }

/* ---------- jobs section ("KONKURSE PËR PUNE" — existing feature below the
   design's content; two-tone centred heading, card grid, gradient view-all
   pill) ---------- */
.kj-ajobs { margin-top: 48px; }
.kj-ajobs .kj-container { max-width: var(--kj-b1-container, 1200px); padding: 0 32px; }
.kj-ajobs__title {
  text-align: center;
  font-family: var(--kj-font);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--kj-b3-title, #041E42);
}
.kj-ajobs__title span {
  background: var(--kj-b3-gradient, linear-gradient(120deg, #FFC473 0%, #FE616C 100%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.kj-ajobs__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* not 1fr: its auto minimum let the 320px banner widen the column past a phone under 360px (review 2026-10-06) */
  gap: 14px;
  margin-top: 26px;
}
/* The Revive banner (zone 5, a fixed 320x266 iframe) is the grid's first item
   (reviewer 2026-10-06: "Glam radio banner must be on the right, 2 colums of job
   ads on the left and 3 rows"). Below 1100px: a centred row of its own above the
   cards. From 1100px: two job columns + a 320px column the banner fills exactly,
   pinned across the cards' three rows (6 cards). */
.kj-ajobs__ad { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; }
@media (min-width: 760px)  { .kj-ajobs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .kj-ajobs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) 320px; }
  .kj-ajobs__ad { grid-column: 3; grid-row: 1 / span 3; }
}

/* job cards: the shared KJJobCard, compact — the homepage's card (cards.css;
   article.php kj_article_job_card(), 2026-10-06). The legacy .listsSimilar
   skin that stood here is gone with its markup; its unscoped .newJobOpeningCnt
   loaded after cards.css and would have repainted the card's "E re" pill. */

/* view-all pill (legacy .relatedArticlesCnsBtn) — DS primary md, centred */
.kj-ajobs__more { display: flex; justify-content: center; margin-top: 28px; }
.relatedArticlesCnsBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  padding: 0 22px;
  border-radius: var(--kj-r-pill);
  background: var(--kj-b3-gradient, linear-gradient(120deg, #FFC473 0%, #FE616C 100%));
  box-shadow: var(--kj-shadow-accent, 0 10px 24px -8px rgba(254, 97, 108, .45));
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  cursor: pointer;
  transition: filter .15s ease;
}
.relatedArticlesCnsBtn::after { content: '\2192'; font-size: 17px; line-height: 1; }
.relatedArticlesCnsBtn:hover { filter: brightness(1.05); }

/* ---------- logged-in candidate tab bar (my-job-top-header.php) ---------- */
.containerBlockMyJobsFixedFade { display: none; }
.containerBlockMyJobs { background: transparent; }
.containerBlockMyJobs .middleContainer {
  width: 100%;
  max-width: var(--kj-b1-container, 1200px);
  margin: 0 auto;
  padding: 8px 32px 0;
}
.myJobsCntHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.myJobsCntHeader::-webkit-scrollbar { display: none; }
.myJobsCntHeader a { flex: 0 0 auto; }
.myJobsCntHeaderH {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  border-radius: var(--kj-r-pill);
  background: #fff;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  font-size: 14px;
  font-weight: 600;
  color: var(--kj-b3-body, #313C53);
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.myJobsCntHeaderH:hover { color: var(--kj-coral-600, #EE4753); border-color: var(--kj-coral-300, #FF9D96); }
.myJobsCntHeaderHActive {
  background: var(--kj-b3-gradient, linear-gradient(120deg, #FFC473 0%, #FE616C 100%));
  border-color: transparent;
  color: #fff;
}
.myJobsCntHeaderHActive:hover { color: #fff; }

/* ---------- mobile app bottom banner (footer_new, legacy classes) ---------- */
.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] -> one column; rail static; TOC ([data-desk]) hidden */
  .kj-art__head-grid, .kj-art__body-grid { grid-template-columns: minmax(0, 1fr); }
  .kj-art__aside { position: static; }
  .kj-art__toc { display: none; }
  .kj-art__article { max-width: none; }
}
@media (max-width: 759px) {
  /* bundle <768: [data-h2] 26; [data-wrap] 20; [data-sec] 40 / [data-sec-end] 56;
     [data-stack-start] stacks left-aligned */
  .kj-art__wrap { padding-left: 20px; padding-right: 20px; }
  .kj-art__title { font-size: 26px; }
  .kj-art__body-wrap { padding-top: 40px; padding-bottom: 56px; }
  .kj-art__byline, .kj-art__foot { flex-direction: column; align-items: flex-start; }
  .kj-ajobs .kj-container { padding: 0 20px; }
  .kj-ajobs__title { font-size: 26px; }
}