/* =============================================================
   GHS Theme -- assets/css/sections/over-ons.css
   "Over ons" page -- all section styles.

   Load order: enqueued after ghs-faq (inc/over-ons.php),
   so all tokens, base, and component styles are available.

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

   Sections:
     1.  Hero
     2.  Wat doen wij?
     3.  DNA van GHS (3 cards)
     4.  Historie
     5.  Vakgebieden (shared sectoren-grid -- no extra styles needed)
     6.  Actueel (2 news cards)
     7.  Onze verhalen (testimonial)
     8.  Contact CTA

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


/* =============================================================
   SHARED OVERONS SECTION UTILITY
   ============================================================= */

.overons-hero,
.overons-wat,
.overons-dna,
.overons-historie,
.overons-actueel,
.overons-verhalen,
.overons-contact-cta {
    /* Reset any Elementor padding */
}


/* =============================================================
   1. HERO
   ============================================================= */

.overons-hero {
    position:       relative;
    background:     linear-gradient(135deg, var(--ghs-navy-deep) 0%, var(--ghs-navy) 40%, var(--ghs-teal-600) 100%);
    margin-top:     -108px;
    padding-top:    228px;  /* 120px breathing room + 108px nav offset */
    padding-bottom: var(--space-9);
    overflow:       hidden;
}

/* Background image layer */
.overons-hero__bg {
    position:    absolute;
    inset:       0;
    z-index:     1;
    pointer-events: none;
}

.overons-hero__bg img {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    object-position: center;
    display:     block;
}

.overons-hero__bg-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(135deg, rgba(6, 36, 63, 0.82) 0%, rgba(0, 56, 101, 0.75) 50%, rgba(0, 138, 135, 0.55) 100%);
}

/* Content */
.overons-hero__inner {
    position:   relative;
    z-index:    2;
    padding-top: var(--space-7);
}

/* Breadcrumb */
.overons-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);
    text-decoration: none;
}

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

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

.overons-hero__breadcrumb svg {
    flex-shrink: 0;
    color:       rgba(255, 255, 255, 0.4);
}

.overons-hero__content {
    max-width: 680px;
}

/* Eyebrow */
.overons-hero__eyebrow {
    margin:         0 0 var(--space-3);
    font-family:    var(--font-display);
    font-size:      var(--fs-xs);
    font-weight:    var(--fw-bold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color:          var(--ghs-teal);
}

/* H1 */
.overons-hero__h1 {
    margin:      0 0 var(--space-5);
    font-family: var(--font-display);
    font-size:   clamp(2.25rem, 5vw, 3.5rem);
    font-weight: var(--fw-bold);
    line-height: 1.06;
    color:       var(--ghs-white);
    text-wrap:   pretty;
}

/* Intro */
.overons-hero__intro {
    margin:      0 0 var(--space-6);
    font-family: var(--font-body);
    font-size:   var(--fs-lg);
    line-height: var(--lh-relaxed);
    color:       rgba(255, 255, 255, 0.80);
    max-width:   56ch;
}

/* Actions row */
.overons-hero__actions {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         var(--space-4);
}

/* Google rating badge */
.overons-hero__rating {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    background:  rgba(255, 255, 255, 0.10);
    border:      1px solid rgba(255, 255, 255, 0.20);
    border-radius: var(--radius-pill);
    padding:     var(--space-2) var(--space-4);
    backdrop-filter: blur(8px);
}

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

.overons-hero__rating-stars svg {
    display: inline-block;
}

.overons-hero__rating-text {
    display:     flex;
    align-items: baseline;
    gap:         var(--space-1);
}

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

.overons-hero__rating-label {
    font-family: var(--font-body);
    font-size:   var(--fs-xs);
    color:       rgba(255, 255, 255, 0.70);
}


/* =============================================================
   2. WAT DOEN WIJ?
   ============================================================= */

.overons-wat {
    background: var(--ghs-white);
}

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

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

.overons-wat__heading {
    margin-bottom: var(--space-5);
    color:         var(--text-strong);
}

.overons-wat__body {
    font-family: var(--font-body);
    font-size:   var(--fs-base);
    line-height: var(--lh-relaxed);
    color:       var(--text-body);
    max-width:   60ch;
}

/* USP Checklist */
.overons-wat__usps {
    list-style: none;
    display:    flex;
    flex-direction: column;
    gap:        var(--space-4);
}

.overons-wat__usp {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    font-family: var(--font-body);
    font-size:   var(--fs-base);
    color:       var(--text-body);
}

.overons-wat__usp-icon {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    flex-shrink:      0;
    width:            32px;
    height:           32px;
    border-radius:    50%;
    background:       var(--ghs-teal);
    color:            var(--ghs-white);
    box-shadow:       0 2px 8px rgba(0, 172, 168, 0.25);
}

.overons-wat__usp-icon svg {
    display: block;
}

.overons-wat__usp-text {
    font-weight: var(--fw-semi);
    line-height: var(--lh-snug);
}


/* =============================================================
   3. DNA VAN GHS
   ============================================================= */

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

.overons-dna__header {
    text-align:    center;
    max-width:     600px;
    margin:        0 auto var(--space-8);
}

.overons-dna__eyebrow {
    margin:         0 0 var(--space-3);
    font-family:    var(--font-display);
    font-size:      var(--fs-xs);
    font-weight:    var(--fw-bold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color:          var(--ghs-teal);
    display:        block;
}

.overons-dna__heading {
    margin:      0 0 var(--space-4);
    font-family: var(--font-display);
    font-size:   clamp(1.75rem, 3vw, var(--fs-h2));
    font-weight: var(--fw-bold);
    color:       var(--ghs-white);
}

.overons-dna__intro {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-lg);
    line-height: var(--lh-relaxed);
    color:       rgba(255, 255, 255, 0.70);
    max-width:   52ch;
    margin-left: auto;
    margin-right: auto;
}

/* Grid */
.overons-dna__grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var(--space-5);
}

