/* ==========================================================================
   Главная (index.html). Три ширины: 1920 (база без @media), 768, 375.
   Figma: 1920 — 3099:11, 768 — 3156:621, 375 — 3157:1153; правила адаптива — 3157:9600.
   Раскладка из панелей, как на card.html — .panels / .panel в css/components.css, токены --panel-* в css/tokens.css:
   контент 1280 / 688 / 327 (на 375 — панель 8 + поля 16), отступ от шапки --page-offset-top 64 / 32 / 16.
   Отступы кратны 8 (исключения из макета — с пометкой у секции).
   Планшет: @media (min-width: 768px) and (max-width: 1279px); мобильная: @media (max-width: 767px).
   Секции добавляются по задачам (docs/pages/index.md).
   ========================================================================== */

/* ---------- 1. Hero «Кошелек Алтын» (3099:49 / 3156:623 / 3157:1155) — токены --home-hero-* ----------
   1920: две колонки — текст 576 и иллюстрация 654.6, по краям контейнера, по центру высоты; высота панели —
   поля + иллюстрация. Текст всегда 576; иллюстрация занимает остаток (до 654.6) — на узком десктопе (1280–1400)
   плавно сжимается с сохранением пропорций, между колонками не меньше 40.
   768 и 375: колонкой — текст, под ним иллюстрация по центру (×0.8 / ×0.5). Кнопка по ширине текста. */
.home-hero {
  padding: var(--home-hero-padding);
  background: var(--home-hero-bg);
}

.home-hero__inner {
  display: grid;
  grid-template-columns: var(--home-hero-text-width) minmax(0, var(--home-hero-art-width));
  justify-content: space-between;
  align-items: center;
  gap: var(--home-hero-columns-gap);
}

.home-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--home-hero-text-gap);
  letter-spacing: var(--letter-spacing-tight);
}

.home-hero__heading {
  display: flex;
  flex-direction: column;
  gap: var(--home-hero-heading-gap);
}

.home-hero__overline {
  font-size: var(--home-hero-overline-size);
  line-height: var(--home-hero-overline-line-height);
  color: var(--color-home-hero-muted);
}

.home-hero__title {
  font-size: var(--home-hero-title-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--home-hero-title-line-height);
  color: var(--color-home-hero-title);
}

.home-hero__lead {
  max-width: var(--home-hero-lead-width);
  font-size: var(--home-hero-lead-size);
  line-height: var(--home-hero-lead-line-height);
  color: var(--color-home-hero-muted);
}

.home-hero__media {
  display: flex;
  justify-content: center;
}

/* Иллюстрация слоями: основа (телефон) + 3 монеты для параллакса (js/parallax.js). Блок — 654.6 × 667.09 по кадру
   1920 (или уже — по колонке); слои — в % от блока (рамки слоёв Figma «Pic» 3128:8688), вид одинаков на всех ширинах. */
.home-hero__art {
  position: relative;
  width: 100%;
  max-width: var(--home-hero-art-width);
  aspect-ratio: 654.6 / 667.091;
}

.home-hero__art img {
  position: absolute;
  max-width: none;
  height: auto;
}

.home-hero__base { left: 2.094%; top: 0; width: 76.72%; }            /* 3128:8689: телефон */
.home-hero__layer {
  pointer-events: none;
  will-change: transform;
}
.home-hero__layer--a { left: -0.061%; top: 6.266%; width: 20.641%; }   /* 3128:8692: монета «А» */
.home-hero__layer--rub { left: 69.89%; top: 14.076%; width: 30.049%; } /* 3128:8691: ₽ */
.home-hero__layer--usd { left: 61.172%; top: 52.763%; width: 26.324%; } /* 3128:8690: $ */

/* Планшет и мобильная: колонкой (--home-hero-text-width = minmax(0, 1fr), иллюстрация — ряд ниже) */
@media (max-width: 1279px) {
  .home-hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- 2. Строка курсов (3104:826 / 3156:636 / 3157:1168) — компонент .rates в css/components.css ---------- */

/* ---------- 3. «Лицензия и регулирование» (3099:57 / 3156:649 / 3157:1181) — токены --home-license-* ----------
   1920: текст по содержимому слева, иллюстрация 624.76 справа (сжимается по колонке, между колонками не меньше 40), по центру высоты.
   768 и 375: колонкой — текст, под ним иллюстрация по центру (440 / 300). Кнопка по ширине текста.
   Карточка — вся ссылка: плашка + круг-стрелка 56 (белая обводка 10) на правом краю. Круг выступает за плашку на 24 (в макете 26 — округлено к кратному 8):
   правее плашки оставлено место (padding-right у ссылки), поэтому круг остаётся внутри колонки текста. */
.home-license__inner {
  display: grid;
  grid-template-columns: auto minmax(0, var(--home-license-art-width));
  justify-content: space-between;
  align-items: center;
  gap: var(--home-license-columns-gap);
}

.home-license__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--home-license-text-gap);
  min-width: 0;
  letter-spacing: var(--letter-spacing-tight);
}

