/* =============================================================
   GHS Theme -- assets/css/sections/vacatures.css
   Vacature archive + single page styles.

   Load order: enqueued after ghs-faq by inc/vacatures.php, so all
   tokens, base, and component styles are already available.

   Mobile-first: base rules target mobile, @media queries enhance.

   Contents:
     1.  Shared utilities (container, eyebrow, section padding)
     2.  Archive hero
     3.  Filter bar
     4.  Archive card grid
     5.  Vacature card
     6.  Single hero
     7.  "Wat ga je doen?" section
     8.  Eisen & Aanbod
     9.  Testimonial
     10. Sollicitatieproces
     11. Waarom GHS
     12. FAQ (layout wrapper only -- item styles in faq.css)
     13. Open sollicitatie block
     14. Gerelateerde vacatures
     15. Responsive breakpoints

   @package GHS_Theme
   @since   1.0.0
   ============================================================= */


/* ----------------------------------------------------------
   1. SHARED UTILITIES
   ---------------------------------------------------------- */

/* Screen-reader only utility (matches personeel.css pattern) */
.sr-only {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0, 0, 0, 0);
    white-space: nowrap;
    border:     0;
}

/* Eyebrow shared component */
.ghs-eyebrow {
    display:        inline-flex;
    align-items:    center;
    font-family:    var(--font-body);
    font-size:      var(--fs-xs);
    font-weight:    var(--fw-bold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color:          var(--ghs-teal);
    margin:         0 0 var(--space-4);
}

/* Shared section container */
.ghs-container {
    max-width:   var(--container-max);
    margin-left:  auto;
    margin-right: auto;
    padding-left:  var(--space-5);
    padding-right: var(--space-5);
}

/* Shared section vertical padding */
.vacature-section {
    padding-top:    var(--space-9);
    padding-bottom: var(--space-9);
}


/* ----------------------------------------------------------
   2. ARCHIVE HERO
   ---------------------------------------------------------- */

.vacature-archive-hero {
    background:    var(--ghs-navy);
    margin-top:    -108px;
    padding-top:   228px;   /* 120px breathing room + 108px nav offset */
    padding-bottom: var(--space-9);
    position:      relative;
    overflow:      hidden;
}

.vacature-archive-hero__breadcrumb {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    font-family: var(--font-body);
    font-size:   var(--fs-xs);
    color:       rgba(255, 255, 255, 0.6);
    margin-bottom: var(--space-6);
}

.vacature-archive-hero__breadcrumb a {
    color:           rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition:      color var(--dur-fast) var(--ease-standard);
}

.vacature-archive-hero__breadcrumb a:hover {
    color: var(--ghs-white);
}

.vacature-archive-hero__breadcrumb svg {
    opacity: 0.4;
}

.vacature-archive-hero__content {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-7);
    position:       relative;
    z-index:        1;
}

.vacature-archive-hero__text {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-5);
    max-width:      600px;
}

.vacature-archive-hero__eyebrow {
    font-family:    var(--font-body);
    font-size:      var(--fs-xs);
    font-weight:    var(--fw-bold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color:          var(--ghs-teal);
    margin:         0;
}

.vacature-archive-hero__heading {
    margin:      0;
    font-family: var(--font-display);
    font-size:   clamp(2rem, 4.5vw, 3.25rem);
    line-height: 1.08;
    color:       var(--ghs-white);
    letter-spacing: var(--ls-tight);
}

.vacature-archive-hero__intro {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-lg);
    line-height: var(--lh-relaxed);
    color:       rgba(255, 255, 255, 0.75);
}

.vacature-archive-hero__stats {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--space-5);
    margin-top: var(--space-3);
}

.vacature-archive-hero__stat {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
}

.vacature-archive-hero__stat-num {
    font-family: var(--font-display);
    font-size:   var(--fs-h3);
    font-weight: var(--fw-bold);
    color:       var(--ghs-white);
    line-height: 1;
}

.vacature-archive-hero__stat-label {
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    color:       rgba(255, 255, 255, 0.65);
}

.vacature-archive-hero__stat--rating .vacature-archive-hero__stat-num {
    color: var(--ghs-orange);
}

