/* BFZ — Inzichten (okt 2026): het overzicht en de artikels in de rustige BFZ-stijl.
   Koppen breken niet meer midden in een woord, de tussenkoppen zijn lichter met een haarlijn erboven,
   en 'Meer inzichten' en de artikellijst zijn rustige regels: een klein bronzen label, de titel in
   BFZ Grotesk 700/300 en een pijl. Alles hangt aan #inzicht (de artikelsectie), zodat het boven de
   algemene kopregels van bfz-ui-core.css staat zonder !important. */

#inzicht {
  --inz-ink: #efefef; --inz-muted: #d1d1d1; --inz-brons: #bcbcbc;
  --inz-lijn: rgba(239, 239, 239, 0.14); --inz-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- koppen: geen afbreekstreepjes midden in een woord ---------- */
body.v2 .page-hero__title { -webkit-hyphens: manual; hyphens: manual; text-wrap: balance; }
#inzicht :is(h2, h3) { -webkit-hyphens: manual; hyphens: manual; text-wrap: balance; }
body.v2 .inz-heel { white-space: nowrap; } /* West-Vlaanderen, EMS-training en E-Fit blijven heel */
/* de artikeltitels zijn lang: een iets bredere maat, zodat West-Vlaanderen en EMS-training op één regel passen */
@media (min-width: 881px) { body.v2.sub-premium .page-hero__title { max-width: 20ch; } }
@media (max-width: 880px) { body.v2.sub-premium .page-hero__title { max-width: none; font-size: clamp(22px, 6.9vw, 38px); } }
/* op gsm begint de leestekst meteen onder de opening: de draaiende stempel blijft daar weg, zodat hij nooit over de tekst ligt */
@media (max-width: 880px) { body.v2.sub-premium .sig-mark { opacity: 0; pointer-events: none; } }

/* ---------- artikel: datumregel als klein bronzen label, intro zonder dubbele lijn ---------- */
#inzicht .policy__body .policy__meta {
  margin: 0 0 22px; font-size: 10.5px; line-height: 1.6; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--inz-brons);
}
#inzicht .policy__body .policy__intro { border-bottom: 0; padding-bottom: 0; margin-bottom: clamp(48px, 5vw, 64px); }

/* ---------- tussenkoppen: lichter, met een haarlijn erboven ---------- */
#inzicht .policy__body > h2 {
  margin: clamp(56px, 5.6vw, 76px) 0 18px; padding-top: clamp(28px, 2.6vw, 36px);
  border-top: 1px solid var(--inz-lijn);
  font-family: var(--font-display); font-stretch: var(--wide, 112%); font-weight: 700; font-style: normal;
  font-size: 28px; line-height: 1.08; letter-spacing: 0; text-transform: uppercase; color: var(--inz-ink);
}
#inzicht .policy__body > h2:first-of-type { margin-top: 0; }
#inzicht .policy__body > h2 em { font-style: normal; font-weight: 300; color: inherit; }

/* 'Meer inzichten': kop zonder eigen lijn, de regels eronder dragen de haarlijnen */
#inzicht .policy__body > h2.inz-meer { margin-top: clamp(88px, 9vw, 128px); margin-bottom: clamp(24px, 2.4vw, 32px); padding-top: 0; border-top: 0; }

/* ---------- rustige regels (artikellijst en 'Meer inzichten') ---------- */
#inzicht .policy__body .inz-rijen { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--inz-lijn); }
#inzicht .policy__body .inz-rij {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 40px; column-gap: 24px; row-gap: 10px;
  margin: 0; padding: clamp(22px, 2vw, 28px) 0; border-top: 1px solid var(--inz-lijn);
  font-size: inherit; line-height: inherit; color: var(--inz-ink);
}
#inzicht .policy__body .inz-rij::before { content: none; display: none; }
#inzicht .policy__body .inz-rij__label {
  grid-column: 1; margin: 0; font-size: 10.5px; line-height: 1.3; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--inz-brons);
}
#inzicht .policy__body .inz-rij__titel {
  grid-column: 1; margin: 0; padding: 0; max-width: 34ch; border: 0;
  font-family: var(--font-display); font-stretch: var(--wide, 112%); font-weight: 700; font-style: normal;
  font-size: clamp(18px, 1.45vw, 21px); line-height: 1.12; letter-spacing: 0; text-transform: uppercase; color: var(--inz-ink);
}
#inzicht .policy__body .inz-rij__titel em { font-style: normal; font-weight: 300; color: inherit; }
#inzicht .policy__body .inz-rij__titel a { color: inherit; border-bottom: 0; text-decoration: none; transition: color 0.5s var(--inz-ease); }
/* de hele regel is klikbaar; de linktekst blijft enkel de titel */
#inzicht .policy__body .inz-rij__titel a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
#inzicht .policy__body .inz-rij__titel a:focus-visible { outline: 2px solid #9f9f9f; outline-offset: 4px; }
#inzicht .policy__body .inz-rij__tekst {
  grid-column: 1; margin: 2px 0 0; max-width: 60ch;
  font-size: 15px; line-height: 1.6; font-weight: 300; color: var(--inz-muted);
}
#inzicht .policy__body .inz-rij > .inz-pijl { grid-column: 2; grid-row: 1 / span 3; align-self: center; justify-self: end; }

