/* wsc_cards block styles */
.wsc-service-grid { display: grid; grid-template-columns: repeat(var(--wsc-cols, 3), 1fr); gap: 14px; }
@media (max-width: 900px) { .wsc-service-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .wsc-service-grid { grid-template-columns: 1fr; } }
.wsc-service-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding-top: 44px; min-height: 180px; }
.wsc-service-card h3 { margin: 0; max-width: 18ch; }
.wsc-service-card p { font-size: 14.5px; margin: 0; color: var(--wsc-ink-2); }
/* Optional longer description (e.g. a team member's bio) below the subtitle. */
.wsc-card__desc { font-size: 14px; line-height: 1.6; color: var(--wsc-ink-2); }
.wsc-cards--lay-portret .wsc-card__desc { max-width: 42ch; }

/* Brand-mark icon in the card corner (three squares, colour per card) */
.wsc-card__mark { position: absolute; top: 24px; right: 24px; width: 25px; height: 25px; }
.wsc-card__mark span { position: absolute; background: var(--mc, var(--wsc-accent)); }
.wsc-card__mark span:nth-child(1) { top: 0; right: 0; width: 11px; height: 11px; }
.wsc-card__mark span:nth-child(2) { top: 12px; right: 12px; width: 9px; height: 9px; opacity: .45; }
.wsc-card__mark span:nth-child(3) { top: 12px; right: 0; width: 9px; height: 9px; }
/* Global uploaded brand-mark, tinted with the card/page colour via mask */
.wsc-card__mark--img { width: 30px; height: 30px; background: var(--mc, var(--wsc-accent));
  -webkit-mask: var(--mark-img) center / contain no-repeat; mask: var(--mark-img) center / contain no-repeat; }
/* Chosen open-source line icon, tinted via currentColor */
.wsc-card__mark--icon { width: 28px; height: 28px; color: var(--mc, var(--wsc-accent)); }
.wsc-card__mark--icon svg { width: 100%; height: 100%; display: block; }

/* wsKaarten carousel (one row, horizontal scroll with arrows) */
.wsc-cards-wrap { position: relative; }
.wsc-cards-wrap--carousel { padding: 0 4px; }
/* Track layout only — scrollbar-hiding + arrow styles live in wsc_core/core.css */
.wsc-cards-track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--wsc-cols) - 1) * 14px) / var(--wsc-cols));
  gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
}
.wsc-cards-track > * { scroll-snap-align: start; }
@media (max-width: 900px) { .wsc-cards-track { grid-auto-columns: 82%; } }

