/* =============================================================
   GHS Theme -- assets/css/sections/home.css
   Homepage section styles.
   Mobile-first: base rules target 375px, enhanced upward.

   Load order: depends on ghs-theme-main, enqueued only on is_front_page()
   via inc/homepage.php.

   Sections:
     1. Hero
     2. Doelgroepen (3 cards, navy bg)
     3. Sectoren-grid (shared component, no extra styles needed here)
     4. Waarom GHS (tabs)
     5. Over ons
     6. Pre-footer CTA

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


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

/*
 * The hero must bleed full-width from the very top edge of the
 * viewport so the floating nav appears over the gradient.
 * Negative margin-top pulls the hero up by exactly the main
 * padding-top (108px) defined in base.css .ghs-page-content.
 */
.ghs-hero {
    position:         relative;
    min-height:       75svh;
    overflow:         hidden;
    background:       linear-gradient(-45deg, #003865 0%, #053963 18%, #103467 36%, #007a7a 58%, #008a87 74%, #00aca8 90%, #003865 100%);
    background-size:  350% 350%;
    animation:        gradDrift 16s ease-in-out infinite;
    margin-top:       -108px;
}

/* Animated blobs */
.ghs-hero__blob {
    position:       absolute;
    border-radius:  50%;
    pointer-events: none;
    will-change:    transform;
    z-index:        2;
}

.ghs-hero__blob--a {
    top:        -120px;
    left:       10%;
    width:      500px;
    height:     500px;
    background: radial-gradient(circle, rgba(0, 172, 168, 0.2) 0%, transparent 62%);
    animation:  blobA 13s ease-in-out infinite;
}

.ghs-hero__blob--b {
    bottom:     -100px;
    left:       -80px;
    width:      420px;
    height:     420px;
    background: radial-gradient(circle, rgba(5, 57, 99, 0.55) 0%, transparent 62%);
    animation:  blobB 17s ease-in-out infinite;
}

.ghs-hero__blob--c {
    top:        48%;
    left:       22%;
    width:      160px;
    height:     160px;
    background: radial-gradient(circle, rgba(242, 140, 0, 0.14) 0%, transparent 62%);
    animation:  blobC 9s ease-in-out infinite 1.5s;
}

.ghs-hero__blob--d {
    top:        25%;
    left:       32%;
    width:      240px;
    height:     240px;
    background: radial-gradient(circle, rgba(0, 172, 168, 0.1) 0%, transparent 55%);
    animation:  blobA 11s ease-in-out infinite 3s;
}

/* Hero image (GHS clip-path, right side) */
.ghs-hero__image-wrap {
    position:   absolute;
    right:      -4%;
    top:        0;
    width:      50%;
    height:     112%;
    clip-path:  url(#ghs-hero-clip);
    z-index:    3;
}

.ghs-hero__image-wrap img {
    width:            100%;
    height:           100%;
    object-fit:       cover;
    object-position:  center top;
    display:          block;
    animation:        kenBurns 18s ease-in-out infinite alternate;
}

/* Hero text content */
.ghs-hero__content {
    position:    relative;
    z-index:     5;
    max-width:   var(--container-max);
    margin:      0 auto;
    padding:     108px 5% 60px;
    width:       100%;
    display:     flex;
    align-items: center;
    min-height:  75svh;
}

.ghs-hero__inner {
    max-width:      680px;
    padding-right:  90px;
    display:        flex;
    flex-direction: column;
    gap:            var(--space-6);
}

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

.ghs-hero__heading {
    margin:      0;
    font-family: var(--font-display);
    font-size:   clamp(2.75rem, 5vw, 4.75rem);
    line-height: 1.04;
    color:       var(--ghs-white);
    text-wrap:   pretty;
}

.ghs-hero__intro {
    margin:      0;
    max-width:   420px;
    font-family: var(--font-body);
    font-size:   var(--fs-lg);
    line-height: var(--lh-relaxed);
    color:       rgba(255, 255, 255, 0.78);
}

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

/* Mobile: hide image on narrow viewports, show full text */
@media (max-width: 600px) {
    .ghs-hero__image-wrap {
        display: none;
    }

    .ghs-hero__inner {
        max-width:     100%;
        padding-right: 0;
    }

    .ghs-hero__content {
        padding-top:    88px;
        padding-bottom: 48px;
    }
}


/* =============================================================
   2. DOELGROEPEN (3 cards, navy background)
   ============================================================= */

.ghs-doelgroepen {
    background: var(--ghs-navy);
    padding:    var(--space-9) 5%;
}

.ghs-doelgroepen__grid {
    max-width:             var(--container-max);
    margin:                0 auto;
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var(--space-5);
}

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

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

/* Card */
.ghs-doelgroep-card {
    background:     var(--ghs-white);
    border-radius:  var(--radius-lg);
    overflow:       hidden;
    box-shadow:     var(--shadow-md);
    display:        flex;
    flex-direction: column;
    transition:     transform var(--dur-base) var(--ease-out),
                    box-shadow var(--dur-base);
    text-decoration: none;
    color:          inherit;
}

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

.ghs-doelgroep-card__media {
    position:    relative;
    overflow:    hidden;
    height:      220px;
    flex-shrink: 0;
}

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

.ghs-doelgroep-card:hover .ghs-doelgroep-card__media img {
    transform: scale(1.04);
}

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

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

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

.ghs-doelgroep-card__desc {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-base);
    line-height: var(--lh-normal);
    color:       var(--text-body);
    flex:        1;
}

.ghs-doelgroep-card__link {
    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);
}

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

