/* ============================================================
   KosovaJob redesign — shared CONTENT pages
   Used by: press.php (/press) and politika-e-privatesise.php
            (/politika-e-privatesise)

   No dedicated Figma frame exists for either page. The treatment is
   derived from the token sheet plus the two closest already-approved
   siblings:
     • new-ui/blogs.css  — press listing is the categoryID=2 twin of the
       blog listing, so hero / search pill / card grid / the legacy
       $pagination restyle are the same recipe (namespaced .kj-content-*).
     • new-ui/article.css + new-ui/contact.css — long-form prose column,
       .kj-bg glow deco and the white "card" surface for the legal page.

   Loads on top of new-ui/tokens.css + base.css only (never legacy CSS —
   style-v3.css has destructive globals like div,span{float:left}).
   The pagination block below keeps pagination.php's own markup
   (.paginationArea / .paginationArrows / .paginationCurrent[2] /
   .tooManyPagesPoiner / .paginationArrowsRight) — restyled, never renamed.
   ============================================================ */


/* ---------- Page column ----------
   PDF p16 (1512 wide) — the frame that shows this exact listing component:
   the card grid spans x=64.0 .. 1448.0 (raster row y=980/1000, both outer
   edges land on whole pixels; 64 + 1384 + 64 = 1512 exactly). Card pens sit
   at x=84.0 / 553.33 / 1022.67 => pitch 469.33 = 445.33 card + 24 gap.
   Content column is therefore 1385 (matching blogs.css), NOT the global 1336
   token — and .kj-container spends 48px of its box on padding, so 1385+48. */
@media (min-width: 1100px) {
  /* Was the PDF's 1433px column; now the same 1200/32 box as the public
     header so the page content lines up with the logo (2026-09-17). */
  .kj-content-hero > .kj-container,
  .kj-content-main > .kj-container { max-width: var(--kj-b1-container, 1200px); padding-left: 32px; padding-right: 32px; }
}


/* ============================================================
   1. Shared ambience
   ============================================================ */

.kj-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 900px;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.kj-bg::before, .kj-bg::after {
  content: '';
  position: absolute;
  width: 682px;
  height: 682px;
  border-radius: 50%;
  background: var(--kj-gradient);
  filter: blur(182px);
  opacity: .08;
}
.kj-bg::before { top: 80px; left: -267px; }
.kj-bg::after  { top: 50px; right: -227px; }

/* two-tone title accent (shared by both heroes) */
.kj-content-hero__title em,
.kj-legal-hero__title em {
  font-style: italic;
  font-weight: 800;
  background: var(--kj-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-right: .08em;   /* keep the italic overhang from clipping */
}


/* ============================================================
   2. /press — hero
   ============================================================ */

.kj-content-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  /* PDF p16: nav is 96px; the h1 line box starts at y=182.62 (em box
     168.34..270.51, line-height 73.6) => 86.6px above it. Bottom: search
     pill ends y=437 (raster col x=760), card row 1 starts y=517 => 80px,
     of which .kj-content-main contributes 8px. Was 56/44. */
  padding: 87px 0 72px;
}
.kj-content-hero .kj-container { position: relative; }

/* faint concentric rings behind the title + soft warm corner glows */
.kj-content-hero__deco { position: absolute; inset: 0; pointer-events: none; }
.kj-content-hero__deco::before,
.kj-content-hero__deco::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 240px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 80, 103, 0.10);
  border-radius: 50%;
}
.kj-content-hero__deco::before { width: 660px;  height: 660px; }
.kj-content-hero__deco::after  { width: 1060px; height: 1060px; }
.kj-content-hero::before,
.kj-content-hero::after {
  content: '';
  position: absolute;
  width: 682px;
  height: 682px;
  border-radius: 50%;
  background: var(--kj-gradient);
  filter: blur(182px);
  opacity: .07;
  pointer-events: none;
}
.kj-content-hero::before { top: -100px; left: -300px; }
.kj-content-hero::after  { top: -80px;  right: -260px; }

