/*
 * sd-finder-entry — "Find Your Solution" entry section (Session 3.2; Blueprint 9.4, 9.4.1, 9.26–9.28)
 * A reusable section that leads into the Solution Finder: homepage section "How Can We Help You?" (5.10, 9.4.1)
 * and other pages where the next step is unclear (Services, Products, Solutions overview pages).
 * Content: label, H2, description, one primary action "Find Your Solution" (10.24), and a static preview
 * of the four Finder steps (9.6–9.11) so visitors know what to expect. The steps are text, not controls.
 * Visual: numbered circle markers on a thin blue line; the last marker (the recommendation) is copper —
 * the approved stages pattern (D-026), without animation.
 */

.sd-finder-entry {
  display: grid;
  gap: var(--sd-space-6);
  align-items: center;
}

@media (min-width: 1024px) {
  .sd-finder-entry {
    grid-template-columns: 6fr 5fr;
    column-gap: var(--sd-space-8);
  }
}

.sd-finder-entry__text { display: grid; gap: var(--sd-space-3); justify-items: start; }
.sd-finder-entry__title { max-width: 18ch; }
.sd-finder-entry__lead { max-width: 44ch; }
.sd-finder-entry__action { margin-top: var(--sd-space-3); }

/* ---------- Step preview ---------- */

.sd-finder-entry__steps-title { margin-bottom: var(--sd-space-3); }

.sd-finder-entry__steps {
  position: relative;
  display: grid;
  gap: var(--sd-space-4);
  margin: 0;
  padding: var(--sd-space-5);
  border: var(--sd-border-width) solid var(--sd-color-card-divider);
  border-radius: var(--sd-radius-md);
  background: var(--sd-color-surface);
  list-style: none;
  counter-reset: sd-finder-step;
}

.sd-finder-entry__step {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--sd-space-3);
  align-items: start;  /* marker at the top, so the line always starts at its edge (F-08) */
  counter-increment: sd-finder-step;
}

.sd-finder-entry__step > span { padding-top: 0.125rem; }

/* Number marker (44px circle, approved stages pattern) */
.sd-finder-entry__step::before {
  content: counter(sd-finder-step);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--sd-border-width-strong) solid var(--sd-color-brand-blue);
  border-radius: 50%;
  background: var(--sd-color-surface);
  color: var(--sd-color-brand-blue);
  font-weight: var(--sd-font-weight-medium);
  font-variant-numeric: tabular-nums;
}

/* Connecting line to the next step: from the lower edge of this marker to the upper edge of the next one,
   whatever the height of the text (owner request F-08, Session 5.2) */
.sd-finder-entry__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2.75rem;
  bottom: calc(-1 * var(--sd-space-4));
  left: calc(1.375rem - 1px);
  width: 2px;
  background: var(--sd-color-line-secondary);
}

/* The recommendation: copper marker — the end of the process (Blueprint 3.6) */
.sd-finder-entry__step:last-child::before { border-color: var(--sd-color-accent-copper); color: var(--sd-color-text-accent); }

.sd-finder-entry__step-title {
  display: block;
  font-weight: var(--sd-font-weight-medium);
  color: var(--sd-color-text-heading);
}

.sd-finder-entry__step-text {
  display: block;
  font-size: var(--sd-font-size-small);
  line-height: var(--sd-line-height-small);
  color: var(--sd-color-text-muted);
}