/* ==========================================================================
   AstroConnect — sitelaag
   --------------------------------------------------------------------------
   Bouwt op de tokens uit ac-design-system.css. Bevat de onderdelen die
   specifiek zijn voor astroconnect.nl: kop, navigatie, paginahero, de
   inhoudsblokken van het paginasjabloon, en de voet.

   Alle klassen zijn ac-geprefixt, zodat de bestaande rebuild*.css nergens
   wordt overschreven en niet-herbouwde pagina's blijven werken zoals ze zijn.
   ========================================================================== */

/* --------------------------------------------------------------------------
   KOP EN NAVIGATIE
   -------------------------------------------------------------------------- */
.ac-header {
  position: relative; z-index: 10;
  background: var(--ac-void);
  border-bottom: 1px solid var(--ac-line);
}
.ac-header__inner {
  max-width: var(--ac-shell); margin-inline: auto;
  padding: var(--ac-3) var(--ac-section-x);
  display: flex; align-items: center; gap: var(--ac-5);
}
.ac-header__brand { flex: none; display: block; }
.ac-header__brand img { display: block; width: 188px; height: auto; }

.ac-nav { display: none; }
@media (min-width: 74rem) {
  .ac-nav {
    display: flex; flex-wrap: nowrap; gap: var(--ac-4);
    margin-inline: auto;
  }
  .ac-nav a {
    color: var(--ac-text-body); text-decoration: none; white-space: nowrap;
    font-family: 'Barlow Semi Condensed', var(--ac-sans);
    font-size: .875rem; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; padding-block: var(--ac-2);
    border-bottom: 2px solid transparent;
  }
  .ac-nav a:hover { color: var(--ac-pink); }
  .ac-nav a[aria-current="page"] { color: var(--ac-pink); border-bottom-color: var(--ac-pink); }
}
.ac-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--ac-3); }
.ac-btn--sm { min-height: 2.5rem; padding: var(--ac-2) var(--ac-4); font-size: .75rem; }

.ac-mobilenav { position: relative; }
@media (min-width: 74rem) { .ac-mobilenav { display: none; } }
.ac-mobilenav > summary {
  display: inline-flex; align-items: center; gap: var(--ac-2);
  min-height: 2.5rem; padding: var(--ac-2) var(--ac-4); cursor: pointer;
  list-style: none; border: 1px solid var(--ac-line-strong); border-radius: var(--ac-radius);
  font-family: 'Barlow Semi Condensed', var(--ac-sans);
  font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ac-text);
}
.ac-mobilenav > summary::-webkit-details-marker { display: none; }
.ac-mobilenav__panel {
  position: absolute; right: 0; top: calc(100% + var(--ac-2)); z-index: 20;
  display: grid; width: min(20rem, calc(100vw - 2rem));
  max-height: min(70vh, 32rem); overflow-y: auto;
  padding: var(--ac-3); background: var(--ac-ink-3);
  border: 1px solid var(--ac-line-strong); border-radius: var(--ac-radius-lg);
  box-shadow: var(--ac-lift);
}
.ac-mobilenav__head {
  margin: var(--ac-3) 0 var(--ac-1); padding-inline: var(--ac-2);
  font-family: 'Barlow Semi Condensed', var(--ac-sans);
  font-size: .6875rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ac-text-faint);
}
.ac-mobilenav__head:first-child { margin-top: 0; }
.ac-mobilenav__panel a {
  display: block; min-height: 2.75rem; padding: var(--ac-2) var(--ac-2);
  color: var(--ac-text-body); text-decoration: none; font-size: 1rem;
  border-radius: var(--ac-radius);
}
.ac-mobilenav__panel a:hover { background: rgba(255,255,255,.06); color: var(--ac-text); }


