/* =====================================================================
   OSE · Steps · styles/components/steps.css
   ---------------------------------------------------------------------
   A short numbered sequence ("Bắt đầu thế nào"): a hairline opens each
   step, then its number as a mono data label (01 · 02 · 03) and one
   sentence. No circles, no dashed path. From 48em the steps sit side by
   side and their rules join into one unbroken line, read left to right.
   Component tokens only: --steps-*.

   Markup
     <ol class="steps" role="list">
       <li class="steps__item">
         <span class="steps__number"><span class="visually-hidden">Bước </span>1</span>
         <p class="steps__text">Nhắn Zalo hoặc để lại số điện thoại.</p>
       </li>
       …
     </ol>
   role="list" keeps list semantics in Safari (list-style: none). The
   number is read with its "Bước" prefix, so the order is announced.
   Write the plain number (1, 2, 3): CSS pads steps 1–9 with a leading
   zero, which is decoration only (empty alt text), so screen readers
   still hear "Bước 1", not "Bước không một".

   Layout   < 48em: stacked, one step under another.
            >= 48em: one column per step; the column gap is padding after
                    each step's text, so the rules meet.
            .steps--vertical: stacked at every width.
   Static, no interactive states. No JS.
   ===================================================================== */

@layer components {
  .steps {
    display: grid;
    gap: var(--steps-gap);
    padding: 0;
    list-style: none;
  }

  .steps__item {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: var(--steps-item-gap);
    min-inline-size: 0;
    padding-block-start: var(--steps-item-padding-block);
    border-block-start: var(--steps-rule-width) solid var(--steps-rule);
  }

  .steps__number {
    font: var(--steps-number-font);
    letter-spacing: var(--steps-number-tracking);
    color: var(--steps-number-color);
    font-variant-numeric: tabular-nums;
  }

  /* 1 → 01: the zero is drawn, not read (the second declaration adds
     empty alt text; browsers without it keep the first). */
  .steps__item:nth-child(-n + 9) .steps__number::before {
    content: "0";
    content: "0" / "";
  }

  .steps__text {
    font: var(--steps-text-font);
    color: var(--steps-text-color);
    text-wrap: pretty;
  }

  @media (min-width: 48em) {
    .steps:not(.steps--vertical) {
      grid-auto-flow: column;
      grid-auto-columns: minmax(0, 1fr);
      column-gap: 0;
    }

    .steps:not(.steps--vertical) .steps__item {
      padding-inline-end: var(--steps-column-gap);
    }
  }
}