/* =============================================================
   GHS Theme -- assets/css/components/cards.css
   Sector cards and testimonial cards.

   Sector card spec (from design handoff):
     background: --ghs-navy
     border-radius: 18px (var(--radius-lg))
     hover: translateY(-4px), background #003060
     icon badge: 48x48px, radius 12px (var(--radius-md)),
                 rgba(0,172,168,0.15) bg

   Testimonial card spec:
     background: --ghs-white
     border-radius: 18px
     box-shadow: 0 2px 12px rgba(6,36,63,.07)

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


/* =============================================================
   SECTOREN-GRID SECTION HEADER
   ============================================================= */

.ghs-sectoren-grid-section__header {
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             var(--space-6);
    margin-bottom:   var(--space-8);
}

.ghs-sectoren-grid-section__intro {
    max-width: 560px;
}

.ghs-sectoren-grid-section__intro h2 {
    margin-bottom: var(--space-4);
}

.ghs-sectoren-grid-section__intro p:last-child {
    margin-bottom: 0;
}


/* =============================================================
   SECTOR CARDS
   ============================================================= */

/* ----------------------------------------------------------
   GRID WRAPPER
   auto-fill grid with 260px min column width (from design)
   ---------------------------------------------------------- */

.ghs-sectors-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap:                   var(--space-4);
}


/* ----------------------------------------------------------
   INDIVIDUAL SECTOR CARD
   ---------------------------------------------------------- */

.ghs-sector-card {
    display:         flex;
    flex-direction:  column;
    gap:             var(--space-4);
    padding:         var(--space-6);   /* 32px */
    background:      var(--ghs-navy);
    border-radius:   var(--radius-lg); /* 18px */
    text-decoration: none;
    color:           inherit;

    /* Smooth hover transitions */
    transition:
        transform    200ms var(--ease-out),
        background   200ms var(--ease-standard),
        box-shadow   200ms var(--ease-standard);
}

.ghs-sector-card:hover {
    transform:  translateY(-4px);
    background: #003060;
    box-shadow: 0 12px 32px rgba(6, 36, 63, 0.28);
    color:      inherit;
}

.ghs-sector-card:focus-visible {
    outline:        2px solid var(--ghs-teal);
    outline-offset: 3px;
}


/* ----------------------------------------------------------
   ICON BADGE  (48x48, teal background)
   ---------------------------------------------------------- */

.ghs-sector-card__icon {
    width:            48px;
    height:           48px;
    flex-shrink:      0;
    border-radius:    var(--radius-md); /* 12px */
    background:       rgba(0, 172, 168, 0.15);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    color:            var(--ghs-teal);
}


/* ----------------------------------------------------------
   CARD BODY
   ---------------------------------------------------------- */

.ghs-sector-card__body {
    flex: 1;
}

.ghs-sector-card__title {
    margin:      0 0 6px;
    font-family: var(--font-display);
    font-size:   var(--fs-h4);
    color:       var(--ghs-white);
    line-height: var(--lh-snug);
}

.ghs-sector-card__desc {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    line-height: var(--lh-normal);
    color:       rgba(255, 255, 255, 0.5);
    max-width:   none; /* override base p max-width */
}


/* ----------------------------------------------------------
   CARD LINK ROW  (teal arrow-link at bottom)
   ---------------------------------------------------------- */

.ghs-sector-card__link {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    font-weight: 600;
    color:       var(--ghs-teal);
}

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

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


/* ----------------------------------------------------------
   TEAL CTA CARD  (the "Andere branche?" card variant)
   ---------------------------------------------------------- */

.ghs-sector-card--cta {
    background:      var(--ghs-teal);
    justify-content: center;
}

.ghs-sector-card--cta:hover {
    background: var(--ghs-teal);
    filter:     brightness(1.08);
}

.ghs-sector-card--cta .ghs-sector-card__title {
    color: var(--ghs-white);
}

.ghs-sector-card--cta .ghs-sector-card__desc {
    color: rgba(255, 255, 255, 0.85);
}

.ghs-sector-card--cta .ghs-sector-card__link {
    color: var(--ghs-white);
}


/* =============================================================
   DOELGROEP CARDS  (features cards on homepage: white bg, image)
   ============================================================= */

.ghs-feature-card {
    background:      var(--ghs-white);
    border-radius:   var(--radius-lg); /* 18px */
    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) var(--ease-standard);
}

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

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

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

.ghs-feature-card:hover .ghs-feature-card__image img {
    transform: scale(1.04);
}

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

.ghs-feature-card__eyebrow {
    margin:         0;
    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);
    max-width:      none;
}

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

.ghs-feature-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;
    max-width:   none;
}

.ghs-feature-card__cta {
    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-feature-card__cta svg,
.ghs-feature-card__cta .ghs-arrow {
    flex-shrink: 0;
    transition:  transform var(--dur-base) ease-out;
}

.ghs-feature-card:hover .ghs-feature-card__cta svg,
.ghs-feature-card:hover .ghs-feature-card__cta .ghs-arrow {
    transform: translateX(4px);
}


/* =============================================================
   TESTIMONIAL CARDS
   ============================================================= */

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

    transition:
        transform  var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-standard);
}

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


/* ----------------------------------------------------------
   QUOTE MARK  (SVG supplied in the template)
   ---------------------------------------------------------- */

.ghs-testimonial-card__quote-mark {
    color:   var(--ghs-teal);
    opacity: 0.3;
}


/* ----------------------------------------------------------
   QUOTE TEXT
   ---------------------------------------------------------- */

.ghs-testimonial-card__body {
    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;
}


/* ----------------------------------------------------------
   AUTHOR ROW
   ---------------------------------------------------------- */

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

.ghs-testimonial-card__avatar {
    width:         44px;
    height:        44px;
    border-radius: 50%;
    object-fit:    cover;
    flex-shrink:   0;
    background:    var(--ghs-navy); /* fallback for initials */
    display:       flex;
    align-items:   center;
    justify-content: center;
    overflow:      hidden;
}

/* Initials inside avatar when no photo */
.ghs-testimonial-card__avatar span {
    font-family: var(--font-display);
    font-size:   var(--fs-sm);
    color:       var(--ghs-white);
}

.ghs-testimonial-card__name {
    margin:      0;
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    font-weight: var(--fw-semi);
    color:       var(--ghs-navy);
    max-width:   none;
}

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