/*
 * KIT PART: the even icon list (srk_iconlist(), inc/kit-iconlist.php).
 * About hero 4, 10 Oct 2026. Rohan: "Get the spacing right between icons.
 * Always even."
 *
 * One column of rows: an icon beside a title and a line of text. Within a
 * list every icon is the same size, on the same x, centred on its title's
 * FIRST line, the same distance from its text, and at the same pitch down the
 * column (every row is the tallest row's height: grid-auto-rows 1fr). Nothing
 * here is About only; set the custom properties on the list or an ancestor.
 *
 * Every selector carries two classes, so Elementor's Global Kit (printed
 * after the theme's stylesheets) does not win a tie.
 */

.srk-iconlist {
  --srk-il-icon: 28px;
  --srk-il-gap: 16px;
  --srk-il-row: clamp(14px, 2.2vh, 22px);
  --srk-il-title: var(--srpk-card-title, 20px);
  --srk-il-title-lh: 1.25;
  --srk-il-body: var(--srpk-card, 17px);
  --srk-il-color: var(--srk-accent-live, currentColor);
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr;
  row-gap: var(--srk-il-row);
}

.srk-iconlist .srk-iconlist-item {
  display: grid;
  grid-template-columns: var(--srk-il-icon) minmax(0, 1fr);
  column-gap: var(--srk-il-gap);
  align-items: start;
  margin: 0;
  padding: 0;
}

/* The icon's box is one title line tall, so the icon is centred on that line. */
.srk-iconlist .srk-iconlist-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--srk-il-icon);
  height: calc(var(--srk-il-title) * var(--srk-il-title-lh));
  font-size: var(--srk-il-title);
  line-height: var(--srk-il-title-lh);
  height: 1lh;
  overflow: visible;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--srk-il-color);
}

.srk-iconlist .srk-iconlist-icon svg {
  flex: none;
  display: block;
  width: var(--srk-il-icon);
  height: var(--srk-il-icon);
}

.srk-iconlist .srk-iconlist-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.srk-iconlist .srk-iconlist-title {
  display: block;
  font-size: var(--srk-il-title);
  line-height: var(--srk-il-title-lh);
  font-weight: 600;
  color: var(--srh-pale, #eaf0ff);
}

.srk-iconlist .srk-iconlist-body {
  display: block;
  font-size: var(--srk-il-body);
  line-height: 1.45;
  color: var(--srh-ink-soft, rgba(234, 240, 255, 0.78));
}

/*
 * Option: .srk-iconlist--under-ph. Under 700px the body runs under the icon
 * at the full width of the row, the title still beside its icon on the first
 * line: on a phone the words take fewer lines, the icons stay on one x, one
 * size, centred on their title's first line.
 */
@media (max-width: 699px) {
  .srk-iconlist--under-ph .srk-iconlist-item { row-gap: 4px; }
  .srk-iconlist--under-ph .srk-iconlist-text { display: contents; }
  .srk-iconlist--under-ph .srk-iconlist-icon { grid-column: 1; grid-row: 1; }
  .srk-iconlist--under-ph .srk-iconlist-title { grid-column: 2; grid-row: 1; }
  .srk-iconlist--under-ph .srk-iconlist-body { grid-column: 1 / -1; grid-row: 2; }
}