/* Smalle schermen: de kop moet binnen 390px passen zonder horizontaal scrollen. */
@media (max-width: 48rem) {
  .ac-header__inner { gap: var(--ac-3); }
  .ac-header__brand img { width: 132px; }
  .ac-btn--sm { padding: var(--ac-2) var(--ac-3); letter-spacing: .04em; }
}
@media (max-width: 26rem) {
  .ac-mobilenav > summary { padding-inline: var(--ac-3); }
  .ac-mobilenav__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* --------------------------------------------------------------------------
   HOMEPAGE-HERO
   -------------------------------------------------------------------------- */
.ac-home-hero { position: relative; isolation: isolate; overflow: hidden; }
.ac-home-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url('../images/astroconnect_bg.jpg') center / cover no-repeat;
  opacity: .34;
}
.ac-home-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(62% 60% at 72% 26%, rgba(255,61,127,.22), transparent 72%),
    radial-gradient(52% 48% at 18% 12%, rgba(107,166,238,.16), transparent 74%),
    linear-gradient(180deg, rgba(12,7,29,.42), rgba(12,7,29,.88));
}
.ac-home-hero__inner {
  max-width: var(--ac-shell); margin-inline: auto;
  padding: clamp(2.5rem, 1.5rem + 5vw, 5rem) var(--ac-section-x) clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  display: grid; justify-items: center; text-align: center; gap: var(--ac-5);
}
.ac-home-hero__wordmark { width: min(100%, 44rem); height: auto; }
.ac-home-hero h1 {
  font-size: clamp(1.75rem, 1.25rem + 2.4vw, 3rem); line-height: 1.12;
  letter-spacing: -.025em; margin: 0; max-width: 46rem;
}
.ac-home-hero__lead {
  font-size: var(--ac-fs-lead); color: var(--ac-text-body);
  max-width: 40rem; margin: 0;
}
.ac-home-hero__actions { display: flex; flex-wrap: wrap; gap: var(--ac-4); justify-content: center; }

/* --------------------------------------------------------------------------
   PAGINAHERO (binnenpagina's)
   -------------------------------------------------------------------------- */
.ac-page-hero { position: relative; isolation: isolate; overflow: hidden; }
.ac-page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url('../images/astroconnect_bg2.jpg') center / cover no-repeat; opacity: .5;
}
.ac-page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(58% 62% at 78% 22%, rgba(255,61,127,.20), transparent 72%),
    linear-gradient(180deg, rgba(12,7,29,.60), rgba(12,7,29,.92));
}
.ac-page-hero__inner {
  max-width: var(--ac-shell); margin-inline: auto;
  padding-block: clamp(2rem, 1.25rem + 3.5vw, 4rem);
  padding-inline: var(--ac-section-x);
  display: grid; gap: clamp(var(--ac-5), 3vw, var(--ac-8)); align-items: center;
}
@media (min-width: 62rem) { .ac-page-hero__inner { grid-template-columns: 1.15fr .85fr; } }
.ac-page-hero h1 { font-size: var(--ac-fs-h1); line-height: var(--ac-lh-tight); margin: 0 0 var(--ac-4); }
.ac-page-hero__lead { font-size: var(--ac-fs-lead); color: var(--ac-text-body); }
.ac-page-hero__art { margin: 0; }
.ac-page-hero__art img { display: block; width: 100%; height: auto; border-radius: var(--ac-radius-lg); }
.ac-page-hero__art figcaption {
  margin-top: var(--ac-3); font-size: var(--ac-fs-meta); color: var(--ac-text-faint);
}

.ac-crumbs {
  font-size: var(--ac-fs-meta); color: var(--ac-text-faint);
  margin: 0 0 var(--ac-4); display: flex; flex-wrap: wrap; gap: var(--ac-2);
}
.ac-crumbs a { color: var(--ac-text-muted); text-decoration: none; }
.ac-crumbs a:hover { color: var(--ac-pink); text-decoration: underline; text-underline-offset: .2em; }
.ac-crumbs span[aria-hidden] { color: var(--ac-text-faint); }

