/*
 * 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.
 * The Designer's open canvas draws every breakpoint in one window, so @media never
 * fires there; each breakpoint frame is a named container instead (wf-container-medium
 * for tablet and below, wf-container-small for mobile and below). Each @media block is
 * followed by an identical @container twin for those frames — designer-canvas.test.ts
 * keeps them in sync. On a published page the containers don't exist.
 */

: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;
  }
}

/* The same rules for the tablet and mobile frames of the Designer canvas (see the header) */
@container wf-container-medium (width > 0) {
  .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 {
    display: var(--comparison-row-display, grid);
    grid-template-columns: 125px minmax(0, 1fr);
    gap: 12px;
  }

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

  /* 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;
  }

  /* Stack columns on mobile (see Comparison.css): the cells leave the row for the
     card's column, the left ones before the right title, the right ones after it;
     the row's line goes and each cell draws its own in a 48px band. */
  .cr::before {
    opacity: calc(1 - var(--comparison-stacked, 0));
  }

  .cr-cell {
    position: relative;
    padding-top: calc(48px * var(--comparison-stacked, 0));
  }

  .cr-cell::before {
    content: "";
    position: absolute;
    top: 23px;
    right: 0;
    left: 0;
    height: 1px;
    background: repeating-linear-gradient(90deg, #bcb5af 0 2px, transparent 2px 4px);
    opacity: var(--comparison-stacked, 0);
  }

  .cr-cell--left {
    order: var(--comparison-stacked, 0);
  }

  .cr-cell--right {
    order: calc(3 * var(--comparison-stacked, 0));
  }
}

/* The same rules for the mobile frames of the Designer canvas (see the header) */
@container wf-container-small (width > 0) {
  .cr {
    display: var(--comparison-row-display, grid);
    grid-template-columns: 125px minmax(0, 1fr);
    gap: 12px;
  }

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

  /* 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;
  }

  /* Stack columns on mobile (see Comparison.css): the cells leave the row for the
     card's column, the left ones before the right title, the right ones after it;
     the row's line goes and each cell draws its own in a 48px band. */
  .cr::before {
    opacity: calc(1 - var(--comparison-stacked, 0));
  }

  .cr-cell {
    position: relative;
    padding-top: calc(48px * var(--comparison-stacked, 0));
  }

  .cr-cell::before {
    content: "";
    position: absolute;
    top: 23px;
    right: 0;
    left: 0;
    height: 1px;
    background: repeating-linear-gradient(90deg, #bcb5af 0 2px, transparent 2px 4px);
    opacity: var(--comparison-stacked, 0);
  }

  .cr-cell--left {
    order: var(--comparison-stacked, 0);
  }

  .cr-cell--right {
    order: calc(3 * var(--comparison-stacked, 0));
  }
}