/* ==========================================================================
   List Component - リストコンポーネント
   Reusable list components for various content types
   ========================================================================== */

/* Base list component */
:where(.c-list) {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   Numbered List - 番号付きリスト
   ========================================================================== */

:where(.c-list--numbered) {
  counter-reset: list-counter;
}

:where(.c-list--numbered .c-list__item) {
  counter-increment: list-counter;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--20);
  margin-bottom: var(--wp--preset--spacing--lg);
  padding: var(--wp--preset--spacing--20);
  background: var(--wp--preset--color--white);
  border-radius: var(--wp--custom--border-radius--medium);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--wp--preset--color--gray-100);
  transition: var(--wp--custom--transition--default);
}

:where(.c-list--numbered .c-list__item:hover) {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  border-color: var(--wp--preset--color--primary-200);
}

:where(.c-list--numbered .c-list__item::before) {
  content: counter(list-counter);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  background: var(--wp--preset--color--primary-500);
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--wp--custom--font-weight--bold);
  border-radius: var(--wp--custom--border-radius--full);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(var(--wp--preset--color--primary-500-rgb), 0.3);
}

/* ==========================================================================
   Icon List - アイコン付きリスト
   ========================================================================== */

:where(.c-list--icon .c-list__item) {
  display: flex;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--base);
  margin-bottom: var(--wp--preset--spacing--base);
  padding: var(--wp--preset--spacing--sm);
}

:where(.c-list--icon .c-list__item::before) {
  content: "";
  width: 2.4rem;
  height: 2.4rem;
  background: var(--wp--preset--color--primary-500);
  border-radius: var(--wp--custom--border-radius--small);
  flex-shrink: 0;
  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>')
    no-repeat center;
  mask-size: 1.6rem;
}

/* ==========================================================================
   Bullet List - 箇条書きリスト
   ========================================================================== */

:where(.c-list--bullet .c-list__item) {
  position: relative;
  padding-left: var(--wp--preset--spacing--lg);
  margin-bottom: var(--wp--preset--spacing--sm);
  line-height: var(--wp--custom--line-height--relaxed);
}

:where(.c-list--bullet .c-list__item::before) {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 0.6rem;
  height: 0.6rem;
  background: var(--wp--preset--color--primary-500);
  border-radius: var(--wp--custom--border-radius--full);
  transform: translateY(-50%);
}

/* ==========================================================================
   Checkmark List - チェックマークリスト
   ========================================================================== */

:where(.c-list--check .c-list__item) {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--sm);
  margin-bottom: var(--wp--preset--spacing--sm);
  padding: var(--wp--preset--spacing--sm) 0;
}

:where(.c-list--check .c-list__item::before) {
  content: "✓";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: var(--wp--preset--color--success);
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--font-weight--bold);
  border-radius: var(--wp--custom--border-radius--full);
  flex-shrink: 0;
}

/* ==========================================================================
   Step List - ステップリスト
   ========================================================================== */

:where(.c-list--steps) {
  counter-reset: step-counter;
  position: relative;
}

:where(.c-list--steps::before) {
  content: "";
  position: absolute;
  left: 1.6rem;
  top: 4rem;
  bottom: 4rem;
  width: 2px;
  background: var(--wp--preset--color--gray-200);
  z-index: 0;
}

:where(.c-list--steps .c-list__item) {
  counter-increment: step-counter;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--20);
  margin-bottom: var(--wp--preset--spacing--xs);
  z-index: 1;
}

:where(.c-list--steps .c-list__item::before) {
  content: counter(step-counter);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  background: var(--wp--preset--color--white);
  border: 3px solid var(--wp--preset--color--primary-500);
  color: var(--wp--preset--color--primary-500);
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--font-weight--bold);
  border-radius: var(--wp--custom--border-radius--full);
  flex-shrink: 0;
}

:where(.c-list--steps .c-list__item:last-child) {
  margin-bottom: 0;
}

/* ==========================================================================
   List Content Elements
   ========================================================================== */

:where(.c-list__content) {
  flex: 1;
}

:where(.c-list__title) {
  font-size: var(--wp--preset--font-size--lg);
  font-weight: var(--wp--custom--font-weight--semibold);
  color: var(--wp--preset--color--gray-900);
  margin: 0 0 var(--wp--preset--spacing--sm) 0;
  line-height: var(--wp--custom--line-height--tight);
}

:where(.c-list__text) {
  font-size: var(--wp--preset--font-size--base);
  color: var(--wp--preset--color--basic-text);
  margin: 0;
  line-height: var(--wp--custom--line-height--relaxed);
}

:where(.c-list__meta) {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gray-500);
  margin-top: var(--wp--preset--spacing--4);
}

/* ==========================================================================
   List Variants
   ========================================================================== */

/* Compact list */
:where(.c-list--compact .c-list__item) {
  margin-bottom: var(--wp--preset--spacing--sm);
  padding: var(--wp--preset--spacing--sm);
}

:where(.c-list--compact.c-list--numbered .c-list__item::before) {
  width: 2.4rem;
  height: 2.4rem;
  font-size: var(--wp--preset--font-size--base);
}

/* Large list */
:where(.c-list--large .c-list__item) {
  margin-bottom: var(--wp--preset--spacing--xs);
  padding: var(--wp--preset--spacing--xs);
}

:where(.c-list--large.c-list--numbered .c-list__item::before) {
  width: 4rem;
  height: 4rem;
  font-size: var(--wp--preset--font-size--xl);
}

/* Borderless list */
:where(.c-list--borderless .c-list__item) {
  box-shadow: none;
  border: none;
  background: transparent;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */