/* ============================================================
   Jobit - AI voor Recruitment product page
   Builds on tokens.css + site.css + product-multiposter.css +
   product-ats.css. Reuses the .mp-* / .ats-* scaffold and the
   homepage AI demo card (.ai-demo*, defined in site.css) for the
   hero. Stays on the Jobit blue for full consistency with the
   other product pages.
   ============================================================ */

/* ------------------------------------------------------------
   HERO - live AI generation demo (homepage animation)
   Widen the right column so the demo's nowrap output lines fit.
   ------------------------------------------------------------ */
.ai-page { --mp-visual-col: 520px; }

.ai-page-hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ai-page-hero-visual .ai-demo { width: 100%; }

/* ------------------------------------------------------------
   WAT IS HET - closing line under the three pillars
   (section is the blue band, so text is light)
   ------------------------------------------------------------ */
.ai-what-foot {
  margin: 48px auto 0;
  max-width: 760px;
  text-align: center;
  font-size: clamp(20px, 2.1vw, 27px);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: white;
  text-wrap: balance;
}
.ai-what-foot em { font-style: normal; color: var(--mp-accent-100); }

/* Lead emphasis sits on the blue band — lighten it so it's legible
   (the base .ats-what-lead em is --mp-accent = blue-on-blue). */
.ai-what .ats-what-lead em { color: var(--mp-accent-100); }

/* ------------------------------------------------------------
   INTEGRATIES - note under the koppelingen tags
   ------------------------------------------------------------ */
.ai-page .ats-int-note { margin: 18px 0 0; font-size: 14px; line-height: 1.5; color: var(--fg-muted); }

/* ------------------------------------------------------------
   WAT IS HET - animated flow graphic (layout variation)
   ruwe data -> AI verrijkt/optimaliseert -> publiceren naar jobboards
   Sits on the blue band, so the three stages are white cards.
   ------------------------------------------------------------ */
.ai-flow { margin-top: 52px; }
.ai-flow-stage {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  max-width: 1000px;
  margin: 0 auto;
}
.ai-flow-card {
  flex: 1 1 0;
  min-width: 0;
  background: #fff;
  border-radius: var(--r-xl);
  box-shadow: 0 20px 44px rgba(20, 31, 56, 0.30);
  padding: 20px 18px 22px;
  display: flex;
  flex-direction: column;
}
.ai-flow-card.is-core { flex-grow: 1; }
.ai-flow-cap {
  display: flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-subtle);
  margin-bottom: 16px; text-wrap: balance;
}
.ai-flow-cap-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--mp-accent-50); color: var(--mp-accent);
  font-size: 11px; font-weight: 800; flex-shrink: 0;
}

/* --- stage 1: raw vacature doc --- */
.ai-flow-src { justify-content: space-between; }
.ai-flow-doc { display: flex; flex-direction: column; gap: 9px; }
.ai-flow-doc-title { font-size: 15px; font-weight: 800; color: var(--fg-strong); letter-spacing: -0.01em; }
.ai-flow-doc-meta {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: var(--fg-subtle); margin-bottom: 5px;
}
.ai-flow-doc-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--neutral-300); }
.ai-flow-sk { height: 8px; border-radius: 4px; background: var(--neutral-100); }
.ai-flow-sk-thin { background: repeating-linear-gradient(90deg, var(--neutral-100) 0 7px, transparent 7px 12px); height: 7px; }
.ai-flow-src-note {
  margin-top: 16px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--neutral-400);
}

