/* =============================================================================
 * deshablon-cards.css - снятие шаблона «плитка-иконка над заголовком»
 * Вячеслав 25.08.2026: «у тебя всё какое-то квадратное».
 *
 * ЧТО ИМЕННО ЛЕЧИМ. Замер живой страницы нашёл ОДНУ И ТУ ЖЕ форму в пяти
 * разных блоках: квадрат 44x44 (у whyus по content-box 42x42, у spot 40x40)
 * с радиусом 6px, заливкой rgba(255,255,255,.043) и рамкой в 1px, а под ним
 * заголовок. Это не наш почерк, это форма по умолчанию у любого генератора
 * интерфейсов: он не умеет решать, куда деть иконку, и всегда кладёт её в
 * маленький скруглённый квадрат сверху. Пять блоков подряд с одинаковым
 * квадратом и читаются как «сгенерировано».
 *
 * ОТКУДА ВЗЯТО РЕШЕНИЕ. Эталон - живой код apolloproduction.studio
 * (orchids-projects/project/src/index.css, блок .al-card). Там ровно этой
 * плитки НЕТ: иконка либо в круглом кольце-хайрлайне (.al-icon-ring,
 * border-radius 9999px, заливка всего 5% белого), либо композиция карточки
 * горизонтальная, а не столбиком. Идея эталона: контейнер иконки не должен
 * быть заметной деталью, он либо круглый и почти невидимый, либо его нет.
 * Здесь идём дальше и убираем подложку совсем - на тёмном стекле она всё
 * равно не несла смысла, только повторяла форму самой карточки.
 *
 * ДВА ПРИЁМА, ПО ОДНОМУ НА БЛОК (единообразие внутри блока обязательно):
 *   1) СТРОКА. Иконка и заголовок в одну строку, подложки нет, знак крупнее
 *      и тоньше. Блоки: .guard, .svc, .card, .spot__card.
 *   2) ВОДЯНОЙ ЗНАК. Иконка уходит в верхний правый угол карточки крупным
 *      тихим знаком, а заголовок начинает карточку сам. Блок: .whyus-card.
 * Разные приёмы в соседних блоках специально: одинаковая форма пять раз
 * подряд и есть тот самый признак шаблона.
 *
 * СМЫСЛ ИКОНКИ НЕ ТЕРЯЕТСЯ. Знак нигде не уменьшен: было 24px внутри
 * квадрата, стало 27px в строке и 46px водяным знаком. Опознать пункт по
 * иконке стало проще, а не сложнее.
 *
 * ФАЙЛ ПОДКЛЮЧЁН ПОСЛЕДНИМ. Правила побеждают по каскаду; !important стоит
 * только там, где перебиваем адресные правила из styles.css (.ae4-lit,
 * .whyus-card.is-live, hover-состояния), которые красили именно подложку.
 *
 * НЕ ТРОГАЕМ по прямой просьбе владельца: перелив pb-glint на кнопках,
 * свечение круглой кнопки помощника .aai-fab, синий #4FC4E9 и серебро.
 * ========================================================================== */

/* Общий размер знака в строке. Один источник правды, чтобы четыре блока
   не разъехались по величине иконки. */
:root{
  --dsh-ico: 27px;          /* знак в строке: крупнее прежних 24px внутри плитки */
  --dsh-ico-stroke: 1.25;   /* тоньше базовых 1.5: без подложки знак звучит громче */
  --dsh-gap: 13px;          /* воздух между знаком и заголовком */
  --dsh-mark: 46px;         /* водяной знак в углу карточки whyus */
}

/* -----------------------------------------------------------------------------
 * ОБЩИЙ СНОС ПОДЛОЖКИ
 * Одно место, где квадратная плитка перестаёт существовать. Обнуляем ровно
 * те свойства, которыми она рисовалась: размер, заливку, рамку, радиус, тень.
 * !important нужен из-за .ae4-lit .card__ico и .whyus-card.is-live .whyus-card__ico
 * в styles.css - они переназначают фон и рамку адресно.
 * -------------------------------------------------------------------------- */
