/* ═══════════════════════════════════════════════════════════════════
   HOLLANDER, GEDEELDE PAGINAHERO
   ═══════════════════════════════════════════════════════════════════

   Eén bron voor de hero van alle diensten-, subdiensten-, product- en
   doelgroeppagina's. Wordt in de <head> gekoppeld ná het inline
   <style>-blok, zodat deze regels altijd winnen van wat er per pagina
   nog mocht staan.

   Een nieuwe pagina krijgt vanzelf dezelfde hero door dit bestand te
   koppelen en de markup uit de opbouw hieronder over te nemen:

     <section class="page-hero">
       <ol class="page-kruimels" aria-label="Kruimelpad">
         <li><a href="index.html">Home</a></li>
         <li>Categorie</li>
         <li aria-current="page">Paginatitel</li>
       </ol>
       <p class="page-eyebrow"><span>CATEGORIE</span></p>
       <h1 class="page-title">Paginatitel</h1>
       <p class="page-subtitle">Introductietekst.</p>
     </section>

   Voeg hier geen paginaspecifieke uitzonderingen toe. Alleen de vier
   inhoudelijke velden verschillen per pagina.
   ═══════════════════════════════════════════════════════════════════ */

.page-hero {
  /* Dezelfde containerbreedte en linkermarge als .content-inner
     eronder, zodat kruimelpad, titel en bodytekst op één lijn staan. */
  max-width: 1160px;
  margin: var(--header-h) auto 0;
  padding: 88px 56px 64px;

  background: #ffffff;
  border-bottom: 1px solid var(--gray-mid);

  /* Gezamenlijke minimale hoogte. De hero groeit mee zodra de titel
     over meer regels loopt of de introductie langer is. */
  min-height: 384px;
  display: block;
}

/* Sommige pagina's hadden een eigen achtergrondlaag of binnencontainer
   in de hero. Die blijven neutraal, zodat de markup overal gelijk is. */
.page-hero .page-hero-bg { display: none; }
.page-hero .page-hero-inner { max-width: none; margin: 0; padding: 0; }

/* ── 1. Broodkruimelpad ─────────────────────────────────────────── */
.page-kruimels {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--gray-text);
}
.page-kruimels li { display: flex; align-items: center; gap: 8px; }
.page-kruimels li::after {
  content: "/";
  color: var(--gray-mid);
}
.page-kruimels li:last-child::after { content: none; }
.page-kruimels a {
  color: var(--gray-text);
  text-decoration: none;
  transition: color 0.2s ease;
}
.page-kruimels a:hover { color: var(--black); }
.page-kruimels a:focus-visible {
  outline: 2px solid #1a4fa0;
  outline-offset: 2px;
  border-radius: 2px;
}
.page-kruimels [aria-current="page"] { color: var(--black); }

/* ── 2. Categorielabel ─────────────────────────────────────────────
   NIET IN GEBRUIK. Het label herhaalde op elke pagina de categorie die
   al in het kruimelpad staat, en is daarom overal verwijderd. De regels
   blijven staan voor het geval een toekomstige pagina een label nodig
   heeft dat wél iets toevoegt. Zet er geen label terug om ruimte te
   vullen. */
.page-eyebrow {
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--gray-text);
  display: block;
}
.page-eyebrow::before,
.page-eyebrow::after { content: none; display: none; }

/* ── 3. Paginatitel ─────────────────────────────────────────────── */
.page-title {
  margin: 0 0 22px;
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: var(--black);
  max-width: 820px;
  /* Lange titels lopen natuurlijk door over meerdere regels. */
  overflow-wrap: break-word;
}
.page-title em {
  font-style: normal;
  color: inherit;
  background: none;
  -webkit-text-fill-color: currentColor;
}

/* ── 4. Introductietekst ────────────────────────────────────────── */
.page-subtitle {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--gray-text);
  max-width: 560px;
}

/* ── Tablet ─────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .page-hero {
    padding: 64px 40px 52px;
    min-height: 324px;
  }
  .page-kruimels { margin-bottom: 24px; }
  .page-title { margin-bottom: 18px; }
}

/* ── Mobiel ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .page-hero {
    padding: 44px 24px 40px;
    min-height: 0;
  }
  .page-kruimels { margin-bottom: 20px; font-size: 11.5px; }
  .page-eyebrow { margin-bottom: 14px; }
  .page-title { margin-bottom: 16px; }
  .page-subtitle { font-size: 15.5px; line-height: 1.65; }
}

/* ═══════════════════════════════════════════════════════════════════
   GEDEELDE BEGINMAAT VAN ELKE HERO
   ═══════════════════════════════════════════════════════════════════
   Werken bij en contact hebben een eigen hero-opbouw, maar horen op
   dezelfde hoogte onder de navigatie te beginnen en op dezelfde
   containerbreedte te staan als alle andere pagina's. Dat stond op drie
   verschillende waarden: 64, 80 en 88 pixels onder de navigatie, en op
   1280 naast 1160 breed.

   Alleen boven- en zijmaten staan hier. De ruimte ONDER de hero blijft
   per pagina verschillen, want die hangt af van wat erop volgt.
   ═══════════════════════════════════════════════════════════════════ */

.page-hero,
.wb-hero,
.contact-page,
.oo-hero {
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--header-h);
  padding-top: 88px;
  padding-left: 56px;
  padding-right: 56px;
}