.home-license__title {
  font-size: var(--home-license-title-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--home-license-title-line-height);
  color: var(--color-home-hero-title);
}

.home-license__lead {
  padding-top: 8px;
  font-size: var(--home-license-lead-size);
  line-height: var(--home-license-lead-line-height);
  color: var(--color-home-hero-muted);
}

.home-license__card {
  position: relative;
  display: block;
  width: 0;           /* длинный текст не растягивает колонку: ширину даёт заголовок (макет ≈ 509) */
  min-width: 100%;
  padding-right: var(--home-license-arrow-overhang);
  color: inherit;
  text-decoration: none;
  border-radius: var(--panel-radius);
}

.home-license__card-text {
  display: block;
  padding: var(--home-license-card-padding);
  font-size: var(--home-license-card-size);
  line-height: var(--home-license-card-line-height);
  color: var(--color-home-hero-muted);
  background: var(--color-home-license-card);
  border-radius: var(--panel-radius);
  transition: background-color 0.2s;
}

.home-license__arrow {
  position: absolute;
  top: 50%;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--home-license-arrow-size);
  height: var(--home-license-arrow-size);
  background: var(--color-home-license-arrow);
  border: 10px solid var(--color-white);
  border-radius: 50%;
  box-sizing: border-box;
  transform: translateY(-50%);
  transition: transform 0.2s;
}

.home-license__card:hover .home-license__card-text { background: #eceef0; }
.home-license__card:hover .home-license__arrow { transform: translateY(-50%) translateX(2px); }
.home-license__card:focus-visible { outline: 2px solid var(--color-home-license-arrow); outline-offset: 2px; }

.home-license__media {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.home-license__media img {
  width: 100%;
  max-width: var(--home-license-art-width);
  height: auto;
}

@media (max-width: 1279px) {
  .home-license__inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  .home-license__text { width: 100%; }
}

/* ---------- 4. «Полезная информация о карте» (3101:63 / 3156:661 / 3157:1193) — токены --home-benefits-* ----------
   Карточка — .feature-card (components.css): цвета, центровка, обрезка берём как есть, свои токены подменяем в .home-benefits.
   Слой картинки .feature-card__pic растянут на всю карточку (холст = карточка по мастеру 3134:602, а не квадратная рамка).
   Картинка карточки — прозрачный WebP по исходному PNG слоя с поворотом из Figma (запечён), ×2 от размера на 1920;
   положение — от нижнего края и центра карточки (--art-w ширина, --art-b снизу, --art-x смещение от центра), как в Figma.
   1920: сетка из 6 колонок (2 карточки по 3 колонки = 616, 3 по 2 колонки = 395); 768: 2 колонки, первая на обе; 375: столбиком. */
.home-benefits__title,
.home-b2b__title {
  margin-bottom: var(--panel-heading-gap);
  font-size: var(--home-benefits-title-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--home-benefits-title-line-height);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-home-hero-title);
  text-align: center;
}

.home-benefits__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--home-benefits-grid-gap);
}

.home-benefits .feature-card {
  --feature-card-padding: var(--home-benefits-card-padding);
  --feature-card-gap: var(--home-benefits-card-gap);
  --feature-card-title-size: var(--home-benefits-card-title-size);
  --feature-card-title-line-height: var(--home-benefits-card-title-line-height);
  --feature-card-text-size: var(--home-benefits-card-text-size);
  --feature-card-text-line-height: var(--home-benefits-card-text-line-height);
  --feature-card-height: var(--home-benefits-card-height-m);
  grid-column: span 2;
}

.home-benefits .home-benefit--1,
.home-benefits .home-benefit--2 {
  --feature-card-height: var(--home-benefits-card-height-l);
  grid-column: span 3;
}

.home-benefits .feature-card__pic {
  inset: 0;
  display: block;
}

.home-benefit__art {
  position: absolute;
  bottom: var(--art-b);
  left: calc(50% + var(--art-x));
  width: var(--art-w);
  max-width: none;
  height: auto;
  transform: translateX(-50%);
}

/* Декор карточки 2 (жёлтая фигура за картинкой): центр — в % карточки, поворот 15° вокруг центра */
.home-benefit__decor {
  position: absolute;
  top: var(--decor-y);
  left: var(--decor-x);
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%) rotate(15deg);
}