.vacature-archive-hero__stars {
    display:  flex;
    gap:      2px;
    color:    var(--ghs-orange);
}

/* Decorative blob */
.vacature-archive-hero__deco {
    position:   absolute;
    top:        -80px;
    right:      -80px;
    width:      480px;
    height:     480px;
    pointer-events: none;
    opacity:    0.06;
}

.vacature-archive-hero__deco-blob {
    width:         100%;
    height:        100%;
    border-radius: 50% 40% 60% 30%;
    background:    var(--ghs-teal);
    animation:     ghs-blob-spin 20s linear infinite;
}

@keyframes ghs-blob-spin {
    to { transform: rotate(360deg); }
}


/* ----------------------------------------------------------
   3. FILTER BAR
   ---------------------------------------------------------- */

.vacature-filter-bar {
    background:   var(--ghs-white);
    padding:      var(--space-5) 0;
    border-bottom: 1px solid var(--ghs-line);
    position:     sticky;
    top:          var(--header-h);
    z-index:      10;
    box-shadow:   var(--shadow-xs);
}

.vacature-filter-bar__form {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
}

.vacature-filter-bar__label {
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    font-weight: var(--fw-semi);
    color:       var(--ghs-navy);
    margin-bottom: var(--space-2);
    display:     block;
}

.vacature-filter-bar__field {
    flex: 1;
    min-width: 0;
}

/* Search input wrapper */
.vacature-filter-bar__input-wrap {
    position: relative;
}

.vacature-filter-bar__input-icon {
    position:   absolute;
    left:       var(--space-4);
    top:        50%;
    transform:  translateY(-50%);
    color:      var(--text-subtle);
    pointer-events: none;
}

.vacature-filter-bar__input {
    width:         100%;
    height:        44px;
    padding:       0 var(--space-4) 0 calc(var(--space-4) + 24px);
    font-family:   var(--font-body);
    font-size:     var(--fs-sm);
    color:         var(--text-strong);
    background:    var(--ghs-paper);
    border:        1.5px solid var(--ghs-line);
    border-radius: var(--radius-md);
    outline:       none;
    transition:    border-color var(--dur-base) var(--ease-standard),
                   box-shadow   var(--dur-base) var(--ease-standard);
}

.vacature-filter-bar__input:focus {
    border-color: var(--ghs-teal);
    box-shadow:   var(--focus-ring);
    background:   var(--ghs-white);
}

.vacature-filter-bar__input::placeholder {
    color: var(--text-muted);
}

/* Select wrapper */
.vacature-filter-bar__select-wrap {
    position: relative;
}

.vacature-filter-bar__select {
    width:          100%;
    height:         44px;
    padding:        0 calc(var(--space-4) + 20px) 0 var(--space-4);
    font-family:    var(--font-body);
    font-size:      var(--fs-sm);
    color:          var(--text-strong);
    background:     var(--ghs-paper);
    border:         1.5px solid var(--ghs-line);
    border-radius:  var(--radius-md);
    outline:        none;
    appearance:     none;
    cursor:         pointer;
    transition:     border-color var(--dur-base) var(--ease-standard),
                    box-shadow   var(--dur-base) var(--ease-standard);
}

.vacature-filter-bar__select:focus {
    border-color: var(--ghs-teal);
    box-shadow:   var(--focus-ring);
    background:   var(--ghs-white);
}

.vacature-filter-bar__select-chevron {
    position:   absolute;
    right:      var(--space-3);
    top:        50%;
    transform:  translateY(-50%);
    color:      var(--text-subtle);
    pointer-events: none;
}

/* Reset button */
.vacature-filter-bar__reset {
    display:     inline-flex;
    align-items: center;
    gap:         var(--space-2);
    height:      36px;
    padding:     0 var(--space-4);
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    font-weight: var(--fw-semi);
    color:       var(--text-subtle);
    background:  transparent;
    border:      1.5px solid var(--ghs-line);
    border-radius: var(--radius-md);
    cursor:      pointer;
    transition:  all var(--dur-fast) var(--ease-standard);
    align-self:  flex-end;
}

