/* Подвал сайта «Мы» — один файл на все поверхности (добавлено 2026-09-23).
   Используется тремя местами сразу:
     • React-лендинг (src/components/SiteFooter.jsx),
     • пререндер-слой #seo-landing в index.html,
     • статические страницы public/p/*.html.

   Почему отдельный файл в public/, а не рядом с компонентом: React-сборка и
   статические HTML не могут делить импорт. Если бы стили лежали в
   SiteFooter.css, их пришлось бы дублировать в seo.css, и через месяц две
   копии неизбежно разъехались бы. Здесь одна копия, подключается тегом
   <link> отовсюду.

   Важно про цвета: файл НЕ задаёт собственную палитру, а работает на
   переменных (--bg, --surface, --ink, --accent и т.д.). Имена совпадают и в
   budget.css, и в public/p/seo.css, но значения разные: лендинг светлый
   холодный, статические страницы кремовые. За счёт этого один и тот же
   подвал выглядит родным в обоих местах, а не чужеродной вставкой.
   Запасные значения в var(...) — на случай, если подвал окажется там, где
   токенов нет вовсе. */

.mw-foot {
  --mwf-bg: var(--surface, #FBFAF6);
  --mwf-ink: var(--ink, #191510);
  --mwf-muted: var(--muted, #6C665A);
  --mwf-faint: var(--faint, #A79F8E);
  --mwf-line: var(--line, #DED8CA);
  --mwf-accent: var(--accent, #127A56);
  --mwf-accent-ink: var(--accent-ink, #0C5B40);
  --mwf-accent-soft: var(--accent-soft, #E1EFE7);
  --mwf-sans: var(--sans, "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --mwf-display: var(--display, "Space Grotesk", var(--mwf-sans));
  --mwf-script: var(--script, "Caveat", cursive);

  width: 100%;
  justify-self: stretch;
  box-sizing: border-box;
  /* Верхний отступ не декоративный: на лендинге прямо над подвалом кончается
     декор героя (бежевый круг с подписью), и без воздуха карточка подвала
     наезжала на него. */
  padding: 48px 24px 24px;
  font-family: var(--mwf-sans);
  color: var(--mwf-ink);
}
.mw-foot *, .mw-foot *::before, .mw-foot *::after { box-sizing: border-box; }

/* Карточка. Скругление крупное, тень почти незаметная: подвал должен
   ощущаться как лист бумаги, положенный на фон, а не как всплывающее окно. */
.mw-foot-card {
  position: relative;
  max-width: 1380px;
  margin: 0 auto;
  background: var(--mwf-bg);
  border: 1px solid var(--mwf-line);
  border-radius: 28px;
  padding: 52px 56px 28px;
  overflow: hidden;
  box-shadow: 0 20px 50px -38px rgba(25, 21, 16, .32);
}

/* Внутри статических страниц подвал лежит в .wrap, у которого свои боковые
   отступы. Собственные отступы подвала здесь лишние: без этого правила
   карточка оказывалась уже текста над ней и выглядела съехавшей. */
.wrap > .mw-foot { padding-left: 0; padding-right: 0; }

/* ---------- верхняя часть: колонки ---------- */
.mw-foot-top {
  position: relative;
  z-index: 1;
  display: grid;
  /* Последняя колонка чуть шире остальных: в ней самые длинные подписи
     («Согласие на обработку ПДн») и адрес почты, который нельзя красиво
     перенести посреди домена. */
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 40px;
  align-items: start;
}

.mw-foot-brand { min-width: 0; }
.mw-foot-logo-row { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
/* [2026-10-13] Новый логотип «Мы» — сердце из двух петель (/logo-heart.webp) вместо знака «=» в зелёном квадрате. */
.mw-foot-mark { width: 48px; height: 48px; flex: 0 0 auto; background: url(/logo-heart.webp) center/contain no-repeat; }
.mw-foot-mark i { display: none; }
.mw-foot-name { display: block; font-family: var(--mwf-display); font-weight: 700; font-size: 21px; letter-spacing: -.01em; }
.mw-foot-tagline { display: block; font-size: 12.5px; color: var(--mwf-faint); margin-top: 2px; }
.mw-foot-about { font-size: 14.5px; line-height: 1.6; color: var(--mwf-muted); margin: 0; max-width: 34ch; }

.mw-foot-col { min-width: 0; }
.mw-foot-col h3 {
  font-family: var(--mwf-display);
  font-size: 14.5px; font-weight: 700; letter-spacing: -.01em;
  margin: 0 0 16px; color: var(--mwf-ink);
}
.mw-foot-col ul { list-style: none; margin: 0; padding: 0; }
.mw-foot-col li { margin-bottom: 11px; }
.mw-foot-col a {
  font-size: 14.5px; line-height: 1.4; color: var(--mwf-muted);
  text-decoration: none; transition: color .15s;
}
.mw-foot-col a:hover { color: var(--mwf-accent-ink); text-decoration: underline; }

/* Почта. Отдельным блоком под документами: это контакт, а не пункт меню. */
.mw-foot-mail {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 18px; padding: 9px 13px 9px 10px;
  background: var(--mwf-accent-soft);
  border-radius: 11px;
  font-size: 13px; font-weight: 500; color: var(--mwf-accent-ink);
  text-decoration: none;
  max-width: 100%;
  transition: filter .15s;
}
.mw-foot-mail:hover { filter: brightness(.96); text-decoration: none; }
.mw-foot-mail svg { width: 16px; height: 16px; flex: 0 0 auto; }
/* overflow-wrap, а не word-break: адрес переносится только если иначе не
   влезает, и не рвётся посреди слова без нужды. На узких экранах именно он
   не даёт подвалу растянуть страницу вбок. */
.mw-foot-mail span { min-width: 0; overflow-wrap: anywhere; }

/* ---------- нижняя строка ---------- */
.mw-foot-bottom {
  position: relative;
  z-index: 1;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--mwf-line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.mw-foot-copy { font-size: 13px; color: var(--mwf-faint); margin: 0; }
.mw-foot-script {
  font-family: var(--mwf-script);
  font-size: 22px; font-weight: 600; color: var(--mwf-accent-ink);
  transform: rotate(-3deg); transform-origin: right center;
  white-space: nowrap;
}

/* ---------- декор ---------- */
/* Чисто декоративная форма в правом нижнем углу. pointer-events:none, чтобы
   она не перехватывала клики по ссылкам, и overflow:hidden у карточки, чтобы
   она не вылезала за её пределы и не давала горизонтальную прокрутку. */
.mw-foot-deco {
  position: absolute; right: -70px; bottom: -110px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--mwf-accent-soft), transparent 68%);
  opacity: .85; pointer-events: none; z-index: 0;
}

/* ---------- планшет ---------- */
@media (max-width: 1020px) {
  .mw-foot { padding: 0 18px 18px; }
  .mw-foot-card { padding: 40px 34px 24px; border-radius: 24px; }
  /* Две колонки вместо четырёх: текст не сжимается, а переносится целыми
     колонками. Бренд занимает всю ширину сверху. */
  .mw-foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px; }
  .mw-foot-brand { grid-column: 1 / -1; }
  .mw-foot-about { max-width: 46ch; }
}

/* ---------- телефон ---------- */
@media (max-width: 620px) {
  .mw-foot { padding: 0 12px 12px; }
  .mw-foot-card { padding: 30px 20px 20px; border-radius: 20px; }
  .mw-foot-top { grid-template-columns: 1fr; gap: 28px; }
  /* Размер шрифта НЕ уменьшаем: подвал часто открывают с телефона, и мелкие
     ссылки здесь тяжелее всего. Вместо этого увеличиваем расстояние между
     ними, чтобы в них было легко попасть пальцем. */
  .mw-foot-col li { margin-bottom: 14px; }
  .mw-foot-col a { display: inline-block; padding: 2px 0; }
  .mw-foot-about { max-width: none; }
  .mw-foot-bottom { margin-top: 30px; flex-direction: column; align-items: flex-start; gap: 14px; }
  .mw-foot-script { transform: rotate(-2deg); transform-origin: left center; }
  /* Декор на узком экране только мешает и рискует дать прокрутку вбок. */
  .mw-foot-deco { display: none; }
}

/* ---------- уведомление о cookie (2026-09-24) ----------
   Разметку создаёт public/cookie-banner.js. Стили живут здесь, а не в
   отдельном файле, потому что footer.css уже подключён везде, где баннер
   показывается: и на лендинге, и на десяти статических страницах. Лишний
   запрос ради тридцати строк не нужен.

   Палитра, как и у подвала, на переменных темы — баннер выглядит родным и
   на светлом лендинге, и на кремовых страницах. */
#mw-cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:9990;
  padding:0 16px 16px;
  font-family:var(--sans,"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);
  animation:mwcUp .3s cubic-bezier(.2,.8,.2,1) both;
  pointer-events:none;
}
.mwc-box{
  pointer-events:auto;
  max-width:660px;margin:0 auto;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:16px 18px;border-radius:18px;
  background:var(--surface,#FBFAF6);
  border:1px solid var(--line,#DED8CA);
  box-shadow:0 22px 50px -24px rgba(25,21,16,.45);
}
.mwc-text{
  flex:1 1 300px;min-width:0;margin:0;
  font-size:13.5px;line-height:1.5;color:var(--muted,#6C665A);
}
.mwc-text a{color:var(--accent-ink,#0C5B40);text-decoration:underline}
.mwc-actions{display:flex;gap:9px;flex-wrap:wrap}
.mwc-btn{
  appearance:none;border:1px solid transparent;cursor:pointer;
  padding:11px 18px;border-radius:12px;
  font:600 13.5px inherit;white-space:nowrap;
  transition:background .15s,border-color .15s;
}
.mwc-yes{background:var(--accent-ink,#0C5B40);color:#fff}
.mwc-yes:hover{background:var(--accent,#127A56)}
.mwc-no{background:transparent;color:var(--muted,#6C665A);border-color:var(--line,#DED8CA)}
.mwc-no:hover{background:rgba(25,21,16,.04);color:var(--ink,#191510)}

@keyframes mwcUp{from{opacity:0;transform:translateY(14px)}to{opacity:1}}

@media (max-width:560px){
  #mw-cookie{padding:0 10px 10px}
  .mwc-box{padding:14px;gap:12px;border-radius:15px}
  /* Кнопки на всю ширину: попасть пальцем в узкую кнопку у края экрана тяжело. */
  .mwc-actions{width:100%}
  .mwc-btn{flex:1;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  #mw-cookie{animation:none}
}