/* Mantella.nl — inzichten-overzicht */

.inz-ov-hero {
  position: relative; overflow: hidden;
  padding: 72px var(--pad-x) 52px;
  background-image: linear-gradient(200deg, rgba(228,0,58,0.08), transparent 45%);
}
.inz-ov-hero__inner { display: flex; flex-direction: column; gap: 22px; }
.inz-ov-hero .badge {
  border: 1px solid #e3e0da;
  background: #fff;
  color: #555;
}
.inz-ov-hero__title { font-size: 68px; margin: 0; max-width: none; }
.inz-ov-hero__lead { font-size: 20px; line-height: 1.65; color: #666; margin: 0; max-width: 40em; }

.inz-ov-grid {
  position: relative; overflow: hidden;
  background: var(--c-bg-light);
  padding: 8px var(--pad-x) 96px;
  display: flex; flex-direction: column; gap: 40px;
}
.inz-ov-grid__wm {
  position: absolute; top: -6px; left: 40px;
  font-family: var(--font-head); font-weight: 900; font-size: 200px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(13,13,13,0.1);
  letter-spacing: -6px; pointer-events: none; user-select: none;
}

.inz-feat {
  position: relative; background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 16px 44px rgba(0,0,0,0.08);
  display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  text-decoration: none; align-items: stretch;
  min-width: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.inz-feat:hover { transform: translateY(-6px); box-shadow: 0 28px 64px rgba(0,0,0,0.14); }
.inz-feat__media { position: relative; min-height: 320px; background: #0d0d0d; }
.inz-feat__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.inz-feat__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%; background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 32px rgba(228,0,58,0.5);
}
.inz-feat__play-tri {
  width: 0; height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid #fff;
  margin-left: 4px;
}
.inz-feat__body {
  padding: 40px 44px; display: flex; flex-direction: column; gap: 14px; justify-content: center;
  min-width: 0;
}
.inz-feat__cat {
  font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-red);
}
.inz-feat h2 {
  font-family: var(--font-head); font-weight: 800; font-size: 30px; line-height: 1.2;
  margin: 0; color: var(--c-black-2); text-wrap: balance; overflow-wrap: anywhere;
}
.inz-feat p { margin: 0; font-size: 17px; line-height: 1.65; color: #555; overflow-wrap: anywhere; }
.inz-feat__meta { font-size: 14px; color: #999; overflow-wrap: anywhere; }
.inz-feat__go {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  font-size: 15px; font-weight: 700; color: var(--c-red); margin-top: 4px;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.inz-feat__go .material-symbols-outlined { font-size: 17px; }
.inz-feat:hover .inz-feat__go,
.inz-feat:focus-visible .inz-feat__go { border-bottom-color: currentColor; }

.inz-ov-cta {
  position: relative; background: var(--c-black-2); border-radius: 18px;
  padding: 40px 44px; display: flex; align-items: center; justify-content: space-between;
  gap: 40px; overflow: hidden; margin-top: 8px; min-width: 0;
}
.inz-ov-cta__text { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.inz-ov-cta__title { font-family: var(--font-head); font-weight: 800; font-size: 24px; color: #fff; margin: 0; }
.inz-ov-cta__sub { font-size: 16px; color: #999; }
.inz-ov-cta .btn { position: relative; white-space: nowrap; }

@media (max-width: 1080px) {
  .inz-ov-hero__title { font-size: 48px; }
  .inz-feat { grid-template-columns: minmax(0, 1fr); }
  .inz-feat__media { min-height: 240px; aspect-ratio: 16 / 9; }
  .inz-ov-grid__wm { font-size: 140px; }
}

@media (max-width: 700px) {
  .inz-ov-hero { padding-top: 44px; padding-bottom: 32px; }
  .inz-ov-hero__title { font-size: 34px; }
  .inz-ov-grid { padding-bottom: 64px; }
  .inz-ov-grid__wm { font-size: 90px; left: 16px; }
  .inz-feat__body { padding: 28px 24px; }
  .inz-feat h2 { font-size: 24px; }
  .inz-ov-cta { flex-wrap: wrap; align-items: flex-start; gap: 20px; padding: 32px; }
  .inz-ov-cta .btn { width: 100%; justify-content: center; }
}