/* Card image (wsKaarten photo cards, e.g. team members) */
.wsc-card--has-img { padding-top: clamp(20px, 2.4vw, 28px); }
.wsc-card__photo { display: block; border-radius: 12px; overflow: hidden; margin-bottom: 14px; background: #F5F6F9; }
.wsc-card__photo img { display: block; width: 100%; height: 190px; object-fit: cover; }
.wsc-card--photo .wsc-card__photo img { height: 220px; }

/* Clickable cards */
.wsc-service-card--link { text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.wsc-service-card--link:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(20, 22, 27, .09); border-color: var(--wsc-line-2); }
.wsc-card__arrow { color: var(--wsc-accent-2); opacity: 0; margin-left: 4px; transition: opacity .18s ease, transform .18s ease; display: inline-block; }
.wsc-service-card--link:hover .wsc-card__arrow { opacity: 1; transform: translateX(2px); }
.wsc-band--dark .wsc-service-card--link:hover { border-color: rgba(255,255,255,.18); }

/* Per-card brand-mark (Wsc\Core\Mark) positioned in the corner */
.wsc-service-card > .wsc-mark { position: absolute; top: 24px; right: 24px; }

/* ---------- Mobile (≤600px): one clear column, no sideways scroll ---------- */
@media (max-width: 600px) {
  .wsc-service-grid { grid-template-columns: 1fr; gap: 14px; }
  /* Carousel becomes a vertical stack (clearer than a cramped peek-swipe) */
  .wsc-cards-wrap--carousel { padding: 0; }
  .wsc-cards-track { display: flex; flex-direction: column; gap: 14px; overflow: visible; scroll-snap-type: none; }
  .wsc-cards-wrap--carousel .wsc-cards__arrow { display: none; }
  /* Comfortable cards; drop the decorative corner mark for calm */
  .wsc-service-card { min-height: 0; padding-top: 22px; }
  .wsc-service-card h3 { max-width: none; }
  .wsc-service-card p { font-size: 15px; }
  .wsc-card__mark, .wsc-service-card > .wsc-mark { display: none; }
}

/* =========================================================================
   Card layouts + photo shapes + contact links (source-linked cards, e.g. team)
   'stack' = the classic default (untouched). The avatar layouts below are opt-in.
   Stable classes so designers can override per client:
   .wsc-cards--lay-{portret|photo-left|photo-right|compact} and
   .wsc-cards--shape-{circle|square|rounded}.
   ========================================================================= */

.wsc-card__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* Photo shape — applies in every layout (incl. Standaard), so "Cirkel" always
   renders a round photo. The photo becomes a fixed-size avatar (below). */
.wsc-cards--shape-circle  .wsc-card__photo { border-radius: 50%; }
.wsc-cards--shape-square  .wsc-card__photo { border-radius: 0; }
.wsc-cards--shape-rounded .wsc-card__photo { border-radius: 16px; }

/* STANDAARD (stack): shaped avatar on top, left-aligned (not a full-width
   banner) so the chosen Fotovorm is visible. For a full-width photo use the
   "Layout 2 — Groot beeld" template. */
.wsc-cards--lay-stack .wsc-card__photo { width: 108px; height: 108px; margin: 0 0 14px; aspect-ratio: 1 / 1; }
.wsc-cards--lay-stack .wsc-card__photo img { height: 100%; }

/* PORTRET: centered avatar on top, text centered underneath (team card). */
.wsc-cards--lay-portret .wsc-service-card { align-items: center; text-align: center; padding-top: 28px; }
.wsc-cards--lay-portret .wsc-card__photo { width: 150px; height: 150px; margin: 0 auto 16px; aspect-ratio: 1/1; }
.wsc-cards--lay-portret .wsc-card__photo img { height: 100%; }
.wsc-cards--lay-portret .wsc-service-card h3 { max-width: none; }
.wsc-cards--lay-portret .wsc-card__body { align-items: center; }
.wsc-cards--lay-portret .wsc-service-card > .wsc-mark { position: static; margin: 0 auto 10px; }

/* PHOTO LEFT / RIGHT / COMPACT: horizontal — avatar beside the text. */
.wsc-cards--lay-photo-left .wsc-service-card,
.wsc-cards--lay-photo-right .wsc-service-card,
.wsc-cards--lay-compact .wsc-service-card {
  flex-direction: row; align-items: center; gap: 18px; padding-top: 22px; min-height: 0; text-align: left;
}
.wsc-cards--lay-photo-right .wsc-service-card { flex-direction: row-reverse; }
.wsc-cards--lay-photo-left .wsc-card__photo,
.wsc-cards--lay-photo-right .wsc-card__photo { width: 92px; height: 92px; }
.wsc-cards--lay-compact .wsc-card__photo { width: 56px; height: 56px; }
.wsc-cards--lay-photo-left .wsc-card__photo,
.wsc-cards--lay-photo-right .wsc-card__photo,
.wsc-cards--lay-compact .wsc-card__photo { flex: none; margin: 0; aspect-ratio: 1/1; }
.wsc-cards--lay-photo-left .wsc-card__photo img,
.wsc-cards--lay-photo-right .wsc-card__photo img,
.wsc-cards--lay-compact .wsc-card__photo img { height: 100%; }
.wsc-cards--lay-compact .wsc-service-card { gap: 12px; padding: 14px 16px; }
.wsc-cards--lay-compact .wsc-service-card p { font-size: 13.5px; }
.wsc-cards--lay-photo-left .wsc-service-card > .wsc-mark,
.wsc-cards--lay-photo-right .wsc-service-card > .wsc-mark,
.wsc-cards--lay-compact .wsc-service-card > .wsc-mark { position: static; flex: none; }

/* Contact links (phone / e-mail / LinkedIn). */
.wsc-card__contact { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; }
.wsc-cards--lay-portret .wsc-card__contact { justify-content: center; }
.wsc-card__contact-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--wsc-ink-2); text-decoration: none; }
.wsc-card__contact-link svg { flex: none; color: var(--wsc-accent-2); }
.wsc-card__contact-link:hover { color: var(--wsc-accent-2); }
.wsc-band--dark .wsc-card__contact-link { color: rgba(255,255,255,.75); }
.wsc-band--dark .wsc-card__contact-link:hover { color: #fff; }


/* wsc_accordion block styles */
.wsc-accordion { display: flex; flex-direction: column; gap: 12px; }
.wsc-accordion__item {
  background: var(--wsc-surface);
  border: 1px solid var(--wsc-line);
  border-radius: var(--wsc-radius);
  overflow: hidden;
}
.wsc-accordion__head {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--wsc-font-head); font-weight: 700; font-size: 17px;
  letter-spacing: -.015em; color: var(--wsc-ink);
}
.wsc-accordion__sign {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--wsc-bg); color: var(--wsc-ink-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-family: var(--wsc-font-body); transition: background .18s, color .18s;
}
.wsc-accordion__item.is-open .wsc-accordion__sign { background: var(--wsc-accent); color: var(--wsc-ink); }
.wsc-accordion__body {
  padding: 0 24px 22px; font-size: 15px; line-height: 1.62;
  color: var(--wsc-ink-2); max-width: 64ch; display: none;
}
.wsc-accordion__item.is-open .wsc-accordion__body { display: block; }


