/* ==========================================================================
   SITE FOOTER
   --------------------------------------------------------------------------
   neon.com structure (29 Sep): brand + tagline top-left, link columns on
   the right with small uppercase heads, then a full-width hairline and a
   thin bottom bar. Plain ground, no illustration.

   Content is the live-site footer verbatim: tagline, the Platform /
   Products / Resources columns, "© 2026 AdPilot" and "Built for complex
   engineering systems." Deliberately NOT carried over from the reference:
   a compliance column (no certification claims without an
   evidence record) and a systems-status line (no status page exists).

   Colours come from whatever section vars the page sets on .footer —
   teal on v1, black on v2. No literal colours.
   ========================================================================== */

.site-footer {
  position: relative;
  padding-top: 0;          /* base .footer adds 40px; the top grid owns spacing */
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-nav, var(--font-body));
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-9);
  row-gap: var(--space-7);
  padding-block: var(--space-8) var(--space-9);
}

/* .site-footer a would grey the logo out; it stays the heading colour. */
.site-footer .wordmark { flex: none; color: var(--heading); }
.site-footer .wordmark:hover { color: var(--heading); opacity: 0.8; }
.site-footer__brand .wordmark__logo { height: 28px; }
.site-footer__tag {
  margin-top: var(--space-4);
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-muted);
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 200px));
  column-gap: var(--space-7);
  row-gap: var(--space-7);
}
.site-footer__cols h2 {
  margin: 0 0 var(--space-5);
  font-family: var(--font-nav, var(--font-body));
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--heading);
}
.site-footer__cols ul {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer a {
  font-size: 16px;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--motion-base) var(--motion-ease);
}
.site-footer a:hover { color: var(--heading); }

/* Bottom bar: the hairline runs edge to edge, the text sits on the grid. */
.site-footer__bar { border-top: var(--border-w) solid var(--line); }
.site-footer__bar .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-5);
  font-size: 14px;
  color: var(--ink-muted);
}
.site-footer__bar p { margin: 0; }

/* Optional art (v1 only, via .site-footer--art): the illustration rises
   from the bottom edge behind the columns' lower gap and the bar. Content
   stays above it; the top of the art fades into the ground. */
.site-footer--art { isolation: isolate; overflow: hidden; }
.site-footer--art .site-footer__top { padding-bottom: clamp(200px, 26vw, 400px); }
.site-footer--art .site-footer__top,
.site-footer--art .site-footer__bar { position: relative; z-index: 1; }
.site-footer__art {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 0;
  width: 100%; height: auto; display: block;
  pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 45%);
          mask-image: linear-gradient(to bottom, transparent 0%, black 45%);
}

@media (max-width: 900px) {
  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer--art .site-footer__top { padding-bottom: 180px; }
  .site-footer__art { height: 260px; object-fit: cover; object-position: 50% 100%; }
  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}