/* Sticky-footer pattern (flex column) for every internal page so the
   footer always sits at the bottom of the viewport — even when the
   page content is shorter than 100vh — without using position:sticky.
   #root-header uses display:contents so the actual <header> becomes
   the first flex child; we do the same for #root-footer so the actual
   <footer> sits at the bottom. */
.me-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.me-page > main { flex: 1 0 auto; }
#root-footer { display: contents; }

/* Compact, single-row by default — fits the credit-only footer used on
   every internal page (matches, messages, discover, u, me). The big
   landing footer opts into more padding via the .site-footer__cols
   sibling rule below. The user-mandated 60px breathing space above the
   footer applies to BOTH variants. */
.site-footer {
  margin-top: 60px;
  padding-block: 14px calc(14px + var(--safe-bottom));
  border-top: 1px solid var(--color-line);
  background: var(--color-bg);
}

/* Landing footer (Product / Safety / Company columns) reclaims the
   generous breathing room around the cols. */
.site-footer:has(.site-footer__cols) {
  padding-block: var(--space-12) calc(var(--space-12) + var(--safe-bottom));
}

/* Compact footer: the credit row IS the footer — drop the inner
   divider/padding so it doesn't look like a stacked second border. */
.site-footer:not(:has(.site-footer__cols)) .site-footer__bottom {
  padding-top: 0;
  border-top: 0;
}

.site-footer__inner {
  width: min(100% - var(--space-6), var(--content-max));
  margin-inline: auto;
  padding-inline: var(--space-4);
  display: grid;
  gap: var(--space-10);
}

/* Mobile (default): brand spans the full row on top, the three link
   columns sit side-by-side beneath it. */
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--space-4);
  row-gap: var(--space-8);
}

@media (max-width: 799px) {
  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 800px) {
  .site-footer__cols {
    grid-template-columns: 1.2fr repeat(3, auto);
    column-gap: clamp(var(--space-16), 10vw, calc(var(--space-16) * 2));
    row-gap: var(--space-8);
    justify-content: space-between;
  }

  /* Columns sit on the right side of the row, but text inside each
     column stays left-aligned. */
  .site-footer__cols > :not(.site-footer__brand) {
    text-align: left;
    justify-self: end;
  }
}

.site-footer__brand {
  max-width: 320px;
}

@media (max-width: 799px) {
  .site-footer__brand {
    max-width: none;
    text-align: center;
  }
  .site-footer__tagline {
    max-width: 38ch;
    margin-inline: auto;
  }
  .site-footer__cols > :not(.site-footer__brand) {
    text-align: center;
  }
  .site-footer__bottom {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .site-footer__credit {
    text-align: center;
    justify-content: center;
  }
  .site-footer__credit-text {
    text-align: center;
  }
}

.site-footer__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
  margin-bottom: var(--space-3);
}

.site-footer__logo-img {
  height: 34px;
  width: auto;
  max-width: none;
  aspect-ratio: 3378 / 945;
  object-fit: contain;
  display: block;
}

@media (max-width: 799px) {
  .site-footer__logo-img {
    height: 27px;
  }
}

.site-footer__tagline {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: 0.9375rem;
}

.footer-col__title {
  margin: 0 0 var(--space-3);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.footer-col__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.footer-col__link {
  color: var(--color-ink-muted);
  text-decoration: none;
  font-size: 0.9375rem;
}

.footer-col__link:hover {
  color: var(--color-ink);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-line);
  font-size: 0.875rem;
  color: var(--color-ink-soft);
}

/* Legal links row — sits between the copyright line and the credit
   on desktop, drops below on mobile via the existing flex-wrap. */
.site-footer__legal {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.site-footer__legal a { color: var(--color-ink-muted); }
.site-footer__legal a:hover { color: var(--color-ink); }
.site-footer__legal span[aria-hidden] { color: var(--color-ink-soft); }

.site-footer__credit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: inherit;
  font-size: 0.75rem;
  color: var(--color-ink-muted);
  text-align: end;
  max-width: min(100%, 24rem);
  line-height: 1.45;
  text-decoration: none;
}

.site-footer__credit:hover .site-footer__credit-brand,
.site-footer__credit:hover .site-footer__credit-rest {
  color: var(--color-accent-deep);
}

.site-footer__credit-logo {
  /* AI Microservices wordmark is a wide horizontal logo (~10:1 in the
     current aim.svg). Lock height, let width follow naturally up to a
     sensible cap so it doesn't dominate the row. Halved per design
     request — wordmark sits as a quiet credit, not a banner. */
  height: 9px;
  width: auto;
  max-width: 100px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

.site-footer__credit-text {
  text-align: start;
}

.site-footer__credit-brand {
  font-weight: 600;
  color: var(--color-ink);
}

.site-footer__credit-rest {
  font-weight: 400;
}