/* ==========================================================================
   Blog & careers (Nuxt routes) on the new design system.
   Layout of the search + categories follows the live zarbedar.com blog
   (open, centred, no boxed card) with the new tokens, type and chips.
   ========================================================================== */

/* No decorative logo under the header */
.blog-page .bl__head::after,
.blog-page .bl__head::before,
.cr .cr__hero-inner::before { content: none !important; display: none !important; }

/* Header: open and centred */
.blog-page .bl__head {
  align-items: center !important;
  min-height: 0 !important;
  max-width: 900px !important;
  margin: 0 auto clamp(24px, 3vw, 34px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  text-align: center !important;
}
.blog-page .bl__badge {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 7px 16px !important;
  border: 1px solid rgba(70, 66, 252, 0.16) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--zb-indigo) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.blog-page .bl__badge::before {
  content: "";
  width: 9px; height: 9px;
  background: currentColor;
  -webkit-mask: var(--zb-x-mask) center / contain no-repeat;
  mask: var(--zb-x-mask) center / contain no-repeat;
}
.blog-page .bl__title {
  max-width: 820px;
  margin-inline: auto !important;
  color: var(--zb-ink) !important;
  font-size: clamp(34px, 4.2vw, 60px) !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}
.blog-page .bl__desc {
  max-width: 640px;
  margin-inline: auto !important;
  color: var(--zb-muted) !important;
  font-size: clamp(15px, 1.15vw, 17px) !important;
  line-height: 1.9 !important;
}

/* Tools: search pill + category chips, centred, no card */
.blog-page .bl__tools {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 0 auto clamp(32px, 4vw, 52px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.blog-page .bl__search { width: min(100%, 580px) !important; }
.blog-page .bl__search-input {
  width: 100%;
  height: 58px !important;
  padding-inline: 54px 22px !important;
  border: 1px solid var(--zb-line-2) !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06) !important;
  color: var(--zb-ink) !important;
  font-size: 15px !important;
  transition: border-color 0.3s, box-shadow 0.3s !important;
}
.blog-page .bl__search-input::placeholder { color: var(--zb-muted-2); }
.blog-page .bl__search-input:focus {
  outline: none;
  border-color: var(--zb-indigo) !important;
  box-shadow: 0 0 0 4px rgba(70, 66, 252, 0.12), 0 12px 32px rgba(15, 23, 42, 0.06) !important;
}
.blog-page .bl__search-ico {
  inset-inline-end: auto !important;
  inset-inline-start: 18px !important;
  display: grid !important;
  place-items: center;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50%;
  background: var(--zb-paper);
  color: var(--zb-ink) !important;
}
.blog-page .bl__search-ico svg { width: 16px !important; height: 16px !important; }
.blog-page .bl__cats {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  gap: 8px !important;
}
.blog-page .bl__chip {
  padding: 8px 18px !important;
  border: 1px solid var(--zb-line-2) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--zb-ink-2) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.4s var(--zb-ease-spring) !important;
}
.blog-page .bl__chip:hover { border-color: var(--zb-indigo) !important; color: var(--zb-indigo) !important; transform: translateY(-2px); }
.blog-page .bl__chip.is-active { background: var(--zb-ink) !important; border-color: var(--zb-ink) !important; color: #fff !important; }

/* Careers hero follows the same open header */
.cr .cr__title { color: var(--zb-ink); }