/* ==========================================================================
   SolutionsOnboardingPage — Page-specific styles
   ==========================================================================
   Loaded AFTER /marketing/Solutions/shared/PageStyles.css. Only contains the
   visual variations and components that differ from the shared base on the
   Onboarding page.
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/*  Split layout helper                                                        */
/* -------------------------------------------------------------------------- */

.sol-split {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.sol-split--reverse > :first-child {
  order: 2;
}

.sol-split--reverse > :last-child {
  order: 1;
}

/* -------------------------------------------------------------------------- */
/*  Visual card                                                                */
/* -------------------------------------------------------------------------- */

.sol-visual-card {
  border-radius: var(--sol-radius);
  border: 1px solid var(--sol-border);
  background: linear-gradient(180deg, rgba(15, 20, 32, 0.85), rgba(15, 20, 32, 0.65));
  padding: 1.5rem;
  box-shadow: var(--sol-shadow);
}

.sol-visual-card svg {
  width: 100%;
  height: auto;
  display: block;
}

/* -------------------------------------------------------------------------- */
/*  Responsive layouts                                                         */
/* -------------------------------------------------------------------------- */

@media (min-width: 980px) {
  .sol-hero-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: clamp(40px, 4vw, 64px);
  }

  .sol-hero-copy {
    justify-self: start;
    max-width: 680px;
  }

  .sol-hero-media {
    justify-self: end;
    width: min(100%, 600px);
  }

  .sol-proof-inner {
    display: flex;
    align-items: center;
    min-height: 120px;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .sol-proof-heading {
    flex: 1.1;
    min-height: 100px;
  }

  .sol-proof-stats {
    flex: 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sol-split {
    grid-template-columns: 1.05fr 0.95fr;
  }

  .sol-coaching-grid {
    grid-template-columns: 0.95fr 1.05fr;
  }

  .sol-challenge-grid {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .sol-card {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
  }

  .sol-card--coaching {
    grid-template-columns: 0.95fr 1.05fr;
    align-items: stretch;
  }

  .sol-card--challenge-list,
  .sol-card--coaching-list {
    grid-template-columns: 1fr;
  }

  .sol-feature-links-grid,
  .sol-data-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sol-benefits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .sol-section--hero {
    padding-top: 3.5rem;
  }
}

@media (max-width: 760px) {
  .solutions-onboarding-page .sol-separator {
    margin: clamp(1rem, 6vw, 1.5rem) 0;
  }

  .solutions-onboarding-page .sol-separator .unfold-separator-wrapper {
    --sol-sep-slot: 30px;
  }

  .solutions-onboarding-page
    .sol-separator.separator5-placeholder
    .vertical-cascade-separator-wrapper {
    height: 92px;
    padding: 1.4rem 0;
  }
}

@media (max-width: 640px) {
  .sol-benefits-header {
    max-width: 100%;
  }

  .sol-benefit-card {
    min-height: 0;
  }

  .sol-benefit-card__icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
  }
}

/* -------------------------------------------------------------------------- */
/*  Reduced-motion overrides specific to Onboarding visuals                    */
/* -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .pipeline-impact .pi-pipeline,
  .pipeline-impact .pi-callout,
  .pipeline-impact .pi-impact,
  .pipeline-impact .pi-bars {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .sol-benefit-card {
    transition: none !important;
    transform: none !important;
  }
}

/* -------------------------------------------------------------------------- */
/*  Home card / KPI hover stability overrides                                  */
/* -------------------------------------------------------------------------- */

[data-home-card-graph],
[data-home-card-graph].is-home-card-visible,
[data-home-card-graph]:hover,
.sol-proof-inner.animate-on-scroll.is-visible,
.sol-proof-inner:hover,
.sol-proof-stat:hover,
.sol-data-card,
.sol-data-card:hover,
.sol-benefit-card:hover,
.sol-challenge-visual-frame:hover {
  animation: none !important;
  transform: none !important;
}

[data-home-card-graph] {
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease !important;
  will-change: auto !important;
}