/* Kernpunten onder de hero — met icoon, niet met een tekstglyph. */
.ac-keypoints { list-style: none; margin: var(--ac-5) 0 0; padding: 0; display: grid; gap: var(--ac-3); }
.ac-keypoints li { display: flex; gap: var(--ac-3); align-items: flex-start; color: var(--ac-text-body); }
.ac-keypoints .ac-ico { color: var(--ac-pink); margin-top: .2em; }

/* --------------------------------------------------------------------------
   LOPENDE TEKST — de werkbank voor uitleg
   -------------------------------------------------------------------------- */
.ac-prose { display: grid; gap: var(--ac-4); }
.ac-prose > * { max-width: var(--ac-measure); }
.ac-prose h2 { max-width: 34rem; }
.ac-prose h3 { margin-top: var(--ac-5); }
.ac-prose p { color: var(--ac-text-body); }
.ac-prose ul, .ac-prose ol { margin: 0; padding-left: 1.35rem; display: grid; gap: var(--ac-2); color: var(--ac-text-body); }
.ac-prose li::marker { color: var(--ac-pink); }
.ac-prose--wide > * { max-width: 52rem; }

/* Twee kolommen tekst voor lange uitleg, stapelt onder 62rem. */
.ac-prose-2col { display: grid; gap: clamp(var(--ac-5), 3vw, var(--ac-8)); align-items: start; }
@media (min-width: 62rem) { .ac-prose-2col { grid-template-columns: 1fr 1fr; } }


/* Uitgelicht tekstblok binnen lopende tekst. */
.ac-note {
  border-left: 3px solid var(--ac-pink); background: var(--ac-ink-2);
  padding: var(--ac-4) var(--ac-5); border-radius: var(--ac-radius);
  max-width: 52rem !important;
}
.ac-note p { margin: 0; color: var(--ac-text-body); max-width: none; }
.ac-note p + p { margin-top: var(--ac-3); }

/* --------------------------------------------------------------------------
   STAPPEN — alleen waar er echt een volgorde is
   -------------------------------------------------------------------------- */
.ac-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ac-4); counter-reset: acstep; }
.ac-steps > li {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--ac-4);
  padding-top: var(--ac-4); border-top: 1px solid var(--ac-line);
}
.ac-steps > li::before {
  counter-increment: acstep; content: counter(acstep, decimal-leading-zero);
  font-family: 'Barlow Semi Condensed', var(--ac-sans);
  font-size: 1.125rem; font-weight: 600; color: var(--ac-pink);
  font-variant-numeric: tabular-nums; line-height: 1.3;
}
.ac-steps h3 { font-size: var(--ac-fs-h4); margin: 0 0 var(--ac-2); }
.ac-steps p { margin: 0; color: var(--ac-text-muted); }

/* --------------------------------------------------------------------------
   KAARTEN
   -------------------------------------------------------------------------- */