.guards > .guard > .guard__ico,
.cards--2 > .svc > .svc__ico,
.cards > .card > .card__ico,
.spot__stage > .spot__card > .spot__ico,
.whyus__grid > .whyus-card > .whyus-card__ico{
  width: auto !important;
  height: auto !important;
  min-width: 0;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* Плитка меняла форму на hover (масштаб и цвет рамки). Формы больше нет,
     поэтому и трансформация плитки не нужна: осталась бы дёрганием пустоты. */
  transform: none !important;
}

/* -----------------------------------------------------------------------------
 * ПРИЁМ 1, БЛОК «ГАРАНТИИ» (.guard, 6 карточек)
 * Разметка внутри: span.guard__ico, h3, p. Строим сетку в две колонки и
 * ставим знак и заголовок в одну строку, а текст пункта под заголовок, а не
 * под иконку: абзац выравнивается по букве заголовка, левый край один.
 * -------------------------------------------------------------------------- */
.guards > .guard{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--dsh-gap);
  row-gap: 0;
  align-items: start;
}
.guards > .guard > .guard__ico{
  grid-column: 1;
  grid-row: 1;
  /* Оптическое совмещение: верх знака по верху прописной буквы заголовка,
     а не по строчному боксу, иначе знак визуально «висит» выше текста. */
  margin-top: 1px;
}
.guards > .guard > .guard__ico .ico{
  width: var(--dsh-ico);
  height: var(--dsh-ico);
  stroke-width: var(--dsh-ico-stroke);
}
.guards > .guard > h3{
  grid-column: 2;
  grid-row: 1;
  margin-top: 0;
  /* Заголовок здесь в две строки на узкой колонке. Запас по высоте держим у
     строки, чтобы однострочные и двустрочные карточки не прыгали. */
  min-height: var(--dsh-ico);
}
.guards > .guard > p{
  grid-column: 2;
  grid-row: 2;
  margin-top: 9px;
}

/* -----------------------------------------------------------------------------
 * ПРИЁМ 1, БЛОК «ДОПОЛНИТЕЛЬНЫЕ УСЛУГИ» (.svc, 2 карточки)
 * Разметка: span.svc__ico, h3, p, ul.svc__list, a.btn.
 * Здесь была колоночная флекс-раскладка, где кнопка прижималась к низу через
 * margin-top:auto, чтобы в двух карточках разной длины кнопки стояли на одной
 * линии. В сетке auto-отступ так не работает, поэтому роль распорки играет
 * ПУСТАЯ строка 4 размером 1fr: она съедает весь запас высоты и кнопка
 * остаётся внизу. Поведение сохранено ровно то же, что было.
 * -------------------------------------------------------------------------- */
.cards--2 > .svc{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr auto;
  column-gap: 14px;
  row-gap: 0;
  align-items: start;
}
.cards--2 > .svc > .svc__ico{
  grid-column: 1;
  grid-row: 1;
  margin-top: 1px;
}
.cards--2 > .svc > .svc__ico .ico{
  width: 28px;
  height: 28px;
  stroke-width: var(--dsh-ico-stroke);
}
.cards--2 > .svc > h3{
  grid-column: 2;
  grid-row: 1;
  margin-top: 0;
  min-height: 28px;
}
/* Абзац и список идут во всю ширину карточки: держать их в правой колонке
   значило бы обрезать строку ради выравнивания под заголовок, а текста тут
   много и мера строки важнее. */
.cards--2 > .svc > p{
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 15px;
}
.cards--2 > .svc > .svc__list{
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 18px;
  margin-bottom: 0;
}
.cards--2 > .svc > .btn{
  grid-column: 1 / -1;
  grid-row: 5;
  margin-top: 22px;
}

