/**
 * Sections, Grid, Icons, Badges
 */

/* ==================== SECTIONS ==================== */

.section {
  position: relative;
  border-top: 1px solid rgba(37, 52, 76, 0.1);
}

.section__inner {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--section-py) var(--container-px);
}

.section__header {
  margin-bottom: var(--space-12);
}

.section-sm {
  padding: var(--section-spacing-sm) 0;
}

.section-xl {
  padding: var(--section-spacing-xl) 0;
}

.section-dark {
  background-color: var(--color-bg-dark);
  color: white;
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6 {
  color: white;
}

.section-light {
  background-color: var(--color-bg-white);
}

/* ==================== GRID ==================== */

.grid {
  display: grid;
  gap: var(--space-8);
}

.grid-2,
.grid-3,
.grid-4 {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ==================== ICONS ==================== */

.icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

.icon-small {
  width: 16px;
  height: 16px;
}

/* ==================== BADGES ==================== */

.badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
  background-color: var(--color-accent-soft);
  color: var(--color-primary);
}

/* ==================== RESPONSIVE ==================== */

@media (min-width: 1024px) {
  .container {
    padding-left: var(--container-px-lg);
    padding-right: var(--container-px-lg);
  }

  .section__inner {
    padding: var(--section-py-lg) var(--container-px-lg);
  }

  .section__header {
    margin-bottom: var(--space-16);
  }
}