/* ---------- Footer (Figma 840:22620 desktop / 840:22644 mobile) ----------
   Shared across every page — relies only on --color-white / --font-text,
   which every page's own :root already defines identically.

   All six pieces (info / contacts / legal, then the divider, then
   copyright / social) live in ONE grid instead of two separate flex rows.
   That's what makes the social row's left edge land exactly under the
   legal column's left edge: they're literally the same grid column, so
   there's no coincidence to maintain — column 3's track width is shared
   by whichever piece in either row is widest. Two separate flex/grid
   containers could only ever line up by accident, since each would size
   its own columns from only its own row's content. */

.site-footer {
  --footer-pad-x: 80px;
  position: relative;
  background: #000;
  color: var(--color-white);
  font-family: var(--font-text);
  font-size: 14px;
  letter-spacing: -0.28px;
  padding: 53px var(--footer-pad-x) 40px;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: space-between;
  column-gap: 40px;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  /* 31px in the original Figma spec, reduced 20% per request. */
  gap: 25px;
}

.site-footer__col p,
.site-footer__col a {
  margin: 0;
  white-space: nowrap;
}

.site-footer a {
  color: inherit;
  text-decoration: underline;
  transition: color 0.2s ease;
}

/* Slight white-on-white darkening, as asked — not a color swap. */
.site-footer a:hover {
  color: rgba(255, 255, 255, 0.6);
}

.site-footer__label {
  color: #8c8c8c;
}

.site-footer__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.site-footer__flag {
  flex: none;
  display: block;
  border-radius: 2px;
  outline: 1px solid rgba(255, 255, 255, 0.16);
  outline-offset: -1px;
}

/* Breaks out of .site-footer's own side padding to run fully edge-to-edge
   via a negative margin tied to the same --footer-pad-x custom property
   the padding itself uses, so it can never drift out of sync with it.
   A 100vw-based full-bleed trick did this before, but 100vw is exactly
   the kind of value that can go stale on iOS Safari after an
   orientation-change round-trip (see assets/js/viewport-fix.js) — a
   negative margin only ever depends on the footer's own padding, never
   on the viewport, so there's nothing for that bug to affect here.
   Spans every column (grid-column: 1 / -1) so it lands on its own
   full-width row between the two content rows. Its own margin carries
   ALL the vertical spacing around it — the grid itself contributes no
   row-gap, so nothing needs subtracting back out. */
.site-footer__divider {
  grid-column: 1 / -1;
  height: 1px;
  margin: 57px calc(-1 * var(--footer-pad-x)) 30px;
  background: #7b7b7b;
}

.site-footer__copyright {
  grid-column: 1;
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
}

.site-footer__social {
  grid-column: 3;
  justify-self: start;
  display: flex;
  gap: 24px;
  white-space: nowrap;
}

/* ---------- Mobile (≤767px, matches Figma frame 805:3719 @ 390px) ----------
   Single stacked column — the three column groups (info / contacts /
   legal), then the divider, then copyright and social, run top to bottom
   instead of side by side. Each piece's own margin-top carries its gap
   from whatever comes before it (the grid's row-gap stays 0 throughout),
   since those gaps aren't uniform: 40px between the column groups and
   before the divider, 24px after it, 16px before social. */
@media (max-width: 767px) {
  .site-footer {
    --footer-pad-x: 24px;
    padding: 40px var(--footer-pad-x) 40px;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
  }

  /* Without this, the desktop grid-column: 1 / 3 placements below would
     still force two extra implicit columns into existence just to fit
     — 1fr above only changes how wide the *explicit* column is, it
     doesn't stop out-of-range placements from creating more. */
  .site-footer__copyright,
  .site-footer__social {
    grid-column: 1;
  }

  .site-footer__col--contacts,
  .site-footer__col--legal {
    margin-top: 40px;
  }

  .site-footer__divider {
    margin: 40px calc(-1 * var(--footer-pad-x)) 24px;
  }

  .site-footer__social {
    margin-top: 16px;
    width: 100%;
  }

  .site-footer__social a {
    flex: 1 0 0;
  }
}