/**
 * Reasons list.
 *
 * A sticky figure beside a numbered list. Nothing in the kit does this – `.split`
 * is a centred 1:1 pair and `.with-aside` puts the sticky column last – so the
 * two-column frame, the figure and the numbered item are all new here.
 *
 * The numbers come from a CSS counter, so an author cannot type "04" twice and
 * reordering the repeater renumbers the list for free.
 *
 * Ported from `_mockups/why-finas.html`, the `.p-reasons*` and `.p-reason*`
 * rules.
 */

.reasons-list__layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(var(--s-5), 4vw, var(--s-7));
  align-items: start;
}
/* No picture, no caption, no link: the list takes the whole column rather than
   leaving an empty grid track beside it. */
.reasons-list__layout--solo { grid-template-columns: 1fr; }

.reasons-list__media {
  position: sticky;
  inset-block-start: var(--sticky-offset);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.reasons-list__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-m);
}
.reasons-list__media figcaption {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  max-width: 38ch;
}

.reasons-list__items { counter-reset: reason; }

.reasons-list__item {
  counter-increment: reason;
  display: grid;
  grid-template-columns: clamp(var(--s-6), 6vw, var(--s-7)) 1fr;
  gap: var(--s-2) var(--s-4);
  padding-block: var(--s-4);
  align-items: start;
}
.reasons-list__item + .reasons-list__item { border-top: 1px solid var(--line); }
.reasons-list__item::before {
  content: counter(reason, decimal-leading-zero);
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--blue-tint-20);
}
/* The last number lands in gold, the same closing move the step rail makes. */
.reasons-list__item:last-child::before { color: var(--gold-deep); }
.reasons-list__item h3 {
  font-size: var(--text-lg);
  margin-block-end: 0.35em;
}
.reasons-list__item p {
  font-size: var(--text-s);
  color: var(--ink-soft);
  max-width: 54ch;
}

@media (max-width: 860px) {
  .reasons-list__layout { grid-template-columns: 1fr; }
  .reasons-list__media { position: static; }
}