@media (max-width: 1080px) {
  .page-hero,
  .wb-hero,
  .contact-page,
  .oo-hero {
    padding-top: 64px;
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 768px) {
  .page-hero,
  .wb-hero,
  .contact-page,
  .oo-hero {
    padding-top: 44px;
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   GEDEELD BEELDKADER IN DE HERO
   ═══════════════════════════════════════════════════════════════════
   Werken bij en contact gebruiken hetzelfde kader. Zonder align-self
   rekte het beeld mee met de hoogte van de tekstkolom ernaast, en die
   verschilt per pagina: op contact staan er ook nog adres en
   openingstijden onder de titel. Daardoor was het beeld op de ene
   pagina hoger dan op de andere.

   Het kader ligt nu vast op 4:3 over de volle breedte van de
   rechterkolom, los van hoeveel tekst er links staat. Beide foto's zijn
   960 bij 720 en vullen dat kader exact.
   ═══════════════════════════════════════════════════════════════════ */

.wb-hero-media,
.contact-hero-media,
.oo-hero-media {
  align-self: start;
  aspect-ratio: 4 / 3;
  height: auto;
  border-radius: 24px;
  overflow: hidden;
  background: var(--gray-light);
}

.wb-hero-media img,
.contact-hero-media img,
.oo-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .wb-hero-media,
  .contact-hero-media,
  .oo-hero-media { border-radius: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════
   DE HAARLIJN ONDER DE HERO
   ═══════════════════════════════════════════════════════════════════
   Stond op beide pagina's anders. Op werken bij zit de lijn op de
   hero zelf, dus loopt hij over de volle containerbreedte. Op contact
   zat hij op een blok binnen de paginapadding en was hij aan beide
   kanten 56 pixels korter. Ook de afstanden verschilden: 72 boven de
   lijn en 96 eronder tegenover 64 en 56.

   Eén maatvoering: 72 pixels tussen de hero en de lijn, 88 tussen de
   lijn en de volgende sectie, en op beide pagina's even breed.
   ═══════════════════════════════════════════════════════════════════ */

/* De lijn hoort op beide pagina's direct onder de inhoud van de hero,
   niet onderaan het venster. Op werken bij zit hij daarom op het
   rooster binnen de hero en niet op de hero zelf: die wordt namelijk
   opgerekt tot schermhoogte, en dan zou de lijn op de onderrand
   belanden. De negatieve marges laten hem net zo breed doorlopen als
   de container, zonder de kolombreedtes te veranderen. */
.wb-hero-inner,
.contact-hero-wrap,
.oo-hero-inner {
  border-bottom: 1px solid var(--gray-mid);
  padding-bottom: 72px;
  margin-left: -56px;
  margin-right: -56px;
  padding-left: 56px;
  padding-right: 56px;
}

.contact-hero-wrap { margin-bottom: 88px; }
.wb-hero { border-bottom: none; }

.wb-solliciteren { padding-top: 88px; }

@media (max-width: 1080px) {
  .wb-hero-inner,
  .contact-hero-wrap,
  .oo-hero-inner {
    padding-bottom: 56px;
    margin-left: -40px; margin-right: -40px;
    padding-left: 40px; padding-right: 40px;
  }
  .contact-hero-wrap { margin-bottom: 64px; }
  .wb-solliciteren { padding-top: 64px; }
}

@media (max-width: 768px) {
  .wb-hero-inner,
  .contact-hero-wrap,
  .oo-hero-inner {
    padding-bottom: 44px;
    margin-left: -24px; margin-right: -24px;
    padding-left: 24px; padding-right: 24px;
  }
  .contact-hero-wrap { margin-bottom: 48px; }
  .wb-solliciteren { padding-top: 48px; }
}

/* ── Categorielabel boven de titel, gelijk op werken bij en contact ──
   Stond op twee verschillende gewichten en marges. */
.wb-eyebrow,
.contact-eyebrow,
.oo-eyebrow {
  margin: 0 0 22px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--gray-text);
}

/* ── Paginatitel in de hero, gelijk op werken bij en contact ─────────
   Stond op twee maten: clamp(38, 4.4vw, 64) tegenover
   clamp(30, 3.4vw, 48). Nu één regel voor allebei. */
.wb-title,
.contact-title,
.oo-title {
  margin: 0 0 22px;
  font-size: clamp(30px, 3.4vw, 48px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--black);
  max-width: none;
}

/* ── Werken bij: ruimte onder de haarlijn ───────────────────────────
   De hero werd eerder opgerekt tot schermhoogte om de kop Solliciteren
   bij Hollander onder de vouw te duwen. Dat werkte, maar liet een leeg
   vlak achter onder de lijn.

   In plaats daarvan iets meer ruimte tussen de lijn en de volgende
   sectie. De kop begint daardoor lager zonder dat er een gat ontstaat.
   Op een hoog scherm kan de bovenrand van die kop nog net meekomen; dat
   is normaal en nodigt uit tot scrollen. De lijn zelf en alle andere
   maten blijven gelijk aan contact. */
.wb-solliciteren { padding-top: 112px; }

@media (max-width: 1080px) {
  .wb-solliciteren { padding-top: 80px; }
}

@media (max-width: 768px) {
  .wb-solliciteren { padding-top: 56px; }
}