/* ========================================
   HOW WE WORK — FIXED
======================================== */

.process {
  width: 100%;
  padding-block:
    clamp(4rem, 5.5vw, 5.5rem)
    clamp(4rem, 5vw, 5rem);
  background: var(--bg-base);
}

.process__inner {
  width: var(--container-width);
  max-width: var(--container-max-width);
  margin-inline: auto;
}

.process__header {
  max-width: 52rem;
  margin-inline: auto;
  margin-bottom: clamp(3rem, 4.5vw, 4.5rem);
  text-align: center;
}

.process__eyebrow {
  display: inline-flex;
  margin-bottom: clamp(1rem, 1.3vw, 1.3rem);
  padding: 0.45rem 0.8rem;

  border-radius: var(--radius-round);

  font-size: clamp(0.7rem, 0.8vw, 0.82rem);
  font-weight: var(--font-weight-semibold);
  color: var(--text-accent);
  background: var(--color-brand-pale);
}

.process__title {
  margin-bottom: clamp(1rem, 1.4vw, 1.4rem);

  font-size: clamp(2.7rem, 3.6vw, 3.7rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  letter-spacing: -0.03em;

  color: var(--text-heading-main);
}

.process__intro {
  max-width: 48rem;
  margin-inline: auto;

  font-size: clamp(0.95rem, 1.08vw, 1.1rem);
  line-height: 1.45;
  color: var(--text-primary);
}

/*
 * Важный фикс:
 * сетка устроена как
 * шаг | линия | шаг | линия | шаг | линия | шаг
 */
.process__steps {
  width: min(100%, 88%);
  margin-inline: auto;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(4.5rem, 7vw)
    minmax(0, 1fr)
    minmax(4.5rem, 7vw)
    minmax(0, 1fr)
    minmax(4.5rem, 7vw)
    minmax(0, 1fr);

  align-items: start;
  column-gap: 0;
}

.process-step {
  min-width: 0;
}

.process-step__icon {
  position: relative;
  z-index: 1;

  display: grid;
  place-items: center;

  width: clamp(4rem, 4.8vw, 4.8rem);
  aspect-ratio: 1;
  margin-bottom: clamp(1.1rem, 1.4vw, 1.4rem);

  border-radius: clamp(0.9rem, 1.1vw, 1.1rem);

  color: var(--text-inverse-primary);
  background: var(--action-default);
}

.process-step:nth-of-type(2) .process-step__icon,
.process-step:nth-of-type(3) .process-step__icon {
  background: var(--color-brand);
}

.process-step__icon svg {
  width: 44%;
  height: 44%;
}

.process-step__number {
  position: absolute;
  top: -0.35rem;
  right: -0.35rem;

  display: grid;
  place-items: center;

  width: clamp(1.35rem, 1.55vw, 1.55rem);
  aspect-ratio: 1;

  font-size: clamp(0.68rem, 0.78vw, 0.78rem);
  color: var(--text-accent);
  background: var(--bg-base);

  border: 1px solid var(--border-default-2);
  border-radius: 50%;
}

.process-step__title {
  margin-bottom: clamp(0.45rem, 0.65vw, 0.65rem);

  font-size: clamp(1rem, 1.1vw, 1.1rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;

  color: var(--text-heading-brand);
}

.process-step__text {
  max-width: 15rem;

  font-size: clamp(0.78rem, 0.84vw, 0.86rem);
  line-height: 1.45;
  color: var(--text-primary);
}

/* Настоящий отдельный коннектор между колонками */
.process-connector {
  display: flex;
  align-items: flex-start;
  justify-content: center;

  padding-top: calc(clamp(4rem, 4.8vw, 4.8rem) / 2);
}

.process-connector span {
  display: block;
  width: 88%;
  height: 1px;

  background: var(--border-subtle-inverse);
}

/* ========================================
   MOBILE
======================================== */

@media (max-width: 767px) {
  .process {
    padding-block: 14vw;
  }

  .process__header {
    margin-bottom: 9vw;
    text-align: left;
  }

  .process__title {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .process__steps {
    width: 100%;
    grid-template-columns: 100%;
    gap: 8vw;
  }

  .process-connector {
    display: none;
  }

  .process-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5vw;
    align-items: start;
  }

  .process-step__icon {
    width: clamp(3.5rem, 16vw, 4.6rem);
    margin-bottom: 0;
  }

  .process-step__title {
    margin-top: 1vw;
    font-size: clamp(1rem, 4.6vw, 1.25rem);
  }

  .process-step__text {
    font-size: clamp(0.8rem, 3.7vw, 0.95rem);
  }
}

/* ========================================
   QUALITY
======================================== */

.quality {
  width: 100%;
  padding-block: clamp(5rem, 8vw, 8rem);
  background: var(--bg-base);
}

.quality__inner {
  width: var(--container-width);
  max-width: var(--container-max-width);
  margin-inline: auto;
}

.quality__header {
  max-width: 48rem;
  margin-inline: auto;
  margin-bottom: clamp(3rem, 5vw, 5rem);
  text-align: center;
}

/*
 * Сама мозаика уже общего контейнера.
 * Благодаря этому она выглядит компактно, как в макете.
 */
.quality__grid {
  width: min(100%, 76vw);
  margin-inline: auto;

  display: grid;
  grid-template-columns: 31% 1fr 1fr;
  grid-template-rows:
    clamp(15rem, 20vw, 20rem)
    clamp(15rem, 20vw, 20rem);

  gap: clamp(0.75rem, 1.3vw, 1.25rem);
}

.quality-card {
  position: relative;
  min-width: 0;
  overflow: hidden;

  padding: clamp(1.5rem, 2vw, 2rem);

  border: 1px solid var(--border-default-2);
  border-radius: var(--radius-medium);
  background: var(--card-bg-base);
}

/* Левая высокая карточка */
.quality-card--large {
  grid-row: 1 / 3;
}

/*
 * Ключевой фикс:
 * у фотокарточек нет внутреннего padding.
 * Фото заполняет карточку от края до края.
 */
.quality-card--image {
  display: block;
  min-height: 0;
  padding: 0;

  color: var(--text-inverse-primary);
  border: 0;
  background: var(--bg-inverse);
}

/* Фоновая фотография */
.quality-card__background {
  position: absolute;
  inset: 0;
  z-index: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  border-radius: inherit;
}

/* Затемнение поверх фотографии */
.quality-card--image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  background: linear-gradient(
    180deg,
    rgba(11, 27, 58, 0.05) 15%,
    rgba(11, 27, 58, 0.24) 48%,
    rgba(11, 27, 58, 0.86) 100%
  );
}

/*
 * Контент фотокарточек расположен у нижнего края,
 * а не участвует в обычном потоке.
 */
.quality-card--image .quality-card__content {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;

  padding: clamp(1.25rem, 1.8vw, 1.75rem);
}

.quality-card__title {
  position: relative;
  z-index: 3;

  margin-bottom: clamp(0.65rem, 0.9vw, 0.9rem);

  font-size: clamp(1.25rem, 1.7vw, 1.75rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1.08;
  letter-spacing: -0.02em;

  color: var(--text-heading-main);
}

.quality-card--image .quality-card__title {
  color: var(--text-inverse-primary);
}

.quality-card__text {
  position: relative;
  z-index: 3;

  font-size: clamp(0.76rem, 0.86vw, 0.9rem);
  line-height: 1.48;
  color: var(--text-primary);
}

.quality-card--image .quality-card__text {
  color: var(--white-85);
}

.quality-card__badge {
  position: relative;
  z-index: 3;

  display: inline-flex;
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
  padding: 0.45rem 0.8rem;

  border-radius: var(--radius-round);

  font-size: clamp(0.68rem, 0.78vw, 0.78rem);
  color: var(--text-accent);
  background: var(--color-brand-pale);
}

.quality-card .button {
  position: relative;
  z-index: 3;
}


/* ========================================
   QUALITY DECOR
======================================== */

.quality-card__decor {
  position: absolute;
  z-index: 2;
  display: block;

  pointer-events: none;
  user-select: none;
  object-fit: contain;
}


/* Термометр */
.quality-card__decor--thermometer {
  right: -2%;
  bottom: -6%;

  width: clamp(7rem, 11vw, 10.5rem);
  max-height: 74%;

  opacity: 0.6;
}

/* Иконка наушников */
.quality-card__decor--headset {
  top: clamp(1rem, 1.5vw, 1.5rem);
  left: clamp(1rem, 1.5vw, 1.5rem);

  width: clamp(2.4rem, 3.2vw, 3.25rem);
  height: clamp(2.4rem, 3.2vw, 3.25rem);
}

/* Иконка щита */
.quality-card__decor--shield {
  top: clamp(1rem, 1.5vw, 1.5rem);
  left: clamp(1rem, 1.5vw, 1.5rem);

  width: clamp(2.6rem, 3.4vw, 3.5rem);
  height: clamp(2.6rem, 3.4vw, 3.5rem);
}

/* Карта России */
.quality-card__decor--map {
  top: 0;
  right: 0;

  width: 100%;
  height: 68%;

  object-fit: cover;
  object-position: top center;

  opacity: 0.6;
}

/* ========================================
   MOBILE
======================================== */

@media (max-width: 767px) {
  .process,
  .quality {
    padding-block: 16vw;
  }

  .process__header,
  .quality__header {
    margin-bottom: 10vw;
    text-align: left;
  }

  .process__title,
  .quality__title {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .process__steps {
    grid-template-columns: 100%;
    gap: 8vw;
  }

  .process-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5vw;
    align-items: start;
  }

  .process-step:not(:last-child)::after {
    top: calc(clamp(3.5rem, 16vw, 4.6rem) + 1vw);
    left: calc(clamp(3.5rem, 16vw, 4.6rem) / 2);
    width: 1px;
    height: calc(8vw + 1.5rem);
  }

  .process-step__icon {
    width: clamp(3.5rem, 16vw, 4.6rem);
    margin-bottom: 0;
  }

  .process-step__title {
    margin-top: 1vw;
    font-size: clamp(1rem, 4.6vw, 1.25rem);
  }

  .process-step__text {
    font-size: clamp(0.8rem, 3.7vw, 0.95rem);
  }

  .quality__header {
    margin-bottom: 10vw;
    text-align: left;
  }

  .quality__title {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .quality__grid {
    width: 100%;

    grid-template-columns: 100%;
    grid-template-rows: auto;

    gap: 4vw;
  }

  .quality-card {
    padding: 6vw;
  }

  .quality-card--large {
    grid-row: auto;
    min-height: 115vw;
  }

  .quality-card--image {
    min-height: 76vw;
    padding: 0;
  }

  .quality-card--image .quality-card__content {
    padding: 5vw;
  }

  .quality-card__title {
    font-size: clamp(1.4rem, 7vw, 2rem);
  }

  .quality-card__text {
    font-size: clamp(0.82rem, 3.8vw, 0.96rem);
  }

  .quality-card__decor--truck {
    width: 96%;
    max-height: 42%;
  }

  .quality-card__decor--thermometer {
    width: clamp(6rem, 34vw, 9rem);
    max-height: 70%;
  }

  .quality-card__decor--headset,
  .quality-card__decor--shield {
    top: 5vw;
    left: 5vw;

    width: 12vw;
    height: 12vw;
  }

  .quality-card__decor--map {
    height: 62%;
  }
}

/* ========================================
   QUALITY: FINAL POLISH
======================================== */

/* 1. Машинка в левой карточке */
.quality-card__decor--truck {
  position: absolute;
  z-index: 1;

  left: 6%;
  bottom: -1%;

  display: block;
  width: 94%;
  height: auto;
  max-height: none;

  opacity: 0.75;

  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* 2. Градусник немного выше */
.quality-card__decor--thermometer {
  right: -1%;
  bottom: -1%;

  width: clamp(7rem, 10.5vw, 10rem);
  max-height: 78%;

  opacity: 0.58;
}

/* 3. Текст фотокарточек поднимаем выше */
.quality-card--image .quality-card__content {
  bottom: clamp(1.2rem, 1.6vw, 1.6rem);
  padding:
    clamp(1.1rem, 1.5vw, 1.5rem)
    clamp(1.25rem, 1.8vw, 1.75rem);
}

/* Чуть компактнее текст, чтобы совпасть с макетом */
.quality-card--image .quality-card__title {
  max-width: 92%;
  margin-bottom: clamp(0.45rem, 0.7vw, 0.7rem);

  font-size: clamp(1.25rem, 1.65vw, 1.7rem);
  line-height: 1.08;
}

.quality-card--image .quality-card__text {
  max-width: 94%;

  font-size: clamp(0.74rem, 0.84vw, 0.88rem);
  line-height: 1.42;
}

/* 4. Карточка "Работаем по всей России" */
.quality-card--map {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Текст опускаем вниз */
.quality-card--map .quality-card__title,
.quality-card--map .quality-card__text {
  position: relative;
  z-index: 3;
}

.quality-card--map .quality-card__title {
  max-width: 13ch;
  margin-top: auto;
}

.quality-card--map .quality-card__text {
  max-width: 95%;
}

/* Карта остаётся сверху и на фоне */
.quality-card__decor--map {
  top: 0;
  right: 0;

  width: 100%;
  height: 70%;

  object-fit: cover;
  object-position: top center;

  opacity: 0.58;
}

@media (max-width: 767px) {
  .quality-card--image .quality-card__content {
    bottom: 2vw;
    padding: 5vw;
  }

  .quality-card--map {
    min-height: 80vw;
  }

  .quality-card--map .quality-card__title {
    margin-top: auto;
  }

  .quality-card__decor--thermometer {
    bottom: 0;
  }
}
.quality-card--map {
  display: flex;
  flex-direction: column;
}

.quality-card__map-content {
  position: relative;
  z-index: 3;

  margin-top: auto;
}

.quality-card--map .quality-card__title {
  max-width: 14ch;
  margin-bottom: clamp(0.7rem, 1vw, 1rem);
}

.quality-card--map .quality-card__text {
  max-width: 95%;
}

.quality-card--large .button {
  margin-top: clamp(2rem, 3vw, 3rem);
}

@media (max-width: 767px) {
  .quality-card--large .button {
    margin-top: 6vw;
  }
}

/* ========================================
   PROCESS GRID — FINAL OVERRIDE
======================================== */

.process__steps {
  width: min(100%, 88%);
  margin-inline: auto;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(4.5rem, 7vw)
    minmax(0, 1fr)
    minmax(4.5rem, 7vw)
    minmax(0, 1fr)
    minmax(4.5rem, 7vw)
    minmax(0, 1fr);

  align-items: start;
  column-gap: 0;
  row-gap: 0;
}

.process-connector {
  display: flex;
  align-items: flex-start;
  justify-content: center;

  padding-top: calc(clamp(4rem, 4.8vw, 4.8rem) / 2);
}

.process-connector span {
  display: block;
  width: 88%;
  height: 1px;

  background: var(--border-subtle-inverse);
}

@media (max-width: 767px) {
  .process__steps {
    width: 100%;
    grid-template-columns: 100%;
    row-gap: 8vw;
  }

  .process-connector {
    display: none;
  }
}

/* ========================================
   PROCESS CONNECTORS — FINAL FIX
======================================== */

.process__steps {
  --step-width: clamp(12rem, 15vw, 15rem);
  --icon-size: clamp(4rem, 4.8vw, 4.8rem);
  --line-indent: clamp(1rem, 1.5vw, 1.5rem);

  width: min(100%, 88%);
  margin-inline: auto;

  display: grid;

  grid-template-columns:
    var(--step-width)
    minmax(3rem, 1fr)
    var(--step-width)
    minmax(3rem, 1fr)
    var(--step-width)
    minmax(3rem, 1fr)
    var(--step-width);

  align-items: start;
  column-gap: 0;
  row-gap: 0;
}

.process-step {
  width: var(--step-width);
  min-width: 0;
}

.process-step__icon {
  position: relative;
  z-index: 2;

  width: var(--icon-size);
}

/*
 * Колонка коннектора находится между двумя шагами.
 * Сама линия заходит назад через пустую часть предыдущего шага,
 * поэтому визуально начинается сразу после иконки.
 */
.process-connector {
  position: relative;
  min-width: 0;
  padding: 0;
}

.process-connector span {
  position: absolute;

  top: calc(var(--icon-size) / 2);
  left: calc(
    (var(--step-width) - var(--icon-size)) * -1
    + var(--line-indent)
  );
  right: var(--line-indent);

  display: block;
  width: auto;
  height: 1px;

  background: var(--border-subtle-inverse);
}

/* Мобильная версия */
@media (max-width: 767px) {
  .process__steps {
    width: 100%;
    grid-template-columns: 100%;
    gap: 8vw;
  }

  .process-step {
    width: 100%;
  }

  .process-connector {
    display: none;
  }
}
.process__steps {
  --line-indent: clamp(3rem, 4vw, 4rem);
}

/* ========================================
   QUALITY HEADER — FINAL MATCH
======================================== */

.quality__header {
  max-width: 62rem;
  margin-inline: auto;
  margin-bottom: clamp(3rem, 5vw, 5rem);
  text-align: center;
}

.quality__eyebrow {
  margin-bottom: clamp(1.2rem, 1.8vw, 1.8rem);
}

.quality__title {
  max-width: 14ch;
  margin-inline: auto;
  margin-bottom: clamp(1.5rem, 2vw, 2rem);

  font-size: clamp(3rem, 4.8vw, 5rem);
  font-weight: var(--font-weight-semibold);
  line-height: 0.96;
  letter-spacing: -0.04em;

  color: var(--text-heading-main);
}

.quality__intro {
  max-width: 58rem;
  margin-inline: auto;

  font-size: clamp(1rem, 1.35vw, 1.35rem);
  line-height: 1.45;
  color: var(--text-primary);
}

@media (max-width: 767px) {
  .quality__header {
    text-align: left;
  }

  .quality__title {
    max-width: 12ch;
    margin-inline: 0;
    font-size: clamp(2.2rem, 11vw, 3.2rem);
  }

  .quality__intro {
    margin-inline: 0;
    font-size: clamp(0.95rem, 4.2vw, 1.1rem);
  }
}

.quality__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: fit-content;
  margin-inline: auto;
  margin-bottom: clamp(1.2rem, 1.8vw, 1.8rem);
  padding:
    clamp(0.4rem, 0.55vw, 0.55rem)
    clamp(0.85rem, 1.1vw, 1.1rem);

  font-size: clamp(0.7rem, 0.8vw, 0.82rem);
  font-weight: var(--font-weight-semibold);
  line-height: 1;

  color: var(--text-accent);
  background: var(--color-brand-pale);
  border-radius: var(--radius-round);
}