.ac-cards { display: grid; gap: var(--ac-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
/* Vast kolomaantal waar het aantal kaarten dat toelaat, zodat de laatste rij
   niet half leeg blijft: zes kaarten worden 3x2, acht kaarten 4x2. */
@media (min-width: 62rem) {
  .ac-cards--c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-cards--c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ac-cards--c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ac-card {
  padding: var(--ac-5); background: var(--ac-ink-2);
  border: 1px solid var(--ac-line); border-radius: var(--ac-radius-lg);
  display: grid; gap: var(--ac-2); align-content: start;
}
.ac-card .ac-ico { color: var(--ac-pink); width: 1.75rem; height: 1.75rem; margin-bottom: var(--ac-1); }
.ac-card h3 { font-size: var(--ac-fs-h4); margin: 0; }
.ac-card p { margin: 0; color: var(--ac-text-muted); max-width: none; }
.ac-card a { color: var(--ac-pink); }

/* Linkkaarten (verder lezen) */
.ac-linkcards { display: grid; gap: var(--ac-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
/* Vast kolomaantal waar het aantal kaarten dat toelaat: auto-fit maakte van
   zes kaarten een rij van vier plus een halve rij van twee. */
@media (min-width: 62rem) {
  .ac-linkcards--c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ac-linkcards--c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.ac-linkcard {
  display: grid; gap: var(--ac-2); align-content: start;
  padding: var(--ac-5); text-decoration: none; color: inherit;
  background: var(--ac-ink-2); border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius-lg);
  transition: border-color .2s var(--ac-ease), transform .2s var(--ac-ease);
}
.ac-linkcard:hover { border-color: var(--ac-pink); transform: translateY(-3px); }
.ac-linkcard strong { font-size: var(--ac-fs-h4); font-weight: 600; color: var(--ac-text); }
.ac-linkcard span { color: var(--ac-text-muted); font-size: var(--ac-fs-meta); }
.ac-linkcard .ac-ico { color: var(--ac-pink); }

/* --------------------------------------------------------------------------
   VERGELIJKINGSTABEL
   -------------------------------------------------------------------------- */
.ac-compare { border: 1px solid var(--ac-line); border-radius: var(--ac-radius-lg); overflow: hidden; background: var(--ac-ink-2); }
.ac-compare table { width: 100%; border-collapse: collapse; }
.ac-compare :where(th, td) {
  padding: var(--ac-4) var(--ac-5); text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--ac-line); font-size: var(--ac-fs-meta);
}
.ac-compare thead th {
  font-family: 'Barlow Semi Condensed', var(--ac-sans);
  font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ac-text-faint); background: rgba(255,255,255,.02);
}
.ac-compare tbody th { color: var(--ac-text); font-weight: 600; font-size: 1rem; }
.ac-compare tbody tr:last-child :where(th, td) { border-bottom: 0; }
@media (max-width: 48rem) {
  .ac-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ac-compare tbody tr { display: grid; padding: var(--ac-4) var(--ac-5); border-bottom: 1px solid var(--ac-line); }
  .ac-compare tbody :where(th, td) { padding: var(--ac-1) 0; border: 0; }
  .ac-compare tbody td::before {
    content: attr(data-label) " · "; color: var(--ac-text-faint);
    font-family: 'Barlow Semi Condensed', var(--ac-sans);
    letter-spacing: .1em; text-transform: uppercase; font-size: .6875rem;
  }
}

/* --------------------------------------------------------------------------
   DRUKTE PER DAGDEEL — eigen data, geen concurrent heeft dit
   -------------------------------------------------------------------------- */
.ac-hours { display: grid; gap: var(--ac-4); }
.ac-hour {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--ac-4);
  align-items: center; padding-block: var(--ac-3);
  border-top: 1px solid var(--ac-line);
}
.ac-hour__label {
  font-family: 'Barlow Semi Condensed', var(--ac-sans);
  font-size: .9375rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ac-text); font-variant-numeric: tabular-nums;
}
.ac-hour__bar { display: grid; gap: var(--ac-2); }
.ac-hour__track { height: .75rem; border-radius: 2px; background: rgba(255,255,255,.07); overflow: hidden; }
.ac-hour__fill { display: block; height: 100%; border-radius: 2px; background: var(--lvl, var(--ac-pink)); }
.ac-hour__text { font-size: var(--ac-fs-meta); color: var(--ac-text-muted); }
.ac-hour--rustig  { --lvl: var(--ac-werkdruk); }
.ac-hour--normaal { --lvl: var(--ac-promotie); }
.ac-hour--druk    { --lvl: var(--ac-geld); }
.ac-hour--piek    { --lvl: var(--ac-pink); }
@media (max-width: 34rem) {
  .ac-hour { grid-template-columns: 1fr; gap: var(--ac-2); }
}

/* --------------------------------------------------------------------------
   CHECKLIST
   -------------------------------------------------------------------------- */
.ac-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ac-3); }
.ac-checklist li { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--ac-3); align-items: start; }
.ac-checklist .ac-ico { color: var(--ac-pink); margin-top: .18em; }
.ac-checklist strong { color: var(--ac-text); }
.ac-checklist span { color: var(--ac-text-body); }

/* --------------------------------------------------------------------------
   VOET
   -------------------------------------------------------------------------- */
