/*
 * Comparison Row: one row of the Comparison card — a dot and a text per column.
 * Figma "Eleken Site 2026": desktop 503:1463, tablet 503:2945, mobile 503:4526.
 *
 * This CSS lives inside the component's Shadow DOM: site classes never reach it,
 * but custom properties do — the Comparison's --comparison-*-dot, site variables
 * (var(--…)) — and so do the site's @font-face fonts. Browser default styles still
 * apply, hence the explicit margin resets below.
 * Breakpoints follow Webflow: desktop ≥992 (base), tablet ≤991, mobile ≤767.
 */

:host {
  display: block;
}

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

/* Desktop: two equal columns 80px apart, as the Comparison's titles */
.cr {
  position: relative;
  display: flex;
  gap: 80px;
  align-items: flex-start;
  /* Every row starts with the divider band: in Figma the titles and the rows are 24px,
     line, 24px apart, and the 0-high line is drawn in the 1px above its y. */
  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 */
.cr::before {
  content: "";
  position: absolute;
  top: 23px;
  right: 0;
  left: 0;
  height: 1px;
  background: repeating-linear-gradient(90deg, #bcb5af 0 2px, transparent 2px 4px);
}

/* The dot sits on the middle of its text */
.cr-cell {
  display: flex;
  flex: 1 1 0;
  gap: 16px;
  align-items: center;
  min-width: 0;
}

/* Figma: 27px on the right, 16px on the left */
.cr-cell--right {
  gap: 27px;
}

/* Decorative. An uploaded image is fitted into the 13×13 box (10×10 on mobile). */
.cr-dot {
  flex: none;
  width: 13px;
  height: 13px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.cr-cell--left .cr-dot {
  background-image: var(--cr-left, var(--comparison-left-dot, var(--cr-left-default)));
}

.cr-cell--right .cr-dot {
  background-image: var(--cr-right, var(--comparison-right-dot, var(--cr-right-default)));
}

/* A line break in the text starts a new line */
.cr-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) {
  .cr {
    gap: 32px;
  }

  .cr-cell--right {
    gap: 16px;
  }
}

/* Mobile: a 125px left column; the dot stays on the first line of a wrapped text */
@media screen and (max-width: 767px) {
  .cr {
    gap: 12px;
  }

  .cr-cell,
  .cr-cell--right {
    gap: 8px;
    align-items: flex-start;
  }

  .cr-cell--left {
    flex: none;
    width: 125px;
  }

  /* Figma Indicator: 10×15, the dot in its lower 10px — the middle of the 20px line */
  .cr-dot {
    width: 10px;
    height: 10px;
    margin-top: 5px;
  }

  .cr-text {
    font-size: 13px;
    line-height: 20px;
  }
}