/* ============================================================
   Professional cards (.cd-*) + aggregation pages (.ag-*)
   Shared by /professionals, the city and theme x city pages
   (public/aggregation.html), and the listing block injected into
   the generated city pages. Built on mentranova.css tokens, which
   every one of those pages loads first.
   ============================================================ */

/* ---------- Grid ---------- */
.cd-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 16px; margin: 28px 0 clamp(48px, 7vw, 88px);
}
.cd-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-l); padding: 20px; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
/* Hover (and keyboard focus): the card lifts a little, the photo slowly
   zooms in and the arrow after "Bekijk profiel" moves out. Quiet on purpose,
   after coachoverzicht.nl. Also with prefers-reduced-motion (owner decision,
   22 Oct 2026, as Coach Overzicht does): it only runs under the pointer and
   the movement is a few pixels. */
.cd-card:hover, .cd-card:focus-visible {
  border-color: var(--line-2);
  border-color: color-mix(in oklab, var(--accent) 35%, var(--line));
  transform: translateY(-4px); box-shadow: var(--shadow-l);
}
.cd-card[hidden] { display: none; }
/* The photo runs edge to edge across the top of the card (the negative
   margins cancel the card padding; overflow on .cd-card rounds the corners).
   The box shows the person's initial; the photo is laid over it, so a missing
   or broken photo leaves the letter. 4:3 is the shape server.js asks the image
   host for; object-fit covers any photo that arrives in another shape. */
.cd-photo {
  position: relative; margin: -20px -20px 16px; aspect-ratio: 4 / 3; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-tint); color: var(--accent-ink);
  font-size: 56px; font-weight: 700;
}
.cd-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center 30%;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.cd-card:hover .cd-photo img, .cd-card:focus-visible .cd-photo img { transform: scale(1.04); }
/* A browser draws pseudo-elements on an img only when the file failed to
   load: cover the broken-image icon with the same letter. */
.cd-photo img::before {
  content: attr(data-initial); position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-tint);
}
.cd-id { min-width: 0; }
.cd-name { display: flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.cd-verified { width: 15px; height: 15px; flex: none; color: var(--accent); }
.cd-role { font-size: 13.5px; color: var(--ink-2); margin-top: 2px; }
.cd-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-3); margin-top: 4px; }
.cd-rating { color: var(--warm-ink); font-weight: 600; }
/* The languages someone works in, on the card itself: the filter's
   first control is language, so the result has to show it too. */
.cd-langs { margin-top: 12px; font-size: 13px; color: var(--ink-2); }
.cd-langs-label { color: var(--ink-3); }
.cd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.cd-tag {
  background: var(--bg-2); color: var(--ink-2); font-size: 12px; font-weight: 500;
  padding: 4px 10px; border-radius: 999px;
}
.cd-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 16px; font-size: 14px;
}
.cd-rate { font-weight: 700; white-space: nowrap; }
.cd-open {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--accent-ink); font-weight: 600; transition: gap .3s;
}
/* Decorative: the empty alt text keeps screen readers from saying "arrow". */
.cd-open::after { content: "\2192"; content: "\2192" / ""; }
.cd-card:hover .cd-open, .cd-card:focus-visible .cd-open { gap: 8px; }
.cd-avail { font-size: 12px; font-weight: 600; color: var(--green); }