.vacature-filter-bar__reset:hover {
    color:        var(--ghs-navy);
    border-color: var(--ghs-navy);
}

.vacature-filter-bar__results {
    margin:      var(--space-3) 0 0;
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    color:       var(--text-subtle);
    min-height:  1.2em; /* prevent layout shift */
}


/* ----------------------------------------------------------
   4. ARCHIVE GRID SECTION
   ---------------------------------------------------------- */

.vacature-archive-grid-section {
    padding-top:    var(--space-8);
    padding-bottom: var(--space-9);
    background:     var(--ghs-paper);
}

.vacature-archive-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var(--space-5);
}

.vacature-archive-empty {
    text-align:   center;
    padding:      var(--space-9) 0;
}

.vacature-archive-empty__text {
    font-family: var(--font-body);
    font-size:   var(--fs-lg);
    color:       var(--text-subtle);
    margin-bottom: var(--space-5);
}


/* ----------------------------------------------------------
   5. VACATURE CARD
   ---------------------------------------------------------- */

.vacature-card {
    background:      var(--ghs-white);
    border-radius:   var(--radius-lg);
    overflow:        hidden;
    box-shadow:      var(--shadow-sm);
    display:         flex;
    flex-direction:  column;
    transition:
        transform  var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-standard);
}

.vacature-card:hover {
    transform:  translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* Image area */
.vacature-card__image {
    position:   relative;
    display:    block;
    overflow:   hidden;
    aspect-ratio: 16 / 9;
    flex-shrink: 0;
    text-decoration: none;
}

.vacature-card__img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 400ms var(--ease-out);
}

.vacature-card:hover .vacature-card__img {
    transform: scale(1.04);
}

