/* Section: services-grid — ported from design/styles.css (.cards/.svc).
   Photo-top card when a card has an image (.has-photo), else a clean icon card. */

.services { background: var(--surface); padding: 80px 0 100px 0; }
.services-header { text-align: left; margin-bottom: 48px;}
.services-header .eyebrow { display: inline-flex; letter-spacing:0 }
.services-header h2 { margin-bottom: 14px; }
.services-header .lede { text-align: left; }

.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 767px) {.services{padding:50px 0;} }
@media (max-width: 980px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .services-grid { grid-template-columns: 1fr; } }

.service-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}
.service-card:hover { transform: translateY(-5px); box-shadow: var(--sh); border-color: #d4e1f5; }
.service-card.spearhead { border: 2px solid var(--blue); box-shadow: var(--sh); }
.service-card.spearhead::after {
    content: 'Specialiteit';
    position: absolute; top: 14px; right: 14px; z-index: 3;
    background: var(--blue); color: #fff;
    font-size: 9px; text-transform: uppercase; letter-spacing: .1em;
    padding: 4px 9px; border-radius: 999px; font-weight: 700;
}

/* Optional photo */
.service-card .ph { position: relative; aspect-ratio: 16 / 9; background: #13315c; overflow: hidden; }
.service-card .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.service-card:hover .ph img { transform: scale(1.05); }
.service-card .ph .badge {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    background: var(--blue); color: #fff;
    font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    padding: 5px 11px; border-radius: 999px;
}
.service-card .ph .badge.badge--dark  { background: var(--navy); }
.service-card .ph .badge.badge--spoed { background: var(--spoed); }
.service-card .ph .badge.badge--green { background: var(--green); }
.service-card .ph .badge.badge--blue  { background: var(--blue); }

/* Photo cards use the badge for emphasis — drop the blue spearhead border + "Specialiteit" overlay. */
.service-card.has-photo.spearhead { border: 1px solid var(--line); box-shadow: var(--sh-sm); }
.service-card.has-photo.spearhead:hover { border-color: #d4e1f5; box-shadow: var(--sh); }
.service-card.has-photo.spearhead::after { display: none; }

/* Body */
.service-card .bd { padding: 22px 24px; display: flex; flex-direction: column; flex: 1; }
.service-card .icon {
    width: 46px; height: 46px; border-radius: 12px;
    background: var(--blue-l); display: grid; place-items: center;
    position: relative; z-index: 2; margin-bottom: 12px;
}
.service-card .icon svg { width: 23px; height: 23px; stroke: var(--blue-d); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* When there is a photo, overlap the icon up over the image edge. */
.service-card.has-photo .icon { margin-top: -46px; border: 3px solid #fff; box-shadow: var(--sh-sm); background: var(--blue-l); }

.service-card h3 { font-size: 1.18rem; font-family: var(--display); margin-bottom: 7px; color: var(--ink); }
.service-card .eav { color: var(--muted); font-size: .94rem; line-height: 1.6; margin-bottom: 14px; flex: 1; }
.service-card .eav strong { color: var(--ink); }
.service-card .arrow {
    color: var(--blue); font-weight: 600; font-size: .9rem; font-family: var(--display);
    display: inline-flex; align-items: center; gap: 6px; transition: gap .2s, color .2s;
}
.service-card:hover .arrow { gap: 10px; color: var(--blue-d); }