/* @thomasmore/design — <tm-footer> site footer (shared across every TM frontend).
 *
 * Token-driven: all colours come from --tm-* so the footer matches each consumer's theme
 * automatically — light on the app (catalog, hub) where --tm-* is the light palette, dark
 * on the apex once it maps --tm-* to its dark values. No per-site CSS fork.
 *
 * Classes are .tm-footer__* (design-system prefixed) so they never collide with a
 * consumer's own .footer-* rules during migration. Markup is emitted by tm-footer.js. */

.tm-footer {
  border-top: 1px solid var(--tm-border);
  padding: var(--tm-space-8) var(--tm-space-5) 56px;
  text-align: left;
  font-family: var(--tm-font);
}
.tm-footer__inner {
  max-width: var(--tm-container);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--tm-space-7);
  justify-content: space-between;
}
.tm-footer__brand { max-width: 320px; }
.tm-footer__logo {
  width: fit-content;
  font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 14px;
  background: var(--tm-gradient-ink);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.tm-footer__tag { color: var(--tm-muted); font-size: 0.95rem; line-height: 1.6; margin-bottom: 26px; }
.tm-footer__share {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--tm-text); color: var(--tm-on-accent);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 14px 24px; border-radius: var(--tm-radius-pill);
  text-decoration: none; transition: transform 0.2s, opacity 0.2s;
}
.tm-footer__share:hover { transform: translateY(-2px); opacity: 0.9; }
.tm-footer__share svg { width: 15px; height: 15px; }
.tm-footer__cols { display: flex; flex-wrap: wrap; gap: 56px; }
.tm-footer__col h4 {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tm-muted); margin: 0 0 18px;
}
.tm-footer__col a {
  display: block; color: var(--tm-text); text-decoration: none;
  font-size: 0.95rem; margin-bottom: 14px; transition: color 0.2s;
}
.tm-footer__col a:last-child { margin-bottom: 0; }
.tm-footer__col a:hover { color: var(--tm-accent); }
.tm-footer__social { display: flex; gap: 12px; }
.tm-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: 0; border-radius: 11px;
  border: 1px solid var(--tm-border); color: var(--tm-muted);
  transition: color 0.2s, border-color 0.2s, transform 0.2s, background 0.2s;
}
.tm-footer__social a:hover {
  color: var(--tm-on-accent); background: var(--tm-text);
  border-color: var(--tm-text); transform: translateY(-2px);
}
.tm-footer__social svg { width: 19px; height: 19px; }

@media (max-width: 760px) {
  .tm-footer__cols { gap: 32px 48px; }
  .tm-footer__brand { max-width: none; }
}

/* Both locales (EN + <tm-footer lang="ru">) use the same column layout above; the RU
   footer is a translated variant of it, rendered from tm-footer.js — no separate CSS. */