/* ============================================================
   KosovaJob redesign — Blog listing (blog.php)
   Figma: desktop 64:5193 (Blogs 1512x2352), mobile 64:5420 (393x4442).
   Loads on top of new-ui/tokens.css + base.css (never legacy CSS).
   The pagination block keeps the legacy pagination.php markup
   (.paginationArea / .paginationArrows / .paginationCurrent[2] /
   .tooManyPagesPoiner / .paginationArrowsRight) — restyled here.
   ============================================================ */

/* ---------- Page column ----------
   Switched 2026-09-12 from the old PDF-measured 1433px .kj-container to the
   shared 1200px b1-wrap (this page loads tokens+base only, same duplication
   pattern as trajnime.css/about.css/calculator.css). */
.kj-b1-wrap {
  width: 100%;
  max-width: var(--kj-b1-container, 1200px);
  margin: 0 auto;
  padding: 0 32px;
}
/* the list view (KJBlog.html:16): a positioned block right under the header that holds the
   glow, the hero and the list, so the glow's top -72px is measured from under the header —
   1 px below the page top, behind the translucent sticky header, as on #/blog. Until
   2026-10-11 the glow was measured from the page top (y -72: both circles 73 px too high). */
.kj-blog-view { position: relative; }
.kj-b1-glow {
  position: absolute;
  top: -72px; left: 0; right: 0;
  height: 900px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 35%, rgba(0, 0, 0, 0) 78%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 35%, rgba(0, 0, 0, 0) 78%);
}
.kj-b1-glow::before,
.kj-b1-glow::after {
  content: "";
  position: absolute;
  width: 820px; height: 820px;
  border-radius: 50%;
}
.kj-b1-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-b1-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%);
}

/* ---------- Hero ----------
   Rebuilt 2026-09-12 to match the Claude Design bundle's own rendered Blog
   page (KosovaJob Batch 1 standalone.html, route #/blog) — the b1-glow, the
   compact hero (eyebrow-less h1 straight into the search bar, no subtitle),
   and the 48px-tall search pill are all measured off that bundle's DOM, same
   component shared with rreth-nesh.php/llogaritja-e-pages.php. The old PDF
   p16 hero (concentric rings, 72px search bar, subtitle) is superseded. */
.kj-blog-hero {
  position: relative;
  z-index: 5;
  /* bundle: wrap padding 32px 32px 8px — the side gutters must survive the
     vertical override (the previous 32px 0 8px wiped .kj-b1-wrap's 32px sides
     and let the title and pill run 32px past the content column each side) */
  padding: 32px 32px 8px;
}
/* the page ground: the 2026-10-09 shell paints html, body --bg-subtle (#F6F8FB) on every
   page, signed in AND signed out (both measured on #/blog, 2026-10-11) — the Batch 1
   artboards' #FFFEFD (--kj-b1-page) is gone from the blog */
