/* ==========================================================================
   Доставка и оплата — макет 1:2653 (1920×4500).

   Вертикальный ритм макета (абсолютные Y при ширине 1920):
     222  крошки · 273  H1 · 347  описание (низ 415)
     543  «Способы доставки» → 649  карточки (низ 1196)
     1386 «География доставки»            (низ 1954)
     2144 «Сроки и стоимость доставки»    (низ 2778)
     2968 способы оплаты                  (низ 3494)
     3684 панель футера
   То есть между секциями ровно 190 px (--section-gap), от описания
   до первой секции — 128 px (--section-gap-sm).

   Теней в макете нет ни одной — карточки отделяются только заливкой.
   ========================================================================== */

/* --- Шапка страницы --------------------------------------------------------
   Единственная правка к общему page-common.css: у лида другая ширина.
   Отбивка H1 → лид (16 px) в page-common.css уже верна, дубля здесь нет. */

.page-head .page-lead {
  /* Макет 1:2670: текст лида 758 px внутри центрированной обёртки 1240 px
     (x=581…1339). В page-common.css лимит 1240 — он верен для «Партнёрам»
     (1:2500) и задан тем же весом селектора, поэтому правило обязано
     идти после общего файла: page-dostavka.css грузится только здесь. */
  max-width: 758px;
}

/* --- Каркас страницы ------------------------------------------------------- */

.delivery {
  /* 128 px от описания до первой секции; 48 из них уже дал нижний
     padding .page-head, добираем остальное. */
  padding-top: calc(var(--section-gap-sm) - var(--space-48));
  /* 190 px от низа блока оплаты (1:2738, y=3494) до панели футера (1:2654,
     y=3684). У .site-footer сверху 95 px, а не 64, как считалось раньше:
     с прежним `- var(--space-64)` разрыв выходил 221 px. */
  padding-bottom: calc(var(--section-gap) / 2);
}

.delivery__block + .delivery__block {
  margin-top: var(--section-gap);
}

/* Заголовок секции: h_1 из UI kit (48 Medium, ls −6 %). Отступ до контента
   48 px — одинаково у всех трёх секций с заголовком (601→649, 2202→2250,
   3026→3074). У заголовка внутри панели «География» отступ свой. */
.delivery__title {
  font-size: var(--fs-48);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-48);
}

.delivery__block > .delivery__title {
  margin-bottom: var(--space-48);
}

/* --- 1:2671 Способы доставки -----------------------------------------------
   Три карточки 600×547 с шагом 20 px. Высота карточек одинаковая, а фото
   тянется: у третьей карточки описание короче на строку, поэтому её фото
   выше (382 против 354). Отсюда flex-колонка с растущим медиа-блоком. */

.delivery-ways {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.delivery-way {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 547px;
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
}

.delivery-way__media {
  flex: 1 1 0;
  min-height: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.delivery-way__media img {
  width: 100%;
  /* Перебиваем base.css (img { height: auto }): фото обязано занимать
     всю высоту растянутого медиа-блока, иначе карточки поедут. */
  height: 100%;
  object-fit: cover;
}

.delivery-way__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.delivery-way__title {
  font-size: var(--fs-24);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-24);
}

.delivery-way__text {
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
  color: var(--color-text-muted);
}

/* --- Оплата / доставка: панель с плотными карточками (2026-08-18) ---------
   Блок = серая панель (как у географии), внутри белые карточки в ряд.
   Оплата: строка «кружок-иконка 64 · название · пояснение», по центру.
   Доставка: «фото во всю ширину карточки (16:9) · название · текст». */

.delivery-panel {
  padding: var(--space-24);
  border-radius: var(--radius-xl);
  background: var(--color-bg-soft);
}

.delivery-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

.delivery-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.delivery-list--1 { grid-template-columns: minmax(0, 1fr); }
.delivery-list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.delivery-item {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  min-width: 0;
  padding: var(--space-24);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.delivery-item__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-pill);
  background: var(--color-blue-50);
  color: var(--color-brand);
}

.delivery-item__icon svg { width: 34px; height: 34px; }
.delivery-item__icon svg :is(path, rect, circle, line, polyline) { stroke-width: 3; }

/* Карточка доставки — колонкой: фото сверху, текст под ним. */
.delivery-item--photo {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-16) var(--space-24);
}

.delivery-item__photo {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.delivery-item__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.delivery-item__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
}

.delivery-item--photo .delivery-item__body { padding-inline: var(--space-8); }

.delivery-item__title {
  font-size: var(--fs-24);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-24);
}

.delivery-item__text {
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
  color: var(--color-text-muted);
}

