/* Footer — подвал сайта (Figma: файл Shop/Components MI2pse3AB2kUEI5bXJ4GDR,
   сет 10249:25752 «Footer»).

   ОСИ СЕТА. Type (Default / Simple) × Breakpoint (320 / 576 / 768 / 1024 /
   1280 / «1920 >»). Type=Simple — тот же футер без секции ссылок: шапка,
   строка Trustpilot и копирайт. Реализован модификатором .footer--simple
   (в разметке Simple секция .footer__columns просто отсутствует).

   АДАПТИВ. Активных точек перелома в проекте три (grid.css: base / 768 /
   1280), а нод оси Breakpoint в Figma шесть. Собраны и сверяются пиксельно
   ТРИ ноды Default и ТРИ Simple — по одной на активную точку:
       base    ← Figma 320  (Default 10249:25865 / Simple 10249:25753)
       tablet  ← Figma 768  (Default 10249:26027 / Simple 10249:25781)
       desktop ← Figma 1280 (Default 10249:26205 / Simple 10249:25823)
   Приём тот же, что у value-proposition. Переключение — через @container из
   grid.css (.bp-container / .bp-scope): реплика фрейма имеет свою ширину, и
   @media сработал бы от ширины ОКНА compare.mjs (1280×720), подменив раскладку
   во всех репликах сразу. Своих чисел точек перелома блок не содержит — только
   флаги --bp-tablet / --bp-desktop (0/1) и арифметика на них.

   ⚠ ОТСТУПЛЕНИЯ (точки 576 / 1024 / 1920 в grid.css неактивны):
   - Figma 576 — две колонки. У нас 576 < 728 (порог tablet) → одна колонка,
     как на 320. Согласовано с пользователем: активные точки не трогаем.
   - Figma 1024 — поля 36px. У нас 1024 попадает в tablet → поля 20px. Сама
     раскладка совпадает (две колонки), расходятся только поля.
   - Figma «1920 >» — Trustpilot переезжает в шапку, между логотипом и
     платёжками. Отдельной точки ~1440 в grid.css нет, поэтому на широких
     экранах остаётся десктопная раскладка (Trustpilot отдельной строкой).
     Ширина контента при этом совпадает с Figma: max-width 1440 + поля 64
     дают ровно 1312, как в ноде 1920.

   РАСКЛАДКА КОЛОНОК одна и та же на всех точках, меняется только число
   колонок: 8 списков идут КОЛОНОЧНЫМ потоком (grid-auto-flow: column), поэтому
   при 4 колонках получается 1,2 | 3,4 | 5,6 | 7,8, при двух — 1-4 | 5-8, при
   одной — 1..8 подряд. Ровно так в нодах Figma. */

.footer {
  background: var(--color-gray-800);
  font-family: var(--font-family-base);
  /* Inter Variable сужает глифы осью opsz против статического Inter в Figma. */
  font-optical-sizing: none;
}
.footer *,
.footer *::before,
.footer *::after { box-sizing: border-box; }
.footer p { margin: 0; }

/* .footer — контейнер запроса (.bp-container). Сам он своими же
   @container-правилами не матчится, поэтому флаги точек перелома раздаёт
   внутренний .footer__inner (.bp-scope). */
.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  /* Поля: 20 (base/tablet) → 64 (desktop). 64px — raw px: --spacing-64 в шкале
     нет, то же исключение, что у .container в grid.css. */
  padding-inline: calc(
    var(--spacing-20) + var(--bp-desktop) * (64px - var(--spacing-20))
  );
  /* 16 (base/tablet) → 32 (desktop) */
  padding-bottom: calc(
    var(--spacing-16) + var(--bp-desktop) * (var(--spacing-32) - var(--spacing-16))
  );
  /* Как у .container: на экранах шире 1440 контент упирается в 1440−2×64 =
     1312 — ровно ширина контента ноды Figma «1920 >». */
  max-width: 1440px;
  margin-inline: auto;
}

