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

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

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

   Sections:
     1.  Hero          -- zoekformulier + Google rating
     2.  Meerwaarde    -- USP checklist split layout
     3.  Werken & Leren -- text + image
     4.  Testimonials  -- 3-card grid
     5.  Open sollicitatie -- form split layout

   (Branches uses the shared .ghs-sectoren-grid-section + .ghs-sectors-grid
    styles from components/cards.css -- no extra CSS needed here.)

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


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

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

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

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

/* Grid */
.werk-hero__grid {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-7);
}

/* Text column */
.werk-hero__text {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-5);
}

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

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

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

.werk-hero__cta-row {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--space-3);
}

/* Search form */
.werk-hero__search-form {
    background:    var(--ghs-white);
    border:        1px solid var(--ghs-line);
    border-radius: var(--radius-lg);
    padding:       var(--space-5);
    display:       flex;
    flex-direction: column;
    gap:           var(--space-4);
    box-shadow:    var(--shadow-sm);
}

.werk-hero__search-fields {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
}

.werk-hero__search-field {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    flex:           1;
}

.werk-hero__search-label {
    font-family: var(--font-body);
    font-size:   var(--fs-xs);
    font-weight: var(--fw-bold);
    color:       var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.werk-hero__search-input-wrap {
    position: relative;
}

.werk-hero__search-icon {
    position:  absolute;
    left:      12px;
    top:       50%;
    transform: translateY(-50%);
    color:     var(--text-muted);
    pointer-events: none;
    flex-shrink: 0;
}

.werk-hero__search-input {
    font-family:   var(--font-body);
    font-size:     var(--fs-base);
    border:        1.5px solid var(--ghs-line);
    border-radius: var(--radius-md);
    padding:       10px 14px 10px 38px;
    background:    var(--ghs-mist);
    color:         var(--text-body);
    outline:       none;
    width:         100%;
    transition:    border-color var(--dur-fast) var(--ease-standard),
                   background   var(--dur-fast) var(--ease-standard);
    appearance:    none;
    height:        44px;
}

.werk-hero__search-input::placeholder {
    color: var(--text-muted);
}

.werk-hero__search-input:focus {
    border-color: var(--ghs-teal);
    background:   var(--ghs-white);
    outline:      2px solid rgba(0, 172, 168, 0.2);
    outline-offset: 0;
}

.werk-hero__search-submit {
    width: 100%;
}

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

.werk-hero__rating-logo {
    flex-shrink: 0;
}

.werk-hero__rating-stars {
    display:     flex;
    align-items: center;
    gap:         2px;
    flex-shrink: 0;
}

.werk-hero__rating-score {
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    font-weight: var(--fw-bold);
    color:       var(--ghs-navy);
}

.werk-hero__rating-count {
    font-family: var(--font-body);
    font-size:   var(--fs-xs);
    color:       var(--text-subtle);
}

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

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

.werk-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: 600px) {
    .werk-hero__search-fields {
        flex-direction: row;
        flex-wrap:      wrap;
    }

    .werk-hero__search-field {
        min-width: 140px;
    }
}

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

    .werk-hero__search-fields {
        flex-direction: row;
        flex-wrap:      nowrap;
    }

    .werk-hero__search-submit {
        width: auto;
        white-space: nowrap;
    }
}


/* ----------------------------------------------------------
   2. MEERWAARDE
   ---------------------------------------------------------- */

.werk-meerwaarde {
    background: var(--ghs-white);
}

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

/* Left: navy panel */
.werk-meerwaarde__quote-panel {
    background:     var(--ghs-navy);
    padding:        56px 52px;
    display:        flex;
    flex-direction: column;
    justify-content: space-between;
    gap:            48px;
    position:       relative;
    overflow:       hidden;
}

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

.werk-meerwaarde__quote-inner {
    position: relative;
}

.werk-meerwaarde__eyebrow {
    display:        block;
    margin:         0 0 var(--space-4);
    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);
}

.werk-meerwaarde__heading {
    margin:      0 0 var(--space-4);
    font-family: var(--font-display);
    font-size:   clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.1;
    color:       var(--ghs-white);
    text-wrap:   pretty;
}

.werk-meerwaarde__intro {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-base);
    line-height: var(--lh-relaxed);
    color:       rgba(255, 255, 255, 0.7);
}

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

.werk-meerwaarde__cta-wrap {
    position: relative;
}

