/* ==========================================================================
   KloudData — Partnership & Certifications (shared section)
   Self-contained stylesheet, enqueued only on the pages listed in
   kd_enqueue_partnership_certifications_assets() (functions.php).
   Uses its own local tokens (not the per-page --rc2- / --af- / --sf-
   design-system variables) so this one file works identically on every
   Salesforce page it's added to. Markup: kd_render_partnership_
   certifications() in functions.php.
   ========================================================================== */

.kd-pc-section {
  --pc-ink-950: #0d1b2e;
  --pc-ink-400: #6b7a99;
  --pc-line-soft: #eeece4;
  --pc-blue-700: #004195;
  --pc-radius-md: 14px;
  --pc-max: 1280px;

  padding: 88px 0;
  background: #fff;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  overflow: hidden;
}
.kd-pc-wrap {
  max-width: var(--pc-max);
  width: 100%;
  margin: 0 auto;
  padding: 0 32px;
  box-sizing: border-box;
}
.kd-pc-layout {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 56px;
  align-items: center;
  width: 100%;
}
/* Grid items default to min-width:auto, which lets a child's intrinsic
   content size (the marquee track is ~2800px+ of duplicated badges)
   force the whole column — and with it .kd-pc-wrap and this section —
   wider than the page. min-width:0 lets the column actually shrink to
   its 1.3fr share so overflow:hidden below can do its job. */
.kd-pc-layout > * { min-width: 0; }

/* ── Continuous auto-scrolling logo marquee — pure CSS, no JS, no
      arrows/dots. Badges are rendered twice back-to-back in the PHP
      loop so this keyframe loops seamlessly at translateX(-50%). ── */
.kd-pc-marquee {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}
.kd-pc-marquee-track {
  display: flex;
  width: max-content;
  gap: 16px;
  animation: kd-pc-scroll 36s linear infinite;
}
.kd-pc-marquee:hover .kd-pc-marquee-track { animation-play-state: paused; }
@keyframes kd-pc-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .kd-pc-marquee-track { animation: none; }
  .kd-pc-marquee { overflow-x: auto; }
}
.kd-pc-badge {
  flex: 0 0 auto;
  width: 128px;
  height: 128px;
  border: 1px solid var(--pc-line-soft);
  border-radius: var(--pc-radius-md);
  background: #fff;
  box-shadow: 0 4px 14px rgba(12,20,48,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.kd-pc-badge img,
.kd-pc-badge svg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.kd-pc-badge svg { width: 48px; height: 48px; }

.kd-pc-copy h2 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 32px;
  line-height: 1.3;
  color: var(--pc-ink-950);
  margin: 0 0 16px;
}
.kd-pc-copy h2 .accent {
  background: linear-gradient(96.24deg, #004195 0%, #01AEF0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kd-pc-copy p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--pc-ink-400);
  margin: 0;
}
.kd-pc-copy p strong { color: var(--pc-ink-950); font-weight: 700; }

@media (max-width: 900px) {
  .kd-pc-layout { grid-template-columns: 1fr; gap: 36px; }
  .kd-pc-copy { order: -1; text-align: center; }
  .kd-pc-badge { width: 108px; height: 108px; }
}
@media (max-width: 640px) {
  .kd-pc-section { padding: 56px 0; }
  .kd-pc-copy h2 { font-size: 26px; }
  .kd-pc-badge { width: 92px; height: 92px; padding: 10px; }
  .kd-pc-badge svg { width: 38px; height: 38px; }
}