/**
 * Content list — compositional primitive.
 *
 * Vertical list of items with optional eyebrow + heading wrapper.
 * Three variants:
 *   - bullet — visual bullet (default brand-coloured square)
 *   - feature — icon-led, two-line items (icon + title + description)
 *   - numbered — for ordered processes
 *
 * Used in:
 *   - Deck slides ("What you get" feature lists)
 *   - EDM section breakdowns
 *   - Sell-sheet specs blocks
 *   - Cinema holding-page schedule listings
 *
 * Markup:
 *   <div class="ds-list">
 *     <p class="ds-list__eyebrow">What's included</p>
 *     <h3 class="ds-list__heading">Collector's Edition contents</h3>
 *     <ul class="ds-list__items ds-list__items--bullet">
 *       <li>4K UHD + Blu-ray discs</li>
 *       <li>Custom slipcase by Cygames</li>
 *       <li>16-page liner notes</li>
 *     </ul>
 *   </div>
 */

.ds-list {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-sm);
}

.ds-list__eyebrow {
  font-size: var(--ds-text-caption);
  font-weight: var(--ds-weight-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-color-text-action);
  margin: 0;
}

.ds-list__heading {
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-heading-md);
  font-weight: var(--ds-weight-heading);
  line-height: var(--ds-leading-heading);
  color: var(--ds-color-text-heading);
  margin: 0;
}

.ds-list__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-xs);
}

.ds-list__items > li {
  position: relative;
  padding-left: var(--ds-space-md);
  font-size: var(--ds-text-body-md);
  line-height: var(--ds-leading-body);
  color: var(--ds-color-text-primary);
}

/* ─── Bullet variant ──────────────────────────────────────────
   Brand-coloured square as the bullet — matches the AJ2026 deck pattern. */
.ds-list__items--bullet > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: var(--ds-space-2xs);
  height: var(--ds-space-2xs);
  background: var(--ds-color-brand-action);
  border-radius: var(--ds-radius-sm);
}

/* ─── Numbered variant ─────────────────────────────────────── */
.ds-list__items--numbered {
  counter-reset: list;
}
.ds-list__items--numbered > li {
  counter-increment: list;
  padding-left: var(--ds-space-lg);
}
.ds-list__items--numbered > li::before {
  content: counter(list);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--ds-space-md);
  height: var(--ds-space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ds-font-display);
  font-size: var(--ds-text-caption);
  font-weight: var(--ds-weight-display);
  line-height: 1;
  color: var(--ds-color-text-inverse);
  background: var(--ds-color-brand-primary);
  border-radius: var(--ds-radius-full);
}

/* ─── Feature variant ─────────────────────────────────────────
   Icon-led, two-line items. Each li has an icon-block on the left
   and a title + description on the right. */
.ds-list__items--feature {
  gap: var(--ds-space-md);
}
.ds-list__items--feature > li {
  padding-left: 0;
  display: flex;
  gap: var(--ds-space-md);
  align-items: flex-start;
}
.ds-list__items--feature > li::before { display: none; }
.ds-list__items--feature > li > .ds-icon { flex-shrink: 0; margin-top: var(--ds-space-3xs); }

.ds-list__feature-title {
  font-size: var(--ds-text-heading-sm);
  font-weight: var(--ds-weight-heading);
  color: var(--ds-color-text-heading);
  margin: 0 0 var(--ds-space-3xs) 0;
}
.ds-list__feature-desc {
  font-size: var(--ds-text-body-sm);
  color: var(--ds-color-text-secondary);
  margin: 0;
}

/* ─── Inverse modifier — for dark surfaces ──────────────────── */
.ds-list--inverse .ds-list__heading,
.ds-list--inverse .ds-list__feature-title { color: var(--ds-color-text-inverse); }
.ds-list--inverse .ds-list__items > li,
.ds-list--inverse .ds-list__feature-desc { color: var(--ds-color-text-inverse-secondary); }
.ds-list--inverse .ds-list__eyebrow { color: var(--ds-color-brand-highlight); }
.ds-list--inverse .ds-list__items--bullet > li::before { background: var(--ds-color-brand-highlight); }
.ds-list--inverse .ds-list__items--numbered > li::before {
  background: var(--ds-color-brand-highlight);
  color: var(--ds-color-text-primary);
}