/* =============================================================================
   zarubcard.ru — карточка сервиса.

   Отдельный файл, потому что карточка — единственный элемент сайта, который
   показывается на шести страницах в двух видах (плитка и список) и который
   владелец забраковал трижды подряд. Держать её правила в одном месте дешевле,
   чем ловить их по четырём местам style.css.

   Подключается после style.css и перекрывает его старые правила `.svc-*`.
   Правила ниже действуют только на карточки с классом `is-service` — их
   собирает макрос `svc_card` в _cards.html. Тот же класс `svc-card` носят
   рукописные карточки в country/countries/esim/esim_country/wallet: у них
   другое число внутренних блоков, и общая раскладка их бы разобрала.

   Что здесь решается, по порядку важности:

   1. Цифры соседних карточек стоят на одной линии. Не «подобранной высотой
      шапки», а по построению: карточка отдаёт свои четыре блока строкам
      общей сетки (subgrid), и высоту каждой строки задаёт самый высокий
      блок в ряду. Данные любой длины больше не двигают ряд, а короткие
      карточки не платят за это пустотой — лишней высоты просто нет.
   2. Тип карты выводится целиком. Это данные («Виртуальная и пластиковая
      карта турецкой платёжной системы Troy» — 62 знака), и короткой формы
      у них нет. Обрезка снята, место дано.
   3. Ничто ни на что не налезает: каждый блок в своей строке сетки,
      наложение стало невозможным, а не маловероятным.
   ========================================================================== */


/* --- Сетка: строки раздаются карточкам ------------------------------------ */

/* Ряды сетки — по содержимому.

   Было `grid-auto-rows: 1fr`: все ряды каталога одной высоты, заданной самым
   высоким. Карточка ниже занимает четыре строки сетки вместо одной, и `1fr`
   поделила бы её собственную высоту поровну между шапкой, типом, цифрами
   и кнопками — то есть развалила бы карточку. */
.svc-grid { grid-auto-rows: auto; }

/* Вертикальный зазор переехал с сетки на карточку.

   Зазор сетки лежит между КАЖДОЙ парой строк, а строки теперь внутренние:
   20 px встали бы между шапкой и типом карты, где нужно 10. Расстояния
   внутри карточки задаются отступами её блоков, а расстояние между
   карточками — нижним полем самой карточки. Итог для глаза тот же 20 px. */
.svc-grid { row-gap: 0; margin-block-end: 8px; }
.svc-grid > .svc-card { margin-block-end: 20px; }


/* --- Плитка --------------------------------------------------------------- */

.svc-grid > .svc-card.is-service {
  display: grid;
  /* Четыре строки: шапка, тип с плашками, цифры, низ. Столбец один —
     внутреннее деление на колонки делают сами блоки. */
  grid-template-columns: minmax(0, 1fr);
  padding: 22px;
}

/* Ради этого всё и затевалось.

   `subgrid` подключает четыре строки карточки к строкам общей сетки: строку
   «цифры» у всех карточек ряда меряет один и тот же трек, и её верхний край
   у соседей совпадает точно. Ни фиксированной высоты, ни обрезки текста:
   высоту трека задаёт самый высокий блок в ряду, а остальные тянутся до неё.

   Замер до: цифры начинались на 159, 185, 186 и 194 пикселе. Костыль
   `min-height: 162px` выравнивал их ценой пустоты до 43 px на коротких
   карточках. Теперь разброс нулевой без костыля, и пустоты нет вовсе.

   Проверка возможности здесь обязательна: без неё браузер, не знающий
   subgrid, прочитал бы `grid-row: span 4` буквально и отвёл бы каждой
   карточке четыре пустых ряда сетки. */
@supports (grid-template-rows: subgrid) {
  .svc-grid > .svc-card.is-service {
    grid-row: span 4;
    grid-template-rows: subgrid;
  }
}

