/* cs-compare-lists — full-width colored band, two heading+list columns with a
   center divider. All rem values follow BB Theme's html { font-size: 10px }. */

/* Strip BB's default row chrome so the band meets flush. */
.fl-row-content-wrap:has(.cs-compare-lists) {
  padding-block: 0;
}
.fl-module-content:has(.cs-compare-lists) {
  margin-block: 0;
}

.cs-compare-lists {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #5274b1;
  padding-block: 6.4rem;
  font-family: var(--cs-font-body);
  color: var(--cs-white);
}

.cs-compare-lists__inner {
  max-width: var(--cs-container);
  margin: 0 auto;
  padding-inline: var(--cs-gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--cs-space-2xl);
  align-items: start;
}

/* Doubled class + font-style so BB Global h2 rules lose. */
.cs-compare-lists .cs-compare-lists__heading {
  margin: 0 0 var(--cs-space-lg);
  font-family: var(--cs-font-display);
  font-weight: 800;
  font-size: 2.4rem; /* 24px */
  font-style: normal;
  line-height: 1.212;
  color: #eff3fd;
  text-transform: capitalize;
}

.cs-compare-lists__list {
  font-family: var(--cs-font-display);
  font-weight: 500;
  font-size: 1.6rem; /* 16px */
  line-height: 1.5;
  color: var(--cs-white);
}

.cs-compare-lists__list ul {
  margin: 0;
  padding-left: 2rem;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.cs-compare-lists__list li {
  text-transform: capitalize;
}

/* Right column — right-aligned text + bullets on the right */
.cs-compare-lists__col--right {
  text-align: right;
}
.cs-compare-lists__col--right .cs-compare-lists__list ul {
  padding-left: 0;
  padding-right: 2rem;
  list-style-position: inside;
}

/* Center divider */
.cs-compare-lists__divider {
  width: 1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.4);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .cs-compare-lists__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cs-space-lg);
  }
  .cs-compare-lists__divider {
    width: auto;
    height: 1px;
  }
  .cs-compare-lists__col--right {
    text-align: left;
  }
  .cs-compare-lists__col--right .cs-compare-lists__list ul {
    padding-left: 2rem;
    padding-right: 0;
    list-style-position: outside;
  }
}

/* ============================================================
   Soft style — transparent (page bg shows through), no band,
   no divider, centered heading + two centered rich-text columns.
   Used for the contact-page "crisis resources" section.
   ============================================================ */
.cs-compare-lists--soft {
  background: transparent;
  color: var(--cs-ink, #1c2434);
  padding-block: 8rem;
  overflow: hidden; /* clip decoration glows to the section */
}

/* Soft inner is a simple centered stack — reset the band's 3-col grid. */
.cs-compare-lists--soft .cs-compare-lists__inner {
  display: block;
}

/* Centered accent heading (soft only). */
.cs-compare-lists--soft .cs-compare-lists__title {
  margin: 0 auto 4.8rem;
  max-width: 88rem;
  font-family: var(--cs-font-display);
  font-weight: 800;
  font-style: normal;
  font-size: clamp(2.6rem, 1.9rem + 2vw, 3.6rem);
  line-height: 1.15;
  text-align: center;
  color: var(--cs-ink, #1c2434);
}
.cs-compare-lists--soft .cs-compare-lists__heading-accent {
  color: #fc7f56;
}

/* Two centered text columns. */
.cs-compare-lists--soft .cs-compare-lists__cols {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10rem;
}
.cs-compare-lists--soft .cs-compare-lists__col {
  flex: 1 1 42rem;
  max-width: 42rem;
  text-align: center;
}

/* Optional per-column heading (only rendered when provided). */
.cs-compare-lists--soft .cs-compare-lists__heading {
  margin: 0 0 var(--cs-space-md, 1.6rem);
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-style: normal;
  font-size: 1.8rem;
  line-height: 1.3;
  text-align: center;
  color: var(--cs-ink, #1c2434);
  text-transform: none;
}

/* Small rich-text body. */
.cs-compare-lists--soft .cs-compare-lists__list {
  font-family: var(--cs-font-body);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.55;
  text-align: center;
  color: rgba(28, 36, 52, 0.85);
}
.cs-compare-lists--soft .cs-compare-lists__list p {
  margin: 0 0 1.2rem;
}
.cs-compare-lists--soft .cs-compare-lists__list p:last-child {
  margin-bottom: 0;
}
.cs-compare-lists--soft .cs-compare-lists__list a {
  color: inherit;
  text-decoration: underline;
}

@media (max-width: 768px) {
  .cs-compare-lists--soft {
    padding-block: 5.6rem;
  }
  .cs-compare-lists--soft .cs-compare-lists__cols {
    flex-direction: column;
    align-items: center;
    gap: 4rem;
  }
  .cs-compare-lists--soft .cs-compare-lists__col {
    flex-basis: auto;
    width: 100%;
    max-width: 42rem;
  }
}