@media (max-width: 1280px) {
  .delivery-list, .delivery-list--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .delivery-list--1 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .delivery-panel { padding: var(--space-16); }
  .delivery-list, .delivery-list--2, .delivery-list--4 { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
  .delivery-item { gap: var(--space-16); padding: var(--space-16); }
  .delivery-item__icon { width: 48px; height: 48px; }
  .delivery-item__icon svg { width: 26px; height: 26px; }
  .delivery-item__title { font-size: var(--fs-20); }
  .delivery-item__text { font-size: var(--fs-16); }
}

/* --- 1:2689 География доставки ---------------------------------------------
   Серая панель 1840×568: padding 64, две равные колонки по 832 с зазором 48.
   Левая колонка тянется на высоту карты (440) и разносит текст и список
   по краям — в макете между ними 154 px «воздуха», это space-between. */

.delivery-map {
  display: flex;
  gap: var(--space-48);
  padding: var(--space-64);
  border-radius: var(--radius-xl);
  background: var(--color-bg-soft);
}

.delivery-map__left {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-48);
}

.delivery-map__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.delivery-map__lead {
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
  color: var(--color-text-muted);
}

.delivery-map__media {
  flex: 1 1 0;
  min-width: 0;
}

.delivery-map__media img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* Список регионов: строка 28 px, между строкой и линией 16 px с каждой
   стороны. Срок прижат к правому краю колонки и покрашен в бренд. */
.delivery-geo {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.delivery-geo__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-24);
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
}

/* Линия-разделитель нарисована фоном, а не border-top: в макете это
   отдельный слой нулевой высоты (1:2698), и border растянул бы список
   со 148 до 150 px. */
.delivery-geo__row + .delivery-geo__row {
  padding-top: var(--space-16);
  background-image: linear-gradient(var(--color-border-soft), var(--color-border-soft));
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% 1px;
}

.delivery-geo__term {
  flex: none;
  color: var(--color-brand);
}

/* --- 1:2707 Таблица сроков и стоимости --------------------------------------
   Колонки макета: 1092 (тянется) · 280 · 380, зазор 20, padding контейнера 24.
   Собираем это асимметричными паддингами ячеек, иначе текст второй и третьей
   колонок встанет не на 1136 и 1436 px, как в макете.
   Строки: шапка 72 (24+24+24 при lh 1.2057), данные 76 (24+28+24 при lh 1.4). */

.delivery-table__panel {
  /* Рамка нарисована outline'ом внутрь, а не border: в Figma обводка фрейма
     не входит в его размер, и border раздул бы панель с 528 до 530 px,
     сдвинув вниз всё, что идёт после таблицы. */
  outline: 1px solid var(--color-border-soft);
  outline-offset: -1px;
  border-radius: var(--radius-lg);
  /* Скругление обрезает заливку шапки и последней строки; на узких экранах
     таблица прокручивается внутри панели, а не тянет за собой всю страницу. */
  overflow-x: auto;
}

.delivery-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-20);
}

.delivery-table th,
.delivery-table td {
  padding: var(--space-24) 20px var(--space-24) 0;
  text-align: left;
  vertical-align: top;
}

.delivery-table th:first-child,
.delivery-table td:first-child { padding-left: var(--space-24); }

.delivery-table th:last-child,
.delivery-table td:last-child { padding-right: var(--space-24); }

/* 280 + 20 зазора и 380 + 24 паддинга контейнера. */
.delivery-table th:nth-child(2),
.delivery-table td:nth-child(2) { width: 300px; }

.delivery-table th:nth-child(3),
.delivery-table td:nth-child(3) { width: 404px; }

.delivery-table thead tr { background-color: var(--color-bg-soft); }

.delivery-table th {
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--color-text-muted);
}

.delivery-table td {
  line-height: var(--lh-loose);
  color: var(--color-text);
}

/* Зебра начинается со второй строки данных. */
.delivery-table tbody tr:nth-child(even) { background-color: var(--color-bg-soft); }

/* Разделитель рисуем фоном, а не border-bottom: в макете линия лежит ВНУТРИ
   строки высотой 76 px, а border добавил бы по пикселю на каждую из шести
   строк и увёл бы низ таблицы на 5 px. */
.delivery-table tbody tr {
  background-image: linear-gradient(var(--color-border-soft), var(--color-border-soft));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 1px;
}

.delivery-table tbody tr:last-child { background-image: none; }

/* Селектор с типом элемента — иначе общий `.delivery-table td` по
   специфичности перебивает модификатор и цена остаётся чёрной. */
td.delivery-table__price--free { color: var(--color-success); }
td.delivery-table__price--ask { color: var(--color-text-muted); }

