/*
 * Icon List Row: one row of the Icon List card — icon + title, then the text.
 * Figma "Eleken Site 2026": desktop 503:1884, tablet 503:3374, mobile 503:4950.
 *
 * This CSS lives inside the component's Shadow DOM: site classes never reach it,
 * but site variables (var(--…)) and the site's @font-face fonts do. Browser
 * default styles still apply, hence the explicit margin resets below.
 * Breakpoints follow Webflow: desktop ≥992 (base), tablet ≤991, mobile ≤767.
 */

:host {
  display: block;
}

.ilr,
.ilr *,
.ilr *::before,
.ilr *::after {
  box-sizing: border-box;
}

/* Desktop: icon + title in a 362px column, 80px, text */
.ilr {
  position: relative;
  display: flex;
  gap: 80px;
  align-items: flex-start;
  /* Every row starts with the divider band: in Figma rows are 24px, line, 24px apart,
     and the 0-high line is drawn in the 1px above its y. Icon List clips this band
     off its first row, so the lines only ever sit between rows. */
  padding-top: 48px;
  color: var(--colors--main, #1d1e22);
  font-family: "Inter Variable Local", Inter, Arial, sans-serif;
  font-weight: 400;
  letter-spacing: normal;
  text-align: left;
  overflow-wrap: break-word;
}

/* Figma Line: 1px #BCB5AF, 2px dash / 2px gap from the left edge, at any width */
.ilr::before {
  content: "";
  position: absolute;
  top: 23px;
  right: 0;
  left: 0;
  height: 1px;
  background: repeating-linear-gradient(90deg, #bcb5af 0 2px, transparent 2px 4px);
}

.ilr-head {
  display: flex;
  flex: none;
  gap: 8px;
  align-items: center;
  width: 362px;
}

/* Decorative. An uploaded image is fitted into the 24×24 box (20×20 on mobile). */
.ilr-icon {
  flex: none;
  width: 24px;
  height: 24px;
  background-image: var(--ilr-icon, var(--icon-list-icon, var(--ilr-icon-default)));
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.ilr-title {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  color: rgba(29, 30, 34, 0.8);
  font-family: Regolapro, "Regola Pro", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.01em;
}

/* A line break in the text starts a new line */
.ilr-text {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  color: rgba(29, 30, 34, 0.6);
  font-size: 15px;
  line-height: 25px;
  white-space: pre-line;
}

@media screen and (max-width: 991px) {
  .ilr {
    gap: 40px;
  }

  .ilr-head {
    width: 254px;
  }
}

/* Mobile: icon + title, then the text below */
@media screen and (max-width: 767px) {
  .ilr {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }

  /* A two-line title keeps the icon on its first line */
  .ilr-head {
    align-items: flex-start;
    width: auto;
  }

  /* Figma draws its own 20px icon here, not the 24px one scaled down */
  .ilr-icon {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    background-image: var(--ilr-icon, var(--icon-list-icon, var(--ilr-icon-default-mobile)));
  }

  .ilr-title {
    font-size: 15px;
    line-height: 22px;
  }

  .ilr-text {
    flex: none;
    font-size: 13px;
    line-height: 20px;
  }
}