.ghs-doelgroep-card__link:hover svg,
.ghs-doelgroep-card__link:hover .ghs-arrow {
    transform: translateX(4px);
}


/* =============================================================
   4. WAAROM GHS (tabs)
   ============================================================= */

.ghs-waarom {
    background: var(--ghs-mist);
    padding:    var(--space-9) 5%;
}

.ghs-waarom__container {
    max-width: var(--container-max);
    margin:    0 auto;
}

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

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

.ghs-waarom__heading {
    margin:      0 0 var(--space-4);
    font-family: var(--font-display);
    font-weight: 800;
    font-size:   var(--fs-h1);
    line-height: var(--lh-snug);
    color:       var(--text-strong);
}

.ghs-waarom__intro {
    margin:      0 0 var(--space-6);
    font-family: var(--font-body);
    font-size:   var(--fs-lg);
    line-height: var(--lh-relaxed);
    color:       var(--text-body);
}

/* Tablist */
.ghs-waarom__tablist {
    display:       flex;
    justify-content: center;
    gap:           var(--space-7);
    margin-bottom: var(--space-8);
    border-bottom: 1px solid var(--ghs-line-strong);
    overflow-x:    auto;
    scrollbar-width: none;
}

.ghs-waarom__tablist::-webkit-scrollbar {
    display: none;
}

.ghs-waarom__tab {
    background:      none;
    border:          none;
    border-bottom:   2px solid transparent;
    padding-bottom:  16px;
    padding-left:    0;
    padding-right:   0;
    cursor:          pointer;
    font-family:     var(--font-display);
    font-weight:     600;
    font-size:       1.0625rem;
    letter-spacing:  0.01em;
    color:           var(--ghs-slate-500);
    transition:      color 180ms var(--ease-standard),
                     border-color 180ms var(--ease-standard);
    white-space:     nowrap;
    outline:         none;
}

.ghs-waarom__tab[aria-selected="true"] {
    border-bottom-color: var(--ghs-teal);
    color:               var(--ghs-navy);
}

.ghs-waarom__tab:focus-visible {
    outline:        2px solid var(--ghs-teal);
    outline-offset: 4px;
    border-radius:  2px;
}

/* Tab panels */
.ghs-waarom__panel {
    animation: fadeslide 220ms cubic-bezier(.16, 1, .3, 1) both;
}

/* Panel layout: text + image side by side */
.ghs-waarom__panel-inner {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-7);
}

@media (min-width: 768px) {
    .ghs-waarom__panel-inner {
        display:               grid;
        grid-template-columns: 3fr 2fr;
        gap:                   var(--space-9);
        align-items:           center;
    }
}

.ghs-waarom__panel-text {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-5);
}

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

.ghs-waarom__panel-heading {
    margin:      0;
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size:   clamp(1.5rem, 2.5vw, var(--fs-h2));
    line-height: var(--lh-snug);
    color:       var(--text-strong);
    text-wrap:   pretty;
}

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

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

.ghs-waarom__bullet {
    display:     flex;
    align-items: flex-start;
    gap:         var(--space-3);
}

.ghs-waarom__bullet-icon {
    flex-shrink:     0;
    width:           22px;
    height:          22px;
    border-radius:   50%;
    background:      var(--ghs-teal);
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin-top:      2px;
}

.ghs-waarom__bullet-text {
    font-family: var(--font-body);
    font-size:   var(--fs-base);
    color:       var(--text-body);
    line-height: var(--lh-normal);
}

/* Panel image */
.ghs-waarom__panel-image {
    border-radius: var(--radius-lg);
    overflow:      hidden;
    box-shadow:    0 12px 32px rgba(6, 36, 63, 0.18);
}

