/* Footer, small screens: the desktop flex packs two shrunken ~159px link
 * columns beside each other and a dense contact grid; on a phone that reads
 * cramped. Own file because theme.css is being edited on another track. */

@media (max-width: 640px) {
  /* Breathing room between the stacked blocks, tighter than desktop's 64px. */
  .site-footer__top { gap: 28px 16px; }

  /* Brand block owns its row; the description no longer hugs the columns. */
  .site-footer__brand { flex: 1 1 100%; min-width: 0; }
  .site-footer__desc { max-width: none; }

  /* Link columns: two equal halves, comfortable tap targets. */
  .site-footer__col { flex: 1 1 40%; min-width: 0; }
  .site-footer__list { gap: 4px; }
  .site-footer__list a { display: inline-block; padding-block: 4px; }

  /* Contact: label on its own line, then a clean two-column grid. */
  .site-footer__contact { margin-top: 32px; flex-direction: column; gap: 14px; }
  .site-footer__contact-grid { width: 100%; grid-template-columns: 1fr 1fr; gap: 14px 16px; }

  /* Bottom row: stack and center; let the motto wrap instead of squeezing. */
  .site-footer__bottom { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
  .site-footer__chain { white-space: normal; }
  .site-footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
}