/**
 * Simple Section Component
 *
 * Styles for overline, lists, dividers, and responsive grids.
 */

/* Overline/eyebrow text */
.overline {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: oklch(var(--bc) / 0.6);
  margin-bottom: 0.5rem;
}

/* List styles */
.simple-section__list {
  padding-left: 1.5rem;
}

.list-none {
  list-style: none;
  padding-left: 0;
}

.list-check {
  list-style: none;
  padding-left: 0;
}

.list-check li::before {
  content: "✓";
  margin-right: 0.5rem;
  color: oklch(var(--p));
}

/* Divider variants */
.divider--dashed {
  border-style: dashed;
}

.divider--thick {
  border-width: 3px 0 0 0;
}

/* Stat styling */
.simple-section__stat {
  text-align: center;
}

.simple-section__stat-value {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.simple-section__stat-label {
  display: block;
  font-size: 0.875rem;
  color: oklch(var(--bc) / 0.6);
}

/* Text item styling */
.simple-section__text-item {
  text-align: center;
}

.simple-section__text-item i {
  font-size: 2rem;
  color: oklch(var(--p));
  margin-bottom: 1rem;
}

/* Responsive grid for texts/images - mobile first */
.simple-section__texts,
.simple-section__images {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

@media (min-width: 768px) {
  .simple-section__texts.grid-cols-2,
  .simple-section__images.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .simple-section__texts.grid-cols-3,
  .simple-section__images.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .simple-section__texts.grid-cols-4,
  .simple-section__images.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .simple-section__texts.grid-cols-5,
  .simple-section__images.grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
  }

  .simple-section__texts.grid-cols-6,
  .simple-section__images.grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}