/* Right: checklist panel */
.werk-meerwaarde__list-panel {
    background:     var(--ghs-white);
    padding:        56px 52px;
    display:        flex;
    flex-direction: column;
    justify-content: center;
}

.werk-meerwaarde__items {
    display:        flex;
    flex-direction: column;
    flex:           1;
    list-style:     none;
    margin:         0;
    padding:        0;
}

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

.werk-meerwaarde__item:last-child {
    border-bottom: none;
}

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

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

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

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

.werk-meerwaarde__item-text {
    flex: 1;
}

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

.werk-meerwaarde__item-desc {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    line-height: 1.6;
    color:       var(--text-body);
}

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

@media (max-width: 767px) {
    .werk-meerwaarde__quote-panel,
    .werk-meerwaarde__list-panel {
        padding: var(--space-7) var(--space-6);
    }
}


/* ----------------------------------------------------------
   3. WERKEN & LEREN
   ---------------------------------------------------------- */

.werk-werken-leren {
    background: var(--ghs-white);
}

.werk-werken-leren__grid {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-7);
}

/* Text column */
.werk-werken-leren__text {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-5);
}

.werk-werken-leren__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;
}

.werk-werken-leren__heading {
    margin:      0;
    font-family: var(--font-display);
    font-size:   clamp(1.75rem, 3vw, 2.5rem);
    line-height: 1.1;
    color:       var(--ghs-navy);
    text-wrap:   pretty;
}

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

/* USP badge list */
.werk-werken-leren__badges {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
    list-style:     none;
    margin:         0;
    padding:        0;
}

.werk-werken-leren__badge {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    font-weight: var(--fw-bold);
    color:       var(--ghs-navy);
}

.werk-werken-leren__badge svg {
    flex-shrink: 0;
    color:       var(--ghs-teal);
}

/* Image column */
.werk-werken-leren__image-wrap {
    position:      relative;
    border-radius: 20px;
    overflow:      visible;
    flex-shrink:   0;
}

.werk-werken-leren__image-wrap img {
    display:       block;
    width:         100%;
    height:        auto;
    border-radius: 20px;
    object-fit:    cover;
    position:      relative;
    z-index:       1;
}

.werk-werken-leren__image-blob {
    position:      absolute;
    bottom:        -20px;
    right:         -20px;
    width:         200px;
    height:        200px;
    border-radius: 50%;
    background:    rgba(0, 172, 168, 0.12);
    z-index:       0;
    pointer-events: none;
}

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

    .werk-werken-leren__image-wrap {
        order: 2;
    }
}


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

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

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

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

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

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

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

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

/* Testimonial card */
.werk-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);
}

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

.werk-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;
    padding-left: 0;
    border-left:  none;
}

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

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

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

.werk-testimonial-card__avatar--navy   { background: var(--ghs-navy);   }
.werk-testimonial-card__avatar--teal   { background: var(--ghs-teal);   }
.werk-testimonial-card__avatar--orange { background: var(--ghs-orange); }

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

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

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


/* ----------------------------------------------------------
   5. OPEN SOLLICITATIE
   ---------------------------------------------------------- */

.werk-open-sollicitatie {
    background: var(--ghs-white);
}

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

/* Left: intro panel */
.werk-open-sollicitatie__intro-panel {
    background:     var(--ghs-navy);
    padding:        52px;
    display:        flex;
    flex-direction: column;
    gap:            var(--space-5);
    position:       relative;
    overflow:       hidden;
}

.werk-open-sollicitatie__intro-panel::before {
    content:        '';
    position:       absolute;
    top:            -80px;
    right:          -80px;
    width:          280px;
    height:         280px;
    border-radius:  50%;
    background:     radial-gradient(circle, rgba(0, 172, 168, 0.15) 0%, transparent 65%);
    pointer-events: none;
}

.werk-open-sollicitatie__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);
}

.werk-open-sollicitatie__heading {
    margin:      0;
    font-family: var(--font-display);
    font-size:   clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.15;
    color:       var(--ghs-white);
    text-wrap:   pretty;
}

.werk-open-sollicitatie__intro {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-base);
    line-height: var(--lh-relaxed);
    color:       rgba(255, 255, 255, 0.7);
}

/* Trust list */
.werk-open-sollicitatie__trust {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
    list-style:     none;
    margin:         0;
    padding:        0;
    margin-top:     auto;
}

.werk-open-sollicitatie__trust li {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    color:       rgba(255, 255, 255, 0.8);
}