/* --- 1:2738 Способы оплаты --------------------------------------------------
   Четыре карточки 445×420 с шагом 20. Иконка сверху, текстовый блок прижат
   к низу — в макете у всех четырёх низ текста на 388 px, а верх разный,
   отсюда space-between, а не фиксированные отступы. */

.delivery-pay {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Карточек может быть меньше четырёх (лишние скрыты через админку «-»):
   колонок столько же, сколько карточек, иначе справа пустая ячейка. */
.delivery-pay--3 { grid-template-columns: repeat(3, 1fr); }
.delivery-pay--2 { grid-template-columns: repeat(2, 1fr); }
.delivery-pay--1 { grid-template-columns: 1fr; max-width: 445px; }
.delivery-ways--2 { grid-template-columns: repeat(2, 1fr); }
.delivery-ways--1 { grid-template-columns: 1fr; max-width: 600px; }

.pay-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-24);
  min-height: 420px;
  padding: var(--space-32);
  border-radius: var(--radius-xl);
  background: var(--color-bg-soft);
}

.pay-card__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  border-radius: var(--radius-pill);
  /* Кружок белый, а не голубой, как у .info-card: карточка уже серая. */
  background: var(--color-bg);
  color: var(--color-brand);
}

.pay-card__icon svg {
  width: 48px;
  height: 48px;
}

/* На этой странице обводка иконок 4 px, а не типовые 3 px (--stroke-icon).
   Сами файлы иконок общие (icon-wallet используется ещё и на «О компании»,
   где обводка 3 px), поэтому прибавку задаём стилем страницы, а не в SVG. */
.pay-card__icon svg :is(path, rect, circle, line, polyline) {
  stroke-width: 4;
}

.pay-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.pay-card__title {
  font-size: var(--fs-32);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-32);
}

/* Линия между заголовком и описанием — отдельный слой в макете (1:2746),
   серая #757575, с зазором 16 px сверху и снизу. Верхний даёт gap блока. */
.pay-card__text {
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-text-muted);
  font-size: var(--fs-20);
  font-weight: var(--fw-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-20);
  color: var(--color-text-muted);
}

/* --- Адаптив ----------------------------------------------------------------
   Макет нарисован только под 1920 px: ниже этой ширины всё, что здесь
   описано, — решение вёрстки и ждёт согласования (см. _figma/00-INDEX.md).
   Задача правил — не дать появиться горизонтальной прокрутке и сохранить
   пропорции карточек. */

@media (max-width: 1280px) {
  .delivery-pay { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1100px) {
  .delivery-map { flex-direction: column; padding: var(--space-32); }
  .delivery-map__left { gap: var(--space-32); }
  .delivery-map__media img { height: 320px; }

  /* Ниже 1100 колонки в 300 и 404 px съедают первую колонку, поэтому
     отдаём ширину содержимому и прокручиваем таблицу внутри панели. */
  .delivery-table { min-width: 640px; }
  .delivery-table th:nth-child(2),
  .delivery-table td:nth-child(2),
  .delivery-table th:nth-child(3),
  .delivery-table td:nth-child(3) { width: auto; white-space: nowrap; }
}

@media (max-width: 900px) {
  .delivery { padding-top: var(--space-48); padding-bottom: var(--space-48); }
  .delivery__block + .delivery__block { margin-top: var(--space-64); }
  .delivery__title { font-size: var(--fs-32); letter-spacing: var(--ls-32); }
  .delivery-ways { grid-template-columns: repeat(2, 1fr); }
  .delivery-way { min-height: 0; }
  /* Как только у карточки нет фиксированной высоты, тянуть фото нечем:
     flex-basis 0 схлопывает его в ноль. Ниже 900 px задаём фото
     пропорцией из макета (552×354). */
  .delivery-way__media { flex: none; aspect-ratio: 552 / 354; }
  .pay-card { min-height: 0; }
  .pay-card__title { font-size: var(--fs-24); letter-spacing: var(--ls-24); }
}

@media (max-width: 640px) {
  .delivery-ways,
  .delivery-pay { grid-template-columns: 1fr; }
  .delivery-map { padding: var(--space-24); }
  .delivery-geo__row { flex-direction: column; gap: var(--space-4); }
}

/* --- Телефон: размеры, не попавшие в блоки выше ---------------------------- */
@media (max-width: 640px) {
  .delivery-map { gap: var(--space-24); }
  .delivery-map__media img { height: 220px; }
  .delivery-way__title { font-size: var(--fs-20); letter-spacing: var(--ls-20); }

  .pay-card__icon { width: 56px; height: 56px; padding: var(--space-12); }
  .pay-card__icon svg { width: 32px; height: 32px; }
}