/* Запасная раскладка для браузеров без subgrid.

   Карточка снова колонка flex, а цифры прижаты к её низу. Карточки в ряду
   и так одной высоты (сетка растягивает их по самой высокой), поэтому цифры
   и кнопки у соседей совпадают по вертикали — выравнивание сохраняется.
   Разница в том, куда девается лишняя высота: subgrid раздаёт её блокам,
   а здесь она вся собирается над линейкой. Хуже subgrid, но лучше и старого
   костыля с подобранной высотой, и рваного ряда.

   `margin: auto` работает только во flex: в сетке из четырёх автострок
   лишняя высота раздалась бы строкам поровну, и зазор появился бы между
   каждой парой блоков. Поэтому здесь именно flex, а не сетка. */
@supports not (grid-template-rows: subgrid) {
  .svc-grid > .svc-card.is-service { display: flex; flex-direction: column; }
  .svc-grid > .svc-card.is-service > .svc-facts { margin-block-start: auto; }

  /* Строка списка — по-прежнему сетка: три колонки flex не даст. */
  @media (min-width: 940px) {
    .svc-grid.view-list > .svc-card.is-service { display: grid; }
    .svc-grid.view-list > .svc-card.is-service > .svc-facts { margin-block-start: 0; }
  }
}

/* Старый костыль снят. Он остаётся в style.css для рукописных карточек
   из других шаблонов, здесь его перебиваем нулём. */
.svc-card.is-service > .svc-top { min-height: 0; }


/* --- Шапка: логотип, имя, индекс ------------------------------------------ */

.svc-card.is-service > .svc-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  /* `start` по вертикали: если у соседа имя в две строки и трек стал выше,
     наши логотип и имя остаются наверху, а не сползают к середине —
     первые строки имён в ряду совпадают. */
  align-content: start;
  align-items: center;
  column-gap: 12px;
  margin: 0;
}

/* Миниатюра карты — снова прямоугольник, как задумано в style.css.

   Там ей задана ширина через `flex: 0 0 72px`, а шапка давно стала сеткой:
   flex-основа в сетке не работает, и миниатюра схлопывалась до ширины
   логотипа — 28 px. Пропорция настоящей карты (1.6) при этом терялась,
   и вместо узнаваемой миниатюры в шапке стоял бледный квадратик.

   64, а не прежние 72: в трёхколоночной витрине карточке 316 px внутри,
   и восемь пикселей решают, поместится ли имя в одну строку. Пропорция
   от этого не страдает, а имя — главное, что человек читает первым. */
.svc-card.is-service .svc-thumb { width: 64px; height: 40px; }
.svc-card.is-service .svc-thumb img { width: 28px; height: 28px; }

/* Имя и галочка свежести — одна строка-контейнер, а не поток текста.

   Инлайновой галочке не хватало места после длинного односоставного имени
   («EasyPayments»), и она срывалась на вторую строку одна — на карточке
   это выглядело обломком разметки. Во flex-строке она стоит рядом с блоком
   имени при любой его длине. */
