/* ==========================================================================
   BLOCO: Footer — rodapé
   HTML: <footer class="site-footer">  ·  JS: js/sections/footer.js
   Figma 844:2295.
   ========================================================================== */

.site-footer {
  padding-block: 66px 22px;
  color: var(--c-text);
}

.footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-32);
}
.footer__about p {
  max-width: 420px;
  margin-top: var(--s-20);
  font-size: var(--t-body-sm-size);
  line-height: var(--t-body-sm-lh);
}

.footer__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-20) var(--s-44);
  margin: 0;
}
.footer__contacts dd {
  margin: var(--s-8) 0 0;
  font-size: var(--t-body-sm-size);
  line-height: var(--t-body-sm-lh);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-24) var(--s-32);
  margin-top: 26px;
  padding-top: 23px;
  border-top: var(--stroke) solid var(--c-border-soft);
}
.footer__info p:last-child {
  margin-top: var(--s-8);
  font-size: var(--t-body-sm-size);
  line-height: var(--t-body-sm-lh);
}

.footer__nav {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  align-content: start;
  gap: 11px 46px;
}
.footer__nav a {
  justify-self: start;
  align-self: start;
  font-size: var(--t-body-sm-size);
  line-height: var(--t-body-sm-lh);
  text-transform: uppercase;
}
/* Colunas de 2 links: (Início/Procedimentos) (Equipe/Sobre) (Contato) (Instagram/Facebook).
   Contato ocupa a coluna sozinho para as redes sociais ficarem juntas. */
.footer__nav-solo {
  grid-row: span 2;
}

.footer__legal {
  margin-top: 33px;
  font-size: var(--t-small-size);
  line-height: var(--t-small-lh);
}
.footer__legal .caps {
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Links: texto e sublinhado em gradiente dourado no hover.
   O gradiente do texto fica recortado pelas letras (aparece quando a cor vai
   a transparente); o sublinhado é um ::after que cresce da esquerda. */
.footer__contacts a,
.footer__nav a {
  position: relative;
  background-image: var(--g-gold);
  -webkit-background-clip: text;
  background-clip: text;
  transition: color var(--dur) var(--ease);
}
.footer__contacts a::after,
.footer__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--g-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-out);
}
.footer__contacts a:hover,
.footer__nav a:hover {
  color: transparent;
}
.footer__contacts a:hover::after,
.footer__nav a:hover::after {
  transform: scaleX(1);
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (max-width: 960px) {
  .footer__top {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .footer__bottom {
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .footer__nav {
    gap: 11px 28px;
  }
}