/* =============================================================
   GHS Theme -- assets/css/sections/personeel.css
   "Ik zoek personeel" page -- all section styles.

   Load order: enqueued after ghs-faq (personeel.php), so all
   tokens, base, and component styles are already available.

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

   Sections:
     1.  Hero
     2.  Voordelen (split panel)
     3.  CTA balk
     4.  Testimonials
     5.  Contact / callback form
     6.  FAQ (layout wrapper only -- item styles in faq.css)

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


/* ----------------------------------------------------------
   SHARED SECTION UTILITIES (personeel-scoped)
   ---------------------------------------------------------- */

.ghs-section {
    padding-top:    var(--space-9);
    padding-bottom: var(--space-9);
}

/* Override for hero -- bleeds under fixed nav like home hero */
.personeel-hero {
    background:    var(--ghs-mist);
    margin-top:    -108px;
    padding-top:   228px;   /* 120px breathing room + 108px nav offset */
    padding-bottom: 56px;   /* v2 spec: 56px -- does not align to a spacing token */
    border-bottom: 1px solid var(--ghs-line);
}

/* Breadcrumb */
.personeel-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);
}

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

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


/* ----------------------------------------------------------
   1. HERO
   ---------------------------------------------------------- */

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

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

.personeel-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;
}

.personeel-hero__h1 {
    margin:      0;
    font-family: var(--font-display);
    font-size:   clamp(2rem, 4vw, 3.25rem);
    line-height: 1.08;
    color:       var(--ghs-navy);
    text-wrap:   pretty;
}

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

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

.personeel-hero__btn-secondary {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--space-2);
    padding:         12px 22px;
    border:          1.5px solid var(--ghs-line-strong);
    border-radius:   var(--radius-md);
    font-family:     var(--font-body);
    font-size:       var(--fs-base);
    color:           var(--ghs-navy);
    text-decoration: none;
    background:      var(--ghs-white);
    transition:
        border-color var(--dur-base) var(--ease-standard),
        background   var(--dur-base) var(--ease-standard);
}

.personeel-hero__btn-secondary:hover {
    border-color: var(--ghs-navy);
    background:   var(--ghs-mist);
    color:        var(--ghs-navy);
}

.personeel-hero__btn-secondary svg,
.personeel-hero__btn-secondary .ghs-arrow {
    flex-shrink: 0;
    transition:  transform var(--dur-base) ease-out;
}

.personeel-hero__btn-secondary:hover svg,
.personeel-hero__btn-secondary:hover .ghs-arrow {
    transform: translateX(4px);
}

/* Werkwijze (3 steps) */
.personeel-hero__steps {
    display:     flex;
    align-items: stretch;    /* children stretch to full row height */
    gap:         0;
    padding-top: var(--space-5);
    border-top:  1px solid var(--ghs-line);
    margin-top:  var(--space-3);
}

.personeel-hero__step {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            var(--space-2);
    flex:           1;
}

.personeel-hero__step-num {
    width:           32px;
    height:          32px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}

.personeel-hero__step-num span {
    font-family:  var(--font-display);
    font-size:    var(--fs-sm);
    color:        var(--ghs-white);
    font-weight:  var(--fw-bold);
    line-height:  1;
}

.personeel-hero__step-text {
    text-align: center;
}

.personeel-hero__step-label {
    margin:      0 0 2px;
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    font-weight: var(--fw-bold);
    color:       var(--ghs-navy);
}

.personeel-hero__step-desc {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-xs);
    color:       var(--text-subtle);
    line-height: 1.4;
}

/* Connector arrow sits on the same horizontal centerline as the
   numbered circles. We align it to the top of the flex row, then
   shift it down by exactly half the circle height (16px) so it
   centres on the 32px circle regardless of text below.         */
