/* Voor bedrijven (src/_includes/bedrijven.njk): kop met logomuur.
   Het merkvlak, de video en de samenwerkvormen komen uit pagina.css en home.css,
   de sectortegels uit site.css. */

/* ================= Kop: tekst links, logomuur rechts ================= */
.bdr-kop { min-height: clamp(560px, 82svh, 780px); padding-bottom: 0; }
.bdr-kop__raster { flex: 1; display: grid; gap: var(--sc-space-7); align-items: center; }
@media (min-width: 960px) { .bdr-kop__raster { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.bdr-kop__tekst { align-self: center; padding-bottom: clamp(var(--sc-space-7), 5vw, 72px); }
.bdr-kop__label { margin: 0 0 var(--sc-space-4); font-size: var(--sc-fs-small); font-weight: 600; color: var(--sc-lime); }
/* titel: regel 1 wit, regel 2 lime (stijlrichtlijn) */
.bdr-kop__titel {
  margin: 0; font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); font-weight: 800;
  letter-spacing: -0.04em; line-height: 1.04;
}
.bdr-kop__titel span { display: block; }
.bdr-kop__accent { color: var(--sc-lime); }
.bdr-kop__intro { margin: var(--sc-space-5) 0 var(--sc-space-6); max-width: 54ch; font-size: var(--sc-fs-lead); color: var(--sc-on-dark-muted); }

/* logomuur: witte tegels in drie kolommen die rustig omhoog lopen, met een zachte rand boven en onder */
.bdr-logos {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sc-space-4);
  height: clamp(420px, 70svh, 640px); overflow: hidden; align-self: end;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.bdr-logos__kolom { display: flex; flex-direction: column; animation: bdr-omhoog calc(60s + var(--k) * 12s) linear infinite; }
.bdr-logos__kolom:nth-child(2) { animation-direction: reverse; margin-top: -60px; }
.bdr-logos__kolom ul { list-style: none; margin: 0; padding: 0 0 var(--sc-space-4); display: flex; flex-direction: column; gap: var(--sc-space-4); }
.bdr-logos__kolom li {
  display: grid; place-items: center; height: 96px; padding: var(--sc-space-4) var(--sc-space-5);
  background: var(--sc-white); border-radius: var(--sc-radius-lg); box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}
.bdr-logos__kolom img { max-width: 100%; max-height: 48px; width: auto; height: auto; object-fit: contain; }
@keyframes bdr-omhoog { to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .bdr-logos__kolom { animation: none; } }

@media (max-width: 959px) {
  .bdr-kop { min-height: 0; padding-bottom: var(--sc-space-6); }
  .bdr-kop__tekst { padding-bottom: 0; }
  .bdr-logos { height: 300px; }
  .bdr-logos__kolom li { height: 76px; padding: var(--sc-space-3); }
  .bdr-logos__kolom img { max-height: 36px; }
}