/* ink-2, not ink-3: ink-3 on the page background is under 4.5:1 at this size. */
.cd-order { margin-top: 12px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.cd-order:empty { display: none; }

/* ---------- Card block on content pages ---------- */
/* buildCoachCardsSection: the same cards under a heading, on the page's own
   beige, injected above the footer of the generated pages and into the test
   results. */
.cd-section { background: var(--bg); padding: clamp(48px, 7vw, 80px) 0; }
.cd-section h2 { font-size: clamp(24px, 3vw, 34px); margin: 0; color: var(--ink); }
.cd-section .cd-grid { margin-bottom: 0; }
/* Inside a test result (.results, centred text in a narrow column) the block
   is part of the result, not a page band. */
.results .cd-section { background: none; padding: 32px 0; text-align: left; }
.results .cd-section .wrap { padding: 0; }

/* ---------- Aggregation pages ---------- */
.ag-hero { padding-top: clamp(28px, 5vw, 56px); padding-bottom: clamp(8px, 2vw, 16px); }
.ag-hero h1 { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.06; margin: 12px 0 0; max-width: 22ch; color: var(--ink); }
.ag-crumbs { font-size: 13.5px; color: var(--ink-2); }
.ag-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ag-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-2); }
.ag-crumbs a { color: var(--ink-2); text-decoration: none; }
.ag-crumbs a:hover { text-decoration: underline; }
.ag-intro { font-size: clamp(16.5px, 1.5vw, 18.5px); line-height: 1.6; color: var(--ink-2); margin: 18px 0 0; max-width: 62ch; }
.ag-demand { margin: 10px 0 0; font-size: 14.5px; color: var(--ink-2); }
.ag-demand:empty { display: none; }
.ag-paths { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.ag-path {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px;
  padding: 12px 20px; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--line-2); color: var(--ink); background: var(--surface);
}
.ag-path:hover { border-color: var(--accent); }
.ag-links { margin: 0 0 clamp(28px, 4vw, 44px); }
.ag-links h2 { font-size: clamp(20px, 2.2vw, 24px); margin: 0 0 12px; color: var(--ink); }
.ag-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ag-links a {
  display: inline-block; padding: 8px 14px; border-radius: 999px; font-size: 14px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-2); text-decoration: none;
}
.ag-links a:hover { border-color: var(--accent); color: var(--ink); }
.ag-count { color: var(--ink-2); font-size: 12.5px; margin-left: 6px; }
.ag-group { margin: 0 0 clamp(24px, 3vw, 36px); }
.ag-group h3 { font-size: 16px; margin: 0 0 10px; color: var(--ink-2); }

/* Listing block on the generated city pages: same cards, inside that page's own layout. */
.ag-block { padding: clamp(28px, 4vw, 48px) 24px 8px; }
.ag-block-inner { max-width: 1100px; margin: 0 auto; }
.ag-block .ag-intro { margin-top: 0; }
.ag-block .cd-grid { margin-bottom: clamp(28px, 4vw, 44px); }

/* Badges: only what the payload backs (coachBadges in server.js). */
.cd-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cd-badge {
  font-size: 11.5px; font-weight: 600; line-height: 1.3; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-2); background: var(--surface);
}
.cd-badge-diploma, .cd-badge-cert { color: var(--accent-ink); border-color: var(--accent-soft); background: var(--accent-tint); }
/* A darker green than --green, which is under 3:1 on white at badge size. */
.cd-badge-accepting { color: oklch(0.45 0.12 155); }
.cd-rate-ask { font-weight: 600; color: var(--ink-2); }

/* ---------- Comparison page (/vergelijk) ---------- */
.cmp-table-wrap { overflow-x: auto; margin: 8px 0 clamp(28px, 4vw, 44px); border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
.cmp-table-wrap:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.cmp-table { border-collapse: collapse; min-width: 1040px; width: 100%; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.cmp-table caption { text-align: left; padding: 14px 16px 0; font-weight: 600; color: var(--ink); }
.cmp-table th, .cmp-table td { padding: 12px 16px; vertical-align: top; text-align: left; border-top: 1px solid var(--line); }
.cmp-table thead th { color: var(--ink); font-size: 14.5px; }
.cmp-table tbody th { color: var(--ink); font-weight: 600; white-space: nowrap; }
.cmp-section { margin: 0 0 clamp(28px, 4vw, 44px); max-width: 72ch; }
.cmp-section h2 { font-size: clamp(22px, 2.4vw, 28px); margin: 0 0 12px; color: var(--ink); }
.cmp-section h3 { font-size: 17px; margin: 18px 0 6px; color: var(--ink); }
.cmp-section p { margin: 0; color: var(--ink-2); line-height: 1.6; }
.cmp-sources { margin: 0; padding-left: 18px; color: var(--ink-2); }
.cmp-sources a { color: var(--accent-ink); }
.cmp-crisis { margin: 0 0 clamp(28px, 4vw, 44px); padding: 14px 18px; border-left: 3px solid var(--warm); background: var(--bg-2); border-radius: var(--radius-m); color: var(--ink); max-width: 72ch; }