/* Vakgebied badge overlay on image */
.vacature-card__vakgebied-badge {
    position:      absolute;
    top:           var(--space-3);
    left:          var(--space-3);
    background:    var(--ghs-navy);
    color:         var(--ghs-white);
    font-family:   var(--font-body);
    font-size:     var(--fs-xs);
    font-weight:   var(--fw-bold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    padding:        var(--space-1) var(--space-3);
    border-radius:  var(--radius-pill);
}

/* Direct starten badge */
.vacature-card__direct-badge {
    position:   absolute;
    top:        var(--space-3);
    right:      var(--space-3);
    background: var(--ghs-orange);
    color:      var(--ghs-white);
    font-family: var(--font-body);
    font-size:  var(--fs-xs);
    font-weight: var(--fw-bold);
    padding:    var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    display:    inline-flex;
    align-items: center;
    gap:        4px;
}

.vacature-card__direct-badge--inline {
    position:      static;
    margin-top:    var(--space-2);
    align-self:    flex-start;
}

/* Card body */
.vacature-card__body {
    padding:        var(--space-5);
    display:        flex;
    flex-direction: column;
    flex:           1;
    gap:            var(--space-3);
}

.vacature-card__vakgebied-inline {
    font-family:    var(--font-body);
    font-size:      var(--fs-xs);
    font-weight:    var(--fw-bold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color:          var(--ghs-teal);
}

.vacature-card__title {
    margin:      0;
    font-family: var(--font-display);
    font-size:   var(--fs-h4);
    line-height: var(--lh-snug);
    color:       var(--text-strong);
}

.vacature-card__title-link {
    color:           inherit;
    text-decoration: none;
    transition:      color var(--dur-fast) var(--ease-standard);
}

.vacature-card__title-link:hover,
.vacature-card:hover .vacature-card__title-link {
    color: var(--ghs-navy);
}

.vacature-card__intro {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    line-height: var(--lh-normal);
    color:       var(--text-body);
    flex:        1;
    max-width:   none;
}

/* Meta row */
.vacature-card__meta {
    margin:      0;
    padding:     0;
    list-style:  none;
    display:     flex;
    flex-wrap:   wrap;
    gap:         var(--space-3);
    margin-top:  auto;
}

.vacature-card__meta-item {
    display:     flex;
    align-items: center;
    gap:         var(--space-1);
    font-family: var(--font-body);
    font-size:   var(--fs-xs);
    color:       var(--text-subtle);
}

.vacature-card__meta-item svg {
    flex-shrink: 0;
    color:       var(--ghs-teal);
}

/* CTA link */
.vacature-card__cta {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    font-family:     var(--font-body);
    font-size:       var(--fs-sm);
    font-weight:     var(--fw-semi);
    color:           var(--ghs-navy);
    text-decoration: none;
    margin-top:      var(--space-2);
    transition:      gap var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.vacature-card:hover .vacature-card__cta {
    gap:   10px;
    color: var(--ghs-teal);
}


/* ----------------------------------------------------------
   6. SINGLE HERO
   ---------------------------------------------------------- */

.vacature-single-hero {
    background:    var(--ghs-mist);
    margin-top:    -108px;
    padding-top:   228px;   /* 120px breathing room + 108px nav offset */
    padding-bottom: var(--space-9);
    border-bottom: 1px solid var(--ghs-line);
}

.vacature-single-hero__breadcrumb {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    font-family: var(--font-body);
    font-size:   var(--fs-xs);
    color:       var(--text-subtle);
    margin-bottom: var(--space-6);
    flex-wrap:   wrap;
}

.vacature-single-hero__breadcrumb a {
    color:           var(--text-subtle);
    text-decoration: none;
    transition:      color var(--dur-fast) var(--ease-standard);
}

.vacature-single-hero__breadcrumb a:hover {
    color: var(--ghs-navy);
}

.vacature-single-hero__grid {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-7);
}

.vacature-single-hero__text {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-5);
}

/* Meta badges */
.vacature-single-hero__meta {
    display:  flex;
    flex-wrap: wrap;
    gap:      var(--space-2);
}

.vacature-single-hero__badge {
    display:     inline-flex;
    align-items: center;
    gap:         4px;
    font-family: var(--font-body);
    font-size:   var(--fs-xs);
    font-weight: var(--fw-semi);
    padding:     var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    text-decoration: none;
}

.vacature-single-hero__badge--vakgebied {
    background: var(--ghs-navy-50);
    color:      var(--ghs-navy);
    transition: background var(--dur-fast), color var(--dur-fast);
}

.vacature-single-hero__badge--vakgebied:hover {
    background: var(--ghs-navy);
    color:      var(--ghs-white);
}

.vacature-single-hero__badge--plaats {
    background: var(--ghs-mist);
    color:      var(--text-subtle);
}

.vacature-single-hero__badge--direct {
    background: var(--ghs-orange-50);
    color:      var(--ghs-orange-800);
}

.vacature-single-hero__h1 {
    margin:      0;
    font-family: var(--font-display);
    font-size:   clamp(1.75rem, 4vw, 3rem);
    line-height: 1.1;
    color:       var(--ghs-navy);
    letter-spacing: var(--ls-tight);
}

.vacature-single-hero__intro {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-lg);
    line-height: var(--lh-relaxed);
    color:       var(--text-body);
}

.vacature-single-hero__salaris {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    font-family: var(--font-body);
    font-size:   var(--fs-base);
    font-weight: var(--fw-semi);
    color:       var(--ghs-teal-600);
}

.vacature-single-hero__actions {
    display:  flex;
    gap:      var(--space-3);
    flex-wrap: wrap;
}

.vacature-single-hero__rating {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    padding-top: var(--space-3);
    border-top:  1px solid var(--ghs-line);
}

.vacature-single-hero__stars {
    display: flex;
    gap:     2px;
    color:   var(--ghs-orange);
}

.vacature-single-hero__rating-score {
    font-family: var(--font-display);
    font-size:   var(--fs-base);
    font-weight: var(--fw-bold);
    color:       var(--ghs-navy);
}

.vacature-single-hero__rating-max {
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    color:       var(--text-subtle);
}

/* Hero image */
.vacature-single-hero__image-wrap {
    border-radius: var(--radius-xl);
    overflow:      hidden;
    flex-shrink:   0;
}

.vacature-single-hero__image-wrap img {
    width:      100%;
    height:     auto;
    display:    block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.vacature-single-hero__image-placeholder {
    background:  linear-gradient(135deg, var(--ghs-navy-100), var(--ghs-teal-200));
    width:       100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-xl);
}