.werk-open-sollicitatie__trust svg {
    flex-shrink: 0;
    color:       var(--ghs-teal);
}

/* Right: form panel */
.werk-open-sollicitatie__form-panel {
    background:     var(--ghs-white);
    padding:        52px;
    display:        flex;
    flex-direction: column;
    gap:            var(--space-5);
}

.werk-open-sollicitatie__form-heading {
    margin:      0;
    font-family: var(--font-display);
    font-size:   1.25rem;
    color:       var(--ghs-navy);
}

/* Form fields */
.werk-open-sol-form {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-4);
}

.werk-open-sol-form__row {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-4);
}

.werk-open-sol-form__field {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    flex:           1;
}

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

.werk-open-sol-form__label span {
    color: var(--ghs-orange);
}

.werk-open-sol-form__input,
.werk-open-sol-form__select,
.werk-open-sol-form__textarea {
    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),
                   background   var(--dur-fast) var(--ease-standard);
    appearance:    none;
}

.werk-open-sol-form__input:focus,
.werk-open-sol-form__select:focus,
.werk-open-sol-form__textarea:focus {
    border-color: var(--ghs-teal);
    background:   var(--ghs-white);
    outline:      2px solid rgba(0, 172, 168, 0.2);
    outline-offset: 0;
}

.werk-open-sol-form__textarea {
    resize:     vertical;
    min-height: 110px;
}

/* Select wrapper (for custom chevron) */
.werk-open-sol-form__select-wrap {
    position: relative;
}

.werk-open-sol-form__select {
    padding-right: 36px;
    cursor:        pointer;
}

.werk-open-sol-form__select-chevron {
    position:       absolute;
    right:          12px;
    top:            50%;
    transform:      translateY(-50%);
    color:          var(--text-muted);
    pointer-events: none;
}

/* CV upload */
.werk-open-sol-form__upload {
    display:        flex;
    align-items:    center;
    gap:            var(--space-3);
    flex-wrap:      wrap;
}

.werk-open-sol-form__file {
    position: absolute;
    width:    1px;
    height:   1px;
    opacity:  0;
    overflow: hidden;
    clip:     rect(0 0 0 0);
}

.werk-open-sol-form__upload-label {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--space-2);
    padding:         10px 18px;
    border:          1.5px solid var(--ghs-line-strong);
    border-radius:   var(--radius-md);
    font-family:     var(--font-body);
    font-size:       var(--fs-sm);
    font-weight:     var(--fw-bold);
    color:           var(--ghs-navy);
    background:      var(--ghs-mist);
    cursor:          pointer;
    transition:      border-color var(--dur-base) var(--ease-standard),
                     background   var(--dur-base) var(--ease-standard);
}

.werk-open-sol-form__upload-label:hover {
    border-color: var(--ghs-navy);
    background:   var(--ghs-paper);
}

.werk-open-sol-form__file-hint {
    font-family: var(--font-body);
    font-size:   var(--fs-xs);
    color:       var(--text-subtle);
}

/* Consent */
.werk-open-sol-form__field--consent {
    flex-direction: row;
    align-items:    flex-start;
}

.werk-open-sol-form__consent-label {
    display:     flex;
    align-items: flex-start;
    gap:         var(--space-3);
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    color:       var(--text-body);
    cursor:      pointer;
    line-height: 1.5;
}

.werk-open-sol-form__checkbox {
    width:         18px;
    height:        18px;
    flex-shrink:   0;
    margin-top:    1px;
    accent-color:  var(--ghs-teal);
    cursor:        pointer;
}

.werk-open-sol-form__consent-label a {
    color:           var(--ghs-teal);
    text-decoration: underline;
}

.werk-open-sol-form__consent-label a:hover {
    color: var(--ghs-navy);
}

.werk-open-sol-form__submit {
    width: 100%;
}

@media (min-width: 520px) {
    .werk-open-sol-form__row {
        flex-direction: row;
    }

    .werk-open-sol-form__submit {
        width: auto;
    }
}

@media (min-width: 768px) {
    .werk-open-sollicitatie__card {
        display:               grid;
        grid-template-columns: 5fr 7fr;
    }
}

@media (max-width: 767px) {
    .werk-open-sollicitatie__intro-panel,
    .werk-open-sollicitatie__form-panel {
        padding: var(--space-7) var(--space-6);
    }
}


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

@media (prefers-reduced-motion: reduce) {
    .werk-hero__photo-wrap img,
    .werk-werken-leren__image-wrap img {
        animation: none;
    }
}