/* ==================================================================
   Nova Septem - Over ons

   Kleur:  groen #476930 (huisstijl), diep bosgroen #2E4620,
           inkt #1B2416, eierschaal #F0E7D6, room #FBF8F1
   Type:   urw-form, de familie van het thema. Jaartallen zijn de
           blikvanger, de rest blijft rustig.
   ================================================================== */

.jh-over{
  --groen: #476930;
  --diep:  #2E4620;
  --inkt:  #1B2416;
  --schaal:#F0E7D6;
  --room:  #FBF8F1;
  --grijs: #6A7464;

  color: var(--inkt);
  background: var(--room);
}

.jh-over__wrap{
  width: min(1240px, 100% - 40px);
  margin-inline: auto;
}

/* ---- Bovenaan ---- */

.jh-over__hero{
  position: relative;
  min-height: min(72vh, 640px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--diep);
}

.jh-over__herofoto{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Verloop van onderaf, zodat de tekst leesbaar blijft zonder de foto plat
   te leggen met een egale laag. */
.jh-over__hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(27,36,22,.15) 0%,
              rgba(27,36,22,.55) 55%,
              rgba(27,36,22,.88) 100%);
}

.jh-over__hero.is-plat{ min-height: 0; padding-block: 96px 72px; }
.jh-over__hero.is-plat::after{ display: none; }

.jh-over__herotekst{
  position: relative;
  z-index: 1;
  width: min(1240px, 100% - 40px);
  margin-inline: auto;
  padding-block: 72px;
  color: #fff;
}

.jh-over__sinds{
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: #cfe0c2;
}

.jh-over__hero h1{
  margin: 0;
  max-width: 16ch;
  font-size: clamp(38px, 6.4vw, 84px);
  line-height: .98;
  font-weight: 800;
  letter-spacing: -.025em;
  color: #fff;
}

.jh-over__lead{
  margin: 22px 0 0;
  max-width: 56ch;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
  color: #e8efe2;
}

/* ---- In cijfers ---- */

.jh-over__feiten{
  background: var(--diep);
  color: #fff;
}

.jh-over__feiten dl{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin: 0;
  padding-block: 40px;
}

.jh-over__feiten dt{
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
}

.jh-over__feiten dd{
  margin: 8px 0 0;
  font-size: 14.5px;
  line-height: 1.4;
  color: #bdd0af;
  max-width: 22ch;
}

/* ---- Tijdlijn ---- */

.jh-over__tijdlijn{ padding-block: clamp(56px, 8vw, 110px) 0; }

.jh-over__stap{ padding-block: clamp(40px, 6vw, 88px); }

/* Om de beurt een ander vlak, zodat de tijdvakken uit elkaar vallen zonder
   dat er een lijn of rand aan te pas komt. */
.jh-over__stap:nth-child(even){ background: var(--schaal); }

.jh-over__stap .jh-over__wrap{
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

/* Het jaartal is de blikvanger. Het loopt mee terwijl je dat tijdvak leest. */
.jh-over__jaar{
  position: sticky;
  top: 140px;
}

.jh-over__jaar span{
  display: block;
  font-size: clamp(44px, 5.4vw, 76px);
  line-height: .9;
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--groen);
}

.jh-over__jaar-mobiel{ display: none; }

.jh-over__inhoud h3{
  margin: 0 0 14px;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--inkt);
  max-width: 24ch;
}

.jh-over__tekst p{
  margin: 0 0 16px;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.7;
  color: #3B4636;
}

.jh-over__tekst p:last-child{ margin-bottom: 0; }
.jh-over__tekst em{ font-style: italic; }

.jh-over__beeld{
  margin: 0;
  align-self: start;
}

.jh-over__beeld img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.jh-over__beeld figcaption{
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--grijs);
  max-width: 34ch;
}

/* Om de beurt de foto links, zodat de pagina niet in een ritme blijft hangen. */
.jh-over__stap.is-gespiegeld .jh-over__inhoud{ order: 3; }
.jh-over__stap.is-gespiegeld .jh-over__beeld{ order: 2; }

/* ---- Onderaan ---- */

.jh-over__slot{
  background: var(--diep);
  color: #fff;
  padding-block: clamp(48px, 7vw, 96px);
}