/* ----------------------------------------------------------
   7. WAT GA JE DOEN?
   ---------------------------------------------------------- */

.vacature-wgjd {
    padding-top:    var(--space-9);
    padding-bottom: var(--space-9);
    background:     var(--ghs-white);
}

.vacature-wgjd__grid {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-8);
}

.vacature-wgjd__content {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-6);
}

.vacature-wgjd__heading {
    margin:      0;
    font-family: var(--font-display);
    font-size:   clamp(1.5rem, 3vw, var(--fs-h2));
    line-height: var(--lh-snug);
    color:       var(--ghs-navy);
}

/* WYSIWYG body prose */
.vacature-wgjd__body.prose p,
.vacature-wgjd__body.prose ul,
.vacature-wgjd__body.prose ol {
    font-family: var(--font-body);
    font-size:   var(--fs-base);
    line-height: var(--lh-relaxed);
    color:       var(--text-body);
    max-width:   none;
    margin-bottom: var(--space-4);
}

.vacature-wgjd__taken-heading {
    margin:      0 0 var(--space-4);
    font-family: var(--font-display);
    font-size:   var(--fs-h4);
    color:       var(--ghs-navy);
}

/* Checklist */
.vacature-checklist {
    margin:     0;
    padding:    0;
    list-style: none;
    display:    flex;
    flex-direction: column;
    gap:        var(--space-3);
}

.vacature-checklist__item {
    display:     flex;
    align-items: flex-start;
    gap:         var(--space-3);
    font-family: var(--font-body);
    font-size:   var(--fs-base);
    line-height: var(--lh-normal);
    color:       var(--text-body);
}

.vacature-checklist__icon {
    flex-shrink: 0;
    color:       var(--ghs-teal);
    margin-top:  3px;
}

/* Side image */
.vacature-wgjd__image-col {
    border-radius: var(--radius-xl);
    overflow:      hidden;
}

.vacature-wgjd__image-col img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    aspect-ratio: 4 / 3;
}


/* ----------------------------------------------------------
   8. EISEN & AANBOD
   ---------------------------------------------------------- */

.vacature-eisen-aanbod {
    padding-top:    var(--space-9);
    padding-bottom: var(--space-9);
    background:     var(--ghs-paper);
}

.vacature-eisen-aanbod__grid {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-6);
}

.vacature-eisen-aanbod__col {
    background:    var(--ghs-white);
    border-radius: var(--radius-lg);
    padding:       var(--space-7);
    display:       flex;
    flex-direction: column;
    gap:           var(--space-5);
}

.vacature-eisen-aanbod__col--aanbod {
    background: var(--ghs-navy);
}

.vacature-eisen-aanbod__col-header {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
}

.vacature-eisen-aanbod__col-icon {
    width:           40px;
    height:          40px;
    flex-shrink:     0;
    border-radius:   var(--radius-md);
    background:      var(--ghs-mist);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--ghs-navy);
}

.vacature-eisen-aanbod__col--aanbod .vacature-eisen-aanbod__col-icon {
    background: rgba(255, 255, 255, 0.15);
    color:      var(--ghs-orange);
}

.vacature-eisen-aanbod__col-heading {
    margin:      0;
    font-family: var(--font-display);
    font-size:   var(--fs-h4);
    color:       var(--ghs-navy);
}

.vacature-eisen-aanbod__col--aanbod .vacature-eisen-aanbod__col-heading {
    color: var(--ghs-white);
}

/* Bullet list */
.vacature-bullet-list {
    margin:     0;
    padding:    0;
    list-style: none;
    display:    flex;
    flex-direction: column;
    gap:        var(--space-3);
}

.vacature-bullet-list__item {
    display:     flex;
    align-items: flex-start;
    gap:         var(--space-3);
    font-family: var(--font-body);
    font-size:   var(--fs-base);
    line-height: var(--lh-normal);
    color:       var(--text-body);
}

.vacature-bullet-list--teal .vacature-bullet-list__item {
    color: rgba(255, 255, 255, 0.9);
}

