/* ============================================================
   Blog - article detail
   Reuses the .art-* prose system from kennisbank-artikel.css.
   Adds: category-accented hero, feature image, pullquote,
   key-takeaways box, author bio card. Accent driven by --cat.
   ============================================================ */

.bgart { background: var(--bg); --cat: var(--jobit-blue); }

/* category accent (mirrors blog.css setters) */
.bgart-trends             { --cat: #4364AD; }
.bgart-arbeidsmarkt       { --cat: #D9544B; }
.bgart-product            { --cat: #2A4071; }
.bgart-klantverhalen      { --cat: #2E9D6F; }
.bgart-werkgevers         { --cat: #E8A53B; }
.bgart-werkzoekenden      { --cat: #6884C0; }
.bgart-tech               { --cat: #36528E; }
.bgart-achter-de-schermen { --cat: #1F2F54; }
:root[data-bgart-accent="mono"] .bgart { --cat: var(--jobit-blue); }

/* ---- Hero ---- */
.bgart-head {
  position: relative;
  background: linear-gradient(180deg, #FCFDFF 0%, #F1F5FC 100%);
  border-bottom: 1px solid var(--border);
  padding: calc(var(--sec-pad-y) * 0.6 + 40px) 0 calc(var(--sec-pad-y) * 0.5);
  overflow: hidden;
}
.bgart-head-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--neutral-100) 1px, transparent 1px),
    linear-gradient(90deg, var(--neutral-100) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: 0.4;
  -webkit-mask-image: radial-gradient(ellipse at 50% 28%, black 0%, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 28%, black 0%, transparent 72%);
  pointer-events: none;
}
.bgart-head-inner {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

/* category eyebrow badge */
.bgart-cat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cat) 72%, #1b2233);
  background: color-mix(in srgb, var(--cat) 12%, #fff);
  padding: 6px 13px;
  border-radius: var(--r-pill);
  margin-bottom: 22px;
}
.bgart-cat::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--cat);
}

.bgart-title {
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 800;
  color: var(--fg-strong);
  margin: 0 0 20px;
  text-wrap: balance;
}
.bgart-dek {
  font-size: 19px;
  line-height: 1.55;
  color: var(--fg-muted);
  margin: 0 auto 30px;
  max-width: 620px;
  text-wrap: pretty;
}

/* byline */
.bgart-byline {
  display: inline-flex;
  align-items: center;
  gap: 13px;
}
.bgart-avatar {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--cat);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.01em;
  box-shadow: var(--shadow-sm);
}
.bgart-byline-text { text-align: left; display: flex; flex-direction: column; gap: 1px; }
.bgart-byline-name { font-size: 14.5px; font-weight: 700; color: var(--fg-strong); }
.bgart-byline-sub { font-size: 13px; color: var(--fg-subtle); }

/* ---- Feature image ---- */
.bgart-feature {
  position: relative;
  z-index: 3;
  max-width: 1000px;
  margin: -36px auto 0;
  padding: 0 var(--sec-pad-x);
}
.bgart-feature-frame {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xl);
  background: color-mix(in srgb, var(--cat) 12%, #eef2f8);
  aspect-ratio: 16 / 7;
}
.bgart-feature-frame image-slot { display: block; width: 100%; height: 100%; }
.bgart-feature-frame image-slot::part(frame) { background: transparent; border-radius: 0; }
.bgart-feature-frame image-slot::part(empty) { color: color-mix(in srgb, var(--cat) 60%, #5a6678); }
.bgart-feature-frame image-slot::part(ring) { border-color: color-mix(in srgb, var(--cat) 32%, rgba(31,47,84,0.16)); }

/* ---- Body (reuses .art-body / .art-layout / .art-prose) ---- */
.bgart-body { padding: 52px 0 72px; }

/* recolor the prose accents to --cat within a blog article */
.bgart .art-prose ul > li::before { background: var(--cat); }
.bgart .art-prose ol > li::before { background: color-mix(in srgb, var(--cat) 12%, #fff); color: var(--cat); }
.bgart .art-prose a { color: var(--cat); }
.bgart .art-prose code { background: color-mix(in srgb, var(--cat) 10%, #fff); color: color-mix(in srgb, var(--cat) 70%, #1b2233); }
.bgart .art-toc a.is-active { color: var(--cat); border-left-color: var(--cat); }
.bgart .art-toc a:hover { color: var(--cat); }
.bgart .art-tag:hover { color: var(--cat); background: color-mix(in srgb, var(--cat) 9%, #fff); border-color: color-mix(in srgb, var(--cat) 26%, var(--border)); }
.bgart .art-share-btn:hover { border-color: var(--cat); color: var(--cat); background: color-mix(in srgb, var(--cat) 7%, #fff); }
.bgart .art-share-btn svg { color: var(--cat); }

/* ---- Pullquote ---- */
.bgart-quote {
  margin: 40px 0;
  padding: 4px 0 4px 28px;
  border-left: 4px solid var(--cat);
}
.bgart-quote p {
  font-size: 25px;
  line-height: 1.34;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--fg-strong);
  margin: 0;
  text-wrap: balance;
}
.bgart-quote cite {
  display: block;
  margin-top: 14px;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  color: var(--fg-subtle);
}

/* ---- Key takeaways box ---- */
.bgart-key {
  margin: 36px 0;
  padding: 26px 28px;
  border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--cat) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--cat) 22%, var(--border));
}
.bgart-key-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cat);
  margin: 0 0 16px;
}
.bgart-key ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bgart-key li {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg);
}
.bgart-key li::before {
  content: "";
  position: absolute;
  left: 8px; top: 10px;
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--cat);
}

/* ---- Author bio (in aside) ---- */
.bgart-author {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-subtle);
}
.bgart-author-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.bgart-author-av {
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--cat);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 15px;
  flex-shrink: 0;
}
.bgart-author-name { font-size: 14.5px; font-weight: 700; color: var(--fg-strong); }
.bgart-author-role { font-size: 12.5px; color: var(--fg-subtle); }
.bgart-author p { font-size: 13.5px; line-height: 1.55; color: var(--fg-muted); margin: 0; }

/* ---- Related (reuses .art-related / .art-rcard) ---- */
.bgart-related .art-rcard { --cat: var(--jobit-blue); }
.bgart-related .art-rcard-trends             { --cat: #4364AD; }
.bgart-related .art-rcard-arbeidsmarkt       { --cat: #D9544B; }
.bgart-related .art-rcard-product            { --cat: #2A4071; }
.bgart-related .art-rcard-klantverhalen      { --cat: #2E9D6F; }
.bgart-related .art-rcard-werkgevers         { --cat: #E8A53B; }
.bgart-related .art-rcard-werkzoekenden      { --cat: #6884C0; }
.bgart-related .art-rcard-tech               { --cat: #36528E; }
:root[data-bgart-accent="mono"] .bgart-related .art-rcard { --cat: var(--jobit-blue); }
.bgart-related .art-rcard-cat { color: var(--cat); }
.bgart-related .art-rcard-cat::before { background: var(--cat); }
.bgart-related .art-rcard:hover { border-color: color-mix(in srgb, var(--cat) 42%, var(--border)); }
.bgart-related .art-rcard:hover .art-rcard-title { color: var(--cat); }
.bgart-related .art-rcard-go { color: var(--cat); }

/* CTA notch sits below the grey related section */
.cta-band[data-divider-from]::after { background: var(--bg-subtle); }

/* ---- Responsive ---- */
/* On mobile, lift the "In dit artikel" TOC directly under the feature photo,
   above the article text. Dissolve the aside so its blocks become grid items
   of .art-layout, then reorder: TOC, prose, share, author. */
@media (max-width: 960px) {
  .bgart .art-aside { display: contents; }
  .bgart .art-toc-block { order: -1; }
  .bgart .art-prose { order: 0; }
  .bgart .art-share-block { order: 1; }
  .bgart .bgart-author { order: 2; }
}
@media (max-width: 640px) {
  .bgart-quote p { font-size: 21px; }
  .bgart-feature { margin-top: -20px; }
}