.kj-content-hero__title {
  font-weight: 700;
  /* PDF p16: em box y=168.34..270.51 => 102.17px; Plus Jakarta Sans
     asc+desc = 1.5964em => 64px. Cross-check on the raster: the 'K' cap ink
     measures y=196..242 = 47px = 0.734em. Was 56px. */
  font-size: 64px;
  line-height: 1.15;
  color: #383838;
}
.kj-content-hero__sub {
  /* PDF p16: line boxes centred at y=297.16 / 327.16 => pitch 30px. Title
     line box ends y=256.22 => 26px gap. Em box 278.00..316.32 = 38.31 => 24px.
     Line 1 measures 920.27px wide, so the column must exceed it (the old
     860px forced a different, wrong break) — 990 matches blogs.css. */
  margin: 26px auto 0;
  max-width: 990px;
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
  color: #919191;
}

/* search pill (base .kj-search)
   PDF p16: pill x=296.5..1216.5 => 920 wide (already right), outer y=365..437
   => 72px tall (base .kj-search ships 64). Subtitle line box ends y=342.16
   => 22.8px above the pill. Icon ink x=322..349 / y=389..409 (a 28px box at
   pad-left 24), placeholder pen at x=368 => 20px gap. */
.kj-content-search {
  max-width: 920px;
  margin: 23px auto 0;
  height: 72px;
  gap: 20px;
  text-align: left;
}
.kj-content-search__ico { flex: 0 0 auto; width: 28px; height: 28px; }
.kj-content-search input::placeholder { color: #919191; font-weight: 400; }
/* PDF p16: submit gradient circle spans x=1152..1208 / y=373..429 => d=56
   (base is 48), i.e. inset 8px inside the 72px-tall pill. */
.kj-content-search .kj-search__submit { flex: 0 0 56px; width: 56px; height: 56px; }


/* ============================================================
   3. /press — listing grid + card
   ============================================================ */

/* PDF p16: pagination pill ends y=1816, footer top edge y=1882 (raster col
   x=20, #F4F6F9 -> #002045) => 66px tail. */
.kj-content-main { padding: 8px 0 64px; }

.kj-content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
/* PDF p16: card row 1 ends y=1017, row 2 starts y=1053 => row gap 36
   (column gap stays 24: pitch 469.33 = 445.33 card + 24). Was row-gap 32. */
@media (min-width: 760px)  { .kj-content-grid { grid-template-columns: repeat(2, 1fr); column-gap: 24px; row-gap: 36px; } }
@media (min-width: 1100px) { .kj-content-grid { grid-template-columns: repeat(3, 1fr); } }
/* empty listing must not leave a stray grid gap above the empty state
   (explicit class — :empty is unreliable with whitespace text nodes) */
.kj-content-grid.is-empty { display: none; }

.kj-content-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--kj-surface-warm);
  border-radius: var(--kj-r-lg);
  overflow: hidden;
  box-shadow: var(--kj-shadow-xs);
  transition: box-shadow .15s ease;
}
.kj-content-card:hover { box-shadow: var(--kj-shadow-card); }

.kj-content-card__cover {
  width: 100%;
  /* PDF p16: card top y=517, cover ends y=792 => 275 tall on a 445.33 card.
     Mobile p15 agrees: 388.9..602 = 213.1 on a 345 card (both 1.619). */
  aspect-ratio: 445 / 275;
  background-color: var(--kj-surface-3);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.kj-content-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  /* PDF p16 card 1: body box y=792..1017 (225 tall), card x=64..509.33.
     Sides: every text pen sits at x=84.0 => 20px. Top: the calendar icon ink
     is x=86..97 / y=813..824, i.e. a 16px box at x=84..100 / y=810.67..826.67
     => 18.7px. Bottom: "Read more" line box ends y=984.15 => 32.9px.
     Chain checks out exactly: 19+16+13+50+12+36+22+24+33 = 225.
     Was 22/24/26. */
  padding: 19px 20px 33px;
}