.ac-footer { background: var(--ac-void); border-top: 1px solid var(--ac-line); }
.ac-footer__inner {
  max-width: var(--ac-shell); margin-inline: auto;
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); padding-inline: var(--ac-section-x);
  display: grid; gap: clamp(var(--ac-5), 3vw, var(--ac-8));
}
.ac-footer__top { display: grid; gap: var(--ac-5); }
@media (min-width: 56rem) { .ac-footer__top { grid-template-columns: 18rem 1fr; gap: var(--ac-9); } }
.ac-footer__brand img { display: block; width: 196px; height: auto; margin-bottom: var(--ac-4); }
.ac-footer__brand p { color: var(--ac-text-muted); font-size: var(--ac-fs-meta); margin: 0; }
.ac-footer__cols { display: grid; gap: var(--ac-5); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.ac-footer__coltitle {
  font-family: 'Barlow Semi Condensed', var(--ac-sans);
  font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ac-text-faint); margin: 0 0 var(--ac-3);
}
.ac-footer__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ac-1); }
.ac-footer__cols a {
  display: block; padding-block: var(--ac-1); color: var(--ac-text-body);
  text-decoration: none; font-size: var(--ac-fs-meta);
}
.ac-footer__cols a:hover { color: var(--ac-pink); text-decoration: underline; text-underline-offset: .2em; }
.ac-footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--ac-3) var(--ac-6);
  padding-top: var(--ac-5); border-top: 1px solid var(--ac-line);
  font-family: 'Barlow Semi Condensed', var(--ac-sans);
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ac-text-faint);
}
.ac-footer__bottom a { color: var(--ac-text-muted); text-decoration: none; }
.ac-footer__bottom a:hover { color: var(--ac-pink); }
.ac-footer__legal { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--ac-3) var(--ac-5); }

/* --------------------------------------------------------------------------
   FORMULIERPAGINA'S
   -------------------------------------------------------------------------- */
body.form-page .ac-header { border-bottom-color: var(--ac-line-strong); }

/* --------------------------------------------------------------------------
   NETWERKSITES
   -------------------------------------------------------------------------- */
.ac-netcols { display: grid; gap: clamp(var(--ac-5), 3vw, var(--ac-8)); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.ac-netcols__title {
  font-family: 'Barlow Semi Condensed', var(--ac-sans);
  font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ac-pink); margin: 0 0 var(--ac-3); padding-bottom: var(--ac-2);
  border-bottom: 1px solid var(--ac-line);
}
.ac-netlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ac-1); }
.ac-netlist a {
  display: inline-flex; align-items: center; gap: var(--ac-2);
  padding-block: var(--ac-2); color: var(--ac-text-body); text-decoration: none;
  font-size: 1rem;
}
.ac-netlist a:hover { color: var(--ac-pink); }
.ac-netlist .ac-ico { width: 1em; height: 1em; color: var(--ac-text-faint); }
.ac-netlist a:hover .ac-ico { color: var(--ac-pink); }

/* Beeld in de kopregel-rail en als brede band binnen een sectie. */
.ac-bandart { margin: 0 0 var(--ac-7); }
.ac-bandart img {
  display: block; width: 100%; height: auto; max-height: 22rem;
  object-fit: cover; object-position: center 35%;
  border-radius: var(--ac-radius-lg);
}

/* Inlogingang voor bestaande consulenten. Rustig naast de primaire CTA:
   wie al consulent is, hoort niet op het aanmeldformulier te belanden. */