.svc-card.is-service .svc-name {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.svc-card.is-service .svc-name .fresh-badge { flex: 0 0 auto; margin-left: 0; }
.svc-card.is-service .svc-name a {
  min-width: 0;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -.01em;
  /* Имена вроде «Aifory Pro / Golden Card» переносятся по смыслу, а не
     одним словом на вторую строку. */
  text-wrap: balance;
  /* Страховка на крайний случай: односоставное имя вроде «EasyPayments»
     переносить негде, и в узкой колонке оно молча вылезало за свой блок
     в зазор перед плашкой индекса. `break-word` рвёт слово только тогда,
     когда оно не помещается в строку целиком, — то есть никогда при
     нынешних данных, но и без тихого наползания в будущем. */
  overflow-wrap: break-word;
}

/* Индекс удобства.

   Число сравнимо между карточками, поэтому остаётся, но весом уступает
   имени: имя отвечает «что это», индекс — «насколько удобно», и второй
   вопрос человек задаёт после первого. Знаменатель «/100» мельче — без
   него «38» рядом с именем читается как цена или счётчик. */
.svc-card.is-service .svc-top-side { display: flex; align-items: center; }
.svc-card.is-service .rel-badge {
  /* `min-width: 60px` из style.css отбирал у имени ширину даже там, где
     число короткое: плашка держала свои шестьдесят пикселей всегда. */
  min-width: 0;
  padding: 4px 9px;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.svc-card.is-service .rel-badge .muted { font-size: 11px; font-weight: 500; opacity: .8; }


/* --- Тип карты и плашки --------------------------------------------------- */

/* Блок из двух частей: сверху тип, снизу плашки.

   `space-between` в колонке значит, что плашки прижаты к низу трека. Если
   у соседа тип в три строки и трек стал выше, плашки всё равно стоят на
   одной линии у всей тройки — ряд читается собранным, а не рваным. Пустота
   при этом уходит туда, где она невидима: между строкой текста и линейкой. */
.svc-card.is-service > .svc-meta {
  display: flex;
  flex-direction: column;
  /* `nowrap` обязателен. В style.css у блока стоит `flex-wrap: wrap`, а у
     типа карты — `flex: 0 0 100%`: в строке это значило «занять всю ширину»,
     в колонке с заданной высотой то же самое значит «занять всю высоту»,
     и плашки уезжали в новую колонку справа от текста. */
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-block-start: 8px;
}

/* Тип карты — целиком, без обрезки.

   В style.css у него стоит `-webkit-line-clamp: 2`: 62-значный тип
   у Letim упирался в этот предел, и любая новая запись подлиннее молча
   потеряла бы хвост. Тип — это данные, а данные не сокращают. Место
   под третью строку теперь есть: `subgrid` растянет трек под неё
   и подвинет цифры у всей тройки разом. */
.svc-card.is-service .svc-meta .kind {
  display: block;
  flex: 0 0 auto;
  overflow: visible;
  -webkit-line-clamp: none;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink-faint);
  /* Не оставляет одно слово на последней строке. */
  text-wrap: pretty;
}

.svc-card.is-service .svc-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.svc-card.is-service .svc-docs { margin-top: 0; white-space: nowrap; }
.svc-card.is-service .svc-jur { white-space: nowrap; }


/* --- Четыре цифры --------------------------------------------------------- */

.svc-card.is-service > .svc-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Обе строки одной высоты: если значение сверху перенеслось на две
     строки («30 мин – 10 дней»), нижняя пара всё равно начинается там же,
     где у соседей. Иначе выравнивался бы только верх блока. */
  grid-auto-rows: 1fr;
  gap: 14px 18px;
  margin-block-start: 16px;
  padding-block-start: 15px;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}
/* По левому краю, а не по центру.

   Центрированные значения не давали общей вертикали: «2 990 ₽» и «бесплатно»
   разной длины начинались в разных местах, и четыре цифры читались как
   четыре отдельные надписи. От общего края они читаются столбцами — а вся
   витрина существует ради того, чтобы их сравнивали. */
.svc-card.is-service .svc-facts > div { text-align: start; }
.svc-card.is-service .fact-label {
  display: block;
  margin-bottom: 2px;
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ink-faint);
  white-space: nowrap;
}
.svc-card.is-service .svc-facts b {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  /* `anywhere` из style.css рвало слова посреди буквы: в узкой колонке
     списка «бесплатно» превращалось в «беспла|тно», а «не раскрыта» —
     в «не раскрыт|а». Перенос по словам, а колонке дана ширина. */
  overflow-wrap: break-word;
  text-wrap: balance;
}


/* --- Низ карточки --------------------------------------------------------- */

/* Кнопки прижаты к низу трека: если у соседа есть оговорка или промокод
   и трек стал выше, «Оформить» у всей тройки всё равно на одной линии. */
.svc-card.is-service > .svc-foot {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  margin-block-start: 16px;
}