.personeel-hero__step-arrow {
    flex:        0 0 auto;
    display:     flex;
    align-items: flex-start;
    padding-top: 0;          /* reset old offset */
    margin-top:  0;
    align-self:  flex-start; /* anchor to top so we can position precisely */
    /* The circle is 32px tall. Shift arrow down (32px - 10px SVG height) / 2 = 11px */
    transform:   translateY(11px);
    color:       var(--ghs-teal);
}

/* Hero photo */
.personeel-hero__photo-wrap {
    border-radius: 20px;
    overflow:      hidden;
    aspect-ratio:  3 / 4;
    position:      relative;
    flex-shrink:   0;
}

.personeel-hero__photo-wrap img {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    display:     block;
}

.personeel-hero__photo-overlay {
    position:       absolute;
    bottom:         0;
    left:           0;
    right:          0;
    height:         80px;
    background:     linear-gradient(to top, rgba(0, 56, 101, 0.45), transparent);
    pointer-events: none;
}

@media (min-width: 768px) {
    .personeel-hero__grid {
        display:               grid;
        grid-template-columns: 1fr 380px;
        gap:                   var(--space-8);
        align-items:           center;
    }

    .personeel-hero__photo-wrap {
        /* on desktop the grid handles placement */
    }
}


/* ----------------------------------------------------------
   2. VOORDELEN
   ---------------------------------------------------------- */

.personeel-voordelen {
    background: var(--ghs-white);
}

.personeel-voordelen__card {
    border-radius: 24px;
    overflow:      hidden;
    box-shadow:    0 2px 24px rgba(6, 36, 63, 0.10);
}

/* Quote panel (navy left) */
.personeel-voordelen__quote-panel {
    background:    var(--ghs-navy);
    padding:       56px 52px;   /* v2 spec: 56px 52px */
    display:       flex;
    flex-direction: column;
    justify-content: space-between;
    gap:           48px;   /* v2 spec: 48px */
    position:      relative;
    overflow:      hidden;
}

.personeel-voordelen__quote-deco {
    position:       absolute;
    top:            -20px;
    left:           28px;
    opacity:        0.07;
    pointer-events: none;
    color:          var(--ghs-teal);
}

.personeel-voordelen__quote-inner {
    position: relative;
}

.personeel-voordelen__quote-eyebrow {
    margin:         0 0 28px;
    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);
    max-width:      none;
}

.personeel-voordelen__blockquote {
    margin:       0;
    font-family:  var(--font-display);
    font-size:    clamp(1.5rem, 2.5vw, 2.125rem);
    line-height:  1.2;
    color:        var(--ghs-white);
    text-wrap:    pretty;
    /* reset base.css blockquote defaults */
    padding-left: 0;
    border-left:  none;
}

.personeel-voordelen__rule {
    width:         48px;
    height:        4px;
    background:    var(--ghs-teal);
    border-radius: 2px;
    margin-top:    var(--space-6);
    border:        none;
}

/* Sector badges row */
.personeel-voordelen__badges-wrap {
    position: relative;
}

.personeel-voordelen__badges-label {
    margin:         0 0 14px;
    font-family:    var(--font-body);
    font-size:      var(--fs-xs);
    color:          rgba(255, 255, 255, 0.4);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    max-width:      none;
}

.personeel-voordelen__badges {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--space-2);
    list-style: none;
}

.personeel-voordelen__badge {
    font-family:   var(--font-body);
    font-size:     var(--fs-xs);
    color:         var(--ghs-teal);
    background:    rgba(0, 172, 168, 0.12);
    border:        1px solid rgba(0, 172, 168, 0.28);
    border-radius: var(--radius-pill);
    padding:       5px 13px;
}

/* Voordelen list (white right) */
.personeel-voordelen__list-panel {
    background:    var(--ghs-white);
    padding:       56px 52px;   /* v2 spec: 56px 52px */
    display:       flex;
    flex-direction: column;
}

