/* ==========================================================================
   Insight Detail — Expertises/Insights detail page
   ========================================================================== */

/* ---- Page layout ---- */
.insight-page .main-wrapper {
  padding-top: 12px;
}

.insight-body {
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: center;
  padding-bottom: 80px;
  background: var(--blue-200);
  overflow: hidden;
  width: 100%;
}

/* ---- Upper (header + hero) ---- */
.insight-upper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* ---- Breadcrumb ---- */
.insight-breadcrumb {
  display: flex;
  align-items: center;
  gap: 3px;
}

.insight-breadcrumb__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.insight-breadcrumb__icon img {
  width: 100%;
  height: 100%;
}

.insight-breadcrumb__text {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 1.375rem; /* 22px */
  line-height: 1.4;
  color: var(--green-1200);
  white-space: nowrap;
}

/* ---- Hero (side-by-side) ---- */
.insight-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.insight-hero__text {
  display: flex;
  flex-direction: column;
  gap: 64px;
  justify-content: center;
  /* Begint op de kantlijn van de site in plaats van 10px van de rand, en
     vult de ruimte die het beeld overlaat. Was een vaste 674px met een
     10px-rand; de titel stond daardoor 110px links van elke andere
     paginatitel. */
  flex: 1 1 0;
  min-width: 0;
  height: 575px;
  /* Rechts 30px: het ontwerp hield 21px tussen de twee kolommen plus 10px
     eigen rand. Doordat de kolom nu de ruimte vult die het beeld overlaat,
     zou die tussenruimte anders wegvallen. */
  padding: 50px 30px 50px var(--page-padding-x);
}

.insight-hero__content {
  display: flex;
  flex-direction: column;
  gap: 62px;
  flex: 1;
  min-height: 0;
}

.insight-hero__heading {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.insight-hero__title {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 4.75rem; /* 76px */
  line-height: 1;
  letter-spacing: -2.28px;
  color: var(--green-1200);
}

.insight-hero__date {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 1.125rem; /* 18px */
  line-height: 1.2;
  letter-spacing: -0.09px;
  color: var(--green-1200);
}

.insight-hero__author {
  display: flex;
  flex-direction: column;
}

.insight-hero__author-name {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 1.125rem; /* 18px */
  line-height: 1.2;
  color: var(--green-1200);
}

.insight-hero__author-role {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 1.125rem; /* 18px */
  line-height: 1.2;
  color: var(--green-1200);
}

.insight-hero__author-role--bold {
  font-weight: var(--fw-semibold);
}

/* ---- Hero image ---- */
/* 10px rechts: net als bij de nav blijft er blue-200 zichtbaar tussen de
   content en het vaste blue-400 kader (zie lagensysteem in global.css). */
.insight-hero__image {
  width: 725px;
  height: 598px;
  padding: 12px 10px 12px 0;
  flex-shrink: 0;
}

.insight-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Article section ---- */
.insight-article {
  background: var(--blue-100);
  /* De inspringing zit op de band, niet op een gecentreerde kolom erbinnen:
     zo begint de leeskolom op dezelfde kantlijn als de rest van de site en
     schuift hij niet mee met het venster. */
  padding: 60px var(--page-padding-x);
  width: 100%;
}

.insight-article__inner {
  display: flex;
  /* 253px deelbalk + 107px = 360px, dezelfde afstand die een bracketlabel
     met zijn gap inneemt. Zo begint de artikeltekst op de tekstkantlijn van
     het ontwerp (x=480), gelijk met de CTA onderaan dezelfde pagina. */
  gap: 107px;
  align-items: flex-start;
  width: 100%;
  margin: 0;
}

/* ---- Sharing sidebar ---- */
.insight-share {
  width: 253px;
  flex-shrink: 0;
  /* Links geen padding: de band brengt de inspringing al mee. */
  padding: 0 30px 0 0;
}

.insight-share__inner {
  display: flex;
  gap: 5px;
  align-items: flex-start;
}

.insight-share__label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px 6px 0;
  border-radius: var(--radius-card);
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 1.125rem; /* 18px */
  line-height: 1.4;
  color: var(--green-1200);
  white-space: nowrap;
}

.insight-share__buttons {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.insight-share__button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: var(--radius-card);
  background: var(--base-100);
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 1.125rem; /* 18px */
  line-height: 1.4;
  color: var(--green-1200);
  white-space: nowrap;
}

/* ---- Article content ---- */
.insight-content {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.insight-content__section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 698px;
}

.insight-content__section > p {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 1.375rem; /* 22px */
  line-height: 1.4;
  letter-spacing: -0.11px;
  color: var(--green-1200);
}

.insight-content__heading {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: 2rem; /* 32px */
  line-height: 1.25;
  letter-spacing: -0.8px;
  color: var(--green-1200);
}

.insight-content__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.insight-content__text p {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 1.375rem; /* 22px */
  line-height: 1.4;
  letter-spacing: -0.11px;
  color: var(--green-1200);
}

.insight-content__link {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- Bullet list items ---- */
.insight-content__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.insight-content__list-item {
  background: var(--base-100);
  padding: 18px 24px;
}

.insight-content__list-item p {
  font-family: var(--font-primary);
  font-weight: var(--fw-medium);
  font-size: 1.375rem; /* 22px */
  line-height: 1.4;
  letter-spacing: -0.11px;
  color: var(--green-1200);
}

/* ---- Related insights section ---- */
.insight-related {
  width: 100%;
  padding: 60px 120px;
}

.insight-related__inner {
  display: flex;
  gap: 77px;
  align-items: flex-start;
  /* Geen eigen padding-left: .insight-related brengt de 120px-inspringing al
     mee. Samen zetten ze het bracketlabel op x=240, 120px naast de kantlijn
     die de rest van de site aanhoudt. */
  width: 100%;
}

.insight-related__label {
  width: 283px;
  flex-shrink: 0;
}

.insight-related__cards {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 819px;
}

.insight-related__cards-inner {
  padding-right: 120px;
  width: 938px;
}

/* ---- CTA on insight page ---- */
.insight-page .cta {
  width: 100%;
}