/* ==========================================================================
   Hero van een subpagina — donker vlak onder de header
   ========================================================================== */

.page-hero {
  /* Zelfde hoogte als alle hero's (behalve de homepage), inhoud onderaan. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: var(--hero-h);
  /* Onder de sticky header door, zodat die transparant over het vlak ligt. */
  margin-top: calc(-1 * var(--header-h));
  padding-block: var(--section-hero-top) var(--section-m);
  background-color: var(--bg-inverse);
  /* Fijn lijnenraster: 8 kolommen, lijn van 1px op 5% wit (ook zonder foto). */
  background-image: linear-gradient(
    to right,
    color-mix(in srgb, var(--white) 5%, transparent) var(--border-width),
    transparent var(--border-width)
  );
  background-size: calc(100% / 8) 100%;
  color: var(--on-dark-1);
  --eyebrow-color: var(--on-dark-accent);
}

.page-hero :focus-visible {
  outline-color: var(--on-dark-1);
}

.page-hero__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  padding-bottom: 0.125rem; /* 2px, ontwerp */
  border-bottom: var(--border-width) solid var(--border-on-dark);
  color: var(--on-dark-2);
  font-size: var(--fs-ui);
  letter-spacing: var(--tr-tight);
  text-decoration: none;
  transition:
    color var(--dur-1) var(--ease-plain),
    border-color var(--dur-1) var(--ease-plain);
}

.page-hero__back:hover {
  border-bottom-color: var(--on-dark-2);
  color: var(--on-dark-1);
}

/* Pijl naar links; schuift bij hover iets verder terug. */
.page-hero__back .arrow {
  width: 0.625rem; /* 10px: past bij de kleine tekst */
  height: 0.625rem;
  transform: scaleX(-1);
}

.page-hero__back:hover .arrow {
  transform: scaleX(-1) translateX(var(--space-1));
}

.page-hero .eyebrow {
  display: flex;
  margin-bottom: var(--space-6);
}

.page-hero__title {
  max-width: 20ch;
  color: var(--on-dark-1);
  font-size: var(--fs-h1-sub);
  /* Zelfde regel- en letterafstand als de h1 op de homepage. */
  line-height: var(--lh-display);
  letter-spacing: var(--tr-heading);
}

.page-hero__title em {
  color: var(--on-dark-accent);
  font-weight: var(--fw-regular);
}

/* Contact: bij de krappe regelafstand raakt de b van "betekenen" de p van
   "project" erboven; het cursieve slotwoord iets lager. */
.page-hero--media-title .page-hero__title em {
  display: inline-block;
  margin-top: 0.12em;
}

.page-hero__text {
  max-width: 52ch;
  margin-top: var(--space-8);
  color: var(--on-dark-2);
  font-size: var(--fs-body-l);
  text-wrap: balance; /* korte tekst: regels even lang, geen losse woorden onderaan */
}

/* Directe links onder de kop (bijvoorbeeld e-mail en telefoon) --------- */

.page-hero__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 34rem; /* lijn even breed als de kop op desktop, ontwerp */
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--line-on-dark);
  font-family: var(--font-display);
  font-size: var(--fs-body-l);
}

.page-hero__links a {
  align-self: flex-start;
  color: var(--on-dark-1);
  text-decoration: none;
  border-bottom: var(--border-width) solid transparent;
  transition: border-color var(--dur-2) var(--ease-plain);
}

.page-hero__links a:hover {
  color: var(--on-dark-1);
  border-bottom-color: var(--on-dark-accent);
}

@media (min-width: 48em) {
  .page-hero__links {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-8);
  }
}

/* Variant met beeld --------------------------------------------------------
   Foto onder de tekst (16:10) op mobiel en tablet, rechts (staand 4:5) vanaf
   1024px. De foto loopt door in de sectie eronder; die sectie houdt daar
   rekening mee via --hero-overlap (op :root, zodat ook de volgende sectie
   hem kan lezen). Fijn raster van verticale lijnen op het petrol, pure CSS. */

:root {
  --hero-overlap: 4rem; /* 64px, ontwerp mobiel/tablet */
}

@media (min-width: 64em) {
  :root {
    --hero-overlap: 7.5rem; /* 120px, ontwerp desktop */
  }
}

.page-hero--media,
.page-hero--compact {
  position: relative;
  z-index: 1; /* foto boven de volgende sectie */
  padding-bottom: 0;
  /* 8 kolommen over de volle breedte, lijn van 1px op 5% wit */
  background-image: linear-gradient(
    to right,
    color-mix(in srgb, var(--white) 5%, transparent) var(--border-width),
    transparent var(--border-width)
  );
  background-size: calc(100% / 8) 100%;
}

.page-hero--media .page-hero__inner {
  display: grid;
  gap: var(--space-12);
}

.page-hero__media {
  position: relative;
  margin: 0 0 calc(-1 * var(--hero-overlap));
  overflow: hidden;
  aspect-ratio: var(--ratio-wide);
  background: var(--petrol-media);
  box-shadow: var(--shadow-lift);
}

.page-hero__img {
  width: 100%;
  height: 100%;
  aspect-ratio: inherit;
  object-fit: cover;
}

.page-hero__label {
  position: absolute;
  bottom: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--scrim-header);
  color: var(--on-dark-1);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}

/* Ruimte voor de doorlopende foto in de sectie direct eronder. Twee
   classes: wint van de padding van .page-block, dat later laadt. */