.jh-over__slot .jh-over__wrap{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.jh-over__slot h2{
  margin: 0 0 16px;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  max-width: 18ch;
}

.jh-over__slot .jh-over__tekst p{
  color: #d5e2cb;
  max-width: 52ch;
}

.jh-over__knoppen{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.jh-over__knop{
  display: inline-flex;
  align-items: center;
  padding: 14px 24px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff !important;
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease;
}

.jh-over__knop:hover{ background: rgba(255,255,255,.22); }

.jh-over__knop--groen{
  background: #fff;
  color: var(--diep) !important;
}

.jh-over__knop--groen:hover{ background: #e8efe2; }

.jh-over__slotbeeld{ margin: 0; }

.jh-over__slotbeeld img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

/* ---- Toetsenbord ---- */

.jh-over a:focus-visible{
  outline: 2px solid #cfe0c2;
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Smallere schermen ---- */

@media (max-width: 1080px){
  .jh-over__stap .jh-over__wrap{
    grid-template-columns: 150px minmax(0, 1fr);
  }
  .jh-over__beeld{ grid-column: 2; }
  .jh-over__stap.is-gespiegeld .jh-over__inhoud{ order: 0; }
  .jh-over__stap.is-gespiegeld .jh-over__beeld{ order: 0; }
  .jh-over__feiten dl{ grid-template-columns: repeat(2, 1fr); gap: 26px; }
}

@media (max-width: 720px){
  .jh-over__wrap{ width: min(1240px, 100% - 32px); }

  .jh-over__hero{ min-height: 62vh; }
  .jh-over__herotekst{ padding-block: 48px; }

  /* Het sticky jaartal werkt op een telefoon niet: te weinig hoogte. Dan
     als kop boven het tijdvak. */
  .jh-over__stap .jh-over__wrap{ display: block; }
  .jh-over__jaar{ display: none; }

  .jh-over__jaar-mobiel{
    display: block;
    margin: 0 0 6px;
    font-size: 40px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--groen);
  }

  .jh-over__beeld{ margin-top: 24px; }
  .jh-over__slot .jh-over__wrap{ display: block; }
  .jh-over__slotbeeld{ margin-top: 28px; }
  .jh-over__knop{ flex: 1 1 100%; justify-content: center; }
}

@media (max-width: 420px){
  .jh-over__feiten dl{ grid-template-columns: 1fr; gap: 20px; }
  .jh-over__jaar-mobiel{ font-size: 34px; }
}

@media (prefers-reduced-motion: reduce){
  .jh-over__jaar{ position: static; }
}

/* Het jaartal van het tijdvak dat je leest krijgt volle kleur, de rest staat
   gedempt. Zie assets/js/over-ons.js. */
.jh-over__jaar span{
  transition: color .35s ease, opacity .35s ease;
}

.jh-over__stap.is-gedempt .jh-over__jaar span{
  color: #B3C0A8;
}

@media (prefers-reduced-motion: reduce){
  .jh-over__jaar span{ transition: none; }
  .jh-over__stap.is-gedempt .jh-over__jaar span{ color: var(--groen); }
}


/* ==================================================================
   Waar het vandaan komt
   ================================================================== */

.jh-over__blokkop{ max-width: 62ch; margin-bottom: clamp(28px, 4vw, 48px); }

.jh-over__blokkop h2{
  margin: 0 0 12px;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--inkt);
  max-width: 20ch;
}

.jh-over__blokkop p{
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: #3B4636;
}

.jh-over__makers{
  padding-block: clamp(56px, 8vw, 104px);
  background: var(--room);
}

.jh-over__makerlijst{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px) clamp(24px, 4vw, 56px);
}

/* Een dun streepje boven elk item in plaats van een kaart met rand en
   schaduw: het houdt de lijst luchtig en de nadruk op de tekst. */
.jh-over__makerlijst li{
  padding-top: 18px;
  box-shadow: inset 0 2px 0 0 var(--groen);
}

.jh-over__makerlijst h3{
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--inkt);
}

.jh-over__makerlijst p{
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #4A5645;
  max-width: 40ch;
}

/* ==================================================================
   Bezorggebied
   ================================================================== */

.jh-over__gebied{
  padding-block: clamp(56px, 8vw, 104px);
  background: var(--schaal);
}

.jh-over__gebied .jh-over__wrap{
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.jh-over__gebiedtekst h2{
  margin: 0 0 16px;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--inkt);
  max-width: 14ch;
}

.jh-over__gebiedbel{ margin: 24px 0 0; }

.jh-over__gebiedbel a{
  display: inline-flex;
  align-items: center;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--groen);
  color: #fff !important;
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background .15s ease;
}

.jh-over__gebiedbel a:hover{ background: var(--diep); }

.jh-over__regios{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: rgba(27,36,22,.10);
  border-radius: 4px;
  overflow: hidden;
}

/* De vakken staan tegen elkaar aan met een haarlijn ertussen, als een
   eenvoudige kaartlegenda. */
.jh-over__regios li{
  background: var(--schaal);
  padding: 18px 20px;
}

.jh-over__regionaam{
  display: block;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--groen);
  margin-bottom: 4px;
}

.jh-over__regioplaatsen{
  display: block;
  font-size: 14.5px;
  line-height: 1.5;
  color: #4A5645;
}

/* ==================================================================
   Smallere schermen
   ================================================================== */

@media (max-width: 1080px){
  .jh-over__makerlijst{ grid-template-columns: repeat(2, 1fr); }
  .jh-over__gebied .jh-over__wrap{ display: block; }
  .jh-over__regios{ margin-top: 32px; }
}