.personeel-voordelen__heading {
    margin:      0 0 36px;   /* v2 spec: 36px */
    font-family: var(--font-display);
    font-size:   clamp(1.5rem, 2vw, 1.875rem);
    line-height: 1.15;
    color:       var(--ghs-navy);
}

.personeel-voordelen__items {
    display:        flex;
    flex-direction: column;
    flex:           1;
    list-style:     none;
}

.personeel-voordelen__item {
    display:     flex;
    gap:         18px;
    align-items: flex-start;
    padding:     18px 0;
    border-bottom: 1px solid var(--ghs-line);
}

.personeel-voordelen__item:last-child {
    border-bottom: none;
}

.personeel-voordelen__item-icon {
    width:           40px;
    height:          40px;
    border-radius:   var(--radius-md);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}

.personeel-voordelen__item-icon--navy {
    background: rgba(0, 56, 101, 0.07);
    color:      var(--ghs-navy);
}

.personeel-voordelen__item-icon--teal {
    background: rgba(0, 172, 168, 0.10);
    color:      var(--ghs-teal);
}

.personeel-voordelen__item-icon--orange {
    background: rgba(242, 140, 0, 0.10);
    color:      var(--ghs-orange);
}

.personeel-voordelen__item-title {
    margin:      0 0 4px;
    font-family: var(--font-display);
    font-size:   var(--fs-base);
    color:       var(--ghs-navy);
}

.personeel-voordelen__item-desc {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    line-height: 1.6;
    color:       var(--text-body);
    max-width:   none;
}

.personeel-voordelen__cta {
    margin-top:  32px;    /* v2 spec: 32px */
    padding-top: 28px;    /* v2 spec: 28px */
    border-top:  1px solid var(--ghs-line);
}

@media (min-width: 768px) {
    .personeel-voordelen__card {
        display:               grid;
        grid-template-columns: 1fr 1fr;
    }
}


/* ----------------------------------------------------------
   3. CTA BALK
   ---------------------------------------------------------- */

.personeel-cta {
    background: var(--ghs-navy);
    padding:    64px 5%;
    position:   relative;
    overflow:   hidden;
}

.personeel-cta__deco {
    position:       absolute;
    right:          -60px;
    top:            -60px;
    width:          320px;
    height:         320px;
    border-radius:  50%;
    background:     radial-gradient(circle, rgba(0, 172, 168, 0.15) 0%, transparent 65%);
    pointer-events: none;
}

.personeel-cta__inner {
    max-width: var(--container-max);
    margin:    0 auto;
    position:  relative;
    display:   flex;
    flex-direction: column;
    gap:       var(--space-7);
}

.personeel-cta__eyebrow {
    margin:         0 0 14px;
    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);
    max-width:      none;
}

.personeel-cta__heading {
    margin:      0 0 12px;
    font-family: var(--font-display);
    font-size:   clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.15;
    color:       var(--ghs-white);
    max-width:   none;
}

.personeel-cta__subtext {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    line-height: 1.6;
    color:       rgba(255, 255, 255, 0.6);
    max-width:   none;
}

.personeel-cta__actions {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
    flex-shrink:    0;
}

.personeel-cta__phone {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    padding:         14px 24px;
    border:          1.5px solid rgba(255, 255, 255, 0.25);
    border-radius:   var(--radius-md);
    font-family:     var(--font-body);
    font-size:       var(--fs-base);
    color:           var(--ghs-white);
    text-decoration: none;
    transition:
        border-color var(--dur-base) var(--ease-standard),
        background   var(--dur-base) var(--ease-standard);
}

.personeel-cta__phone:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background:   rgba(255, 255, 255, 0.06);
    color:        var(--ghs-white);
}

@media (min-width: 768px) {
    .personeel-cta__inner {
        flex-direction:  row;
        align-items:     center;
        justify-content: space-between;
        gap:             var(--space-8);
    }

    .personeel-cta__text {
        max-width: 520px;
    }
}


/* ----------------------------------------------------------
   4. TESTIMONIALS
   ---------------------------------------------------------- */