.ac-login {
  display: inline-flex; align-items: center; gap: var(--ac-2);
  min-height: 2.5rem; padding-inline: var(--ac-2);
  color: var(--ac-text-muted); text-decoration: none;
  font-family: 'Barlow Semi Condensed', var(--ac-sans);
  font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.ac-login:hover { color: var(--ac-pink); }
.ac-login .ac-ico { width: 1.1em; height: 1.1em; }
@media (max-width: 30rem) { .ac-login span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }

/* --------------------------------------------------------------------------
   ERVARINGEN VAN CONSULENTEN
   Geen sterren, geen portretfoto's: de woorden en de herkomst doen het werk.
   -------------------------------------------------------------------------- */
.ac-quotes { display: grid; gap: var(--ac-5); grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.ac-quote-card {
  margin: 0; padding: var(--ac-6); background: var(--ac-ink-3);
  border: 1px solid var(--ac-line); border-radius: var(--ac-radius-lg);
  /* Quote krijgt de ruimte, naam staat onderaan. Zo staan de namen van
     kaarten met een korte en een lange quote op dezelfde lijn. */
  display: grid; grid-template-rows: 1fr auto; gap: var(--ac-5);
  position: relative;
}
.ac-quote-card::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block: var(--ac-5);
  width: 3px; border-radius: 2px; background: var(--ac-pink);
}
.ac-quote-card blockquote { margin: 0; }
.ac-quote-card blockquote p {
  margin: 0; font-size: var(--ac-fs-lead); line-height: 1.55; color: var(--ac-text);
  max-width: none;
}
.ac-quote-card blockquote p + p { margin-top: var(--ac-4); }
.ac-quote-card blockquote p:first-child::before { content: "\201C"; color: var(--ac-pink); }
.ac-quote-card blockquote p:last-child::after { content: "\201D"; color: var(--ac-pink); }
.ac-quote-card figcaption { display: grid; gap: var(--ac-1); }
.ac-quote-card figcaption strong { color: var(--ac-text); font-size: 1rem; }
.ac-quote-card figcaption span {
  font-family: 'Barlow Semi Condensed', var(--ac-sans);
  font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ac-text-faint);
}

/* --------------------------------------------------------------------------
   BEDRIJFSIDENTITEIT
   Een adres met een KvK-nummer is voor een kandidaat het verschil tussen
   een bedrijf en een website. Daarom leesbaar en niet in kleine lettertjes.
   -------------------------------------------------------------------------- */
.ac-identity {
  display: grid; gap: 1px; margin: 0;
  background: var(--ac-line); border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius-lg); overflow: hidden;
  /* Zes velden: expliciet 1, 2 of 3 kolommen zodat de rijen altijd vol zijn.
     Met auto-fit bleef er bij vier kolommen een leeg vak over. */
  grid-template-columns: 1fr;
}
@media (min-width: 34rem) { .ac-identity { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .ac-identity { grid-template-columns: repeat(3, 1fr); } }
.ac-identity {
}
.ac-identity > div { background: var(--ac-ink-2); padding: var(--ac-4) var(--ac-5); display: grid; gap: var(--ac-1); }
.ac-identity dt {
  font-family: 'Barlow Semi Condensed', var(--ac-sans);
  font-size: .6875rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ac-text-faint);
}
.ac-identity dd { margin: 0; color: var(--ac-text); font-size: 1rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.ac-identity dd a { color: var(--ac-pink); }
.ac-identity__note { color: var(--ac-text-faint); font-size: var(--ac-fs-meta); }

/* --------------------------------------------------------------------------
   HET TEAM
   Quotes van medewerkers, met rol en aantal jaren. Werkt ook zonder foto:
   een echte quote met een naam en een rol is sterker dan een quote met een
   gezicht dat niet van die persoon is.
   -------------------------------------------------------------------------- */
/* Vier teamleden: twee kolommen, dus twee volle rijen. Met auto-fit werden
   het er drie en bleef de vierde alleen op een rij achter. */
.ac-team { display: grid; gap: var(--ac-5); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .ac-team { grid-template-columns: repeat(2, 1fr); } }
.ac-team__card {
  margin: 0; padding: var(--ac-6); background: var(--ac-ink-3);
  border: 1px solid var(--ac-line); border-radius: var(--ac-radius-lg);
  display: grid; grid-template-rows: 1fr auto; gap: var(--ac-4);
}
.ac-team__foto {
  width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--ac-pink);
}
.ac-team__card blockquote { margin: 0; }
.ac-team__card blockquote p {
  margin: 0; color: var(--ac-text-body); font-size: 1rem; line-height: 1.6; max-width: none;
}
.ac-team__card blockquote p::before { content: "\201C"; color: var(--ac-pink); margin-right: .1em; }
.ac-team__card blockquote p::after  { content: "\201D"; color: var(--ac-pink); margin-left: .1em; }
.ac-team__card figcaption { display: grid; gap: var(--ac-1); padding-top: var(--ac-3); border-top: 1px solid var(--ac-line); }
.ac-team__card figcaption strong { color: var(--ac-text); font-size: var(--ac-fs-h4); font-weight: 600; }
.ac-team__card figcaption span { color: var(--ac-text-muted); font-size: var(--ac-fs-meta); }
.ac-team__sinds {
  font-family: 'Barlow Semi Condensed', var(--ac-sans);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ac-text-faint) !important;
  font-size: .75rem !important;
}

