/* ============================================================
   Jobit - Integraties › XML feeds
   Reuses tokens.css + site.css + product-multiposter.css and
   ALSO product-ats-koppelingen.css (shared integration visuals:
   .atsk-hero-visual, .atsk-stage, .v1-* hub&spoke, .v3-* feed,
   .atsk-benefits, .atsk-aanvraag). This file adds the XML-only
   bits: the field-mapping hero visual and the tools grid.
   ============================================================ */

.xf-page { --mp-visual-col: 500px; }

/* ============================================================
   HERO VISUAL · Direction 1 - Field mapping panel (default)
   ============================================================ */
.xfm-stage { width: 100%; max-width: 500px; }
.xfm-panel {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  box-shadow: 0 30px 80px -20px rgba(31,47,84,0.16);
  overflow: hidden;
}
/* feed url bar */
.xfm-url {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
}
.xfm-url-field {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  background: white; border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 9px 12px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--fg-strong);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.xfm-url-field svg { color: var(--jobit-blue); flex-shrink: 0; }
.xfm-url-field span { overflow: hidden; text-overflow: ellipsis; }
.xfm-url-badge {
  display: inline-flex; align-items: center; gap: 6px;
  flex-shrink: 0;
  font-size: 11px; font-weight: 800; letter-spacing: 0.02em;
  color: var(--success);
  background: var(--success-bg);
  padding: 7px 11px; border-radius: var(--r-pill);
}
.xfm-url-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(46,157,111,0.18); }

.xfm-body { padding: 16px 18px 18px; }
.xfm-cols {
  display: grid; grid-template-columns: 1fr 40px 1fr; gap: 0;
  align-items: center;
  margin-bottom: 11px;
}
.xfm-col-lbl {
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-subtle);
}
.xfm-col-lbl.r { text-align: left; }
.xfm-row {
  display: grid; grid-template-columns: 1fr 40px 1fr; gap: 0;
  align-items: center; margin-bottom: 8px;
}
.xfm-row:last-child { margin-bottom: 0; }
.xfm-field {
  border-radius: 9px; padding: 10px 12px;
  font-size: 12px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 1px solid var(--border);
}
.xfm-field.src {
  background: var(--neutral-900);
  color: #7FD0FF;
  font-family: var(--font-mono);
  border-color: transparent;
}
.xfm-field.src b { color: var(--neutral-400); font-weight: 500; }
.xfm-field.dst { background: var(--jobit-blue-50); color: var(--jobit-blue-700); border-color: rgba(54,82,142,0.14); }
.xfm-link { position: relative; height: 2px; background: var(--jobit-blue-100); border-radius: 999px; }
.xfm-dot {
  position: absolute; top: 50%; left: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--jobit-blue); box-shadow: 0 0 8px var(--jobit-blue);
  transform: translate(-50%, -50%);
  animation: xfmFlow 2.2s var(--ease-in-out) infinite;
}
@keyframes xfmFlow {
  0% { left: 0; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
.xfm-foot {
  display: flex; align-items: center; gap: 9px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 12px; font-weight: 700; color: var(--fg-muted);
}
.xfm-foot svg { color: var(--success); flex-shrink: 0; }
.xfm-foot b { color: var(--fg-strong); }

/* ============================================================
   TOOLS GRID - systems we connect via XML
   ============================================================ */
.xf-tools-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.xf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
  gap: 14px;
  max-width: 920px; margin: 0 auto;
}
.xf-tool {
  display: flex; align-items: center; gap: 13px;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.xf-tool:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--jobit-blue-200); }
.xf-tool-mk {
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 800; font-size: 14px; letter-spacing: -0.02em;
}
.xf-tool-body { min-width: 0; }
.xf-tool-name { font-size: 15px; font-weight: 800; color: var(--fg-strong); letter-spacing: -0.01em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.xf-tool-sub {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; color: var(--fg-subtle);
  margin-top: 3px;
}
.xf-tool-sub i { width: 5px; height: 5px; border-radius: 50%; background: var(--success); }
/* "Jouw bron?" dashed tile */
.xf-tool.is-ask {
  background: var(--bg-subtle);
  border-style: dashed;
  border-color: var(--border-strong);
  box-shadow: none;
  text-decoration: none;
}
.xf-tool.is-ask:hover { border-color: var(--jobit-blue); background: var(--jobit-blue-50); }
.xf-tool.is-ask .xf-tool-mk { background: white; color: var(--jobit-blue); border: 1px solid var(--border); }
.xf-tool.is-ask .xf-tool-name { color: var(--jobit-blue-700); }

/* CTA divider: product-multiposter.css forces it white on .mp-page;
   the section above the CTA here is the subtle aanvraag band. */
.xf-page .cta-band[data-divider-from="subtle"]::after { background: var(--bg-subtle); }

@media (max-width: 1024px) {
  .xf-grid { grid-template-columns: repeat(2, 1fr); max-width: 520px; }
}
@media (max-width: 560px) {
  .xf-grid { grid-template-columns: 1fr; }
  .xfm-field { font-size: 11px; padding: 9px 10px; }
}