/* -----------------------------------------------------------------------------
 * ПРИЁМ 1, БЛОК «СПОСОБЫ ОБМЕНА» (.card, 3 карточки)
 * Разметка: span.card__ico, span.card__tag, h3, p, p.card__for.
 * Особый случай: между иконкой и заголовком стоит плашка-ярлык («курс
 * выгоднее», «быстрее»). Ставим знак и ярлык в одну строку - получается
 * честная шапка карточки, а заголовок начинается с новой строки во всю
 * ширину. Нижняя строка p.card__for так же прижата вниз пустой строкой 1fr.
 * -------------------------------------------------------------------------- */
.cards > .card{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr auto;
  column-gap: 12px;
  row-gap: 0;
  align-items: center;
}
.cards > .card > .card__ico{
  grid-column: 1;
  grid-row: 1;
}
.cards > .card > .card__ico .ico{
  width: var(--dsh-ico);
  height: var(--dsh-ico);
  stroke-width: var(--dsh-ico-stroke);
}
.cards > .card > .card__tag{
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  align-self: center;
  margin-top: 0;
}
.cards > .card > h3{
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 16px;
}
.cards > .card > p{
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 11px;
}
.cards > .card > .card__for{
  grid-column: 1 / -1;
  grid-row: 5;
  margin-top: 0;
  padding-top: 14px;
}

/* -----------------------------------------------------------------------------
 * ПРИЁМ 1, БОКОВАЯ ВИТРИНА (.spot__card, карточки строит app.js)
 * Разметка из app.js: span.spot__ico, h3.spot__title, p.spot__desc,
 * span.spot__cta. Та же плитка, только 40x40 и радиус 12. Колонка узкая,
 * поэтому знак делаем чуть меньше общего: 24px, иначе он забирает половину
 * строки заголовка.
 * -------------------------------------------------------------------------- */
.spot__stage > .spot__card{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 11px;
  row-gap: 0;
  align-content: start;
  align-items: start;
}
.spot__stage > .spot__card > .spot__ico{
  grid-column: 1;
  grid-row: 1;
  margin-top: 1px;
}
.spot__stage > .spot__card > .spot__ico .ico{
  width: 24px;
  height: 24px;
  stroke-width: 1.35;
}
.spot__stage > .spot__card > .spot__title{
  grid-column: 2;
  grid-row: 1;
  margin-top: 0;
  min-height: 24px;
}
.spot__stage > .spot__card > .spot__desc{
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 10px;
}
.spot__stage > .spot__card > .spot__cta{
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 12px;
}

/* -----------------------------------------------------------------------------
 * ПРИЁМ 2, БЛОК «ПОЧЕМУ МЫ» (.whyus-card, 6 карточек)
 * Разметка: span.whyus-card__ico, h3.whyus-card__t, p.whyus-card__p.
 * Здесь другой ход: карточку начинает ЗАГОЛОВОК, а знак уходит водяным
 * знаком в верхний правый угол. Причина именно такая: это главный блок
 * страницы, в нём шесть карточек подряд, и шесть одинаковых строк «знак плюс
 * заголовок» дали бы новый штамп вместо старого. Плюс заголовки здесь
 * длинные, им нужна вся ширина карточки.
 *
 * Знак вырос с 24px до 46px и стал тоньше, так что опознаётся легче прежнего.
 * Он приглушён до 0.5 непрозрачности, чтобы не спорить с серебряным
 * заголовком, но остаётся читаемым знаком, а не текстурой.
 * -------------------------------------------------------------------------- */
.whyus__grid > .whyus-card > .whyus-card__ico{
  position: absolute;
  top: 18px;
  right: 18px;
  display: block;
  color: #C6D0DA;
  opacity: .5;
  /* Знак декоративный (aria-hidden в разметке) и не должен перехватывать
     ни курсор, ни подсветку карточки под курсором. */
  pointer-events: none;
  transition: opacity var(--t-base, .2s ease);
}
.whyus__grid > .whyus-card > .whyus-card__ico .whyus-card__svg{
  width: var(--dsh-mark);
  height: var(--dsh-mark);
  stroke-width: 1.1;
}
/* Карточка живёт при наведении: знак проявляется. Меняется только opacity,
   никаких сдвигов слоя. */