/* de pijl: dunne lijn met een punt, schuift rustig mee bij hover */
#inzicht .inz-pijl {
  position: relative; display: block; flex: none; width: 22px; height: 1px; background: currentColor; color: var(--inz-brons);
  transition: transform 0.6s var(--inz-ease);
}
#inzicht .inz-pijl::after {
  content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px;
  border-right: 1px solid currentColor; border-top: 1px solid currentColor; transform: rotate(45deg);
}
@media (hover: hover) and (pointer: fine) {
  #inzicht .policy__body .inz-rij:hover .inz-pijl, #inzicht .inz-alle a:hover .inz-pijl { transform: translateX(6px); }
  #inzicht .policy__body .inz-rij:hover .inz-rij__titel a { color: #ffffff; }
}

/* 'Alle inzichten' onder de regels: klein, met pijl, zonder onderlijning */
#inzicht .policy__body .inz-alle { margin: clamp(24px, 2.4vw, 32px) 0 0; }
#inzicht .policy__body .inz-alle a {
  display: inline-flex; align-items: center; gap: 14px; min-height: 44px; border-bottom: 0;
  font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--inz-ink);
}
#inzicht .policy__body .inz-alle a:focus-visible { outline: 2px solid #9f9f9f; outline-offset: 4px; }

/* ---------- overzicht (/nl/inzichten/): over de volle breedte, op één lijn met de opening;
   het label links in de eerste kolom, titel en tekst in het midden, de pijl rechts ---------- */
#inzicht.inzicht--overzicht .policy__inner { max-width: var(--container); }
#inzicht.inzicht--overzicht .policy__body .policy__intro {
  max-width: 54ch; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; font-weight: 300; color: var(--inz-muted);
}
#inzicht.inzicht--overzicht .policy__body .inz-rij {
  grid-template-columns: minmax(0, 3fr) minmax(0, 8fr) minmax(48px, 1fr); column-gap: clamp(16px, 2vw, 32px);
  row-gap: 12px; padding: clamp(28px, 2.6vw, 40px) 0;
}
#inzicht.inzicht--overzicht .policy__body .inz-rij__label { grid-column: 1; grid-row: 1 / span 2; padding-top: 0.6em; }
#inzicht.inzicht--overzicht .policy__body .inz-rij__titel { grid-column: 2; max-width: 36ch; font-size: clamp(21px, 1.9vw, 28px); line-height: 1.06; }
#inzicht.inzicht--overzicht .policy__body .inz-rij__tekst { grid-column: 2; }
#inzicht.inzicht--overzicht .policy__body .inz-rij > .inz-pijl { grid-column: 3; grid-row: 1 / span 2; }
#inzicht.inzicht--overzicht .policy__body .inz-rijen + p { margin-top: clamp(40px, 4vw, 56px); }

@media (max-width: 880px) {
  #inzicht .policy__body > h2 { margin-top: 48px; padding-top: 26px; font-size: 22px; line-height: 1.1; }
  #inzicht .policy__body > h2:first-of-type { margin-top: 0; }
  #inzicht .policy__body > h2.inz-meer { margin-top: 72px; margin-bottom: 20px; padding-top: 0; }
  /* op gsm: label en pijl op één lijn, de titel eronder over de volle breedte */
  #inzicht .policy__body .inz-rij,
  #inzicht.inzicht--overzicht .policy__body .inz-rij { grid-template-columns: minmax(0, 1fr) 28px; column-gap: 16px; row-gap: 10px; padding: 22px 0 24px; }
  #inzicht .policy__body .inz-rij__label,
  #inzicht.inzicht--overzicht .policy__body .inz-rij__label { grid-column: 1; grid-row: 1; padding-top: 0; }
  #inzicht .policy__body .inz-rij > .inz-pijl,
  #inzicht.inzicht--overzicht .policy__body .inz-rij > .inz-pijl { grid-column: 2; grid-row: 1; align-self: center; }
  #inzicht .policy__body .inz-rij__titel,
  #inzicht.inzicht--overzicht .policy__body .inz-rij__titel,
  #inzicht .policy__body .inz-rij__tekst,
  #inzicht.inzicht--overzicht .policy__body .inz-rij__tekst { grid-column: 1 / -1; max-width: none; }
  #inzicht .policy__body .inz-rij__titel { font-size: 18px; line-height: 1.12; }
  #inzicht.inzicht--overzicht .policy__body .inz-rij__titel { font-size: 20px; line-height: 1.1; }
}

@media (prefers-reduced-motion: reduce) {
  #inzicht .inz-pijl, #inzicht .policy__body .inz-rij__titel a { transition: none; }
}