.ghs-waarom__panel-image img {
    width:        100%;
    aspect-ratio: 4 / 3;
    object-fit:   cover;
    display:      block;
}


/* =============================================================
   5. OVER ONS
   ============================================================= */

.ghs-over-ons {
    background: var(--ghs-navy);
    overflow:   hidden;
    position:   relative;
}

.ghs-over-ons__grid {
    display:               flex;
    flex-direction:        column;
    min-height:            520px;
}

@media (min-width: 768px) {
    .ghs-over-ons__grid {
        display:               grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap:                   0 90px;
        align-items:           stretch;
    }
}

/* Image column */
.ghs-over-ons__image-col {
    position:   relative;
    min-height: 320px;
    overflow:   hidden;
}

@media (min-width: 768px) {
    .ghs-over-ons__image-col {
        min-height: 520px;
    }
}

.ghs-over-ons__image-wrap {
    clip-path: url(#ghs-about-clip);
    position:  absolute;
    inset:     0;
    width:     115%;
}

.ghs-over-ons__image-wrap img {
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center top;
    display:         block;
}

/* Floating pill */
.ghs-over-ons__pill {
    position:     absolute;
    bottom:       var(--space-6);
    left:         5%;
    background:   var(--ghs-white);
    border-radius: 100px;
    padding:      14px 24px;
    display:      inline-flex;
    flex-wrap:    wrap;
    gap:          var(--space-4);
    align-items:  center;
    box-shadow:   0 8px 24px rgba(6, 36, 63, 0.3);
    white-space:  nowrap;
    z-index:      2;
}

.ghs-over-ons__pill-item {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    font-weight: 600;
    color:       var(--ghs-navy);
    white-space: nowrap;
}

.ghs-over-ons__pill-divider {
    width:       1px;
    height:      20px;
    background:  rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
}

/* Text column */
.ghs-over-ons__text-col {
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    gap:             var(--space-5);
    padding:         var(--space-7) 5%;
}

@media (min-width: 768px) {
    .ghs-over-ons__text-col {
        padding: var(--space-9) 5% var(--space-9) 50px;
    }
}

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

.ghs-over-ons__heading {
    margin:         0;
    font-family:    var(--font-display);
    font-weight:    800;
    font-size:      clamp(2rem, 3vw, 3rem);
    line-height:    1.1;
    letter-spacing: -0.02em;
    color:          var(--ghs-white);
    text-wrap:      pretty;
}

.ghs-over-ons__text {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-lg);
    line-height: var(--lh-relaxed);
    color:       rgba(255, 255, 255, 0.8);
}

/* Statistics bar */
.ghs-over-ons__stats {
    display:     flex;
    gap:         var(--space-6);
    margin-top:  var(--space-3);
    padding-top: var(--space-5);
    border-top:  1px solid rgba(255, 255, 255, 0.15);
    flex-wrap:   wrap;
}

.ghs-over-ons__stat-value {
    margin:      0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size:   var(--fs-h2);
    color:       var(--ghs-white);
    line-height: 1.1;
}

.ghs-over-ons__stat-label {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-xs);
    color:       rgba(255, 255, 255, 0.55);
}


/* =============================================================
   6. PRE-FOOTER CTA
   ============================================================= */

.ghs-prefooter-cta {
    background: var(--ghs-white);
    padding:    var(--space-9) 5%;
    position:   relative;
    overflow:   hidden;
    text-align: center;
}

/* Decorative background shape */
.ghs-prefooter-cta__bg-shape {
    position:       absolute;
    right:          -3%;
    bottom:         -15%;
    width:          32%;
    height:         auto;
    opacity:        0.04;
    pointer-events: none;
}

.ghs-prefooter-cta__inner {
    position:        relative;
    z-index:         1;
    max-width:       640px;
    margin:          0 auto;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             var(--space-5);
}

.ghs-prefooter-cta__eyebrow {
    margin:         0;
    font-family:    var(--font-body);
    font-size:      var(--fs-xs);
    font-weight:    700;
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color:          var(--ghs-teal);
}

.ghs-prefooter-cta__heading {
    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;
}

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

.ghs-prefooter-cta__actions {
    display:         flex;
    flex-wrap:       wrap;
    gap:             var(--space-3);
    justify-content: center;
    margin-top:      var(--space-2);
}


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

@media (prefers-reduced-motion: reduce) {
    .ghs-hero,
    .ghs-hero__blob,
    .ghs-hero__image-wrap img {
        animation: none;
    }

    .ghs-doelgroep-card:hover .ghs-doelgroep-card__media img {
        transform: none;
    }
}