/* =============================================================
   GHS Theme -- assets/css/sections/werken-bij-ghs.css
   "Werken bij GHS" page -- all section styles.

   Load order: enqueued after ghs-faq (werken-bij-ghs.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 checklist
     3.  Collectiviteitskorting (image + text)
     4.  Testimonial (featured quote)
     5.  FAQ (layout wrapper only -- item styles in faq.css)

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


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

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

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

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

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

/* Hero grid (single column mobile, 2-col desktop) */
.werkenbij-hero__grid {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-7);
}

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

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

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

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

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

.werkenbij-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);
}

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

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

.werkenbij-hero__btn-secondary:hover svg {
    transform: translateX(4px);
}

/* Google rating strip */
.werkenbij-hero__rating {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    flex-wrap:   wrap;
}

.werkenbij-hero__stars {
    display:     flex;
    align-items: center;
    gap:         2px;
    color:       var(--ghs-orange);
}

.werkenbij-hero__rating-score {
    font-family: var(--font-display);
    font-size:   var(--fs-h4);
    font-weight: var(--fw-bold);
    color:       var(--ghs-navy);
    line-height: 1;
}

.werkenbij-hero__rating-label {
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    color:       var(--text-subtle);
}

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

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

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

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


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

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

.werkenbij-voordelen__header {
    text-align:    center;
    margin-bottom: var(--space-8);
    max-width:     640px;
    margin-left:   auto;
    margin-right:  auto;
}

.werkenbij-voordelen__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);
}

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

/* Two-column checklist grid */
.werkenbij-voordelen__grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   0;
    list-style:            none;
    margin:                0;
    padding:               0;

    /* Card effect */
    background:    var(--ghs-white);
    border:        1px solid var(--ghs-line);
    border-radius: var(--radius-lg);
    overflow:      hidden;
    box-shadow:    var(--shadow-sm);
}

.werkenbij-voordelen__item {
    display:     flex;
    align-items: center;
    gap:         var(--space-4);
    padding:     var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--ghs-line);
    transition:  background var(--dur-fast) var(--ease-standard);
}

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

.werkenbij-voordelen__item:hover {
    background: var(--ghs-mist);
}

/* Checkmark badge */
.werkenbij-voordelen__check {
    flex-shrink:     0;
    width:           32px;
    height:          32px;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.werkenbij-voordelen__check--teal {
    background: rgba(0, 172, 168, 0.12);
    color:      var(--ghs-teal);
}

.werkenbij-voordelen__check--navy {
    background: rgba(0, 56, 101, 0.08);
    color:      var(--ghs-navy);
}

.werkenbij-voordelen__check--orange {
    background: rgba(242, 140, 0, 0.10);
    color:      var(--ghs-orange);
}

.werkenbij-voordelen__label {
    font-family: var(--font-body);
    font-size:   var(--fs-base);
    font-weight: var(--fw-semi);
    color:       var(--ghs-navy);
    line-height: var(--lh-normal);
}

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

    /* Fix bottom border for last row (could be 1 or 2 items) */
    .werkenbij-voordelen__item:nth-last-child(-n+2) {
        border-bottom: none;
    }

    /* Restore bottom border for odd item if grid has odd total */
    .werkenbij-voordelen__item:nth-last-child(2):nth-child(odd) {
        border-bottom: 1px solid var(--ghs-line);
    }

    /* Vertical separator between columns */
    .werkenbij-voordelen__item:nth-child(odd) {
        border-right: 1px solid var(--ghs-line);
    }
}


/* ----------------------------------------------------------
   3. COLLECTIVITEITSKORTING
   ---------------------------------------------------------- */

.werkenbij-collectiviteit {
    background: var(--ghs-mist);
}

.werkenbij-collectiviteit__grid {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-7);
    align-items:    center;
}

/* Image */
.werkenbij-collectiviteit__image-wrap {
    border-radius: var(--radius-lg);
    overflow:      hidden;
    width:         100%;
    max-width:     520px;
    aspect-ratio:  5 / 4;
    flex-shrink:   0;
}

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

/* Text content */
.werkenbij-collectiviteit__content {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-5);
}

.werkenbij-collectiviteit__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;
}

.werkenbij-collectiviteit__heading {
    margin:      0;
    font-family: var(--font-display);
    font-size:   clamp(1.5rem, 2.5vw, var(--fs-h2));
    line-height: var(--lh-snug);
    color:       var(--ghs-navy);
    text-wrap:   pretty;
}

.werkenbij-collectiviteit__text {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-base);
    line-height: var(--lh-relaxed);
    color:       var(--text-body);
}

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

    .werkenbij-collectiviteit__image-wrap {
        max-width: none;
    }
}


/* ----------------------------------------------------------
   4. TESTIMONIAL (featured quote)
   ---------------------------------------------------------- */

.werkenbij-testimonial {
    background: var(--ghs-navy);
    padding:    var(--space-9) 0;
    position:   relative;
    overflow:   hidden;
}

/* Decorative radial glow */
.werkenbij-testimonial__deco {
    position:       absolute;
    top:            -80px;
    right:          -80px;
    width:          400px;
    height:         400px;
    border-radius:  50%;
    background:     radial-gradient(circle, rgba(0, 172, 168, 0.14) 0%, transparent 65%);
    pointer-events: none;
}

.werkenbij-testimonial__inner {
    max-width:  720px;
    margin:     0 auto;
    padding:    0 5%;
    text-align: center;
    display:    flex;
    flex-direction: column;
    align-items:    center;
    gap:            var(--space-6);
    position:       relative;
}

.werkenbij-testimonial__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;
}

.werkenbij-testimonial__quote-mark {
    color:   var(--ghs-teal);
    opacity: 0.25;
    flex-shrink: 0;
}

.werkenbij-testimonial__blockquote {
    margin:       0;
    font-family:  var(--font-display);
    font-size:    clamp(1.25rem, 2.5vw, 1.875rem);
    line-height:  1.35;
    color:        var(--ghs-white);
    text-wrap:    pretty;
    /* reset base.css blockquote defaults */
    padding-left: 0;
    border-left:  none;
}

/* Author strip */
.werkenbij-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.15);
    width:       100%;
    justify-content: center;
}

.werkenbij-testimonial__avatar {
    width:           52px;
    height:          52px;
    border-radius:   50%;
    overflow:        hidden;
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

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

.werkenbij-testimonial__avatar--navy  { background: var(--ghs-navy-700); }
.werkenbij-testimonial__avatar--teal  { background: var(--ghs-teal);     }
.werkenbij-testimonial__avatar--orange { background: var(--ghs-orange);  }

.werkenbij-testimonial__avatar-initials {
    font-family: var(--font-display);
    font-size:   var(--fs-base);
    color:       var(--ghs-white);
    font-weight: var(--fw-bold);
    line-height: 1;
}

.werkenbij-testimonial__author-name {
    margin:      0 0 2px;
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    font-weight: var(--fw-bold);
    color:       var(--ghs-white);
}

.werkenbij-testimonial__author-role {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-xs);
    color:       rgba(255, 255, 255, 0.5);
}


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

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

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


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

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