/* ────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — SECTION BLOCK
   Semantic unit that renders prompt + title + blurb + list together.
   ──────────────────────────────────────────────────────────────── */
@layer components {
  .ui-section-block {
    display: block;
    width: 100%;
  }

  /* Icon styling - subtle marker, not a badge */
  .ui-section-block__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 0.5rem;
    color: var(--site-accent, #2d5016);
    opacity: 0.7;
    /* No background - icon as marker only */
  }

  .ui-section-block__icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.75;
  }

  .ui-section-block__prompt {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
  }

  .ui-section-block__title {
    margin: 0 0 0.375rem 0;
    font-weight: 650;
    line-height: 1.25;
  }

  .ui-section-block__blurb {
    margin: 0;
    line-height: 1.5;
    color: var(--site-muted, #555);
  }

  .ui-section-block__list {
    margin: 0;
    padding: 0;
    list-style: none !important;
  }

  .ui-section-block__item {
    margin: 0 0 0.5rem 0;
    padding: 0;
    list-style: none !important;
  }

  .ui-section-block__item::before,
  .ui-section-block__item::after {
    display: none;
    content: none;
  }
}