/* 1920 */
.home-benefits .home-benefit--1 { --art-w: 334.8px;   --art-b: -55.19px; --art-x: 0px; }
.home-benefits .home-benefit--2 { --art-w: 498.1px;   --art-b: -19.62px; --art-x: -26.51px; --decor-x: -7.26%;  --decor-y: 47.79%; }
.home-benefits .home-benefit--2 .home-benefit__decor { width: 89.78px; }
.home-benefits .home-benefit--3 { --art-w: 450.68px;  --art-b: -96.38px; --art-x: 25.41px; }
.home-benefits .home-benefit--4 { --art-w: 306.67px;  --art-b: -11.76px; --art-x: -0.86px; }
.home-benefits .home-benefit--5 { --art-w: 291px;     --art-b: -64.03px; --art-x: 1px; }

/* Десктоп 1280–1329: карточка 4 уже 380, заголовок «Без риска блокировки карты» уходит в 3 строки и почти касается
   картинки. Картинку уменьшаем по ширине карточки, как в карусели card.html (container-type на .feature-card от 1280 —
   components.css); в запросе — ширина без полей 40 + 40; зазор текст → картинка ≥ 16. */
@media (min-width: 1280px) {
  @container (max-width: 300px) {
    .home-benefits .home-benefit--4 .home-benefit__art { --art-w: var(--home-benefits-art-4-narrow); }
  }
}

/* Планшет: первая карточка во всю ширину, остальные 2 × 2 */
@media (min-width: 768px) and (max-width: 1279px) {
  .home-benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-benefits .feature-card { grid-column: span 1; }
  .home-benefits .home-benefit--1 { grid-column: span 2; }
  .home-benefits .home-benefit--2 { --feature-card-height: var(--home-benefits-card-height-m); grid-column: span 1; }
  .home-benefits .home-benefit--1 { --art-w: 334.8px;  --art-b: -55.19px; --art-x: 0px; }
  .home-benefits .home-benefit--2 { --art-w: 328.74px; --art-b: -12.95px; --art-x: -17.5px; --decor-x: -19.72%; --decor-y: 63.75%; }
  .home-benefits .home-benefit--2 .home-benefit__decor { width: 39.76px; }
  .home-benefits .home-benefit--3 { --art-w: 383.08px; --art-b: -81.93px; --art-x: 21.6px; }
  .home-benefits .home-benefit--4 { --art-w: 260.67px; --art-b: -9.99px;  --art-x: -0.73px; }
  .home-benefits .home-benefit--5 { --art-w: 247.35px; --art-b: -54.42px; --art-x: 0.85px; }
}

/* Мобильная: столбиком */
@media (max-width: 767px) {
  .home-benefits__grid { grid-template-columns: minmax(0, 1fr); }
  .home-benefits .feature-card,
  .home-benefits .home-benefit--1,
  .home-benefits .home-benefit--2 { grid-column: auto; }
  .home-benefits .home-benefit--1 { --art-w: 261.14px; --art-b: -43.05px; --art-x: 0px; }
  .home-benefits .home-benefit--2 { --art-w: 308.82px; --art-b: -12.16px; --art-x: -16.44px; --decor-x: -13.58%; --decor-y: 63.24%; }
  .home-benefits .home-benefit--2 .home-benefit__decor { width: 35.44px; }
  .home-benefits .home-benefit--3 { --art-w: 351.53px; --art-b: -75.18px; --art-x: 19.82px; }
  .home-benefits .home-benefit--4 { --art-w: 239.2px;  --art-b: -9.17px;  --art-x: -0.67px; }
  .home-benefits .home-benefit--5 { --art-w: 226.98px; --art-b: -49.94px; --art-x: 0.78px; }
}

/* ---------- 5. «B2B-решения» + промо «Франшиза цифрового банка» (3102:65 / 3156:671 / 3157:1203) — токены --home-b2b-* ----------
   Заголовок — общее правило с .home-benefits__title. Теги — .tag-list / .tag--l (components.css): на 1920 размер l
   (20 / 1.6, поля 15 30), на ≤1279 — значения размера s (16 / 1.6, поля 8 16), промежуток 16 / 8 / 8.
   Отступы заголовок → теги → промо — --panel-heading-gap (48 / 32 / 24). Промо — общий .promo.promo--yellow (как card.html). */
.home-b2b__tags {
  --tag-list-gap: var(--home-b2b-tags-gap);
  max-width: var(--home-b2b-tags-width);
  margin: 0 auto var(--panel-heading-gap);
}

@media (max-width: 1279px) {
  .home-b2b__tags .tag--l {
    padding: var(--tag-padding-s);
    font-size: var(--body-16-medium-size);
    font-weight: var(--body-16-medium-weight);
    line-height: var(--body-16-medium-line-height);
    letter-spacing: var(--body-16-medium-letter-spacing);
  }
}