.vacature-bullet-list__dot {
    flex-shrink:   0;
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--ghs-teal);
    margin-top:    0.4em;
}

.vacature-bullet-list--teal .vacature-bullet-list__dot {
    background: var(--ghs-orange);
}


/* ----------------------------------------------------------
   9. TESTIMONIAL
   ---------------------------------------------------------- */

.vacature-testimonial {
    padding-top:    var(--space-9);
    padding-bottom: var(--space-9);
    background:     var(--ghs-navy);
}

.vacature-testimonial__card {
    margin:        0 auto;
    max-width:     740px;
    background:    rgba(255, 255, 255, 0.06);
    border:        1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-xl);
    padding:       var(--space-7);
    display:       flex;
    flex-direction: column;
    gap:           var(--space-5);
}

.vacature-testimonial__quote-mark {
    color:   var(--ghs-teal);
    opacity: 0.6;
    width:   40px;
    height:  40px;
}

.vacature-testimonial__body {
    margin:      0;
    font-family: var(--font-display);
    font-size:   clamp(1.125rem, 2vw, 1.5rem);
    line-height: 1.45;
    color:       var(--ghs-white);
    font-style:  italic;
    max-width:   none;
}

.vacature-testimonial__author {
    display:     flex;
    align-items: center;
    gap:         var(--space-4);
    padding-top: var(--space-5);
    border-top:  1px solid rgba(255, 255, 255, 0.12);
}

.vacature-testimonial__avatar {
    width:         56px;
    height:        56px;
    border-radius: 50%;
    overflow:      hidden;
    flex-shrink:   0;
    background:    var(--ghs-navy-800);
    display:       flex;
    align-items:   center;
    justify-content: center;
}

.vacature-testimonial__avatar--initials {
    font-family: var(--font-display);
    font-size:   var(--fs-base);
    font-weight: var(--fw-bold);
    color:       var(--ghs-teal);
}

.vacature-testimonial__avatar img {
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.vacature-testimonial__name {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    font-weight: var(--fw-semi);
    color:       var(--ghs-white);
    max-width:   none;
}

.vacature-testimonial__role {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-xs);
    color:       rgba(255, 255, 255, 0.6);
    max-width:   none;
}


/* ----------------------------------------------------------
   10. SOLLICITATIEPROCES
   ---------------------------------------------------------- */

.vacature-proces {
    padding-top:    var(--space-9);
    padding-bottom: var(--space-9);
    background:     var(--ghs-white);
}

.vacature-proces__header {
    text-align:    center;
    margin-bottom: var(--space-8);
    max-width:     560px;
    margin-left:   auto;
    margin-right:  auto;
}

.vacature-proces__heading {
    margin:      0 0 var(--space-4);
    font-family: var(--font-display);
    font-size:   clamp(1.5rem, 3vw, var(--fs-h2));
    line-height: var(--lh-snug);
    color:       var(--ghs-navy);
}

.vacature-proces__intro {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-lg);
    color:       var(--text-subtle);
}

.vacature-proces__steps {
    margin:     0;
    padding:    0;
    list-style: none;
    display:    grid;
    grid-template-columns: 1fr;
    gap:        var(--space-4);
    counter-reset: none;
}

.vacature-proces__step {
    display:     flex;
    align-items: flex-start;
    gap:         var(--space-5);
    background:  var(--ghs-paper);
    border-radius: var(--radius-lg);
    padding:     var(--space-5) var(--space-6);
}

.vacature-proces__step-num {
    flex-shrink:   0;
    width:         48px;
    height:        48px;
    border-radius: 50%;
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-family:   var(--font-display);
    font-size:     var(--fs-base);
    font-weight:   var(--fw-bold);
    color:         var(--ghs-white);
}

.vacature-proces__step-body {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-1);
    padding-top:    var(--space-1);
}

.vacature-proces__step-title {
    margin:      0;
    font-family: var(--font-display);
    font-size:   var(--fs-base);
    font-weight: var(--fw-bold);
    color:       var(--ghs-navy);
}

