/* Content group + icon list — generic, reusable "titled block of
   icon-prefixed items" pattern. First built for the Claims page's
   "What happens if you need to make a claim?" section
   (css/category-page.css's .content-columns__detail, Figma node
   18602:11665), but knows nothing about claims, insurance or renewal —
   reusable anywhere a heading + list of icon-marked points + optional
   supporting copy is needed (requirements, steps, do/don't lists, etc.).

   Structure:
     .content-group                       (one titled block)
       > .content-group__heading
       > .content-group__note             (optional, plain supporting copy — before or after the list)
       > .icon-list
           > .icon-list__item (li)
               > .icon-list__icon > img   (12x12 icon asset, colour baked into the SVG per instance)
               > .icon-list__text (p)

   .content-group-divider sits as its own sibling BETWEEN groups (not a
   border on the group itself) so a group can be reused standalone with no
   divider either side — matches the source Figma's own divider-as-element
   structure. */

.content-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-l); /* 16px */
  width: 100%;
}

/* Typography comes from .text-h5 (css/typography.css). */
.content-group__heading {
  margin: 0;
  color: var(--colour-header-grey);
  width: 100%;
}

/* Typography comes from .text-body (css/typography.css). Plain supporting
   paragraph — used both as a lead-in before the list and as a closing
   note after it, depending on the instance. */
.content-group__note {
  margin: 0;
  color: var(--colour-body-grey);
  width: 100%;
}

.content-group__note a {
  color: var(--colour-orange);
  text-decoration: underline;
}

.content-group-divider {
  width: 100%;
  height: 0;
  margin: 20px 0;
  border: none;
  border-top: 1px solid var(--colour-grey-200);
}

/* The divider sits as a flex sibling inside .content-columns__detail
   (css/category-page.css), which already puts its own gap between every
   child — this margin is extra space on top of that gap, either side of
   the divider. That gap shrinks from 42px to 32px at ≤767px, but this
   margin never did, so mobile ended up with proportionally more fixed,
   unresponsive space around every divider than desktop has. Removed
   entirely on mobile — the flex gap alone is enough separation at that
   size, so the divider no longer adds its own on top of it. */
@media (max-width: 767px) {
  .content-group-divider {
    margin: 0;
  }
}

/* ---- Icon list ---- */

.icon-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-s); /* 8px */
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.icon-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s); /* 8px */
  width: 100%;
}

/* 26px tall to centre the 12px icon against the first line of body copy
   (text-body's own 25.6px line height), not the icon's own size. */
.icon-list__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 26px;
}

.icon-list__icon img {
  display: block;
  width: 12px;
  height: 12px;
}

/* Typography comes from .text-body (css/typography.css). */
.icon-list__text {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  color: var(--colour-body-grey);
}

.icon-list__text a {
  color: var(--colour-orange);
  text-decoration: underline;
}