/*
 * Comparison Row Detailed: a row of the Comparison card with more text — a title and
 * a text on the left, a text with a bold start on the right.
 * Figma "Eleken Site 2026" (Services, "Table / Engagement Model"): desktop 1062:2124,
 * tablet 1062:3670; mobile 1062:5279 is still a draft.
 *
 * 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 and font-weight 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;
}

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

/* Desktop: two equal columns 80px apart, as the Comparison's titles */
.crd {
  position: relative;
  display: flex;
  gap: 80px;
  align-items: flex-start;
  /* The divider band, as in Comparison Row: 24px, line, 24px */
  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 */
.crd::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 first line */
.crd-cell {
  display: flex;
  flex: 1 1 0;
  gap: 16px;
  align-items: flex-start;
  min-width: 0;
}

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

/* Decorative. Figma Icon / Detail: 13×18, the dot in its lower 13px.
   An uploaded image is fitted into the 13×13 box (10×10 on mobile). */
.crd-dot {
  flex: none;
  width: 13px;
  height: 13px;
  margin-top: 5px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

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

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

.crd-content {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.crd-title {
  margin: 0;
  color: var(--colors--main, #1d1e22);
  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 */
.crd-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;
}

/* Figma: the right text is 365px wide, narrower than its column */
.crd-cell--right .crd-text {
  max-width: 365px;
}

.crd-lead {
  color: var(--colors--main, #1d1e22);
  font-weight: 500;
}

/* Tablet: 32px between the columns, both texts fill them */
@media screen and (max-width: 991px) {
  .crd {
    gap: 32px;
  }

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

  .crd-cell--right .crd-text {
    max-width: none;
  }
}

/* The same rules for the tablet and mobile frames of the Designer canvas (see the header) */
@container wf-container-medium (width > 0) {
  .crd {
    gap: 32px;
  }

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

  .crd-cell--right .crd-text {
    max-width: none;
  }
}

/* Mobile (Figma draft): a 125px left column, the title in Inter like the text */
@media screen and (max-width: 767px) {
  .crd {
    display: var(--comparison-row-display, grid);
    grid-template-columns: 125px minmax(0, 1fr);
    gap: 12px;
  }

  .crd-cell--left {
    gap: 7px;
  }

  .crd-cell--right {
    gap: 8px;
  }

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

  .crd-content {
    gap: 7px;
  }

  .crd-title {
    font-family: inherit;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: normal;
  }

  .crd-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. */
  .crd::before {
    opacity: calc(1 - var(--comparison-stacked, 0));
  }

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

  .crd-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);
  }

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

  .crd-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) {
  .crd {
    display: var(--comparison-row-display, grid);
    grid-template-columns: 125px minmax(0, 1fr);
    gap: 12px;
  }

  .crd-cell--left {
    gap: 7px;
  }

  .crd-cell--right {
    gap: 8px;
  }

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

  .crd-content {
    gap: 7px;
  }

  .crd-title {
    font-family: inherit;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: normal;
  }

  .crd-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. */
  .crd::before {
    opacity: calc(1 - var(--comparison-stacked, 0));
  }

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

  .crd-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);
  }

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

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