.kj-content-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* PDF p16: em box 809.54..828.70 = 19.16 => 12px (was 15). Date ink ends
     x=182.03 and the 2nd icon box starts x=199 (ink 200..213) => 16-17px. */
  gap: 6px 16px;
  font-weight: 600;
  font-size: 12px;
  color: var(--kj-primary);
}
/* PDF p16: calendar ink x=86..97 in a 16x16 box at x=84..100, date pen at
   x=104 => 4px icon-to-text gap (the markup ships 17/18px SVGs). */
.kj-content-card__meta span { display: inline-flex; align-items: center; gap: 4px; }
.kj-content-card__meta svg { flex: 0 0 auto; width: 16px; height: 16px; }

.kj-content-card__title {
  /* PDF p16: em box 836.71..868.63 = 31.93 => 20px; pen pitch
     861.71-836.71 = 25px. Line box starts y=840.17, meta row ends 826.67
     => 13.5px. Was 19px / 1.32 / margin-top 14. */
  margin-top: 13px;
  font-weight: 700;
  font-size: 20px;
  line-height: 25px;
  color: #1E1E1E;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kj-content-card:hover .kj-content-card__title { color: var(--kj-primary); }

.kj-content-card__excerpt {
  /* PDF p16: em box 899.71..922.06 = 22.35 => 14px (unchanged); pen pitch
     917.71-899.71 = 18px (was 1.55 => 21.7). Block starts y=901.89, the
     title block ends y=890.17 => 11.7px (was 10). */
  margin-top: 12px;
  font-size: 14px;
  line-height: 18px;
  color: #919191;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kj-content-card__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  /* PDF p16: em box 959.37..984.92 => 16px; line box 960.15..984.15 with
     line-height 24, excerpt block ends y=937.89 => 22px above it. */
  padding-top: 22px;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  color: var(--kj-primary);
}
.kj-content-card__more svg { transition: transform .15s ease; }
.kj-content-card:hover .kj-content-card__more svg { transform: translateX(3px); }


/* ============================================================
   4. Empty state (no releases / no search hits)
   ============================================================ */

.kj-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 64px 24px 72px;
  background: var(--kj-surface-warm);
  border: 1px solid var(--kj-stroke);
  border-radius: var(--kj-r-xl);
  box-shadow: var(--kj-shadow-xs);
}
.kj-empty__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--kj-scrim-primary);
  border: 1px solid rgba(255, 80, 103, .14);
}
.kj-empty__title {
  margin-top: 24px;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.26;
  color: #1E1E1E;
}
.kj-empty__sub {
  margin-top: 12px;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.55;
  color: #919191;
  overflow-wrap: anywhere;
}
.kj-empty .kj-btn { margin-top: 28px; }


/* ============================================================
   5. Legacy $pagination bar (pagination.php markup — do not rename)
   ============================================================ */

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

