/* ============================================================
   pacy-section-solution-ladder.css
   Four-column staircase card grid
   ============================================================ */


/* ─── Flush section modifier ──────────────────────────────── */

.pacy-section--ladder-flush { padding-bottom: 0; }

@media (max-width: 900px) {
  .pacy-section--ladder-flush { padding-bottom: 3rem; }
}


/* ─── Grid ────────────────────────────────────────────────── */

.pacy-solution-ladder {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 1.25rem;
  align-items: end;
}


/* ─── Card ────────────────────────────────────────────────── */

.pacy-solution-card {
  border-radius: var(--pacy-radius-lg) var(--pacy-radius-lg) 0 0;
  padding: 2rem 1.75rem 2rem;
  transition: background var(--pacy-transition), border-color var(--pacy-transition);
}

/* Staircase — col 1 tallest, each step descends */
.pacy-solution-card:nth-child(1) { padding-top: 2rem; }
.pacy-solution-card:nth-child(2) { padding-top: calc(2rem + 18px); }
.pacy-solution-card:nth-child(3) { padding-top: calc(2rem + 35px); }
.pacy-solution-card:nth-child(4) { padding-top: calc(2rem + 45px); }


/* ─── Icon ────────────────────────────────────────────────── */

.pacy-solution-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--pacy-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.pacy-solution-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
  display: block;
  flex-shrink: 0;
}


/* ─── Title ───────────────────────────────────────────────── */

.pacy-solution-title {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  line-height: 1.3;
}


/* ─── List ────────────────────────────────────────────────── */

.pacy-solution-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.pacy-solution-list li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.pacy-solution-list li::before {
  content: '›';
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.5;
  flex-shrink: 0;
}


/* ─── Theme: dark-blue-bg ─────────────────────────────────── */

.dark-blue-bg .pacy-solution-card       { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); }
.dark-blue-bg .pacy-solution-card:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.18); }
.dark-blue-bg .pacy-solution-icon       { background: rgba(0, 186, 255, 0.15); color: var(--pacy-accent-3); }
.dark-blue-bg .pacy-solution-title      { color: var(--pacy-white); }
.dark-blue-bg .pacy-solution-list li    { color: var(--pacy-dark-4); }
.dark-blue-bg .pacy-solution-list li::before { color: var(--pacy-accent-3); }


/* ─── Theme: dark-solid-bg ────────────────────────────────── */

.dark-solid-bg .pacy-solution-card       { background: var(--pacy-dark-2); border: 1px solid rgba(255, 255, 255, 0.07); }
.dark-solid-bg .pacy-solution-card:hover { background: rgba(255, 255, 255, 0.06); }
.dark-solid-bg .pacy-solution-icon       { background: rgba(0, 186, 255, 0.12); color: var(--pacy-accent-3); }
.dark-solid-bg .pacy-solution-title      { color: var(--pacy-white); }
.dark-solid-bg .pacy-solution-list li    { color: var(--pacy-dark-4); }
.dark-solid-bg .pacy-solution-list li::before { color: var(--pacy-accent-3); }


/* ─── Theme: white-bg ─────────────────────────────────────── */

.white-bg .pacy-solution-card       { background: var(--pacy-base-2); border: 1px solid var(--pacy-base-1); }
.white-bg .pacy-solution-card:hover { background: var(--pacy-white); border-color: var(--pacy-dark-4); }
.white-bg .pacy-solution-icon       { background: var(--pacy-base-1); color: var(--pacy-accent-2); }
.white-bg .pacy-solution-title      { color: var(--pacy-dark-1); }
.white-bg .pacy-solution-list li    { color: var(--pacy-dark-3); }
.white-bg .pacy-solution-list li::before { color: var(--pacy-accent-2); }


/* ─── Theme: subtle-bg ────────────────────────────────────── */

.subtle-bg .pacy-solution-card       { background: var(--pacy-white); border: 1px solid var(--pacy-base-1); }
.subtle-bg .pacy-solution-card:hover { border-color: var(--pacy-dark-4); }
.subtle-bg .pacy-solution-icon       { background: var(--pacy-base-1); color: var(--pacy-accent-2); }
.subtle-bg .pacy-solution-title      { color: var(--pacy-dark-1); }
.subtle-bg .pacy-solution-list li    { color: var(--pacy-dark-3); }
.subtle-bg .pacy-solution-list li::before { color: var(--pacy-accent-2); }


/* ─── Theme: light-grey-bg ────────────────────────────────── */
/* light-grey-bg already sets base text colors via pacy-canvas-base.css;
   this only adds the solution-card specific treatment. */

.light-grey-bg .pacy-solution-card       { background: var(--pacy-white); border: 1px solid var(--pacy-base-1); }
.light-grey-bg .pacy-solution-card:hover { background: var(--pacy-white); border-color: var(--pacy-dark-4); }
.light-grey-bg .pacy-solution-icon       { background: var(--pacy-base-1); color: var(--pacy-accent-2); }
.light-grey-bg .pacy-solution-title      { color: var(--pacy-dark-1); }
.light-grey-bg .pacy-solution-list li    { color: var(--pacy-dark-3); }
.light-grey-bg .pacy-solution-list li::before { color: var(--pacy-accent-2); }


/* ─── Responsive ──────────────────────────────────────────── */

@media (max-width: 900px) {
  .pacy-solution-ladder {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    align-items: stretch;
  }

  .pacy-solution-card {
    border-radius: var(--pacy-radius-lg);
    padding: 1.75rem;
  }

  .pacy-solution-card:nth-child(1),
  .pacy-solution-card:nth-child(2),
  .pacy-solution-card:nth-child(3),
  .pacy-solution-card:nth-child(4) {
    padding-top: 1.75rem;
  }
}

@media (max-width: 560px) {
  .pacy-solution-ladder { grid-template-columns: 1fr; }
}