/*
  Contato: endereço, canais e o mapa do Google embutido.
  Cores e fontes vêm de tokens.css por base.css.
*/

main {
  padding-block: 2rem 1rem;
}

.contato {
  display: grid;
  gap: 2rem;
}

.sobrelinha {
  margin-bottom: .4rem;
  color: var(--verde);
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

h1 {
  margin-bottom: .7rem;
  font-size: clamp(2rem, 6vw, 2.8rem);
  font-weight: 560;
  font-variation-settings: "WONK" 1, "SOFT" 40;
  line-height: 1.1;
}

.contato-intro {
  max-width: 34rem;
  margin-bottom: 1.4rem;
  font-size: 1.08rem;
  text-wrap: pretty;
}

.canais {
  display: grid;
  gap: 1rem;
  margin: 0 0 1.5rem;
}

.canais dt {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--traco);
}

.canais dd {
  margin: .2rem 0 0;
  font-size: 1.04rem;
  line-height: 1.5;
}

.canais a {
  color: var(--terracota);
  font-weight: 600;
  text-underline-offset: .2em;
}

.contato-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 0;
}

.mapa iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--linha);
  border-radius: .9rem;
  background: var(--creme);
}

.mapa-nota {
  margin: .6rem 0 0;
  color: color-mix(in srgb, var(--tinta) 70%, var(--papel));
  font-family: var(--sans);
  font-size: .8rem;
}

.mapa-nota a {
  color: var(--traco);
}

@media (min-width: 46rem) {
  .contato {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    column-gap: 3rem;
  }

  .canais {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /*
    O endereço é o dado principal da página e ocupa a linha inteira: em meia
    coluna, ao lado do mapa, ele quebrava em quatro linhas.
  */
  .canais > div:first-child {
    grid-column: 1 / -1;
  }

  .mapa iframe {
    aspect-ratio: 1 / 1;
  }
}