@media (min-width: 640px) {
    .overons-dna__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .overons-dna__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* DNA card */
.overons-dna-card {
    background:    var(--ghs-navy-800);
    border:        1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding:       var(--space-7) var(--space-6);
    display:       flex;
    flex-direction: column;
    gap:           var(--space-4);
    transition:    transform var(--dur-base) var(--ease-out),
                   box-shadow var(--dur-base);
}

.overons-dna-card:hover {
    transform:  translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Icon circle */
.overons-dna-card__icon {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    width:            56px;
    height:           56px;
    border-radius:    50%;
    font-family:      var(--font-display);
    font-size:        var(--fs-h3);
    font-weight:      var(--fw-bold);
    color:            var(--ghs-white);
    flex-shrink:      0;
}

.overons-dna-card--teal .overons-dna-card__icon   { background: var(--ghs-teal); }
.overons-dna-card--orange .overons-dna-card__icon  { background: var(--ghs-orange); }
.overons-dna-card--steel .overons-dna-card__icon   { background: var(--ghs-steel); }

.overons-dna-card__title {
    margin:      0;
    font-family: var(--font-display);
    font-size:   var(--fs-h3);
    font-weight: var(--fw-bold);
    color:       var(--ghs-white);
}

.overons-dna-card__text {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-base);
    line-height: var(--lh-relaxed);
    color:       rgba(255, 255, 255, 0.72);
}


/* =============================================================
   4. HISTORIE
   ============================================================= */

.overons-historie {
    background: var(--ghs-mist);
}

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

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

.overons-historie__heading {
    margin-bottom: var(--space-5);
    color:         var(--text-strong);
}

.overons-historie__body p {
    font-family: var(--font-body);
    font-size:   var(--fs-base);
    line-height: var(--lh-relaxed);
    color:       var(--text-body);
    max-width:   58ch;
    margin-bottom: var(--space-4);
}

.overons-historie__body p:last-child {
    margin-bottom: var(--space-6);
}

/* CTA link */
.overons-historie__cta {
    display:         inline-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-navy);
    text-decoration: none;
    transition:      color var(--dur-fast) var(--ease-standard),
                     gap   var(--dur-base) var(--ease-out);
}

.overons-historie__cta:hover {
    color: var(--ghs-teal);
    gap:   var(--space-3);
}

.overons-historie__cta svg {
    flex-shrink:  0;
    transition:   transform var(--dur-base) var(--ease-out);
}

.overons-historie__cta:hover svg {
    transform: translateX(4px);
}