.vacature-proces__step-desc {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    line-height: var(--lh-normal);
    color:       var(--text-body);
    max-width:   none;
}


/* ----------------------------------------------------------
   11. WAAROM GHS
   ---------------------------------------------------------- */

.vacature-waarom-ghs {
    padding-top:    var(--space-9);
    padding-bottom: var(--space-9);
    background:     var(--ghs-paper);
}

.vacature-waarom-ghs__header {
    text-align:    center;
    margin-bottom: var(--space-8);
    max-width:     560px;
    margin-left:   auto;
    margin-right:  auto;
}

.vacature-waarom-ghs__heading {
    margin:      0 0 var(--space-4);
    font-family: var(--font-display);
    font-size:   clamp(1.5rem, 3vw, var(--fs-h2));
    line-height: var(--lh-snug);
    color:       var(--ghs-navy);
}

.vacature-waarom-ghs__intro {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-lg);
    color:       var(--text-subtle);
}

.vacature-waarom-ghs__grid {
    margin:     0;
    padding:    0;
    list-style: none;
    display:    grid;
    grid-template-columns: 1fr;
    gap:        var(--space-4);
}

.vacature-waarom-ghs__item {
    display:     flex;
    align-items: flex-start;
    gap:         var(--space-4);
    background:  var(--ghs-white);
    border-radius: var(--radius-md);
    padding:     var(--space-5);
    border:      1px solid var(--ghs-line);
}

.vacature-waarom-ghs__item-icon {
    flex-shrink:     0;
    width:           40px;
    height:          40px;
    border-radius:   var(--radius-md);
    background:      var(--ghs-teal-200);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--ghs-teal-600);
}

.vacature-waarom-ghs__item-title {
    margin:      0 0 var(--space-1);
    font-family: var(--font-display);
    font-size:   var(--fs-base);
    font-weight: var(--fw-bold);
    color:       var(--ghs-navy);
}

.vacature-waarom-ghs__item-desc {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    line-height: var(--lh-normal);
    color:       var(--text-subtle);
    max-width:   none;
}


/* ----------------------------------------------------------
   12. FAQ (layout only -- item styles in faq.css)
   ---------------------------------------------------------- */

.vacature-faq {
    padding-top:    var(--space-9);
    padding-bottom: var(--space-9);
    background:     var(--ghs-white);
}


/* ----------------------------------------------------------
   13. OPEN SOLLICITATIE BLOCK
   ---------------------------------------------------------- */

.vacature-open-sollicitatie {
    padding-top:    var(--space-9);
    padding-bottom: var(--space-9);
    background:     linear-gradient(135deg, var(--ghs-navy-deep), var(--ghs-navy));
}

.vacature-open-sollicitatie__inner {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-7);
}

.vacature-open-sollicitatie__icon {
    width:           64px;
    height:          64px;
    border-radius:   var(--radius-lg);
    background:      rgba(255, 255, 255, 0.1);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--ghs-teal);
    flex-shrink:     0;
}

.vacature-open-sollicitatie__text {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
}

.vacature-open-sollicitatie__heading {
    margin:      0;
    font-family: var(--font-display);
    font-size:   clamp(1.5rem, 3vw, var(--fs-h2));
    line-height: var(--lh-snug);
    color:       var(--ghs-white);
}

.vacature-open-sollicitatie__intro {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-lg);
    color:       rgba(255, 255, 255, 0.75);
}

/* Open sollicitatie form */
.open-soll-form {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-4);
}

.open-soll-form__group {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
}

.open-soll-form__label {
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    font-weight: var(--fw-semi);
    color:       rgba(255, 255, 255, 0.85);
}

.open-soll-form__label span {
    color: var(--ghs-orange);
    margin-left: 2px;
}

.open-soll-form__input,
.open-soll-form__select,
.open-soll-form__textarea {
    width:         100%;
    padding:       var(--space-3) var(--space-4);
    font-family:   var(--font-body);
    font-size:     var(--fs-sm);
    color:         var(--text-strong);
    background:    var(--ghs-white);
    border:        1.5px solid transparent;
    border-radius: var(--radius-md);
    outline:       none;
    transition:    border-color var(--dur-base) var(--ease-standard),
                   box-shadow   var(--dur-base) var(--ease-standard);
}