/* --- stage 2: AI core --- */
.ai-flow-core { align-items: stretch; }
.ai-flow-core-node {
  position: relative;
  width: 64px; height: 64px; margin: 2px auto 18px;
  border-radius: 18px;
  background: var(--jobit-blue-50);
  border: 1px solid var(--jobit-blue-200);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(67, 100, 173, 0.14);
}
.ai-flow-core-spark { color: var(--jobit-blue); line-height: 0; display: flex; }
.ai-flow-core-ring {
  position: absolute; inset: -7px; border-radius: 24px;
  border: 2px solid var(--jobit-blue-300);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .ai-flow-core-node[data-busy="true"] .ai-flow-core-ring { animation: aiCorePulse 1.5s var(--ease-out) infinite; }
  .ai-flow-core-node[data-busy="true"] { animation: aiCoreBreath 1.5s var(--ease-in-out) infinite; }
}
@keyframes aiCorePulse {
  0%   { opacity: 0.65; transform: scale(0.86); }
  100% { opacity: 0;    transform: scale(1.18); }
}
@keyframes aiCoreBreath {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-1px) scale(1.04); }
}
.ai-flow-chips { display: flex; flex-direction: column; gap: 7px; }
.ai-flow-chip {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 11px; border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  font-size: 12.5px; font-weight: 700; color: var(--neutral-400);
  opacity: 0.5;
  transform: translateY(4px);
  transition: opacity 0.32s var(--ease-out), transform 0.32s var(--ease-out),
              background 0.32s var(--ease-out), border-color 0.32s var(--ease-out), color 0.32s var(--ease-out);
}
.ai-flow-chip.is-on {
  opacity: 1; transform: none;
  background: var(--mp-accent-50);
  border-color: color-mix(in srgb, var(--mp-accent) 28%, white);
  color: var(--fg-strong);
}
.ai-flow-chip-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background: var(--neutral-200); color: transparent;
  transition: background 0.32s var(--ease-out), color 0.32s var(--ease-out);
}
.ai-flow-chip-tick svg { width: 11px; height: 11px; }
.ai-flow-chip.is-on .ai-flow-chip-tick { background: var(--mp-accent); color: #fff; }

/* "En meer" catch-all chip - muted grey so it recedes */
.ai-flow-chip-more {
  border-style: dashed;
  border-color: var(--neutral-300);
  background: var(--neutral-50);
  color: var(--fg-subtle);
}
.ai-flow-chip-more.is-on {
  opacity: 1;
  background: var(--neutral-50);
  border-color: var(--neutral-300);
  color: var(--fg-subtle);
}
.ai-flow-chip-more-mk {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  background: var(--neutral-400); color: #fff;
  font-size: 14px; font-weight: 700; line-height: 1;
}

/* --- stage 3: jobboards --- */
.ai-flow-jb { display: flex; flex-direction: column; gap: 7px; }
.ai-flow-jb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 6px 6px; border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.ai-flow-jb-row.is-on {
  border-color: color-mix(in srgb, var(--success) 34%, white);
  background: color-mix(in srgb, var(--success-bg) 60%, white);
}
.ai-flow-jb-logo {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; font-size: 11px; font-weight: 800; color: #fff;
}
.ai-flow-jb-logo.brand-logo-tile { background: #fff; border: 1px solid var(--border); }
.ai-flow-jb-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.ai-flow-jb-name {
  font-size: 12.5px; font-weight: 700; color: var(--fg-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ai-flow-jb-status { margin-left: auto; flex-shrink: 0; position: relative; width: 18px; height: 18px; }
.ai-flow-jb-dot {
  position: absolute; inset: 0; margin: auto;
  width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid var(--neutral-300);
  transition: opacity 0.25s var(--ease-out);
}
.ai-flow-jb-check {
  position: absolute; inset: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--success); color: #fff;
  opacity: 0; transform: scale(0.5);
  transition: opacity 0.28s var(--ease-spring), transform 0.28s var(--ease-spring);
}
.ai-flow-jb-check svg { width: 11px; height: 11px; }
.ai-flow-jb-row.is-on .ai-flow-jb-dot { opacity: 0; }
.ai-flow-jb-row.is-on .ai-flow-jb-check { opacity: 1; transform: none; }

/* "En meer" catch-all row - muted grey so it recedes */
.ai-flow-jb-more {
  border-style: dashed;
  border-color: var(--neutral-300);
  background: var(--neutral-50);
}
.ai-flow-jb-more.is-on { background: var(--neutral-50); border-color: var(--neutral-300); }
.ai-flow-jb-more-mk {
  background: var(--neutral-400) !important;
  color: #fff; font-size: 18px; font-weight: 700; line-height: 1;
}
.ai-flow-jb-more .ai-flow-jb-name { color: var(--fg-subtle); }
.ai-flow-jb-more .ai-flow-jb-check { background: var(--neutral-400); }

/* --- connectors --- */
.ai-flow-conn { flex: 0 0 56px; align-self: center; position: relative; height: 44px; }
.ai-flow-conn-line {
  position: absolute; top: 50%; left: 4px; right: 4px; height: 2px; transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.55) 0 6px, transparent 6px 12px);
}
.ai-flow-conn-arrow {
  position: absolute; top: 50%; right: -2px; transform: translateY(-50%);
  color: rgba(255,255,255,0.9); display: inline-flex;
}
.ai-flow-conn-packet {
  position: absolute; top: 50%; left: 4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 10px rgba(255,255,255,0.9);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .ai-flow-conn-packet { animation: aiFlowPacket 2.2s var(--ease-in-out) infinite; }
}
@keyframes aiFlowPacket {
  0%   { left: 4px;  opacity: 0; transform: translateY(-50%) scale(0.5); }
  18%  { opacity: 1; transform: translateY(-50%) scale(1); }
  82%  { opacity: 1; transform: translateY(-50%) scale(1); }
  100% { left: calc(100% - 12px); opacity: 0; transform: translateY(-50%) scale(0.5); }
}

/* --- stacked on narrow viewports --- */
@media (max-width: 900px) {
  .ai-flow-stage { flex-direction: column; align-items: center; max-width: 380px; }
  .ai-flow-card { width: 100%; }
  .ai-flow-conn { flex-basis: auto; width: 44px; height: 40px; }
  .ai-flow-conn-line {
    left: 50%; right: auto; top: 4px; bottom: 4px; width: 2px; height: auto; transform: translateX(-50%);
    background: repeating-linear-gradient(180deg, rgba(255,255,255,0.55) 0 6px, transparent 6px 12px);
  }
  .ai-flow-conn-arrow { top: auto; right: 50%; bottom: -2px; transform: translateX(50%) rotate(90deg); }
  .ai-flow-conn-packet { left: 50%; top: 4px; transform: translateX(-50%) scale(1); animation: aiFlowPacketV 2.2s var(--ease-in-out) infinite; }
}
@keyframes aiFlowPacketV {
  0%   { top: 4px;  opacity: 0; transform: translateX(-50%) scale(0.5); }
  18%  { opacity: 1; transform: translateX(-50%) scale(1); }
  82%  { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { top: calc(100% - 12px); opacity: 0; transform: translateX(-50%) scale(0.5); }
}

/* ------------------------------------------------------------
   ECOSYSTEEM - 5 verbatim steps; let the last span both columns
   ------------------------------------------------------------ */
.ai-eco-manage .ats-eco-item:last-child { grid-column: auto; }

@media (max-width: 1024px) {
  /* When the hero stacks, keep the big demo-card shadow from bleeding into the
     divider seam below: tighten it and add a little bottom clearance so the
     hero's bottom edge stays pure --mp-tint (matching the chevron). */
  .ai-page-hero-visual { margin-bottom: 32px; }
  .ai-page-hero-visual .ai-demo {
    box-shadow: 0 14px 32px -12px rgba(67, 100, 173, 0.26), 0 4px 12px -6px rgba(31, 47, 84, 0.08);
  }
}
@media (max-width: 640px) {
  .ai-eco-manage .ats-eco-item:last-child { grid-column: auto; }
  /* show the hero demo graphic a bit smaller on phones */
  .ai-page-hero-visual .ai-demo { max-width: 340px; margin: 0 auto; }
}