.svc-card.is-service .svc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  margin: 0;
  padding: 0;
}

/* «Оформить» — главное действие, поэтому занимает всё свободное место.
   Стрелка привязана к слову неразрывным пробелом в шаблоне не была,
   поэтому запрещаем перенос здесь: на трёх кнопках в ряд стрелка
   срывалась на вторую строку внутри кнопки. */
.svc-card.is-service .svc-actions .cta {
  order: 1;
  flex: 1 1 auto;
  text-align: center;
  white-space: nowrap;
  padding-inline: 20px;
}

/* Отбор к сравнению — подписью, а не квадратом с «+».

   В style.css этой кнопке задан `width: 44px` и сетка по центру: подпись
   в неё не помещалась, и человек видел безымянный значок. Возвращаем
   кнопке её собственные размеры — теперь, когда «Подробнее» убрана,
   место в строке есть. */
.svc-card.is-service .svc-actions .svc-pick {
  order: 2;
  flex: 0 0 auto;
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Поля подобраны так, чтобы обе кнопки вышли ровно в 46 px: у «Оформить»
     кегль 16 px и поля 13, здесь кегль 14 и поля 12 плюс граница. Разная
     высота соседних кнопок — первое, что читается как небрежность. */
  padding: 12px 16px;
  font-size: 14px;
  white-space: nowrap;
}
.svc-card.is-service .svc-actions .svc-pick svg { width: 15px; height: 15px; }

.svc-card.is-service .svc-soft { margin: 0; }
.svc-card.is-service .svc-promo { margin: 0; }


/* --- Список: тот же DOM, строка вместо плитки ----------------------------- */

/* Список — вид каталога по умолчанию, и именно он был сломан сильнее плитки:
   в раскладке оставалась колонка 210 px под блок полной стоимости, снятый
   с карточек 30.08.2026. Колонка осталась пустой, а цифры сжались в 90 px
   на четыре значения — отсюда «беспла тно» и наезд подписи «Пополнение»
   на «Комиссия». Колонок теперь три, и все заняты.

   Порог 940 px взят из содержимого, а не из списка популярных экранов:
   имени с типом нужно 240, четырём значениям — 420, кнопкам — 135,
   плюс 44 на зазоры и 36 на поля карточки. Итого 875 px, и 940 —
   ближайшая ширина окна, при которой столько остаётся внутри контейнера.
   Раньше здесь стояло 761, и на планшете строка не помещалась: страница
   получала 115 px горизонтальной прокрутки, а кнопки вылезали за карточку. */
