/* ==========================================================================
   Section: Process — Figma 69:701
   588px left column and 474px right column, 178px apart.
   ========================================================================== */

.trustav-process {
  padding-block: clamp(3rem, 6vw, 5.625rem);
}

.trustav-process__grid {
  display: grid;
  grid-template-columns: 588fr 474fr;
  gap: clamp(3rem, 12vw, 178px);
  align-items: center;
}

/* --- Left ---------------------------------------------------------------- */
.trustav-process__left {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 9vw, 144px);
}

/* Figma: Lora 52, wrapped at 363px. */
.trustav-process__title {
  max-width: 22.7rem;
  margin: 0;
  color: var(--c-black);
}

.trustav-process__images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.trustav-process__figure {
  margin: 0;
  height: 330px;
  overflow: hidden;
  background-color: var(--c-neutral-4);
}

.trustav-process__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Right --------------------------------------------------------------- */
.trustav-process__right {
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 6vw, 97px);
}

.trustav-process__description {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-neutral-1);
}

.trustav-process__description p {
  margin: 0;
}

.trustav-process__steps {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 4vw, 61px);
}

/* Figma: Lora 32 in accent. */
.trustav-process__steps-title {
  margin: 0;
  font-size: var(--fs-h4);
  color: var(--c-accent);
}

/* Two columns, filled row by row, each step ruled above. */
.trustav-process__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 33px 25px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trustav-process__step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-block-start: 33px;
  border-top: var(--border-width) solid var(--c-neutral-3);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

.trustav-process__step-number {
  flex-shrink: 0;
  min-width: 24px;
  color: var(--c-accent);
}

.trustav-process__step-label {
  color: var(--c-neutral-1);
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .trustav-process__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3xl);
  }

  .trustav-process__title {
    max-width: none;
  }

  .trustav-process__figure {
    height: 280px;
  }
}

@media (max-width: 560px) {
  .trustav-process__list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
  }

  .trustav-process__step {
    padding-block-start: var(--space-lg);
  }

  .trustav-process__figure {
    height: 220px;
  }
}