/*
 * Process Step Row: one step of the Design System page's process list
 * ("01 Audit what you already have" … "04 Put it to work on your product").
 * Figma "Eleken Site 2026": desktop 1013:1400 (list 1013:1399).
 *
 * Tablet and mobile follow Industry Row (this row is its sibling in Figma) until
 * their own frames are checked: tablet stacks, mobile shrinks the title and body.
 *
 * 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/list resets below.
 * Breakpoints follow Webflow: desktop ≥992 (base), tablet ≤991, mobile ≤767.
 */

:host {
  display: block;
}

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

/* Desktop: number + title | description + deliverables */
.psr {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  /* 39px + the 1px dashed line = Figma's 40px; the bottom line sits just below the 40px */
  padding: 39px 0 40px;
  border-bottom: 1px dashed rgba(29, 30, 34, 0.4);
  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;
}

.psr--top-border {
  border-top: 1px dashed rgba(29, 30, 34, 0.4);
}

.psr-head {
  display: flex;
  flex: none;
  gap: 24px;
  width: 323px;
}

.psr-num {
  flex: none;
  min-width: 19px;
  color: rgba(29, 30, 34, 0.6);
  font-size: 15px;
  line-height: 25px;
}

.psr-title {
  width: 237px;
  margin: 0;
  color: var(--colors--main, #1d1e22);
  font-family: Regolapro, "Regola Pro", sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: -0.02em;
  /* A line break typed into the prop stays a line break (desktop only, see tablet) */
  white-space: pre-line;
}

/* 567px in Figma; shrinks (the title column doesn't) when the row is narrower than 1008px */
.psr-body {
  display: flex;
  flex: 0 1 567px;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.psr-desc {
  margin: 0;
  color: rgba(29, 30, 34, 0.6);
  font-size: 15px;
  line-height: 25px;
  white-space: pre-line;
}

.psr-deliverables {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.psr-deliverables-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;
}

.psr-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Figma: 32px badge, 8px padding, the stroke drawn inside it */
.psr-badge {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 7px;
  border: 1px solid var(--colors--gray-3, #e4e4e4);
  border-radius: 10px;
  color: var(--colors--main, #1d1e22);
  font-size: 13px;
  line-height: 20px;
  white-space: nowrap;
}

/* Tablet: the title goes above the text, both full width */
@media screen and (max-width: 991px) {
  .psr {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .psr-head {
    width: auto;
  }

  /* The title has a whole line now: a break typed for the 237px desktop column turns into a space */
  .psr-title {
    width: auto;
    white-space: normal;
  }

  .psr-body {
    flex: none;
  }
}

@media screen and (max-width: 767px) {
  .psr {
    padding: 19px 0 20px;
  }

  .psr-num {
    font-size: 13px;
    line-height: 20px;
  }

  .psr-title {
    font-size: 22px;
    line-height: 30px;
  }

  .psr-desc {
    font-size: 13px;
    line-height: 20px;
  }

  /* A long deliverable wraps instead of running past a 288px column */
  .psr-badge {
    height: auto;
    min-height: 32px;
    padding-top: 5px;
    padding-bottom: 5px;
    white-space: normal;
  }
}