.personeel-testimonials {
    background: var(--ghs-mist);
}

.personeel-testimonials__header {
    text-align:    center;
    margin-bottom: var(--space-8);
}

.personeel-testimonials__eyebrow {
    display:        block;
    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-bottom:  var(--space-3);
}

.personeel-testimonials__heading {
    margin:      0;
    font-family: var(--font-display);
    font-size:   clamp(1.75rem, 3vw, 2.75rem);
    line-height: var(--lh-snug);
    color:       var(--ghs-navy);
}

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

@media (min-width: 640px) {
    .personeel-testimonials__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .personeel-testimonials__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Testimonial card */
.personeel-testimonial-card {
    background:     var(--ghs-white);
    border-radius:  18px;
    padding:        var(--space-7);
    display:        flex;
    flex-direction: column;
    gap:            var(--space-5);
    box-shadow:     0 2px 12px rgba(6, 36, 63, 0.07);
}

.personeel-testimonial-card__quote-icon {
    color:   var(--ghs-teal);
    opacity: 0.3;
    flex-shrink: 0;
}

.personeel-testimonial-card__text {
    margin:       0;
    font-family:  var(--font-body);
    font-size:    var(--fs-base);
    line-height:  var(--lh-relaxed);
    color:        var(--text-body);
    flex:         1;
    max-width:    none;
    /* reset base.css blockquote defaults */
    padding-left: 0;
    border-left:  none;
}

.personeel-testimonial-card__footer {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    padding-top: var(--space-4);
    border-top:  1px solid var(--ghs-line);
}

.personeel-testimonial-card__avatar {
    width:         44px;
    height:        44px;
    border-radius: 50%;
    overflow:      hidden;
    flex-shrink:   0;
    display:       flex;
    align-items:   center;
    justify-content: center;
}

.personeel-testimonial-card__avatar img {
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.personeel-testimonial-card__avatar--navy {
    background: var(--ghs-navy);
}

.personeel-testimonial-card__avatar--teal {
    background: var(--ghs-teal);
}

.personeel-testimonial-card__avatar--orange {
    background: var(--ghs-orange);
}

.personeel-testimonial-card__avatar-initials {
    font-family: var(--font-display);
    font-size:   var(--fs-sm);
    color:       var(--ghs-white);
    line-height: 1;
}

.personeel-testimonial-card__name {
    margin:      0 0 2px;
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    font-weight: var(--fw-bold);
    color:       var(--ghs-navy);
}

.personeel-testimonial-card__role {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-xs);
    color:       var(--text-subtle);
    max-width:   none;
}


/* ----------------------------------------------------------
   5. CONTACT / CALLBACK FORM
   ---------------------------------------------------------- */

.personeel-contact {
    background: var(--ghs-white);
}

.personeel-contact__card {
    border-radius: 24px;
    overflow:      hidden;
    box-shadow:    0 2px 24px rgba(6, 36, 63, 0.10);
}

/* Left: intercedent panel */
.personeel-contact__intercedent {
    background:     var(--ghs-mist);
    padding:        52px;   /* v2 spec: 52px all sides */
    display:        flex;
    flex-direction: column;
    gap:            var(--space-6);
}

.personeel-contact__eyebrow {
    display:        block;
    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-bottom:  var(--space-4);
}

.personeel-contact__heading {
    margin:      0 0 10px;
    font-family: var(--font-display);
    font-size:   clamp(1.5rem, 2.5vw, 1.875rem);
    line-height: 1.15;
    color:       var(--ghs-navy);
}

.personeel-contact__intro {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-base);
    line-height: 1.65;
    color:       var(--text-body);
    max-width:   none;
}

/* Intercedent card */
.personeel-intercedent-card {
    background:   var(--ghs-white);
    border-radius: var(--radius-lg);
    padding:      var(--space-5);
    display:      flex;
    gap:          20px;
    align-items:  center;
    box-shadow:   0 2px 8px rgba(6, 36, 63, 0.07);
}

