/* Recruitment voor jou – breekpunten zoals op de live site: tablet t/m 1024px, mobiel t/m 767px. */

.recruitment-button { --bs-btn-border-radius: 4px; --bs-btn-font-size: 18px; --bs-btn-font-weight: 500; --bs-btn-padding-x: 30px; --bs-btn-padding-y: 25px; --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: var(--up-button); --bs-btn-hover-color: #0d3276; --bs-btn-active-bg: transparent; --bs-btn-active-border-color: var(--up-button); --bs-btn-active-color: #0d3276; font-family: "Manrope", sans-serif; text-transform: capitalize; transition: transform .3s; }
.recruitment-button:hover, .recruitment-button:focus-visible { transform: scale(.9); }

/* Hero: titel en knop links, foto met tekstkaart rechts. Op desktop schuift het volgende blok onder de hero (negatieve marge, zoals live);
   de hero zelf vangt daar geen muisklikken af. */
.recruitment-hero { display: flow-root; pointer-events: none; position: relative; z-index: 1; }
.recruitment-hero__inner { display: flex; margin-bottom: -23%; min-height: 100vh; }
.recruitment-hero__content { align-items: flex-start; display: flex; flex: 0 0 46%; flex-direction: column; margin-bottom: 239px; min-width: 0; padding: 62px 12% 0 0; pointer-events: auto; position: relative; }
.recruitment-hero__title { color: var(--up-button); font: 400 76px/1 "Poppins", sans-serif; margin: 0 0 155px; text-transform: capitalize; }
.recruitment-hero__content .recruitment-button { margin-bottom: 53px; }
.recruitment-hero__glow { background: radial-gradient(rgba(92, 8, 245, .42) 0%, rgba(192, 161, 249, 0) 70%); display: none; height: 96vh; left: -50%; pointer-events: none; position: absolute; top: 3%; width: min(52vw, 100%); z-index: -1; }
.recruitment-hero__media { flex: 0 0 50%; margin-bottom: 255px; min-width: 0; padding: 10px; pointer-events: auto; position: relative; }
.recruitment-hero__photo { inset: 0; overflow: hidden; position: absolute; }
.recruitment-hero__photo img { display: block; margin: 0 auto; width: 100%; }
.recruitment-hero__card { background: #fff; border: 2px solid var(--up-button); border-radius: 15px; box-shadow: -10px 32px 54px rgba(149, 155, 166, .3); color: #0d2d68; font: 600 15px/22.6px "Manrope", sans-serif; margin: 52% 0 0 -14%; padding: 53px 35px 43px; position: relative; transition: box-shadow 1s; width: 69%; }
.recruitment-hero__card:hover { box-shadow: 0 0 10px rgba(149, 155, 166, .3); }

/* Recruitment op basis van no cure, no pay */
.recruitment-intro { padding-bottom: 70px; }
.recruitment-intro__grid, .recruitment-plans__grid { padding: 20px; }
.recruitment-intro__grid .row, .recruitment-plans__grid .row { --bs-gutter-x: 20px; --bs-gutter-y: 20px; }
.recruitment-intro__image { display: block; margin: 0 auto; max-width: 660px; width: 100%; }
.recruitment-intro__title { color: var(--up-primary); font: 600 32px/1 "Roboto", sans-serif; margin: 30px 0 20px; }
.recruitment-intro__text { color: var(--up-muted); font-family: "Roboto", sans-serif; }

/* Pakketten */
.recruitment-plan { background: #f9fafa; overflow: hidden; position: relative; text-align: center; }
.recruitment-plan__header { background: var(--up-button); padding: 19px; }
.recruitment-plan--wide .recruitment-plan__header { padding: 20px 0; }
.recruitment-plan__title { color: #fff; font-size: 24px; font-weight: 600; line-height: 1.2; margin: 0; }
.recruitment-plan--roboto .recruitment-plan__title { font-family: "Roboto", sans-serif; }
.recruitment-plan__price { align-items: center; color: #555; display: flex; flex-wrap: wrap; font-size: 65px; font-weight: 700; justify-content: center; line-height: .8; margin: 0; padding: 40px 0; }
.recruitment-plan__currency { align-self: flex-start; font-size: .3em; line-height: 1; margin-right: 3px; }
.recruitment-plan__features { color: var(--up-muted); font-size: 14px; line-height: 1; list-style: none; margin: 0; padding: 0; }
.recruitment-plan__features li + li::before { border-top: 2px solid #ddd; content: ""; display: block; margin: 15px 12.5%; }
.recruitment-plan__feature { margin: 0 15px; }
.recruitment-plan__feature img { height: 1.3em; margin-right: 10px; vertical-align: baseline; width: 1.3em; }
.recruitment-plan__feature span { vertical-align: text-top; }
.recruitment-plan__footer { padding: 30px 0; }
.recruitment-plan__button { --bs-btn-bg: #69727d; --bs-btn-border-radius: 4px; --bs-btn-border-width: 0; --bs-btn-color: #fff; --bs-btn-padding-x: 30px; --bs-btn-padding-y: 15px; --bs-btn-hover-bg: var(--up-button); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--up-button); --bs-btn-active-color: #fff; transition: background-color .3s; }
.recruitment-plan__ribbon { height: 150px; overflow: hidden; pointer-events: none; position: absolute; right: 0; top: 0; width: 150px; }
.recruitment-plan__ribbon span { background: #ffe605; color: #000; font-size: 13px; font-weight: 700; left: 100px; line-height: 2; position: absolute; text-align: center; text-transform: uppercase; top: 50px; transform: translate(-50%, -50%) rotate(45deg); width: 300px; }

/* Social media */
.recruitment-social { padding: 10px 0; }
.recruitment-social .site-social__link { font-size: 25px; height: 50px; width: 50px; }

@media (max-width: 1024.98px) {
  .recruitment-button { --bs-btn-padding-x: 25px; --bs-btn-padding-y: 18px; }
  .recruitment-hero { pointer-events: auto; }
  .recruitment-hero__inner { flex-direction: column; margin: 12% 0 0; }
  .recruitment-hero__content { align-items: center; flex: none; padding: 62px 15% 0; text-align: center; }
  .recruitment-hero__title { font-size: 55px; }
  .recruitment-hero__content .recruitment-button { margin-bottom: 30px; }
  .recruitment-hero__glow { display: block; }
  .recruitment-hero__media { flex: none; margin: 10% 0 0; min-height: 627px; padding: 0 0 54px; }
  .recruitment-hero__photo img { width: 75%; }
  .recruitment-hero__card { margin: 0 0 0 max(-4%, (100% - 100vw) / 2 + 14px); }
}

@media (max-width: 767.98px) {
  .recruitment-hero__inner { margin-top: 20%; }
  .recruitment-hero__content { padding: 62px 0 0; }
  .recruitment-hero__title { font-size: 40px; }
  .recruitment-hero__glow { top: -40%; }
  .recruitment-hero__media { margin-top: 25%; min-height: 512px; padding: 0; }
  .recruitment-hero__photo img { height: 100%; object-fit: cover; width: 100%; }
  .recruitment-hero__card { margin: 0 auto; width: 94%; }
}