/**
 * @file
 * EP List Styles - List styling with grid-based spacing
 * 
 * Purpose: Centralized list styles for all EP modules
 * Location: /themes/custom/occasia_elegant/css/ep/components/ep-lists.css
 * Category: components/ (reusable UI components)
 * 
 * This file contains:
 * - List base styles
 * - List item spacing (grid-based)
 * - List variants
 * 
 * Design: All spacing uses grid system - never guess pixel values
 * 
 * Decision Rule: If it's a reusable UI component → components/
 * 
 * See: /bitnami/drupal/modules/.cursor/THEME_STRUCTURE.md for structure documentation
 */

/**
 * Base List Styles
 * 
 * All lists use grid-based spacing
 */

.ep-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ep-list-item-gap); /* Grid-based spacing */
}

.ep-list--spaced {
  margin: var(--ep-list-margin) 0; /* Grid-based spacing */
}

/**
 * List Items
 */

.ep-list__item {
  padding: var(--ep-list-item-padding-y) var(--ep-list-item-padding-x); /* Grid-based spacing */
  border-bottom: var(--ep-list-divider-width) solid var(--ep-color-list-divider);
}

.ep-list__item:last-child {
  border-bottom: none;
}

.ep-list__item:hover {
  background-color: var(--ep-color-bg-hover);
}

/**
 * List Variants
 */

/* Compact list */
.ep-list--compact .ep-list__item {
  padding: var(--ep-spacing-xs) var(--ep-spacing-sm); /* Grid-based spacing */
}

/* Spacious list */
.ep-list--spacious .ep-list__item {
  padding: var(--ep-spacing-md) var(--ep-spacing-lg); /* Grid-based spacing */
}

/* Grid list (multiple columns) */
.ep-list--grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--ep-component-gap); /* Grid-based spacing */
}

.ep-list--grid .ep-list__item {
  border-bottom: none;
  border: var(--ep-border-width) solid var(--ep-color-border-light);
  border-radius: var(--ep-border-radius);
}

/**
 * Definition Lists
 */

.ep-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--ep-form-grid-gap) var(--ep-spacing-lg); /* Grid-based spacing */
  margin: var(--ep-list-margin) 0;
}

.ep-dt {
  font-weight: var(--ep-font-weight-semibold);
  color: var(--ep-color-text-primary);
}

.ep-dd {
  margin: 0;
  color: var(--ep-color-text-secondary);
}