/* wsc_cta block styles */
/* ---------- CTA band (heading left, buttons right — no inner box) ---------- */
.wsc-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px;
}
.wsc-cta__text { flex: 1 1 420px; min-width: 300px; }
.wsc-cta__text h2 { margin: 0 0 12px; max-width: 20ch; }
.wsc-cta__text .wsc-lead { margin: 0; max-width: 52ch; }
.wsc-cta__actions { flex: none; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Mobile (≤600px): full-width stacked actions ---------- */
@media (max-width: 600px) {
  .wsc-cta:not(.wsc-cta--media) { gap: 20px; }
  .wsc-cta:not(.wsc-cta--media) .wsc-cta__actions { flex: 1 1 100%; width: 100%; flex-direction: column; }
  .wsc-cta:not(.wsc-cta--media) .wsc-cta__actions .wsc-btn { width: 100%; justify-content: center; }
}

/* ---------- With photo: image + text side by side ---------- */
/* Photo column is capped (smaller photo) so the text keeps the stage. */
.wsc-cta--media {
  display: grid;
  grid-template-columns: minmax(180px, 300px) 1fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
.wsc-cta--media.wsc-cta--right { grid-template-columns: 1fr minmax(180px, 300px); }
.wsc-cta--media.wsc-cta--right .wsc-cta__media { order: 2; }
.wsc-cta--media .wsc-cta__text { min-width: 0; flex: none; }
.wsc-cta--media .wsc-cta__text h2 { max-width: none; }
.wsc-cta--media .wsc-cta__text .wsc-lead { max-width: none; }
.wsc-cta--media .wsc-eyebrow { margin: 0 0 10px; }
.wsc-cta--media .wsc-cta__actions { margin-top: 26px; }
.wsc-cta--media .wsc-cta__media { min-width: 0; margin: 0; }
.wsc-cta--media .wsc-cta__media .wsc-media { margin: 0; }
.wsc-cta__frame { position: relative; }

/* Optional caption under the photo (name + role) */
.wsc-cta__caption { margin: 14px 0 0; display: flex; flex-direction: column; gap: 1px; }
.wsc-cta__caption-name { font-weight: 700; color: var(--wsc-ink); line-height: 1.2; }
.wsc-cta__caption-role { font-size: .92em; color: #5a6473; }
.wsc-band--dark .wsc-cta__caption-name { color: #fff; }
.wsc-band--dark .wsc-cta__caption-role { color: rgba(255, 255, 255, .72); }
.wsc-cta--media .wsc-cta__media .wsc-media__img {
  width: 100%; height: auto; border-radius: 18px; object-fit: cover;
  box-shadow: 0 24px 48px -24px rgba(20, 22, 27, .45);
}
.wsc-cta--media .wsc-cta__media .wsc-media--empty { border-radius: 18px; aspect-ratio: 4 / 3; }

/* ---------- Shape: square & circle (compact, centered profile look) ---------- */
/* IMPORTANT: shape the CLIPPING WRAPPER (.wsc-media), not the <img>. core.css
   gives .wsc-media `overflow:hidden` + its own border-radius, so it clips the
   img to a rounded rectangle — rounding only the img is invisible. We size
   .wsc-media to a 1:1 box (circle via 50%) and let the img cover it. */
.wsc-cta--media .wsc-cta__media--square .wsc-cta__frame,
.wsc-cta--media .wsc-cta__media--circle .wsc-cta__frame { max-width: 230px; margin-inline: auto; }
.wsc-cta--media .wsc-cta__media--square .wsc-media,
.wsc-cta--media .wsc-cta__media--circle .wsc-media { aspect-ratio: 1 / 1; }
.wsc-cta--media .wsc-cta__media--circle .wsc-media { border-radius: 50%; }
.wsc-cta--media .wsc-cta__media--square .wsc-media__img,
.wsc-cta--media .wsc-cta__media--circle .wsc-media__img { height: 100%; }
.wsc-cta__media--square .wsc-cta__caption,
.wsc-cta__media--circle .wsc-cta__caption { text-align: center; align-items: center; }

/* ---------- Corner badge (icon/SVG/image via the Mark picker) ---------- */
.wsc-cta__badge {
  position: absolute; z-index: 2;
  width: 62px; height: 62px; border-radius: 50%;
  background: #fff; box-shadow: 0 10px 22px -8px rgba(20, 22, 27, .45);
  display: grid; place-items: center;
}
.wsc-cta__badge .wsc-mark { width: 36px; height: 36px; }
.wsc-cta__badge img { max-width: 40px; max-height: 40px; border-radius: 6px; }

/* Bare: no white circle — the icon/logo sits directly on the photo, a touch
   larger, with a soft shadow so it stays legible on any photo. */
.wsc-cta__badge--bare {
  width: auto; height: auto; border-radius: 0;
  background: none; box-shadow: none;
  padding: 4px;
}
.wsc-cta__badge--bare .wsc-mark { width: 48px; height: 48px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55)); }
.wsc-cta__badge--bare img { max-width: 52px; max-height: 52px; border-radius: 6px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55)); }
.wsc-cta__badge--tl { top: 10px; left: 10px; }
.wsc-cta__badge--tr { top: 10px; right: 10px; }
.wsc-cta__badge--bl { bottom: 10px; left: 10px; }
.wsc-cta__badge--br { bottom: 10px; right: 10px; }
/* On a circle the true corners sit outside the disc — nudge badges onto the edge. */
.wsc-cta__media--circle .wsc-cta__badge--tl { top: 7%; left: 7%; }
.wsc-cta__media--circle .wsc-cta__badge--tr { top: 7%; right: 7%; }
.wsc-cta__media--circle .wsc-cta__badge--bl { bottom: 7%; left: 7%; }
.wsc-cta__media--circle .wsc-cta__badge--br { bottom: 7%; right: 7%; }
/* Let the badge overhang the photo edge a little for that "sits on the ring" look. */
.wsc-cta__badge--tl { transform: translate(-18%, -18%); }
.wsc-cta__badge--tr { transform: translate(18%, -18%); }
.wsc-cta__badge--bl { transform: translate(-18%, 18%); }
.wsc-cta__badge--br { transform: translate(18%, 18%); }

/* Avatar-in-button (only shown on mobile in the "Foto in de knop" mode). */
.wsc-cta__btn-avatar { display: none; }

@media (max-width: 820px) {
  .wsc-cta--media,
  .wsc-cta--media.wsc-cta--right { grid-template-columns: 1fr; }
  .wsc-cta--media.wsc-cta--right .wsc-cta__media { order: 0; }
  .wsc-cta--media .wsc-cta__media .wsc-media { max-width: 360px; margin-inline: auto; }

  /* Mobile photo options — applied once the layout stacks (single column). */
  /* Hide: no photo at all. */
  .wsc-cta__media--mhide { display: none !important; }

  /* Small = "foto in de knop": hide the standalone photo + name/role and place
     Swen's round face inside the primary button instead. */
  .wsc-cta__media--msmall { display: none; }
  .wsc-cta--msmall .wsc-cta__actions {
    position: relative;
    display: flex; flex-direction: column; gap: 10px;
  }
  .wsc-cta--msmall .wsc-cta__actions .wsc-btn { width: 100%; }
  /* Taller primary button so the round photo sits comfortably inside it, with
     equal padding all around the photo (11px top/left/bottom → 11+63+11=85). */
  .wsc-cta--msmall .wsc-cta__actions .wsc-btn:first-of-type {
    min-height: 85px; display: flex; align-items: center; justify-content: center;
    padding-left: 86px; padding-right: 86px;
  }
  .wsc-cta--msmall .wsc-cta__btn-avatar {
    display: block; position: absolute; left: 11px; top: 11px;
    width: 63px; height: 63px; border-radius: 50%; overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .92); box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    z-index: 2;
  }
  .wsc-cta--msmall .wsc-cta__btn-avatar img { width: 100%; height: 100%; object-fit: cover; }
}
@media (max-width: 600px) {
  .wsc-cta--media .wsc-cta__actions { flex-direction: column; }
  .wsc-cta--media .wsc-cta__actions .wsc-btn { width: 100%; justify-content: center; }
}