@media (max-width: 620px){
  .jh-over__makerlijst{ grid-template-columns: 1fr; }
  .jh-over__regios{ grid-template-columns: 1fr; }
  .jh-over__gebiedbel a{ width: 100%; justify-content: center; }
}


/* ==================================================================
   Fotogalerij

   Een band die opzij loopt in plaats van weer een raster: de rest van de
   pagina leest van boven naar beneden, dit doorbreekt dat ritme. De foto's
   houden dezelfde hoogte maar verschillen in breedte, zodat een liggende
   foto niet wordt platgedrukt tot vierkant.
   ================================================================== */

.jh-over__galerij{
  padding-block: clamp(56px, 8vw, 104px);
  background: var(--inkt);
  overflow: hidden;
}

.jh-over__blokkop--licht h2{ color: #fff; }
.jh-over__blokkop--licht p{ color: #B9C5B0; }

.jh-over__strip{
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  padding-inline: max(20px, calc((100vw - 1240px) / 2));
  padding-block: 4px 22px;
  scrollbar-width: thin;
  scrollbar-color: #4B573F var(--inkt);
  cursor: grab;
}

.jh-over__strip.is-slepend{ cursor: grabbing; scroll-snap-type: none; }
.jh-over__strip.is-slepend .jh-over__vergroot{ pointer-events: none; }

.jh-over__strip::-webkit-scrollbar{ height: 6px; }
.jh-over__strip::-webkit-scrollbar-track{ background: transparent; }
.jh-over__strip::-webkit-scrollbar-thumb{ background: #4B573F; border-radius: 999px; }

.jh-over__strip:focus-visible{
  outline: 2px solid #cfe0c2;
  outline-offset: 4px;
}

.jh-over__foto{
  flex: 0 0 auto;
  width: clamp(220px, 26vw, 320px);
  margin: 0;
  scroll-snap-align: start;
}

/* Een enkele foto mag breed staan, dat geeft de band een eigen ritme. */
.jh-over__foto.is-groot{ width: clamp(300px, 42vw, 520px); }

.jh-over__vergroot{
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  background: #2A3324;
  cursor: zoom-in;
  line-height: 0;
}

.jh-over__vergroot img{
  display: block;
  width: 100%;
  height: clamp(220px, 30vw, 340px);
  object-fit: cover;
  transition: transform .4s ease, opacity .2s ease;
}

.jh-over__vergroot:hover img{ transform: scale(1.04); }

.jh-over__vergroot:focus-visible{
  outline: 2px solid #cfe0c2;
  outline-offset: 3px;
}

.jh-over__foto figcaption{
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.45;
  color: #A8B69E;
}

.jh-over__striphint{
  margin: 6px 0 0;
  font-size: 13.5px;
  color: #7C8974;
}

/* ---- Vergroting ---- */

.jh-over__licht{
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  background: rgba(15, 21, 12, .94);
  opacity: 0;
  transition: opacity .2s ease;
}

.jh-over__licht[hidden]{ display: none; }
.jh-over__licht.is-open{ opacity: 1; }

.jh-over__lichtbeeld{
  margin: 0;
  max-width: min(1100px, 100%);
  text-align: center;
}

.jh-over__lichtbeeld img{
  display: block;
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  margin-inline: auto;
  border-radius: 4px;
}

.jh-over__lichtbeeld figcaption{
  margin-top: 16px;
  font-size: 15px;
  color: #C6D2BD;
}

.jh-over__lichtbeeld figcaption:empty{ display: none; }

.jh-over__lichtsluit,
.jh-over__lichtnav{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease;
}

.jh-over__lichtsluit:hover,
.jh-over__lichtnav:hover{ background: rgba(255,255,255,.20); }

.jh-over__lichtsluit{
  position: absolute;
  top: 20px;
  right: 20px;
}

.jh-over__lichtsluit:focus-visible,
.jh-over__lichtnav:focus-visible{
  outline: 2px solid #cfe0c2;
  outline-offset: 3px;
}

@media (max-width: 720px){
  .jh-over__strip{ padding-inline: 16px; gap: 14px; }
  .jh-over__foto{ width: 78vw; }
  .jh-over__foto.is-groot{ width: 78vw; }
  .jh-over__vergroot img{ height: 56vw; }

  .jh-over__licht{ padding: 16px; }
  .jh-over__lichtnav{ position: absolute; bottom: 20px; }
  .jh-over__lichtnav.is-vorige{ left: 20px; }
  .jh-over__lichtnav.is-volgende{ right: 20px; }
  .jh-over__lichtbeeld img{ max-height: 68vh; }
}

@media (prefers-reduced-motion: reduce){
  .jh-over__vergroot img{ transition: none; }
  .jh-over__vergroot:hover img{ transform: none; }
  .jh-over__licht{ transition: none; }
}