/* Доставка и оплата. Figma: Oplata/pc 975:2249, Oplata/mb 975:2273.
   Значения — из .design/spec/oplata.md. */

.au-payment {
  margin-top: 72px; /* первый заголовок y 576 при низе H1 504 */
}

/* Колонки 612 и 741 при зазоре 284; у сетки дополнительные 6px слева
   от контейнера 96, потому что левая колонка стоит на 102 — отступ задан
   через padding-inline-start вместе с гаттером контейнера, иначе он затирает
   гаттер целиком (сетка и есть .au-container).
   Ниже 1920 макета нет: зазор сжимается первым (612 + 741 = 1353 влезают
   в 1024 без гаттеров), иначе правая колонка с логотипами уходит под обрез. */
.au-payment__grid {
  display: grid;
  grid-template-columns: minmax(0, 612px) minmax(0, 741px);
  column-gap: clamp(48px, calc(100% - 1353px), 284px);
  padding-left: calc(var(--au-gutter) + 6px);
}

.au-payment__col {
  min-width: 0;
}

.au-pay + .au-pay {
  margin-top: 72px; /* второй заголовок y 994 при низе списка 922 */
}

/* 975:2265: Inter Semi Bold 32 / lh 39 */
.au-pay__title {
  margin: 0 0 52px;
  font-size: 32px;
  font-weight: 600;
  line-height: 39px;
  color: var(--au-black);
}

/* в колонке 612 «Курьерская доставка «до двери»» уместилось бы в одну строку,
   а в макете перенос после «доставка» — держим ширину узла */
.au-pay__title--delivery {
  max-width: 410px;
}

/* Второй пункт в макете занимает всю строку (чернила 125…712 при боксе 590), а браузер
   набирает его в 590.23 и ломает пополам: Inter v4 против встроенного в макет 3.19,
   см. context/fonts.md. Даём списку 4px запаса — они уходят в зазор между колонками */
.au-pay__list {
  margin: 0;
  padding: 0;
  width: 616px;
  list-style: none;
}

/* 975:2264: Inter Medium 16 / lh 23, opacity 0.7. Маркер «+» — Medium 20,
   стоит на 2px выше верха текста (704 против 706) */
.au-pay__item,
.au-pay__text {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 23px;
  color: var(--au-black);
  opacity: 0.7;
}

.au-pay__item {
  position: relative;
  padding-left: 22px; /* текст x 124 при маркере x 102 */
}

/* Маркер декоративный: пара content с пустой альтернативой убирает его из дерева
   доступности, иначе скринридер читает «плюс» перед каждым пунктом */
.au-pay__item::before {
  content: '+' / '';
  position: absolute;
  top: -2px;
  left: 0;
  font-size: 20px;
  line-height: 24px;
}

.au-pay__item + .au-pay__item {
  margin-top: 26px;
}

.au-pay__text + .au-pay__text {
  margin-top: 24px;
}

/* 975:2270 / 975:2268 / 975:2269: «мир» и visa в одной строке по центру,
   mastercard под «миром» */
.au-pay__cards {
  margin-top: 75px; /* логотипы y 1020 при низе текста 945 */
}

.au-pay__cards-row {
  display: flex;
  align-items: center;
  gap: 30px;
}

.au-pay__card--ms {
  margin-top: 30px; /* y 1108 при низе «мира» 1078 */
}

/* ─── MB: 390px ──────────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
  /* текст занимает 26…355, то есть справа 35, а не гаттер 26 */
  .au-payment .au-container {
    padding: 0 35px 0 26px;
  }

  .au-payment__grid {
    grid-template-columns: 1fr;
    padding-left: 0;
  }

  .au-pay__list {
    width: auto;
  }

  /* блок 3 стоит под блоком 2 с тем же шагом, что и внутри колонки */
  .au-payment__col + .au-payment__col {
    margin-top: 72px;
  }

  /* 975:2288: Inter Semi Bold 28 / lh 34 */
  .au-pay__title {
    margin-bottom: 36px;
    font-size: 28px;
    line-height: 34px;
  }

  /* Бокс заголовка в макете 303, и «Курьерская доставка» в него не влезает — строка
     рвётся после первого слова. Браузер набирает эти два слова в 302.81 и умещает их
     в 303, поэтому ширину берём из коридора 298.16…302.81: «доставка «до двери»»
     помещается, «Курьерская доставка» — нет */
  .au-pay__title--delivery {
    max-width: 300px;
  }

  .au-pay__item + .au-pay__item {
    margin-top: 24px;
  }

  /* группа уменьшена в 0.822 раза, зазоры в макете дробные */
  .au-pay__cards {
    margin-top: 36px;
  }

  .au-pay__cards-row {
    gap: 24.19px;
  }

  .au-pay__card--mir {
    width: 147.966px;
    height: 47.678px;
  }

  .au-pay__card--visa {
    width: 118.841px;
    height: 38.484px;
  }

  .au-pay__card--ms {
    width: 60.986px;
    height: 47.358px;
    margin-top: 24.66px;
  }
}