.personeel-intercedent-card__photo {
    width:         68px;
    height:        68px;
    border-radius: 50%;
    object-fit:    cover;
    flex-shrink:   0;
    display:       block;
}

.personeel-intercedent-card__info {
    flex: 1;
}

.personeel-intercedent-card__name {
    margin:      0 0 2px;
    font-family: var(--font-display);
    font-size:   var(--fs-base);
    color:       var(--ghs-navy);
}

.personeel-intercedent-card__role {
    margin:      0 0 14px;
    font-family: var(--font-body);
    font-size:   var(--fs-xs);
    color:       var(--text-subtle);
    max-width:   none;
}

.personeel-intercedent-card__links {
    display:   flex;
    gap:       var(--space-3);
    flex-wrap: wrap;
}

.personeel-intercedent-card__link {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    font-family:     var(--font-body);
    font-size:       var(--fs-xs);
    font-weight:     var(--fw-bold);
    color:           var(--ghs-teal);
    text-decoration: none;
}

.personeel-intercedent-card__link:hover {
    color:           var(--ghs-navy);
    text-decoration: underline;
}

.personeel-contact__locations {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-xs);
    color:       var(--text-subtle);
    line-height: 1.6;
    max-width:   none;
}

.personeel-contact__locations a {
    color:           var(--ghs-teal);
    text-decoration: none;
}

.personeel-contact__locations a:hover {
    text-decoration: underline;
    color:           var(--ghs-navy);
}

/* Right: callback form */
.personeel-contact__form-panel {
    background:     var(--ghs-white);
    padding:        52px;   /* v2 spec: 52px all sides */
    display:        flex;
    flex-direction: column;
    gap:            20px;
    justify-content: center;
}

.personeel-contact__form-heading {
    margin:      0 0 4px;
    font-family: var(--font-display);
    font-size:   1.125rem;
    color:       var(--ghs-navy);
}

.personeel-contact__form-intro {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    color:       var(--text-body);
    line-height: 1.6;
    max-width:   none;
}

/* Form fields */
.personeel-callback-form {
    display:        flex;
    flex-direction: column;
    gap:            14px;
    margin-top:     var(--space-2);
}

.personeel-callback-form__field {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.personeel-callback-form__label {
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    font-weight: var(--fw-bold);
    color:       var(--ghs-navy);
}

.personeel-callback-form__input,
.personeel-callback-form__select {
    font-family:   var(--font-body);
    font-size:     var(--fs-base);
    border:        1.5px solid var(--ghs-line);
    border-radius: 10px;
    padding:       10px 14px;
    background:    var(--ghs-mist);
    color:         var(--text-body);
    outline:       none;
    width:         100%;
    transition:    border-color var(--dur-fast) var(--ease-standard);
    appearance:    none;
}

.personeel-callback-form__input:focus,
.personeel-callback-form__select:focus {
    border-color: var(--ghs-teal);
    outline:      2px solid rgba(0, 172, 168, 0.2);
    outline-offset: 0;
}

.personeel-callback-form__submit {
    width: 100%;
}

.personeel-contact__privacy {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-xs);
    color:       var(--text-subtle);
    text-align:  center;
    max-width:   none;
}

.personeel-contact__privacy a {
    color: var(--ghs-teal);
}

@media (min-width: 768px) {
    .personeel-contact__card {
        display:               grid;
        grid-template-columns: 1fr 1fr;
    }
}


/* ----------------------------------------------------------
   6. FAQ (layout wrapper -- item styles in faq.css)
   ---------------------------------------------------------- */

.personeel-faq {
    background: var(--ghs-mist);
}

.personeel-faq__container {
    max-width:   720px;
    margin:      0 auto;
    padding-left:  5%;
    padding-right: 5%;
}


/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .personeel-hero__photo-wrap img {
        animation: none;
    }
}