/* Image */
.overons-historie__image-col {
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.overons-historie__image {
    border-radius: var(--radius-lg);
    box-shadow:    var(--shadow-lg);
    width:         100%;
    height:        auto;
    object-fit:    cover;
}

/* Timeline placeholder (shown when no image is uploaded) */
.overons-historie__image-col--placeholder {
    padding: var(--space-6);
}

.overons-historie__timeline {
    display:        flex;
    flex-direction: column;
    gap:            0;
    position:       relative;
}

.overons-historie__timeline::before {
    content:    '';
    position:   absolute;
    left:       68px;
    top:        24px;
    bottom:     24px;
    width:      2px;
    background: var(--ghs-line);
}

.overons-historie__milestone {
    display:     grid;
    grid-template-columns: 80px 16px 1fr;
    align-items: center;
    gap:         var(--space-4);
    padding:     var(--space-4) 0;
    position:    relative;
}

.overons-historie__milestone-year {
    font-family: var(--font-display);
    font-size:   var(--fs-h4);
    font-weight: var(--fw-bold);
    color:       var(--ghs-navy);
    text-align:  right;
}

.overons-historie__milestone-dot {
    width:         16px;
    height:        16px;
    border-radius: 50%;
    background:    var(--ghs-teal);
    border:        3px solid var(--ghs-mist);
    box-shadow:    0 0 0 2px var(--ghs-teal);
    position:      relative;
    z-index:       1;
}

.overons-historie__milestone-label {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    color:       var(--text-body);
    max-width:   none;
}


/* =============================================================
   6. ACTUEEL
   ============================================================= */

.overons-actueel {
    background: var(--ghs-white);
}

.overons-actueel__header {
    display:         flex;
    flex-direction:  column;
    gap:             var(--space-4);
    margin-bottom:   var(--space-7);
}

@media (min-width: 640px) {
    .overons-actueel__header {
        flex-direction:  row;
        align-items:     flex-end;
        justify-content: space-between;
    }
}

.overons-actueel__heading {
    margin-bottom: 0;
    color:         var(--text-strong);
}

/* Cards grid */
.overons-actueel__grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var(--space-5);
}

@media (min-width: 640px) {
    .overons-actueel__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Article card */
.overons-actueel-card {
    background:    var(--surface-card);
    border:        1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow:      hidden;
    display:       flex;
    flex-direction: column;
    box-shadow:    var(--shadow-sm);
    transition:    transform var(--dur-base) var(--ease-out),
                   box-shadow var(--dur-base);
}

.overons-actueel-card:hover {
    transform:  translateY(-3px);
    box-shadow: var(--shadow-md);
}

.overons-actueel-card__image-wrap {
    height:      200px;
    overflow:    hidden;
    flex-shrink: 0;
}

.overons-actueel-card__image-wrap img {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    display:     block;
    transition:  transform 400ms var(--ease-out);
}

.overons-actueel-card:hover .overons-actueel-card__image-wrap img {
    transform: scale(1.04);
}

/* Placeholder image slot when no featured image exists */
.overons-actueel-card__image-wrap--empty {
    background: linear-gradient(135deg, var(--ghs-navy-50) 0%, var(--ghs-teal-200) 100%);
}

.overons-actueel-card__body {
    padding:        var(--space-6);
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
    flex:           1;
}

.overons-actueel-card__date {
    font-family:    var(--font-body);
    font-size:      var(--fs-xs);
    font-weight:    var(--fw-semi);
    color:          var(--text-subtle);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    display:        block;
}

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

.overons-actueel-card__title a {
    color:           inherit;
    text-decoration: none;
}

.overons-actueel-card__title a:hover {
    color: var(--ghs-teal);
}

.overons-actueel-card__excerpt {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    line-height: var(--lh-relaxed);
    color:       var(--text-body);
    flex:        1;
    max-width:   none;
}

.overons-actueel-card__readmore {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--space-2);
    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:      color var(--dur-fast) var(--ease-standard),
                     gap   var(--dur-base) var(--ease-out);
}

.overons-actueel-card__readmore:hover {
    color: var(--ghs-teal);
    gap:   var(--space-3);
}

.overons-actueel-card__readmore svg {
    flex-shrink: 0;
    transition:  transform var(--dur-base) var(--ease-out);
}

.overons-actueel-card__readmore:hover svg {
    transform: translateX(4px);
}


/* =============================================================
   7. ONZE VERHALEN
   ============================================================= */

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

.overons-verhalen__header {
    text-align:    center;
    margin-bottom: var(--space-7);
}

