/* ==================================================
   WERKEN BIJ

   Vier blokken onder de fotokop: de introductie met
   foto, de taken als genummerde kaarten op groen, de
   vaardigheden in twee kolommen en een afsluitende
   oproep om te solliciteren.
================================================== */


/* --------------------------------------------------
   Introductie
-------------------------------------------------- */

.vacature-intro__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: var(--space-xl);
}

.vacature-intro__tekst {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap-m);
}

.vacature-intro img {
  width: 100%;
  max-height: 26rem;

  object-fit: cover;
}


/* --------------------------------------------------
   Dit ga je doen
-------------------------------------------------- */

.taken {
  background-color: var(--groen);
}

.taken h2 {
  margin-bottom: var(--space-xl);

  text-align: center;
}

.taken__lijst {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-m);

  margin: 0;
  padding: 0;

  list-style: none;
  counter-reset: taak;
}

.taken__lijst li {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap-s);

  padding: var(--space-m);

  background-color: var(--white);
  box-shadow: 0 1px 3px rgb(0 0 0 / 26%);
}

/*
 * Het nummer komt uit een teller, zodat de <ol> voor een
 * schermlezer een genummerde lijst blijft zonder dat het
 * cijfer twee keer in de HTML staat.
 */
.taken__lijst li::before {
  counter-increment: taak;
  content: counter(taak);

  color: var(--groen-hover);

  font-size: var(--h2);
  font-weight: 700;
  line-height: 1;
}


/* --------------------------------------------------
   Wat je meebrengt
-------------------------------------------------- */

.vaardigheden__inner {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-xl);

  align-items: start;
}

.vaardigheden__kolom {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap-m);
}

.lijst-vink {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap-s);

  margin: 0;
  padding: 0;

  list-style: none;
}

.lijst-vink li {
  display: flex;
  align-items: flex-start;
  gap: var(--content-gap-s);
}

.lijst-vink svg {
  flex: 0 0 auto;

  width: 1.15em;
  height: 1.15em;
  margin-top: 0.15em;

  color: var(--groen-hover);
}


/* De afsluitende oproep gebruikt het .cta-blok uit global.css */

@media (max-width: 800px) {

  .vacature-intro__inner,
  .vaardigheden__inner {
    grid-template-columns: 1fr;
  }

}