/* ---------- Шапка: логотип + платёжные методы ---------- */

.footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 20 (base/tablet) → 24 (desktop) */
  padding-block: calc(
    var(--spacing-20) + var(--bp-desktop) * (var(--spacing-24) - var(--spacing-20))
  );
  border-bottom: 1px solid var(--color-gray-700);
  /* На base логотип и ряд платёжек стоят друг под другом (Figma 320: column,
     gap 12). Перенос делает flex-wrap + базис 100% у ряда платёжек, чтобы не
     переключать flex-direction — она не выражается арифметикой флагов. */
  flex-wrap: wrap;
  row-gap: var(--spacing-12);
}

/* Логотип: 24px (base) → 32px (tablet+). Высоту задаёт потребитель: у logo.css
   она жёсткая (32px), размерной оси у компонента нет. */
.footer__logo svg {
  height: calc(24px + var(--bp-tablet) * 8px);
}

.footer__methods {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
  /* base: ряд платёжек занимает всю строку под логотипом и распределяется по
     ширине (Figma 320: justify-between). tablet+: прижат вправо к логотипу. */
  flex-basis: calc(100% * (1 - var(--bp-tablet)));
  justify-content: space-between;
}
@supports (width: 1px) {
  /* На tablet+ базис 0 → элемент ужимается по содержимому и уходит вправо. */
  .footer__methods { flex-grow: 0; flex-shrink: 0; }
}

.footer__method {
  display: block;
  flex: none;
  width: 34px;
  height: 24px;
}

/* ---------- Строка Trustpilot ---------- */

.footer__trust-row { padding-top: var(--spacing-20); }

/* Simple/320: у секции Trustpilot вертикальные поля с обеих сторон (py-20),
   у Default/320 — только сверху: снизу отступ даёт секция ссылок. */
.footer--simple .footer__trust-row {
  padding-bottom: calc(var(--spacing-20) * (1 - var(--bp-tablet)));
}

.footer__trust {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}

/* Звёзды: 16px (base) → 20px (tablet+). У independed-rate размер задаётся
   классом (.rate--16 / дефолт 20), а не переменной, поэтому в блоке он
   пересчитывается арифметикой флагов. */
.footer__rate .rate__star {
  width: calc(16px + var(--bp-tablet) * 4px);
  height: calc(16px + var(--bp-tablet) * 4px);
}
.footer__rate .rate__fill svg { width: calc(16px + var(--bp-tablet) * 4px); }

/* Текст рейтинга: Body/12 (base) → Body/14 Medium (tablet+). Utility-классом
   не обойтись — на разных точках разные size/line-height/weight. */
.footer__trust-text {
  flex: 1 0 calc(100% * (1 - var(--bp-tablet)));
  color: var(--color-gray-0);
  font-size: calc(
    var(--text-body-12-size) + var(--bp-tablet) *
    (var(--text-body-14-size) - var(--text-body-12-size))
  );
  line-height: calc(
    var(--text-body-12-line-height) + var(--bp-tablet) *
    (var(--text-body-14-line-height) - var(--text-body-12-line-height))
  );
  font-weight: calc(
    var(--text-body-12-weight) + var(--bp-tablet) *
    (var(--text-body-14m-weight) - var(--text-body-12-weight))
  );
}

/* ---------- Секция ссылок ---------- */

/* 1 → 2 → 4 колонки. Grid тут не годится: он выравнивает строки по самой
   высокой колонке, а в Figma колонки независимы — второй список начинается
   сразу под первым, своим (gap 52), и «Tools» стоит выше, чем «Guides & News».
   Поэтому вложенные flex-группы, а перенос — через flex-basis на флагах
   (flex-direction арифметикой не выразить):
       .footer__columns  → две группы: списки 1-4 и 5-8
       .footer__colgroup → две колонки по два списка
   base:    группы и колонки переносятся → 8 списков подряд;
   tablet:  группы в ряд, колонки внутри группы друг под другом → 2 колонки;
   desktop: и группы, и колонки в ряд → 4 колонки.
   Ширина при этом совпадает с Figma: (W − 24) / 2 / 2 = W/4 − 18 — ровно
   четыре колонки с gap 24. */