body.kj-blog-page { background: var(--kj-b3-page, #F6F8FB); }

/* KJBlog h1 (2026-10-11, measured on #/blog): 40/800, line 1.1, -.03em at every
   width down to the phone tier (28 px, below); "Lexo blogun. Këshilla…" with the
   middle words in --coral-600 (plain colour, no gradient text). */
.kj-blog-hero__title {
  margin: 0 0 22px;
  font-family: var(--kj-font);
  font-weight: 800;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--kj-b3-title);
  text-wrap: balance;
}
.kj-blog-hero__hl { color: var(--kj-coral-600, #EE4753); }

/* search box — KJBlog.html:24-30 (2026-10-11): #fff, 1px --border-subtle, r28,
   padding 8, gap 8, --shadow-md; a field row (padding-left 10, gap 10: the 22 px
   open-book glyph in coral-500, then the 48 px input); the gradient-brand button
   48 high, padding 0 16, 20 px magnifier + "Kërko" (the label hides on phones,
   leaving a 52 x 48 button). The book shows on every width. */
.kj-blog-search {
  max-width: none;
  width: 100%;
  margin: 0;
  height: 66px;
  padding: 8px;
  gap: 8px;
  background: #fff;
  border-radius: 28px;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  box-shadow: var(--kj-shadow-md, 0 8px 20px -6px rgba(4,30,66,.12));
  text-align: left;
}
.kj-blog-search__field {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding-left: 10px;
}
.kj-blog-search__ico { flex: 0 0 auto; width: 22px; height: 22px; color: var(--kj-coral-500, #FE616C); }
.kj-blog-search input { height: 48px; padding: 1px 2px; font-size: 16px; color: var(--kj-b3-title, #041E42); }
.kj-blog-search input::placeholder { color: var(--kj-b3-muted); font-weight: 400; }
.kj-blog-search .kj-search__submit {
  flex: 0 0 auto;
  width: auto;
  min-width: 48px;
  height: 48px;
  padding: 0 16px;
  border-radius: 999px;
  gap: 8px;
  background: var(--kj-b3-gradient, linear-gradient(120deg, #FFC473 0%, #FE616C 100%));
  font-weight: 800;
  font-size: 15px;
  box-shadow: var(--kj-shadow-accent, 0 10px 24px -8px rgba(254,97,108,.45));
  transition: transform .15s var(--kj-ease-out, cubic-bezier(.22,.61,.36,1)), box-shadow .2s;
}
/* the design lifts the button 1 px on hover (no brightness filter) */
.kj-blog-search .kj-search__submit:hover { transform: translateY(-1px); filter: none; }
.kj-blog-search__label { display: inline; }
@media (max-width: 759px) { .kj-blog-search__label { display: none; } }
/* KJBlog.clearQ: 34px disc, --surface-muted / --text-muted, coral on hover. --surface-muted
   is #F6F8FB (measured on #/blog 2026-10-11; the house name is --kj-b3-page) — it was
   --kj-b3-sunken #EEF1F6 until the verification that day. */
.kj-blog-search__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--kj-b3-page, #F6F8FB);
  color: var(--kj-b3-muted, #6B7890);
  transition: background .2s ease, color .2s ease;
}
.kj-blog-search__clear:hover { background: var(--kj-coral-50, #FFF1EF); color: var(--kj-coral-600, #EE4753); }
.kj-blog-search__clear svg { display: block; }

/* results wrap: padding 24 32 80; count row 16/700 --text-strong on a 24 px line, mb 16 */
.kj-blog-count {
  margin: 16px 0 16px;
  font-family: var(--kj-font);
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--kj-b3-title);
}
/* KJBlog.noPosts: #fff card, 1px --border-subtle, r24, pad 48 28, muted, coral reset link */
.kj-blog-empty {
  background: #fff;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  border-radius: 24px;
  padding: 48px 28px;
  text-align: center;
  font-size: 16px;
  color: var(--kj-b3-muted, #6B7890);
}
.kj-blog-empty a { color: var(--kj-coral-600, #EE4753); font-weight: 700; }

/* ---------- Listing grid ---------- */
.kj-blog-main { position: relative; z-index: 1; padding: 8px 0 80px; }

/* bundle [data-cols-3]: 3 × 1fr, gap 18 (2 cols < 1024, 1 col < 768) */
.kj-blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 760px)  { .kj-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .kj-blog-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Blog card (KJBlog article, 2026-09-15) ----------
   #fff, 1px --border-subtle, r20, --shadow-sm, hover lift -4px + --shadow-lg;
   16:9 cover on --gray-100; body padding 18 20 20, flex column gap 8. */
.kj-blog-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--kj-b3-stroke, #E2E7EF);
  border-radius: var(--kj-b1-r-lg, 20px);
  overflow: hidden;
  box-shadow: var(--kj-shadow-sm, 0 2px 6px rgba(4,30,66,.07));
  transition: transform .25s var(--kj-ease-out, cubic-bezier(.22,.61,.36,1)), box-shadow .25s var(--kj-ease-out, cubic-bezier(.22,.61,.36,1));
}
.kj-blog-card:hover { transform: translateY(-4px); box-shadow: var(--kj-shadow-lg, 0 18px 40px -12px rgba(4,30,66,.18)); }
/* 2026-10-11: the card is an a[href], so base.css's motion layer (body:has(.kj-nav-wrap) a[href], specificity
   0,2,2) replaced the transition above with its .18s / .22s one. KJBlog's card keeps transform + box-shadow .25s
   (measured on the design's render); prefers-reduced-motion still wins (base.css, !important). */
body:has(.kj-nav-wrap) a.kj-blog-card[href] { transition: transform .25s var(--kj-ease-out, cubic-bezier(.22,.61,.36,1)), box-shadow .25s var(--kj-ease-out, cubic-bezier(.22,.61,.36,1)); }
/* 2026-10-11: the shared scroll-reveal (base.css `.js .kj-reveal--in`, kjFadeUp, fill-mode
   both) held its end frame (transform: none) after it played, which beat the hover lift
   above — on stage the card never rose (measured with a real hover; KJBlog lifts 4 px).
   The blog cards settle at opacity 1 instead and keep only the backwards fill (hidden
   during the stagger delay), so the lift shows. */
.js .kj-blog-card.kj-reveal--in { opacity: 1; animation-fill-mode: backwards; }

/* the cover (KJBlog.html:39, 2026-10-11): 16:9 on --gray-100, the picture cropped
   with object-fit: cover (kj-blog-thumbs.php: the 420/840 WebP thumbnails, else the
   original), the category pill at the top-left */
.kj-blog-card__cover {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--kj-b3-sunken, #EEF1F6);
}
.kj-blog-card__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* the category: top/left 12, h 24, padding 0 10, r 999, rgba(255,255,255,.92),
   12/800 --kj-navy, no border, no shadow */
.kj-blog-card__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 24px;
  max-width: calc(100% - 24px);
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  font-size: 12px;
  font-weight: 800;
  line-height: 18px;
  color: var(--kj-b3-title, #041E42);
  white-space: nowrap;
  overflow: hidden;
}

.kj-blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 18px 20px 20px;
}

/* Text + "·" separator per the bundle (no icons — ico-date-pink.svg/
   ico-read-pink.svg are hidden below, kept in the DOM as a no-op rather than
   ripped out, in case something else still references them). KJBlog.html:41
   puts 12 px on both sides of the dot (measured 2026-10-11). */
.kj-blog-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-weight: 700;
  font-size: 13px;
  color: var(--kj-coral-600);
}
.kj-blog-card__meta span { display: inline-flex; align-items: center; }
.kj-blog-card__meta span + span::before { content: '·'; margin-right: 12px; color: var(--kj-b3-faint, #9BA7BC); }

/* title 18/700 1.3 --text-strong (no clamp in the bundle) */
.kj-blog-card__title {
  margin: 0;
  font-family: var(--kj-font);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--kj-b3-title, #041E42);
}
/* excerpt 14/1.55 --text-muted, clamped to 3 lines */
.kj-blog-card__excerpt {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--kj-b3-muted, #6B7890);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* "Lexo më shumë" 14/700 --text-strong, gap 6, margin-top auto, padding-top 6, 16px coral arrow */
.kj-blog-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
  font-weight: 700;
  font-size: 14px;
  color: var(--kj-b3-title, #041E42);
}
/* the arrow stays put on hover: KJBlog.html:44 lifts the card only (the 3 px slide it had
   was removed 2026-10-11, measured with a real hover on #/blog: the design's arrow does not move) */
.kj-blog-card__more svg { color: var(--kj-coral-500, #FE616C); }

/* ---------- Pagination bar ---------- */
.kj-blog-pagebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 44px;
}
.kj-blog-showing { font-size: 14px; color: #919191; }

.paginationArea {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* PDF p16: active pill x=1234..1268 (35x36 incl. its 1px border); the "2"
     and "3" advance centres sit 44 / 45.2 further right => 36px boxes with
     an ~9px gap. */
  gap: 8px;
}
.paginationCurrent,
.paginationCurrent2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
}
/* PDF p16: inactive page digits sample 30,30,30 = #1E1E1E (was #383838). */
.paginationCurrent { color: #1E1E1E; transition: background-color .15s ease, box-shadow .15s ease; }
.paginationCurrent:hover { background: #fff; box-shadow: var(--kj-shadow-xs); }
.paginationCurrent2 {
  background: #fff;
  color: #1E1E1E;
  border: 1px solid var(--kj-stroke);
  box-shadow: var(--kj-shadow-xs);
}
.tooManyPagesPoiner { color: #919191; padding: 0 4px; font-size: 14px; }

/* prev / next chevrons (pagination.php renders empty <a> tags) */
.paginationArrows,
.paginationArrowsRight {
  display: inline-flex;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.paginationArrows {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 5l-7 7 7 7' stroke='%23383838' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.paginationArrowsRight {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 5l7 7-7 7' stroke='%23383838' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.paginationArrows:hover,
.paginationArrowsRight:hover { background-color: #fff; box-shadow: var(--kj-shadow-xs); }

/* ---------- Responsive ---------- */
/* (the 48 px tablet heading is gone: KJBlog keeps 40 px down to its phone tier) */
@media (max-width: 759px) {
  /* KJBlog phones ([data-wrap] 16 px sides, [data-h1] 28 px): the hero AND the list
     get 16 px gutters (the list kept 32 px before 2026-10-11 — cards 326 wide at 390
     instead of the design's 358). The search box keeps its desktop geometry (66 px,
     book icon, magnifier); only the label hides (above). The 2026-09-27 phone
     variant (no book, AI icon) is superseded by the operator's 2026-10-11 "search
     icon is not the same as in the design". */
  .kj-b1-wrap { padding: 0 16px; }
  .kj-blog-hero { padding: 32px 16px 8px; }
  .kj-blog-hero__title { font-size: 28px; line-height: 1.1; letter-spacing: -.03em; }
  .kj-blog-main { padding-bottom: 56px; }
  .kj-blog-pagebar {
    flex-direction: column;
    justify-content: center;
    margin-top: 36px;
    gap: 14px;
  }
  .kj-blog-showing { font-size: 13px; }
  .paginationArea { justify-content: center; }
}

/* Save heart on the card cover (design: white round button, top-right). Sits
   inside the card's <a>, so its JS stops the click from following the link. */
.kj-cardsave {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%;
  background: #FFFEFD center / 18px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 20.3l-1.2-1.1C6 15 3 12.3 3 8.9 3 6.2 5.2 4 7.9 4c1.6 0 3.1.7 4.1 1.9C13 4.7 14.5 4 16.1 4 18.8 4 21 6.2 21 8.9c0 3.4-3 6.1-7.8 10.3L12 20.3z' stroke='%231E1E1E' stroke-width='1.8'/%3E%3C/svg%3E");
  box-shadow: 0 2px 8px rgba(16,24,40,.16);
  cursor: pointer;
}
.kj-cardsave:hover { box-shadow: 0 4px 14px rgba(16,24,40,.22); }
.kj-cardsave.is-on {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.3l-1.2-1.1C6 15 3 12.3 3 8.9 3 6.2 5.2 4 7.9 4c1.6 0 3.1.7 4.1 1.9C13 4.7 14.5 4 16.1 4 18.8 4 21 6.2 21 8.9c0 3.4-3 6.1-7.8 10.3L12 20.3z' fill='%23FF5067'/%3E%3C/svg%3E");
}
.kj-blog-card { position: relative; }

/* ---------- Entrance animations ---------- */
.kj-blog-card:nth-child(3n+1) { animation-delay: 0s; }
.kj-blog-card:nth-child(3n+2) { animation-delay: .08s; }
.kj-blog-card:nth-child(3n+3) { animation-delay: .16s; }