/* Verificatielink onder een quote: een lezer kan zelf naar het profiel. */
.ac-quote-card__link {
  display: inline-flex; align-items: center; gap: var(--ac-2);
  margin-top: var(--ac-2); color: var(--ac-pink); text-decoration: none;
  font-size: var(--ac-fs-meta); font-weight: 600;
}
.ac-quote-card__link:hover { text-decoration: underline; text-underline-offset: .2em; }
.ac-quote-card__link .ac-ico { width: 1em; height: 1em; }

/* Profielafbeelding bij een quote. Dit zijn de echte profielbeelden van
   mediums.nl; bij de één een foto, bij de ander een illustratie. Beide
   kloppen, want het is wat een klant op het platform ook ziet. */
.ac-quote-card--foto { grid-template-rows: auto 1fr auto; }
.ac-quote-card__avatar {
  width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--ac-pink); display: block;
}

/* ==========================================================================
   BREEDTEGEBRUIK
   --------------------------------------------------------------------------
   Het probleem dat dit oplost: lopende tekst hoort rond de 34rem breed te
   blijven (±68 tekens), maar de inhoudskolom is 75rem. Eén kolom tekst
   links laat dan ruim 600px leeg aan de rechterkant.
   De oplossing is niet de tekst breder maken — dat leest slechter — maar
   de breedte in twee sporen gebruiken: kop links, tekst rechts.
   ========================================================================== */

/* Sectiekop: kop links, inleiding rechts. Vult de regel zonder de
   leesbreedte op te blazen. */
.ac-sectionhead { display: grid; gap: var(--ac-4); margin-bottom: var(--ac-7); }
.ac-sectionhead__title > * { max-width: 26rem; }
.ac-sectionhead__intro { display: grid; gap: var(--ac-4); }
.ac-sectionhead__intro > * { max-width: var(--ac-measure); }
@media (min-width: 62rem) {
  .ac-sectionhead--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(var(--ac-6), 5vw, var(--ac-10));
    align-items: end;
  }
  /* Bij een inleiding van meer dan één alinea zou onderlijnen de kop naar de
     voet van de kolom duwen; dan lijnen we de eerste regels op elkaar uit.
     De offset is de hoogte van de eyebrow erboven. */
  .ac-sectionhead--split.ac-sectionhead--top { align-items: start; }
  .ac-sectionhead--split.ac-sectionhead--top .ac-sectionhead__intro { padding-top: 2.1rem; }
}

/* Lopende tekst met een beeldrail. De rail draagt de kop en een foto en is
   even breed als de tekstkolom, zodat de sectie de volle 75rem vult zonder
   dat de leesbreedte oploopt. De rail blijft bij scrollen staan; bij een
   flip staat de tekst links en het beeld rechts, zodat opeenvolgende
   secties niet hetzelfde ritme herhalen. */
