/* =========================================================================
   HOW TO ADOPT PAGE
   ========================================================================= */

/* ---- INTRO ------------------------------------------------------------ */
.adopt-intro {
  padding-block: var(--space-xl) var(--space-lg);
}

.adopt-intro__heading {
  font-size: var(--text-xl);
  max-width: 18ch;
}

.adopt-intro__copy {
  color: var(--colour-ink-soft);
  max-width: 60ch;
}

/* ---- STEPS -------------------------------------------------------------
   A genuine ordered sequence: numbered steps + the lead-line signature
   used as the literal thread connecting one step to the next. */
.adopt-steps {
  padding-block: var(--space-lg) var(--space-xl);
}

.adopt-steps__grid {
  display: grid;
  grid-template-columns: 1fr;
}

.adopt-step {
  padding: var(--space-md);
  background: var(--colour-paper-raised);
  border: 1px solid var(--colour-border-soft);
  border-radius: var(--radius-md);
}

.adopt-step__number {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--colour-leash);
}

.adopt-step__heading {
  margin-top: var(--space-3xs);
  font-size: var(--text-md);
}

.adopt-step__copy {
  margin-top: var(--space-2xs);
  color: var(--colour-ink-soft);
  font-size: var(--text-sm);
}

.adopt-steps__connector {
  margin-block: var(--space-2xs);
}

@media (min-width: 64rem) {
  .adopt-steps__grid {
    grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1fr) 2.5rem minmax(0, 1fr) 2.5rem minmax(0, 1fr) 2.5rem minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-sm);
  }

  .adopt-steps__connector {
    margin: 0;
  }

  .adopt-steps__connector svg {
    width: 100%;
  }
}

/* ---- FAQ ----------------------------------------------------------------- */
.adopt-faq {
  padding-block: var(--space-xl);
  background: var(--colour-paper-sunken);
}

.adopt-faq__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  grid-template-areas:
    "adopt-faq-heading"
    "adopt-faq-list";
}

.adopt-faq__heading {
  font-size: var(--text-xl);
}

.adopt-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.adopt-faq__item {
  background: var(--colour-paper-raised);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--colour-border-soft);
}

.adopt-faq__item summary {
  font-weight: 800;
  cursor: pointer;
}

.adopt-faq__item p {
  margin-top: var(--space-2xs);
  color: var(--colour-ink-soft);
  font-size: var(--text-sm);
}

@media (min-width: 64rem) {
  .adopt-faq__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas: "adopt-faq-heading adopt-faq-heading adopt-faq-heading adopt-faq-heading . adopt-faq-list adopt-faq-list adopt-faq-list adopt-faq-list adopt-faq-list adopt-faq-list adopt-faq-list";
    column-gap: var(--space-lg);
  }
}

/* ---- CTA ------------------------------------------------------------------ */
.adopt-cta {
  padding-block: var(--space-lg) var(--space-xl);
}

.adopt-cta__grid {
  background: var(--colour-field-pale);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.adopt-cta__heading {
  font-size: var(--text-lg);
}