/* ===========================================================================
   hsb-paginahero.css — de blauwe kop voor subpagina's

   Hoort bij includes/pagina-hero.php. Donkerblauw vlak links met het
   kruimelpad, de titel en een korte tekst; rechts de foto. Dezelfde
   vormtaal als de homepagina: hoek 40px linksboven en rechtsonder, 2px op
   de andere twee.
   =========================================================================== */

.hsb-hero {
  --blauw: #103856;
  --licht: #c8d8e6;
  --zacht: #9dbbd6;
  --cta: #c24d16;
  --cta-donker: #a63f0f;

  padding: 24px 0 0;
}

/* De breedte komt van .container uit site.css, die op
   var(--container-max-width) staat (nu 1440px). Hier dus geen eigen
   max-width: dan zou de hero smaller zijn dan de rest van de pagina, en
   dat liep niet gelijk. */

.hsb-hero__blok {
  display: flex;
  align-items: stretch;
  background: var(--blauw);
  border-radius: 40px 2px 40px 2px;
  overflow: hidden;
  min-height: 360px;
}

/* Kolom: het kruimelpad bovenin, de rest daaronder in het midden van de
   ruimte die overblijft. Zonder die tweede laag zou het kruimelpad
   meezakken naar het midden zodra de foto de kaart hoger maakt. */
.hsb-hero__tekst {
  flex: 1 1 520px;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: 34px 56px 44px;
}
.hsb-hero__inhoud {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* De foto vult de rechterhelft helemaal. object-fit: cover snijdt bij in
   plaats van te vervormen, en de vaste verhouding houdt het blok even
   hoog als er een keer een liggende of staande foto in staat. */
.hsb-hero__beeld {
  flex: 0 0 46%;
  min-width: 0;
  align-self: stretch;
}
.hsb-hero__beeld img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  display: block;
}

/* Zonder foto loopt de tekst over de hele breedte in plaats van dat er
   een leeg gat naast staat. */
.hsb-hero--zonderfoto .hsb-hero__tekst { flex: 1 1 auto; max-width: 820px; }

/* En dan hoeft het vlak ook niet 360px hoog te zijn. Die hoogte is er voor
   de foto ernaast; is die er niet, dan stond er onder een korte tekst een
   flinke lap leeg blauw. Nu zakt het blok terug op zijn eigen inhoud. */
.hsb-hero--zonderfoto .hsb-hero__blok { min-height: 0; }


/* --- Kruimelpad ----------------------------------------------------------- */
.hsb-hero__kruimels { flex: 0 0 auto; margin: 0 0 24px; }
.hsb-hero__kruimels ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
}
.hsb-hero__kruimels li { color: var(--licht); }

/* Het pijltje tussen de kruimels staat in CSS en niet in de opmaak: het
   is een scheidingsteken en geen inhoud, dus een schermlezer hoeft het
   niet voor te lezen. */
.hsb-hero__kruimels li + li::before {
  content: "›";
  margin-right: 8px;
  color: var(--zacht);
}
.hsb-hero__kruimels a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hsb-hero__kruimels a:hover { color: var(--zacht); }
.hsb-hero__kruimels [aria-current="page"] { color: var(--licht); }


/* --- Tekst ---------------------------------------------------------------- */
/* De lettersoort regelt hsb-koppen.css al voor de hele site; hier alleen
   de maat en de kleur. */
.hsb-hero__titel {
  margin: 0 0 20px;
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: #fff;
}

.hsb-hero__lead {
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
  color: var(--licht);
  max-width: 34em;
}


/* --- Knop ----------------------------------------------------------------- */
.hsb-hero__knoprij { margin: 32px 0 0; }

.hsb-hero__knop {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 12px;
  background: var(--cta);
  color: #fff;
  font-weight: 700;
  font-size: 16.5px;
  text-decoration: none;
  transition: background-color .25s;
}
.hsb-hero__knop:hover { background: var(--cta-donker); color: #fff; }
.hsb-hero__knop:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hsb-hero__knop svg { transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.hsb-hero__knop:hover svg { transform: translateX(5px); }


/* --- Smallere schermen ----------------------------------------------------- */
@media (max-width: 991px) {
  .hsb-hero__blok { flex-direction: column; min-height: 0; }
  .hsb-hero__tekst { padding: 30px 36px 40px; flex: 1 1 auto; }
  .hsb-hero__titel { font-size: 40px; }

  /* De foto gaat onder de tekst en krijgt een vaste verhouding; zonder
     dat zou hij in een kolom tot niets inzakken. */
  .hsb-hero__beeld { flex: 1 1 auto; width: 100%; }
  .hsb-hero__beeld img { min-height: 0; aspect-ratio: 16 / 9; height: auto; }
}

@media (max-width: 575px) {
  .hsb-hero { padding-top: 16px; }
  .hsb-hero__baan { padding: 0 20px; }
  .hsb-hero__blok { border-radius: 28px 2px 28px 2px; }
  .hsb-hero__tekst { padding: 24px 24px 32px; }
  .hsb-hero__titel { font-size: 31px; }
  .hsb-hero__lead { font-size: 16.5px; }
  .hsb-hero__knop { width: 100%; justify-content: center; }
}