/* ==========================================================================
   FOOTER — shared by every page (a component in Figma: «Mobile Footer»)
   --------------------------------------------------------------------------
   Mobile layout, top to bottom:
     title (3 lines, the first two muted) → CTA pinned right →
     2 × 2 grid of columns → copyright line.

   Every vertical gap is the number in the Figma panel of «Mobile Footer»,
   box to box:

     title   → CTA           20
     CTA     → columns       36
     head    → its list      10   rows are 44-tall boxes, text centred
     row 1   → row 2         66   30 in Figma + 36 left empty by the fixed
                                  168-tall list frame under three rows
     columns → copyright     36   0 in Figma + the same 36 of empty frame
     copyright → screen edge 32   Figma ends flush — see .site-footer
   ========================================================================== */

.site-footer {
  margin-top: var(--space-section);
  /* The one deliberate difference from Figma: the frame there ends flush
     with the copyright, but a real page can't — the line would touch the
     screen's edge and, on iPhones, sit under the home-indicator strip.
     32 below it, plus that strip (the safe area). */
  padding-bottom: calc(var(--space-group) + env(safe-area-inset-bottom, 0px));
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
}

/* --- Title ----------------------------------------------------------------
   Three lines of ONE heading. The lines are stacked by the leading of the
   style itself — no gap between them (a gap here would double the leading:
   see chapter 03 of the design manual). Emphasis falls on «вірусне» by
   muting the other two lines, not by making the third one heavier. */

.site-footer__line {
  display: block;
}

.site-footer__line--muted {
  color: var(--color-ink-soft);
}

/* --- CTA ------------------------------------------------------------------
   Pinned to the right field. The Figma frame of this button is ~30 px wider
   than what is drawn in it; here the drawn part itself meets the 20 px
   field, so the label ends exactly on the grid line. */

.site-footer__cta {
  align-self: flex-end;
  margin-top: 1.25rem;                       /* 20, Figma panel */
}

/* --- Columns --------------------------------------------------------------
   Two columns on the mobile grid (167 + 16 + 167 at 390). minmax(0, 1fr)
   instead of plain 1fr lets a column shrink below its longest word, so the
   grid can never push the page wider than the screen. Reading order is
   row by row: Навігація, Інструменти, Соцмережі, Локація. */

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 4.125rem;                         /* 66 = 30 + 36, see top */
  margin-top: 2.25rem;                       /* 36, Figma panel */
}

/* Column heads are markers — recognised by position, not read — so they
   take the faint tone (a deliberate exception to AA, see tokens.css). */
.site-footer__head {
  color: var(--color-ink-faint);
}

/* Head → list: 10, as in Figma («Frame 87» gap). */
.site-footer__list {
  margin-top: var(--list-gap);
}

/* --- Rows -----------------------------------------------------------------
   Each row is a 44-tall box with its text centred, exactly like «Frame 83–85»
   in Figma. 44 is the touch-target size, so the row box itself is the tap
   area — no invisible zone around it. */

.site-footer__row {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  font-size: var(--body-size);
  line-height: var(--body-leading);
}

.site-footer__list--caps .site-footer__row,
.site-footer__row--caps {
  text-transform: uppercase;
}

@media (hover: hover) {
  a.site-footer__row:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
  }
}

/* --- Copyright ------------------------------------------------------------
   36 under the last row, see the table at the top. */

.site-footer__copy {
  margin-top: 2.25rem;
  text-align: center;
  color: var(--color-ink-faint);
}

/* --------------------------------------------------------------------------
   DESKTOP (Figma «Footer», 1920 — made to match the phone, as agreed)
   The title on the left, «В дірект» on the right at the title's baseline
   level; the four columns in one row (Навігація, Соцмережі, Інструменти,
   Локація — the Figma order), spread to both edges of the field; then a
   bottom line: name, copyright, «Вгору ↑».
   Rows are 28-tall text lines here: a mouse needs no 44 zone.
   «Головна» appears in the navigation: on desktop the Hero sits above
   About, so «home» and «about me» are two different places.
   -------------------------------------------------------------------------- */
.site-footer__home,
.site-footer__brand,
.site-footer__up {
  display: none;
}

.site-footer__bar {
  margin-top: 2.25rem;                         /* 36, as the copy had */
}

.site-footer__bar .site-footer__copy {
  margin-top: 0;
}

@media (min-width: 64em) {
  .site-footer {
    padding-bottom: var(--space-between);
  }

  .site-footer__inner {
    display: grid;
    grid-template-columns: 1fr auto;
  }

  .site-footer__cta {
    align-self: end;
    margin-top: 0;
  }

  .site-footer__grid {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    margin-top: 7.5rem;                        /* 120 */
  }

  /* Figma order: navigation, socials, tools, location. */
  .site-footer__col:nth-child(2) { order: 3; }
  .site-footer__col:nth-child(3) { order: 2; }
  .site-footer__col:nth-child(4) { order: 4; }

  .site-footer__list {
    margin-top: var(--space-pair);
  }

  .site-footer__row {
    min-height: 0;
  }

  .site-footer__home {
    display: block;
  }

  /* Three cells, the outer two equal: the copyright sits on the page's
     true centre. With space-between it drifted ~20 px right, because
     «Lypka Alina.» is wider than «Вгору ↑». */
  .site-footer__bar {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-top: 7.5rem;                        /* 120 */
  }
  .site-footer__brand { justify-self: start; }
  .site-footer__up { justify-self: end; }

  .site-footer__brand,
  .site-footer__up {
    display: block;
    text-transform: uppercase;
  }
}