/* =====================================================================
   OSE · Feature list · styles/components/feature-list.css
   ---------------------------------------------------------------------
   Short reasons ("Vì sao chọn OSE"), set as type on a grid: a hairline
   opens each item, then a title in the heading family and one line of
   body text. No icons, no discs, no numbers (the reasons are not a
   sequence: numbered things are .steps). Stacked on phones, three columns
   from 48em. Component tokens only: --feature-list-*.

   Markup
     <ul class="feature-list" role="list">
       <li class="feature-list__item">
         <h3 class="feature-list__title">Lớp nhỏ, tối đa 15 học viên</h3>
         <p class="feature-list__text">Giáo viên theo sát từng con.</p>
       </li>
       …
     </ul>
   The title is the item's heading on pages (h3 under the section's h2);
   styling is class-driven, so any level renders the same.
   Retired: .feature-list__marker (the check disc). Old markup that still
   carries the span renders nothing for it; drop it from new markup.
   Variants  .feature-list--stacked: one column at every width.
   Static, no interactive states. No JS.
   ===================================================================== */

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

  @media (min-width: 48em) {
    .feature-list:not(.feature-list--stacked) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: var(--feature-list-column-gap);
    }
  }

  .feature-list__item {
    display: grid;
    align-content: start;
    justify-items: start;
    gap: var(--feature-list-item-gap);
    min-inline-size: 0;
    padding-block-start: var(--feature-list-item-padding-block);
    border-block-start: var(--feature-list-divider-width) solid var(--feature-list-divider);
  }

  .feature-list__marker {
    display: none;
  }

  .feature-list__title {
    font: var(--feature-list-title-font);
    letter-spacing: var(--feature-list-title-tracking);
    color: var(--feature-list-title-color);
    text-wrap: balance;
  }

  .feature-list__text {
    color: var(--feature-list-text-color);
  }
}