/* ins-pi Check List — section heading + bulleted list with accent circle badges.
   Layout responds to the MODULE'S own width (container queries) so it works
   inside full-width sections, 2-col sections, 3-col sections, or sidebars. */

.ins-cl {
  container-type: inline-size;
  container-name: ins-cl;
}

.ins-cl-bg-transparent { background: transparent; color: inherit; }
.ins-cl-bg-light       { background: var(--bg); color: var(--fg); }
.ins-cl-bg-elevated    { background: var(--bg-elevated); color: var(--fg); }
.ins-cl-bg-dark        { background: var(--bg-corporate); color: var(--fg-corporate); }

/* Inner wrapper holds the vertical padding so container queries can tune it */
.ins-cl__inner { padding: var(--sp-12) 0; }

/* When the module sits inside a narrow DnD column, drop the theme container's
   horizontal padding / max-width so content uses the column's full usable width. */
.ins-cl__container { padding-left: 0; padding-right: 0; }

/* Head */
.ins-cl__head {
  margin: 0 0 var(--sp-10);
  max-width: 900px;
}
.ins-cl-align-center .ins-cl__head { margin-left: auto; margin-right: auto; text-align: center; }
.ins-cl-align-left   .ins-cl__head { text-align: left; }

.ins-cl__heading { font-family: var(--font-display); margin: 0; color: inherit; }
.ins-cl__heading-display {
  font-size: clamp(24px, 6cqi, var(--fs-display-l));
  letter-spacing: var(--tr-display-l);
  line-height: 1.05;
  font-weight: 800;
  text-transform: uppercase;
}
.ins-cl__heading-h2 {
  font-size: clamp(22px, 5cqi, var(--fs-h1));
  letter-spacing: var(--tr-h1);
  line-height: var(--lh-h1);
  font-weight: 700;
}
.ins-cl__heading-h3 {
  font-size: clamp(20px, 4cqi, var(--fs-h2));
  line-height: var(--lh-h2);
  font-weight: 700;
}

.ins-cl__intro { margin-top: var(--sp-4); color: var(--fg-muted); }
.ins-cl-bg-dark .ins-cl__intro { color: var(--gray-300); }

/* List — vertical rhythm scales fluidly with the module's width */
.ins-cl__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(20px, 4cqi, 40px);
}
/* Mobile / narrow: always single column regardless of `columns` setting */
.ins-cl__list-2 { grid-template-columns: 1fr; }

/* Item — the item carries the title font-size so 1em math stays consistent
   across both the icon column and the text column. */
.ins-cl__item {
  font-size: clamp(17px, 2.4cqi, var(--fs-h3));
  --ins-cl-title-lh: 1.25;
  --ins-cl-icon: clamp(32px, 1.9em, 48px);
  display: grid;
  grid-template-columns: var(--ins-cl-icon) minmax(0, 1fr);
  column-gap: clamp(12px, 2.6cqi, 22px);
  align-items: start;
}

.ins-cl__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ins-cl-icon);
  height: var(--ins-cl-icon);
  border-radius: 50%;
  background: var(--ins-cl-accent);
  box-shadow: 0 6px 18px -10px color-mix(in oklab, var(--ins-cl-accent) 65%, transparent);
  flex: none;
  /* Center the badge vertically on the title's first line box */
  margin-top: calc((1em * var(--ins-cl-title-lh) - var(--ins-cl-icon)) / 2);
}
.ins-cl__check svg { width: 58%; height: 58%; }

.ins-cl__text { min-width: 0; }

.ins-cl__title {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0 0 clamp(4px, 0.8cqi, 10px);
  font-size: inherit;
  line-height: var(--ins-cl-title-lh);
  color: inherit;
}

.ins-cl__sub {
  font-size: clamp(14px, 1.7cqi, var(--fs-body));
  line-height: 1.55;
  color: var(--fg-muted);
}
.ins-cl__sub p { margin: 0 0 var(--sp-2); }
.ins-cl__sub p:last-child { margin-bottom: 0; }
.ins-cl-bg-dark .ins-cl__sub { color: var(--gray-300); }

/* --- Container-query-driven breakpoints (based on the module's own width) --- */

/* ~420px: roomier vertical padding / head spacing, still single column list */
@container ins-cl (min-width: 420px) {
  .ins-cl__inner { padding: var(--sp-16) 0; }
  .ins-cl__head { margin-bottom: var(--sp-12); }
}

/* ~720px: activate 2-column list if user chose it, generous outer padding */
@container ins-cl (min-width: 720px) {
  .ins-cl__inner { padding: var(--sp-20) 0; }
  .ins-cl__head { margin-bottom: var(--sp-16); }
  .ins-cl__list-2 { grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3cqi, 40px); }
}

/* Fallback for browsers without @container support — use viewport queries so
   full-width placements still get the larger layout. */
@supports not (container-type: inline-size) {
  @media (min-width: 768px) {
    .ins-cl__inner { padding: var(--sp-20) 0; }
    .ins-cl__head { margin-bottom: var(--sp-16); }
    .ins-cl__list-2 { grid-template-columns: 1fr 1fr; column-gap: var(--sp-10); }
    .ins-cl__heading-display { font-size: clamp(28px, 4.4vw, var(--fs-display-l)); }
  }
}