.page-hero.page-hero--media + * {
  padding-top: calc(var(--hero-overlap) + var(--section-m));
}

@media (min-width: 64em) {
  .page-hero--media {
    padding-bottom: var(--section-m);
  }

  .page-hero--media .page-hero__inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--gap-split);
  }

  .page-hero__media {
    aspect-ratio: var(--ratio-portrait);
    margin-bottom: calc(-1 * (var(--section-m) + var(--hero-overlap)));
  }
}

/* Foto even hoog als de titel (vanaf 1024px) ------------------------------
   De kolom met tekst valt weg (display: contents), zodat terug-link,
   eyebrow, titel en links eigen rijen in het raster krijgen; de foto staat
   rechts in de rij van de titel en neemt die hoogte over. Geen doorloop naar
   de sectie eronder. */
@media (min-width: 64em) {
  .page-hero--media-title .page-hero__inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-auto-flow: row dense;
    align-items: stretch;
    row-gap: 0;
  }

  .page-hero--media-title .page-hero__body {
    display: contents;
  }

  .page-hero--media-title .page-hero__body > * {
    grid-column: 1;
    justify-self: start; /* terug-link en links niet over de hele kolom */
  }

  .page-hero--media-title .page-hero__title {
    grid-row: 3;
  }

  .page-hero--media-title .page-hero__media {
    grid-column: 2;
    grid-row: 3;
    aspect-ratio: auto;
    margin: 0;
  }

  /* De titel bepaalt de hoogte van de rij, de foto vult die op. */
  .page-hero--media-title .page-hero__img {
    position: absolute;
    inset: 0;
  }

  .page-hero.page-hero--media-title + * {
    padding-top: var(--section-m);
  }
}

/* Banner: foto over de volle breedte achter de tekst ---------------------
   Petrol verloop van de tekstkant naar de foto, zodat de tekst leesbaar
   blijft; op mobiel (tekst over de hele breedte) overal donker genoeg. */
.page-hero--banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.page-hero--banner .page-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
  aspect-ratio: auto;
  box-shadow: none;
}

.page-hero--banner .page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg-inverse) 82%, transparent);
}

@media (min-width: 64em) {
  /* Desktop: foto bijna vanaf de bovenkant (15%), zodat de torenspits in
     beeld blijft; de laad-zoom gaat vanaf hetzelfde punt. */
  .page-hero--banner .page-hero__img {
    object-position: 50% 15%;
    transform-origin: 50% 15%;
  }

  .page-hero--banner .page-hero__media::after {
    background: linear-gradient(
      to right,
      color-mix(in srgb, var(--bg-inverse) 94%, transparent) 0%,
      color-mix(in srgb, var(--bg-inverse) 80%, transparent) 45%,
      color-mix(in srgb, var(--bg-inverse) 25%, transparent) 100%
    );
  }
}

/* Patroon (hero zonder foto, bijvoorbeeld Diensten) ----------------------
   Speels maar rustig: het raster iets duidelijker, een zachte lichtvlek die
   langzaam over het vlak drijft, en over twee rasterlijnen af en toe een
   dun lichtstreepje omlaag. Zonder beweging (reduced-motion) staat alles
   stil; het raster en de lichtvlek blijven dan gewoon zichtbaar. */
.page-hero--pattern {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image:
    linear-gradient(
      to right,
      color-mix(in srgb, var(--white) 9%, transparent) var(--border-width),
      transparent var(--border-width)
    );
}

/* Lichtvlek */
.page-hero--pattern::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -30%;
  right: -10%;
  width: min(70vw, 56rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--petrol-300) 22%, transparent),
    transparent
  );
  pointer-events: none;
}

/* Lichtstreepjes op de 3e en 6e rasterlijn (12,5% per kolom). */
.page-hero--pattern::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(to bottom, transparent, color-mix(in srgb, var(--petrol-300) 70%, transparent), transparent)
      calc(100% / 8 * 3) -30% / var(--border-width) 30% no-repeat,
    linear-gradient(to bottom, transparent, color-mix(in srgb, var(--petrol-300) 55%, transparent), transparent)
      calc(100% / 8 * 6) -30% / var(--border-width) 22% no-repeat;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .page-hero--pattern::before {
    animation: pattern-drift 28s var(--ease-in-out) infinite alternate;
  }

  .page-hero--pattern::after {
    animation: pattern-streak 9s var(--ease-in-out) infinite;
  }
}

@keyframes pattern-drift {
  to {
    transform: translate(-35%, 25%);
  }
}

@keyframes pattern-streak {
  0% {
    opacity: 1;
    background-position: calc(100% / 8 * 3) -30%, calc(100% / 8 * 6) -40%;
  }

  45%,
  100% {
    opacity: 1;
    background-position: calc(100% / 8 * 3) 130%, calc(100% / 8 * 6) 130%;
  }
}

/* Compact (bijvoorbeeld juridische pagina's): minder hoog, met het
   lijnenraster van de fotovariant, en een kleine meta-regel. ------------ */

.page-hero--compact {
  z-index: auto; /* geen foto die doorloopt */
  padding-block: calc(var(--header-h) + var(--space-12)) var(--space-14);
}

.page-hero__meta {
  margin-top: var(--space-5);
  color: var(--on-dark-2);
  font-size: var(--fs-small);
}

@media (min-width: 64em) {
  .page-hero--compact {
    padding-block: calc(var(--header-h) + var(--space-16)) var(--space-16);
  }
}