/* ==========================================================================
   Vacaturepagina's: header van het overzicht (op basis van de Hero page, .bt-hero-page in blocks.css) en details van de detailpagina.
   Payoff en zoekveld rekenen mee met het kader (--fx, --fy, --fw, --fh), zodat ze
   op elke breedte op dezelfde plek in het kader blijven en het zoekveld er nooit onder schuift.
   ========================================================================== */

/* Tussen 1400 en ±1500px liep het kader (50,5% + 735,5px) rechts van het scherm; nu houdt het altijd de gutter vrij. */
@media (min-width: 1261px) {
  .bt-hero-vacatures { --fx: min(50.5%, calc(100% - var(--gutter) - var(--fw))); }
}
.bt-hero-vacatures .hero__text { z-index: 2; }

/* Payoff linksonder in het kader, zoals in het ontwerp (125 × 89 op een kader van 735,5 breed). */
.bt-hero-vacatures__match {
  position: absolute; z-index: 3;
  left: calc(var(--fx) + .0367 * var(--fw));
  top: calc(var(--fy) + .7448 * var(--fh));
  width: calc(.1705 * var(--fw)); height: auto;
}

/* Zoekveld op dezelfde lijn als titel en kruimelpad, en altijd 40px vrij van het kader. */
.bt-hero-vacatures .search-field {
  z-index: 3; left: calc(var(--gutter) + 10 * var(--px)); top: calc(511 * var(--px));
  width: min(578 * var(--px), calc(var(--fx) - var(--gutter) - 50 * var(--px)));
}

/* --- Overzicht: animaties ----------------------------------------------------
   Filtergroepen klappen open/dicht in site.js (Web Animations); hier draait het plusje mee.
   Bij verversen staat de lijst kort gedimd met een balk erboven (.is-loading, 220 ms),
   daarna komen de rijen één voor één binnen (.is-entering, --i = volgnummer).        */
.filter-group__icon::after { transition-duration: .28s; transition-timing-function: cubic-bezier(.33, 1, .68, 1); }

.job-list { position: relative; }
.job-list > * { transition: opacity .18s ease; }
.job-list.is-loading > * { opacity: .35; }
/* Balk boven de lijst: een oranje stuk van 30% loopt binnen de lijstbreedte over een zandkleurig spoor. */
.job-list::before {
  content: ""; position: absolute; z-index: 1; top: calc(-10 * var(--px)); left: 0; right: 0; height: calc(3 * var(--px));
  background: linear-gradient(var(--c-orange), var(--c-orange)) -43% 0 / 30% 100% no-repeat var(--c-sand);
  opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.job-list.is-loading::before { opacity: 1; animation: job-loading .8s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes job-loading {
  from { background-position: -43% 0; }
  to { background-position: 143% 0; }
}

.job-row.is-entering { animation: job-in .45s cubic-bezier(.33, 1, .68, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes job-in {
  from { opacity: 0; transform: translateY(calc(14 * var(--px))); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .job-list > *, .filter-group__icon::after { transition: none; }
  .job-list.is-loading > * { opacity: 1; }
  .job-list::before, .job-row.is-entering { animation: none; }
}

/* --- Vacature-detail ------------------------------------------------------ */

/* "Snel naar" staat als oranje balk onder de hero (niet meer als witte links erin); de ruimte die die links innamen valt weg. */
.bt-job-hero { padding-bottom: calc(80 * var(--px)); }

/* site.css zet de contactfoto op maat van één exportfoto (100% × 200%); een foto uit RecruitCRM moet gewoon vullen. */
.job-detail .contact-card__photo[style] { background-position: center 30%; background-size: cover; background-repeat: no-repeat; }

@media (max-width: 1100px) {
  /* Tekst staat hier in de flow (site.css); het zoekveld volgt eronder, links van het kader. */
  .bt-hero-vacatures .search-field {
    position: relative; left: auto; top: auto; margin-top: calc(48 * var(--px));
    width: min(578 * var(--px), calc(48vw - 2 * var(--gutter) - 24 * var(--px)));
  }
}

@media (max-width: 760px) {
  .bt-hero-vacatures__match { display: none; }
  .bt-hero-vacatures .search-field { width: 100%; margin: 48px 0 0; }
}