.paginationArea {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* PDF p16: the active pill spans x=1234.5..1269 / y=1780.5..1816 => a 36px
     box; the next digit's ink starts x=1294 => an ~8-9px gap. Was 6. */
  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 #1E1E1E on the raster (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); }


/* ============================================================
   6. /politika-e-privatesise — hero
   ============================================================ */

.kj-legal-hero { padding: 48px 0 8px; }
.kj-legal-hero__title {
  max-width: 20ch;
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1.2;
  color: #1E1E1E;
}
.kj-legal-hero__sub {
  margin-top: 20px;
  max-width: 70ch;
  font-weight: 500;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.5;
  color: #919191;
}


/* ============================================================
   7. /politika-e-privatesise — layout: sticky ToC + prose column
   ============================================================ */

.kj-legal { padding: 32px 0 0; }

.kj-legal__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
@media (min-width: 1100px) {
  .kj-legal__layout {
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    column-gap: 40px;
  }
}

/* ---- table of contents ---- */
.kj-legal__toc { min-width: 0; }
@media (min-width: 1100px) {
  .kj-legal__toc { position: sticky; top: 24px; }
}
.kj-legal__toc-card {
  background: var(--kj-surface-warm);
  border: 1px solid var(--kj-stroke);
  border-radius: var(--kj-r-lg);
  box-shadow: var(--kj-shadow-xs);
  padding: 20px;
}
.kj-legal__toc-title {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #383838;
  margin-bottom: 12px;
}
.kj-legal__toc-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 46vh;
  overflow-y: auto;
  scrollbar-width: thin;
}
.kj-legal__toc-list a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--kj-r-sm);
  font-size: 14px;
  line-height: 1.4;
  color: #383838;
  transition: background-color .15s ease, color .15s ease;
}
.kj-legal__toc-list a span {
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  border-radius: 6px;
  background: var(--kj-surface-2);
  font-weight: 700;
  font-size: 11px;
  color: #919191;
  transition: background-color .15s ease, color .15s ease;
}
.kj-legal__toc-list a:hover { background: var(--kj-scrim-primary); color: var(--kj-primary); }
.kj-legal__toc-list a.is-active { background: var(--kj-scrim-primary); color: var(--kj-primary); font-weight: 600; }
.kj-legal__toc-list a.is-active span,
.kj-legal__toc-list a:hover span { background: var(--kj-primary); color: #fff; }

/* ---- prose column ---- */
.kj-legal__body { min-width: 0; }

.kj-legal__block {
  background: var(--kj-surface-warm);
  border: 1px solid var(--kj-stroke);
  border-radius: var(--kj-r-lg);
  box-shadow: var(--kj-shadow-xs);
  padding: clamp(24px, 3vw, 40px);
  scroll-margin-top: 24px;
}
.kj-legal__block + .kj-legal__block { margin-top: 20px; }

.kj-legal__h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 700;
  font-size: clamp(20px, 1.9vw, 26px);
  line-height: 1.3;
  color: #1E1E1E;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--kj-stroke);
}
.kj-legal__num {
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border-radius: 10px;
  background: var(--kj-gradient);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}