.footer__columns {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: var(--spacing-24);
  row-gap: var(--f-stack-gap);
  /* 52 (base) → 56 (tablet+). 56px — raw px: в шкале spacing только 52 и 60. */
  padding-block: calc(
    var(--spacing-52) + var(--bp-tablet) * (56px - var(--spacing-52))
  );
}

.footer__colgroup {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: var(--spacing-24);
  row-gap: var(--f-stack-gap);
  /* tablet+: группы встают в ряд; base: каждая занимает всю строку. */
  flex: 1 0 calc(100% * (1 - var(--bp-tablet)));
  min-width: 0;
}

.footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--f-stack-gap);
  /* desktop: колонки внутри группы встают в ряд; иначе — друг под другом. */
  flex: 1 0 calc(100% * (1 - var(--bp-desktop)));
  min-width: 0;
}

/* Вертикальный шаг стопки: 40 (base, Figma «Rows» на 320) → 52 (tablet+). */
.footer__inner {
  --f-stack-gap: calc(
    var(--spacing-40) + var(--bp-tablet) * (var(--spacing-52) - var(--spacing-40))
  );
}

.footer__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-20);
  width: 100%;
}

.footer__list-title {
  width: 100%;
  color: var(--color-gray-300);
}

.footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8);
}

/* Ссылки — компонент link (Size=M, Overlay=True, Hierarchy=Secondary,
   Style=Medium). Цвет по контракту link.css задаёт потребитель: Default
   gray-25, Hover gray-200, Active gray-25. */
.footer__link {
  --link-c: var(--color-gray-25);
  --link-h: var(--color-gray-200);
  --link-a: var(--color-gray-25);
  color: var(--link-c);
}

/* Бренд-иконки в ссылках 24/7 Support остаются фирменных цветов (Discord
   #5C6BC0, Messenger #0084FF) — как в Figma. */
.footer__link-icon {
  flex: none;
  width: 16px;
  height: 16px;
}

/* ---------- Социальные сети ---------- */

.footer__social { gap: var(--spacing-12); }

.footer__social-group {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
}

/* Кнопки — компонент button (Secondary + Overlay + Icon Only + Medium).
   Иконки соцсетей в Figma МОНОХРОМНЫЕ (белые). Их символы в спрайте
   (icon-brand-facebook/twitter/instagram/pinterest/youtube) нормализованы под
   fill=currentColor, поэтому наследуют цвет кнопки — у secondary+overlay это
   gray-0 — и следуют за её :hover/:active. Цвет здесь НЕ переопределяем, иначе
   иконка перестанет реагировать на состояния кнопки.
   ⚠ Document-селектор `.footer__social-btn svg path` красить их НЕ может: он не
   проникает в теневое дерево <use>, туда доходит только наследуемый currentColor.
   Бренд-иконки Discord/Messenger в ссылках остаются фирменных цветов — их
   символы монохромными не делаем. */

/* ---------- Копирайт ---------- */

.footer__policy {
  display: flex;
  align-items: flex-end;
  color: var(--color-gray-500);
  /* Default: 32 на tablet+, 0 на base (Figma 320 — секция без полей).
     Simple/320 — pt-16, см. ниже. */
  padding-block: calc(var(--spacing-32) * var(--bp-tablet));
}
.footer--simple .footer__policy {
  padding-block: calc(
    var(--spacing-32) * var(--bp-tablet) +
    var(--spacing-16) * (1 - var(--bp-tablet))
  );
}
/* На base у Default отступ сверху даёт секция ссылок, у Simple его нет. */
.footer--simple .footer__policy { padding-bottom: 0; }