@media (min-width: 940px) {
  .svc-grid.view-list > .svc-card.is-service {
    grid-row: auto;
    grid-template-rows: none;
    /* Имя с типом, четыре цифры, действия. Минимумы у колонок не
       декоративные: 240 px — двухстрочное имя без переносов посреди слова,
       420 px — четыре значения примерно по 100 px с зазорами. Ниже этих
       чисел строка перестаёт быть строкой, поэтому и порог такой. */
    grid-template-columns: minmax(240px, 1fr) minmax(420px, 1.9fr) auto;
    grid-template-areas:
      "top  facts actions"
      "meta facts actions";
    align-content: center;
    column-gap: 22px;
    padding: 14px 18px;
    margin-block-end: 0;
  }
  /* Индекс держится вплотную к имени, а не улетает к правому краю колонки.
     В плитке он занимает свой угол и потому прижат вправо; в строке колонка
     шире имени, и прижатый вправо индекс повисал в пустоте посреди строки,
     не читаясь как оценка этого сервиса. */
  .svc-grid.view-list > .svc-card.is-service > .svc-top {
    grid-area: top;
    grid-template-columns: auto auto auto;
    justify-content: start;
    margin: 0;
  }
  .svc-grid.view-list > .svc-card.is-service > .svc-meta {
    grid-area: meta;
    /* В строке блоки не выравниваются между карточками — их выравнивает
       сама колонка. Плашки идут сразу за типом, а не прижимаются к низу. */
    justify-content: flex-start;
    margin-block-start: 4px;
  }
  .svc-grid.view-list > .svc-card.is-service > .svc-facts {
    grid-area: facts;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: auto;
    align-self: center;
    gap: 0 16px;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .svc-grid.view-list > .svc-card.is-service > .svc-foot {
    grid-area: actions;
    justify-content: center;
    margin: 0;
  }
  .svc-grid.view-list > .svc-card.is-service .svc-actions {
    flex-direction: column;
    gap: 6px;
  }
  .svc-grid.view-list > .svc-card.is-service .svc-actions .cta {
    flex: 0 0 auto;
    padding: 10px 20px;
    font-size: 15px;
  }
  .svc-grid.view-list > .svc-card.is-service .svc-actions .svc-pick {
    padding: 7px 14px;
    font-size: 13px;
  }
  .svc-grid.view-list > .svc-card.is-service .svc-name a { font-size: 16.5px; }
  .svc-grid.view-list > .svc-card.is-service .svc-facts b { font-size: 15.5px; }
  /* Миниатюра в строке мельче: тридцать девять строк подряд, и каждый
     лишний пиксель высоты стоит целого экрана прокрутки. */
  .svc-grid.view-list > .svc-card.is-service .svc-thumb { width: 54px; height: 34px; }
  .svc-grid.view-list > .svc-card.is-service .svc-thumb img { width: 24px; height: 24px; }
}


/* --- Узкий экран: телефон и планшет --------------------------------------- */

@media (max-width: 939px) {
  .svc-grid > .svc-card.is-service { padding: 18px; }

  /* Обе кнопки тянутся. На 375 px они делят строку пополам, на 320 —
     «Сравнить» переносится под «Оформить» и занимает всю ширину, а не
     стоит узким огрызком у левого края. */
  .svc-card.is-service .svc-actions .svc-pick { flex: 1 1 auto; }

  /* Список на узком экране — та же стопка, что и плитка, только плотнее.
     Строка в три колонки требует 875 px и здесь просто не помещается.

     Прежде на телефоне список прятал три факта из четырёх и тип карты:
     от карточки оставались имя и цена. Данные прятать нельзя — экономим
     на воздухе и кегле, а сетка 2×2 вмещает все четыре значения. */
  .svc-grid.view-list > .svc-card.is-service {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
    padding: 16px;
  }
  /* Именованные области («top», «facts») блокам раздаёт style.css, и они
     переживают отмену самой сетки областей: блоки уезжали в несуществующие
     области и накладывались друг на друга — имя сервиса поверх цифр.
     Здесь блоки возвращаются к обычному порядку, строка за строкой. */
  .svc-grid.view-list > .svc-card.is-service > * { grid-area: auto; }
  .svc-grid.view-list > .svc-card.is-service > .svc-facts > div { display: block; }
  .svc-grid.view-list > .svc-card.is-service .kind { display: block; }
  .svc-grid.view-list > .svc-card.is-service .svc-thumb { display: inline-flex; }
  .svc-grid.view-list > .svc-card.is-service .svc-name a {
    display: inline;
    font-size: 17px;
    -webkit-line-clamp: none;
    overflow: visible;
  }
  .svc-grid.view-list > .svc-card.is-service .svc-actions { flex-direction: row; }
  .svc-grid.view-list > .svc-card.is-service .svc-pick svg { display: block; }

  /* Экономия высоты — вся она здесь: зазоры и кегль значений. Ради этого
     список и существует, тридцать девять позиций иначе не пробежать. */
  .svc-grid.view-list > .svc-card.is-service > .svc-facts {
    gap: 10px 16px;
    margin-block-start: 12px;
    padding-block-start: 12px;
  }
  .svc-grid.view-list > .svc-card.is-service .svc-facts b { font-size: 15.5px; }
  .svc-grid.view-list > .svc-card.is-service > .svc-foot { margin-block-start: 12px; }
}