.ac-railtext { display: grid; gap: clamp(var(--ac-5), 3vw, var(--ac-8)); }
.ac-railtext__rail { align-content: start; min-width: 0; }
.ac-railtext__rail > :not(.ac-railtext__art) { max-width: 26rem; }
.ac-railtext__body { display: grid; gap: var(--ac-4); min-width: 0; }
.ac-railtext__body > * { max-width: var(--ac-measure); }
.ac-railtext__body h3 { margin-top: var(--ac-5); }
.ac-railtext__body h3:first-child { margin-top: 0; }
@media (min-width: 62rem) {
  .ac-railtext {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--ac-measure));
    align-items: start;
  }
  .ac-railtext--flip {
    grid-template-columns: minmax(0, var(--ac-measure)) minmax(0, 1fr);
  }
  .ac-railtext--flip .ac-railtext__rail { order: 2; }
  .ac-railtext--flip .ac-railtext__body { order: 1; }
  .ac-railtext__rail { position: sticky; top: var(--ac-6); }
}
.ac-railtext__art { margin: var(--ac-5) 0 0; }
.ac-railtext__art img,
.ac-railtext__art picture img {
  display: block; width: 100%; height: auto;
  border-radius: var(--ac-radius-lg);
}
.ac-railtext__art figcaption {
  margin-top: var(--ac-3); font-size: var(--ac-fs-meta); color: var(--ac-text-faint);
  max-width: 28rem;
}

/* Sectie met een vaste kopkolom en een brede inhoudskolom. Gebruikt door de
   FAQ: een accordeon van 1200px breed maakt van elke vraag een lege regel,
   terwijl een antwoord van 34rem in diezelfde 1200px juist verloren staat.
   Kop links (blijft staan tijdens het openklappen), accordeon rechts. */
.ac-splitsec { display: grid; gap: clamp(var(--ac-5), 3vw, var(--ac-8)); }
.ac-splitsec__head { display: grid; gap: var(--ac-4); align-content: start; min-width: 0; }
.ac-splitsec__head > * { max-width: 26rem; }
.ac-splitsec__head .ac-lead { max-width: 26rem; }
.ac-splitsec__panel { min-width: 0; }
/* Extra's naast de kop (doorverwijzing, helpdeskkaart). Op mobiel komen die
   onder de vragen, niet ervoor: eerst de vragen zelf. */
.ac-splitsec__aside { min-width: 0; display: grid; gap: var(--ac-4); align-content: start; }
.ac-splitsec__aside > * { max-width: 26rem; }
.ac-splitsec__aside p { margin: 0; }
@media (min-width: 62rem) {
  .ac-splitsec {
    grid-template-columns: minmax(0, 1fr) minmax(0, 40rem);
    align-items: start;
    row-gap: var(--ac-5);
  }
  .ac-splitsec__head  { grid-column: 1; grid-row: 1; }
  .ac-splitsec__aside { grid-column: 1; grid-row: 2; }
  .ac-splitsec__panel { grid-column: 2; grid-row: 1 / span 2; }
}
.ac-splitsec__panel .ac-faq p,
.ac-splitsec__panel p { max-width: none; }
.ac-splitsec__art { margin: var(--ac-5) 0 0; }
.ac-splitsec__art img { display: block; width: 100%; height: auto; border-radius: var(--ac-radius-lg); }

/* Sectie-inleiding met een beeld ernaast. Boven een raster van volle breedte
   liet een losse kop de regel half leeg; hier sluit een foto de regel af. */
.ac-intro { display: grid; gap: clamp(var(--ac-5), 3vw, var(--ac-8)); margin-bottom: var(--ac-7); }
.ac-intro__text { display: grid; gap: var(--ac-4); min-width: 0; }
.ac-intro__text > * { max-width: 40rem; }
.ac-intro__text .ac-eyebrow { margin-bottom: 0; }
.ac-intro__art { margin: 0; min-width: 0; }
.ac-intro__art img { display: block; width: 100%; height: auto; border-radius: var(--ac-radius-lg); }
.ac-intro__art figcaption {
  margin-top: var(--ac-3); font-size: var(--ac-fs-meta); color: var(--ac-text-faint);
}
@media (min-width: 62rem) {
  .ac-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); align-items: end; }
}