.open-soll-form__select {
    appearance: none;
    cursor:     pointer;
    height:     44px;
    padding:    0 var(--space-4);
}

.open-soll-form__textarea {
    resize: vertical;
    min-height: 80px;
}

.open-soll-form__input:focus,
.open-soll-form__select:focus,
.open-soll-form__textarea:focus {
    border-color: var(--ghs-teal);
    box-shadow:   var(--focus-ring);
}

.open-soll-form__actions {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-4);
}

.open-soll-form__privacy {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-xs);
    color:       rgba(255, 255, 255, 0.5);
    max-width:   none;
}

.open-soll-form__privacy a {
    color: rgba(255, 255, 255, 0.7);
}


/* ----------------------------------------------------------
   14. GERELATEERDE VACATURES
   ---------------------------------------------------------- */

.vacature-gerelateerd {
    padding-top:    var(--space-9);
    padding-bottom: var(--space-9);
    background:     var(--ghs-paper);
}

.vacature-gerelateerd__header {
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    flex-wrap:     wrap;
    gap:           var(--space-4);
    margin-bottom: var(--space-7);
}

.vacature-gerelateerd__heading {
    margin:      0;
    font-family: var(--font-display);
    font-size:   clamp(1.25rem, 2.5vw, var(--fs-h2));
    color:       var(--ghs-navy);
}

.vacature-gerelateerd__all-link {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    font-weight: var(--fw-semi);
    color:       var(--ghs-navy);
    text-decoration: none;
    white-space: nowrap;
    transition:  gap var(--dur-fast) var(--ease-out), color var(--dur-fast);
}

.vacature-gerelateerd__all-link:hover {
    gap:   10px;
    color: var(--ghs-teal);
}

.vacature-gerelateerd__grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var(--space-5);
}


/* ----------------------------------------------------------
   15. RESPONSIVE BREAKPOINTS
   ---------------------------------------------------------- */

/* SM: 480px+ */
@media (min-width: 480px) {
    .vacature-archive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* MD: 768px+ */
@media (min-width: 768px) {

    .vacature-filter-bar__form {
        flex-direction: row;
        flex-wrap:      wrap;
        align-items:    flex-end;
    }

    .vacature-filter-bar__field {
        flex: 1 1 200px;
    }

    .vacature-archive-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vacature-archive-hero__content {
        flex-direction: row;
        justify-content: space-between;
        align-items:    center;
    }

    .vacature-single-hero__grid {
        flex-direction:  row;
        align-items:     flex-start;
    }

    .vacature-single-hero__text {
        flex: 1;
    }

    .vacature-single-hero__image-wrap {
        width: 45%;
        max-width: 500px;
    }

    .vacature-wgjd__grid {
        flex-direction: row;
        align-items:    flex-start;
    }

    .vacature-wgjd__content {
        flex: 1;
    }

    .vacature-wgjd__image-col {
        width: 40%;
        max-width: 380px;
    }

    .vacature-eisen-aanbod__grid {
        flex-direction: row;
    }

    .vacature-eisen-aanbod__col {
        flex: 1;
    }

    .vacature-process__steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .vacature-waarom-ghs__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .vacature-open-sollicitatie__inner {
        flex-direction: row;
        align-items:    flex-start;
    }

    .vacature-open-sollicitatie__text {
        flex: 1;
    }

    .vacature-open-sollicitatie__form {
        flex: 1;
        max-width: 480px;
    }

    .open-soll-form {
        display:               grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .open-soll-form__group--full {
        grid-column: 1 / -1;
    }

    .open-soll-form__actions {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items:   center;
    }

    .gerelateerd-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

/* LG: 1024px+ */
@media (min-width: 1024px) {

    .vacature-archive-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .vacature-process__steps,
    .vacature-proces__steps {
        grid-template-columns: repeat(4, 1fr);
    }

    .vacature-gerelateerd__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .vacature-waarom-ghs__grid {
        grid-template-columns: repeat(3, 1fr);
    }

}