.overons-verhalen__eyebrow {
    margin:         0 0 var(--space-3);
    font-family:    var(--font-display);
    font-size:      var(--fs-xs);
    font-weight:    var(--fw-bold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color:          var(--ghs-teal);
    display:        block;
}

.overons-verhalen__heading {
    margin:      0;
    font-family: var(--font-display);
    font-size:   clamp(1.75rem, 3vw, var(--fs-h2));
    font-weight: var(--fw-bold);
    color:       var(--ghs-white);
}

/* Large card */
.overons-verhalen__card {
    max-width:     760px;
    margin:        0 auto;
    background:    var(--ghs-navy-800);
    border:        1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-xl);
    padding:       var(--space-7) var(--space-7);
    display:       flex;
    flex-direction: column;
    gap:           var(--space-6);
    box-shadow:    var(--shadow-lg);
}

@media (min-width: 640px) {
    .overons-verhalen__card {
        padding: var(--space-8);
    }
}

.overons-verhalen__quote-icon {
    color:      var(--ghs-teal);
    opacity:    0.60;
    flex-shrink: 0;
}

.overons-verhalen__quote {
    margin:      0;
    font-family: var(--font-display);
    font-size:   clamp(1.1rem, 2vw, var(--fs-h4));
    line-height: var(--lh-relaxed);
    color:       var(--ghs-white);
    border:      none;
    padding:     0;
}

.overons-verhalen__author {
    display:     flex;
    align-items: center;
    gap:         var(--space-4);
    margin:      0;
}

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

.overons-verhalen__avatar img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.overons-verhalen__avatar-initials {
    font-family: var(--font-display);
    font-size:   var(--fs-base);
    font-weight: var(--fw-bold);
    color:       var(--ghs-white);
}

.overons-verhalen__author-name {
    margin:      0;
    font-family: var(--font-display);
    font-size:   var(--fs-base);
    font-weight: var(--fw-bold);
    color:       var(--ghs-white);
}

.overons-verhalen__author-role {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    color:       rgba(255, 255, 255, 0.65);
}


/* =============================================================
   8. CONTACT CTA
   ============================================================= */

.overons-contact-cta {
    background: var(--ghs-mist);
}

.overons-contact-cta__inner {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-7);
}

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

.overons-contact-cta__text {
    flex: 1;
    max-width: 520px;
}

.overons-contact-cta__heading {
    margin-bottom: var(--space-4);
    color:         var(--text-strong);
}

.overons-contact-cta__body {
    margin-bottom: var(--space-6);
    font-family:   var(--font-body);
    font-size:     var(--fs-lg);
    line-height:   var(--lh-relaxed);
    color:         var(--text-body);
    max-width:     52ch;
}

.overons-contact-cta__actions {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--space-3);
}

/* Contact persons column */
.overons-contact-cta__persons {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--space-4);
    flex-shrink: 0;
}

/* Person card */
.overons-person-card {
    display:       flex;
    align-items:   center;
    gap:           var(--space-4);
    background:    var(--surface-card);
    border:        1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding:       var(--space-4) var(--space-5);
    box-shadow:    var(--shadow-sm);
    min-width:     180px;
}

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

.overons-person-card__avatar--navy  { background: var(--ghs-navy); }
.overons-person-card__avatar--teal  { background: var(--ghs-teal); }

.overons-person-card__avatar img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.overons-person-card__initials {
    font-family: var(--font-display);
    font-size:   var(--fs-base);
    font-weight: var(--fw-bold);
    color:       var(--ghs-white);
}

.overons-person-card__info {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-1);
}

.overons-person-card__name {
    margin:      0;
    font-family: var(--font-display);
    font-size:   var(--fs-base);
    font-weight: var(--fw-bold);
    color:       var(--text-strong);
}

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


/* =============================================================
   MOBILE OVERRIDES  (max-width: 480px)
   ============================================================= */

@media (max-width: 480px) {
    .overons-hero {
        padding-top:    208px;  /* 100px breathing room + 108px nav offset */
        padding-bottom: var(--space-7);
    }

    .overons-hero__rating {
        width:           100%;
        justify-content: center;
    }

    .overons-dna-card {
        padding: var(--space-6) var(--space-5);
    }

    .overons-verhalen__card {
        padding: var(--space-6) var(--space-5);
    }

    .overons-contact-cta__persons {
        flex-direction: column;
    }

    .overons-person-card {
        min-width: auto;
    }
}


/* =============================================================
   REDUCED MOTION
   ============================================================= */

@media (prefers-reduced-motion: reduce) {
    .overons-actueel-card,
    .overons-dna-card {
        transition: none;
    }
    .overons-actueel-card:hover,
    .overons-dna-card:hover {
        transform: none;
    }
}