.kj-legal__body p {
  font-size: 16px;
  line-height: 1.75;
  color: #383838;
  overflow-wrap: break-word;
}
.kj-legal__body p + p { margin-top: 16px; }
.kj-legal__body b, .kj-legal__body strong { font-weight: 700; color: #1E1E1E; }
.kj-legal__body a { color: var(--kj-primary); font-weight: 600; }
.kj-legal__body a:hover { text-decoration: underline; }

/* roman-numeral lists (markers are part of the legal text — kept verbatim) */
.kj-legal__list {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kj-legal__list li {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--kj-r-md);
  background: var(--kj-surface-2);
  font-size: 16px;
  line-height: 1.7;
  color: #383838;
}
.kj-legal__mk {
  flex: 0 0 auto;
  min-width: 26px;
  font-weight: 700;
  color: var(--kj-primary);
}
.kj-legal__list li + li { margin-top: 0; }
.kj-legal__list + p { margin-top: 18px; }

/* items that open with their own sub-heading line */
.kj-legal__list--titled li { flex-direction: column; gap: 6px; }
.kj-legal__li-title {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: #1E1E1E;
}

/* contact block inside §12 */
.kj-legal__address {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 20px;
  padding: 22px 24px;
  border-radius: var(--kj-r-md);
  background: var(--kj-surface-2);
  border-left: 3px solid var(--kj-primary);
  font-style: normal;
  font-size: 16px;
  line-height: 1.6;
  color: #383838;
}
.kj-legal__address-name { font-weight: 700; color: #1E1E1E; }

.kj-legal__totop {
  margin-top: 28px;
  text-align: center;
}
.kj-legal__totop a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--kj-r-pill);
  background: var(--kj-surface-warm);
  border: 1px solid var(--kj-stroke);
  box-shadow: var(--kj-shadow-xs);
  font-weight: 600;
  font-size: 14px;
  color: #383838;
  transition: color .15s ease, border-color .15s ease;
}
.kj-legal__totop a::before {
  content: '';
  width: 14px;
  height: 14px;
  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 19V5M5 12l7-7 7 7' stroke='%23383838' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.kj-legal__totop a:hover { color: var(--kj-primary); border-color: var(--kj-primary); }


/* ============================================================
   8. Responsive
   ============================================================ */

@media (max-width: 1099px) and (min-width: 760px) {
  .kj-content-hero__title { font-size: 48px; }
}

@media (max-width: 1099px) {
  /* ToC becomes a compact scrollable card above the text */
  .kj-legal__toc-list { max-height: 240px; }
}

@media (max-width: 759px) {
  /* PDF p15 (393x4442, the mobile twin of p16): cards span x=24..369 => 345
     content, i.e. a 24px gutter (base .kj-container uses 20px below 1100). */
  .kj-content-hero > .kj-container,
  .kj-content-main > .kj-container { padding: 0 24px; }
  /* p15: the search pill ends y=355 and card 1 starts y=388.9 => 34px, of
     which .kj-content-main contributes 8px. (padding-top left at 36 — the
     p15 nav is 80px tall but base.css ships 96px everywhere.) */
  .kj-content-hero { padding: 36px 0 26px; }
  .kj-content-hero__deco::before { top: 200px; width: 480px; height: 480px; }
  .kj-content-hero__deco::after  { top: 200px; width: 760px; height: 760px; }
  /* p15 em boxes / 1.5964: title 62.90 => 39 (was 38), sub 27.96 => 17 with
     a 20px pen pitch, card meta 20.97 => 13, card title 34.94 => 22 (pitch
     25), excerpt 24.46 => 15 (pitch 18), read-more 27.96 => 17. */
  .kj-content-hero__title { font-size: 39px; }
  /* p15: sub line box starts y=209.55, title line box ends y=188.91 => 20.6 */
  .kj-content-hero__sub { font-size: 17px; line-height: 20px; margin-top: 20px; }
  /* p15: pill outer y=283..355 => 72px, same as desktop (was 60). Its left
     edge is the 24px gutter and the icon ink starts x=42 => 18px; desktop is
     296.5/322 => 25.5, so the pill loses 8px of its 24px left padding. */
  .kj-content-search { margin-top: 34px; height: 72px; padding-left: 16px; }
  /* p15 icon ink 28x21 at x=42..69 — identical to the p16 desktop icon, so
     the 28px box carries over (was overridden down to 24). */
  .kj-content-search__ico { width: 28px; height: 28px; }
  /* p15 card 1: body y=602..845 (243), meta icon box top 620.96, read-more
     line box ends 811.85 => the same 19/20/33 padding as desktop; the chain
     19+16+13+50+12+54+22+24+33 = 243 confirms it, so no override. */
  .kj-content-card__meta { font-size: 13px; }
  .kj-content-card__title { font-size: 22px; }
  .kj-content-card__excerpt { font-size: 15px; }
  .kj-content-card__more { font-size: 17px; }

  .kj-empty { padding: 44px 20px 48px; border-radius: var(--kj-r-lg); }
  .kj-empty__ico { width: 76px; height: 76px; }
  .kj-empty__ico svg { width: 40px; height: 40px; }
  .kj-empty__title { font-size: 20px; margin-top: 20px; }
  .kj-empty__sub { font-size: 15px; }

  .kj-content-pagebar {
    flex-direction: column;
    justify-content: center;
    margin-top: 36px;
    gap: 14px;
  }
  .kj-content-showing { font-size: 13px; }
  .paginationArea { justify-content: center; }

  .kj-legal-hero { padding: 28px 0 4px; }
  .kj-legal-hero__title { max-width: none; }
  .kj-legal { padding-top: 24px; }
  .kj-legal__toc-card { padding: 16px; }
  .kj-legal__body p { font-size: 15px; }
  .kj-legal__list li { font-size: 15px; padding: 12px 14px; }
  .kj-legal__li-title { font-size: 15px; }
  .kj-legal__address { padding: 18px; font-size: 15px; }
  .kj-legal__h2 { gap: 10px; padding-bottom: 14px; margin-bottom: 18px; }
  .kj-legal__num { flex-basis: 30px; height: 30px; font-size: 14px; }
}

/* Listing meta marks. Measured on design p32: the icon ink is 12x14 inside a
   24-unit viewBox => a 16px box (we were rendering 24px, which read too large),
   with a 6px gap to the text. Colour is #FF5067 in the design — same as the
   label — so the listings use the pink variants of the assets. */
.kj-meta-ico { width: 16px; height: 16px; display: block; flex: 0 0 auto; }

/* 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-content-card { position: relative; }