/* IC Digital / Content blocks v2.
   Guideline v4: adds an optional wide list. Home v4 keeps v1. Requires typography-v1.css. */
:root {
  --content-measure: 740px;
  --content-ink: #101820;
  --content-muted: #464C52;
  --content-accent: #006CDA;
  --content-line: #DCE9F1;
}

/* Plain lists use one reading column by default. No enclosing line or panel. */
.bullet-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  max-width: var(--content-measure);
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.bullet-list > li {
  position: relative;
  min-width: 0;
  padding-left: 20px;
  color: var(--content-muted);
  font-size: var(--type-body);
  font-weight: var(--weight-text);
  line-height: var(--leading-body);
}
.bullet-list > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(.85em - 2.5px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--content-accent);
}
.list-group {
  max-width: var(--content-measure);
  margin-top: 28px;
}
.list-group > h3 {
  margin: 0;
  color: var(--content-ink);
  font-size: var(--type-body);
  font-weight: var(--weight-heading);
  line-height: var(--leading-ui);
  letter-spacing: normal;
}
.list-group > .bullet-list { margin-top: 16px; }

/* Numbered steps describe order. Arrows are reserved for actionable links. */
.step-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step-list > li,
.result-list > li {
  min-width: 0;
  border-top: 1px solid var(--content-line);
  padding-top: 16px;
}
.step-list__meta {
  display: block;
  color: var(--content-accent);
  font-size: var(--type-caption);
  font-weight: var(--weight-text);
  line-height: var(--leading-caption);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.step-list h3 {
  max-width: 380px;
  margin: 16px 0 0;
  color: var(--content-ink);
  font-size: var(--type-card);
  font-weight: var(--weight-heading);
  line-height: var(--leading-card);
  letter-spacing: -.65px;
}

/* Independent outcomes use dividers and inline emphasis, without numbers. */
.result-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.result-list p {
  max-width: var(--content-measure);
  margin: 0;
  color: var(--content-muted);
  font-size: var(--type-body);
  font-weight: var(--weight-text);
  line-height: var(--leading-body);
}
.result-list strong {
  color: var(--content-ink);
  font-weight: var(--weight-heading);
}
@media (max-width: 800px) {
  .step-list { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .step-list h3 { max-width: var(--content-measure); }
}
@media (max-width: 600px) {
  .result-list { grid-template-columns: minmax(0, 1fr); }
}

/* Wide placement is opt-in for short, independent bullet points.
   The region must use the full available column width, without a 740px cap.
   The list itself retains the base single-column measure below 800px. */
.list-region {
  min-width: 0;
  container-name: list-area;
  container-type: inline-size;
}
@container list-area (min-width: 800px) {
  .bullet-list--wide {
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 32px;
  }
}