/* ============================================================
   Jobit - Integraties › Jobboard integraties
   Reuses tokens.css + site.css + product-multiposter.css and
   product-ats-koppelingen.css (shared integration visuals:
   .atsk-hero-visual, .atsk-stage, .v1-* hub&spoke, .v3-* feed,
   .atsk-benefits, .atsk-aanvraag). Adds the publish-board hero
   visual and the channels grid.
   ============================================================ */

.jbi-page { --mp-visual-col: 500px; --mp-visual-size: 0.85; }

/* ============================================================
   HERO VISUAL · Direction 2 - Publish board
   one vacancy, live across many channels
   ============================================================ */
.jbb-stage { width: 100%; max-width: 500px; }
.jbb-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;
}
.jbb-head {
  display: flex; align-items: center; gap: 13px;
  padding: 18px 20px;
  background: linear-gradient(180deg, var(--jobit-blue) 0%, var(--jobit-blue-600) 100%);
  color: white;
}
.jbb-head-mark {
  width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
  background: rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center;
}
.jbb-head-mark svg { color: white; }
.jbb-head-body { flex: 1; min-width: 0; }
.jbb-head-title { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.jbb-head-meta { font-size: 11.5px; opacity: 0.85; margin-top: 1px; }
.jbb-head-badge {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: 11px; font-weight: 800;
  background: rgba(255,255,255,0.16);
  padding: 6px 11px; border-radius: var(--r-pill);
}
.jbb-head-badge i { width: 6px; height: 6px; border-radius: 50%; background: #6FE3B0; box-shadow: 0 0 0 3px rgba(111,227,176,0.3); }
.jbb-body { padding: 12px; display: flex; flex-direction: column; gap: 7px; max-height: 360px; overflow: hidden; }
.jbb-row {
  display: grid; grid-template-columns: 30px 1fr auto; gap: 11px; align-items: center;
  padding: 9px 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 10px;
  animation: jbbIn 500ms var(--ease-out) backwards;
}
.jbb-row-mk {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 800; font-size: 11px; letter-spacing: -0.02em;
}
.jbb-row-name { font-size: 13px; font-weight: 700; color: var(--fg-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jbb-row-status {
  display: inline-flex; align-items: center; gap: 6px;
  justify-content: flex-end; min-width: 104px;
  font-size: 11px; font-weight: 700; color: var(--success);
}
.jbb-row-status svg { width: 14px; height: 14px; }
.jbb-row-status.is-publishing { color: var(--fg-subtle); }
.jbb-row-status.is-live { animation: jbbLivePop 320ms var(--ease-spring) backwards; }
.jbb-spin {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--neutral-200);
  border-top-color: var(--jobit-blue);
  animation: jbbSpin 0.7s linear infinite;
}
@keyframes jbbSpin { to { transform: rotate(360deg); } }
@keyframes jbbLivePop {
  0% { opacity: 0; transform: scale(0.7); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes jbbIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Static + JS publish board: both statuses live in the DOM; jobit.js toggles
   .is-live on each row to flip Publiceren... -> Live (see initJbiBoard). */
.jbb-row .jbb-row-status.is-live { display: none; }
.jbb-row.is-live .jbb-row-status.is-publishing { display: none; }
.jbb-row.is-live .jbb-row-status.is-live { display: inline-flex; }

/* ============================================================
   CHANNELS GRID
   ============================================================ */
.jbi-grid-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.jbi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 12px;
  max-width: 1060px; margin: 0 auto;
}
.jbi-chip {
  display: flex; align-items: center; gap: 11px; min-width: 0;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 13px 15px;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.jbi-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--jobit-blue-200); }
.jbi-mk {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 800; font-size: 12px; letter-spacing: -0.02em;
}
.jbi-name { font-size: 13.5px; font-weight: 700; color: var(--fg-strong); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "Jouw kanaal?" dashed tile */
.jbi-chip.is-ask {
  background: var(--bg-subtle);
  border-style: dashed;
  border-color: var(--border-strong);
  box-shadow: none;
  text-decoration: none;
}
.jbi-chip.is-ask:hover { border-color: var(--jobit-blue); background: var(--jobit-blue-50); }
.jbi-chip.is-ask .jbi-mk { background: white; color: var(--jobit-blue); border: 1px solid var(--border); }
.jbi-chip.is-ask .jbi-name { color: var(--jobit-blue-700); }

/* CTA divider override (multiposter forces it white on .mp-page) */
.jbi-page .cta-band[data-divider-from="subtle"]::after { background: var(--bg-subtle); }

@media (max-width: 560px) {
  .jbi-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}