.whyus__grid > .whyus-card:hover > .whyus-card__ico,
.whyus__grid > .whyus-card:focus-within > .whyus-card__ico{
  opacity: .78;
}
/* Заголовок теперь первый элемент карточки. Отступ справа держим только у
   него: водяной знак кончается примерно на 64px от верха карточки, а абзац
   начинается ниже и идёт во всю ширину без обрезки меры строки. */
.whyus__grid > .whyus-card > .whyus-card__t{
  margin-top: 0;
  padding-right: calc(var(--dsh-mark) + 12px);
}

/* -----------------------------------------------------------------------------
 * УЗКИЙ ЭКРАН
 * На 375px колонка одна, ширина текста около 290px. Водяной знак вместе с
 * отступом заголовка съедал бы там пятую часть строки и рвал перенос длинных
 * заголовков вроде «Наличные офлайн, если так удобнее». Поэтому на узком
 * экране блок whyus переходит на тот же приём, что и соседи: знак в строке.
 * Внутри блока по-прежнему единообразно, все шесть карточек одинаковы.
 * -------------------------------------------------------------------------- */
@media (max-width: 620px){
  .whyus__grid > .whyus-card{
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--dsh-gap);
    row-gap: 0;
    align-items: start;
  }
  .whyus__grid > .whyus-card > .whyus-card__ico{
    position: static;
    grid-column: 1;
    grid-row: 1;
    opacity: 1;
    margin-top: 1px;
    /* Без этого элемент сетки растягивается на всю колонку. Замер на 375px
       поймал ровно это: у карточки «Рубли и тенге» есть четвёртый ребёнок,
       живой виджет курса, он попадал в первую колонку и раздувал её со
       27px до 125px, а знак растягивался вслед за ней. */
    justify-self: start;
  }
  /* Любой ДОПОЛНИТЕЛЬНЫЙ ребёнок карточки (виджет курса и всё, что появится
     позже) уходит в колонку текста, а не под знак: левый край всего
     содержимого один, колонка знака остаётся шириной со знак. */
  .whyus__grid > .whyus-card > :not(.whyus-card__ico):not(.whyus-card__t){
    grid-column: 2;
  }
  .whyus__grid > .whyus-card > .whyus-card__ico .whyus-card__svg{
    width: var(--dsh-ico);
    height: var(--dsh-ico);
    stroke-width: var(--dsh-ico-stroke);
  }
  .whyus__grid > .whyus-card > .whyus-card__t{
    grid-column: 2;
    grid-row: 1;
    padding-right: 0;
    min-height: var(--dsh-ico);
  }
  .whyus__grid > .whyus-card > .whyus-card__p{
    grid-column: 2;
    grid-row: 2;
    margin-top: 9px;
  }

  /* Услуги: на узкой карточке знак и заголовок остаются в строке, но запас
     под кнопкой не нужен, распорка схлопывается. */
  .cards--2 > .svc{
    grid-template-rows: auto auto auto 0 auto;
  }
}

/* -----------------------------------------------------------------------------
 * ДОСТУПНОСТЬ ДВИЖЕНИЯ
 * Единственное движение, добавленное этим файлом, это проявление водяного
 * знака по opacity. Гасим и его: при запрете анимаций знак сразу в конечном
 * состоянии, без перехода.
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .whyus__grid > .whyus-card > .whyus-card__ico,
  .whyus__grid > .whyus-card:hover > .whyus-card__ico,
  .whyus__grid > .whyus-card:focus-within > .whyus-card__ico{
    transition: none;
    transform: none;
  }
}