/* Bruna Pazinato · contato */

/* AS COLUNAS SEGUEM O CONTEÚDO, não a janela.

   Eram frações: 1.12 e 0.88 de duas partes. Fração reparte tudo o que
   existe, então quanto mais larga a tela maior o vazio no meio — o
   título encostado na margem esquerda, o retrato na direita, e um
   buraco crescente entre os dois. Numa tela de 1900px sobravam mais de
   500px de nada.

   Agora a coluna do texto mede o texto e a do retrato mede o retrato,
   e justify-content centra o par. A sobra vai para as duas bordas em
   vez de se abrir no meio: eles ficam juntos, e juntos no centro. */
.contato{
  display: grid;
  grid-template-columns: minmax(0, auto) var(--retrato-largura);
  justify-content: center;
  align-items: center;
  gap: clamp(2rem, 6vw, 5.5rem);
  padding: calc(var(--header-h) + clamp(3rem, 11vh, 8rem)) var(--gutter) clamp(4rem, 12vh, 8rem);
  background: var(--ink);

  /* o retrato é 715x1080. A primeira parcela o prende à altura da tela,
     a segunda o impede de engolir a largura quando a janela é baixa e
     estreita — é ali que o título e a foto brigam por espaço. */
  --retrato-largura: min(calc(76svh * 715 / 1080), 32vw);
}

.contato__texto{ min-width: 0; }

/* 8vw CRESCIA MAIS RÁPIDO QUE A COLUNA QUE O ABRIGA.

   A coluna de texto é 1.12 de 2 partes: cerca de 47% da janela. Nesta
   fonte CONVERSAR mede 7,1 vezes o corpo, ou seja 57% da janela a 8vw.
   Os dois nunca se encontravam: de 861px a 1400px o título passava por
   baixo do retrato. Só parava de invadir acima de 1400, onde o teto de
   7rem finalmente segurava o corpo — por acidente, não por desenho.

   7vw cabe na coluna mais a calha em toda a faixa, com uns 30px de ar.
   No celular quem manda é o piso de 2.4rem, que não mudou. */
.contato__titulo{
  margin: 0;
  font-family: var(--font-display);
  font-optical-sizing: none;
  font-variation-settings: var(--display-axes);
  font-size: clamp(2.4rem, 7vw, 7rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--paper);
}

.contato__linha{
  margin: clamp(1.2rem, 3vh, 2rem) 0 0;
  font-family: var(--font-sans);
  font-size: clamp(.58rem, .7vw, .72rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--paper-45);
}

/* o retrato */

/* O VÃO SEGUE A FOTO, não o contrário.

   O retrato é 715x1080 — mais estreito que o 4/5 que havia aqui. Mantido
   o vão antigo, o object-fit comeria o tule e a mão, que são metade da
   fotografia. A largura é amarrada à altura para que a proporção caiba
   inteira: numa coluna larga a foto estreita em vez de ser decepada. */
.contato__retrato{
  margin: 0;
  width: 100%;
  justify-self: center;
  overflow: hidden;
  aspect-ratio: 715 / 1080;
  max-height: 76svh;
}

.contato__retrato img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: contrast(1.03) saturate(.94) brightness(.94);
}

/* entrada */

.js .contato [data-reveal]{
  opacity: 0;
  transform: translate3d(0, 2rem, 0);
}

.js .contato [data-reveal].is-in{
  opacity: 1;
  transform: none;
  transition:
    opacity   1.3s var(--ease-soft) calc(var(--i, 0) * .16s),
    transform 1.3s var(--ease)      calc(var(--i, 0) * .16s);
}

@media (prefers-reduced-motion: reduce){
  .js .contato [data-reveal]{ opacity: 1; transform: none; }
}

/* responsivo */

@media (max-width: 860px){

  .contato{
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vh, 3rem);
    padding-top: calc(var(--header-h) + clamp(2.4rem, 8vh, 4rem));
  }

  .contato__retrato{
    justify-self: stretch;
    width: 100%;
    max-height: none;
    aspect-ratio: 4 / 5;
  }

  .contato__retrato img{ object-position: 50% 30%; }

}

/* o recado */

.recado{
  padding: clamp(3rem, 10vh, 6.5rem) var(--gutter) clamp(3.4rem, 11vh, 7rem);
  border-top: 1px solid var(--paper-12);
  background: var(--ink);
}

.recado__form{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.6rem, 4vw, 2.8rem);
  max-width: 900px;
}

.recado__isca{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.campo{
  display: block;
  margin: 0;
  min-width: 0;
}

.campo--largo{ grid-column: 1 / -1; }

.campo__rotulo{
  display: block;
  margin-bottom: .9em;
  font-family: var(--font-sans);
  font-size: clamp(.52rem, .62vw, .64rem);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--paper-45);
}

.campo__valor{
  display: block;
  width: 100%;
  padding: 0 0 .8em;
  border: 0;
  border-bottom: 1px solid var(--paper-26);
  border-radius: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: clamp(.86rem, 1vw, 1rem);
  font-weight: 300;
  color: var(--paper);
  transition: border-color .45s var(--ease);
}

.campo__valor--area{
  line-height: 1.6;
  resize: vertical;
  min-height: 6em;
}

.campo__valor:focus{
  outline: none;
  border-bottom-color: var(--coral);
}

.campo__valor::placeholder{ color: var(--paper-26); }

.campo__valor:-webkit-autofill,
.campo__valor:-webkit-autofill:hover,
.campo__valor:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--paper);
  -webkit-box-shadow: inset 0 0 0 1000px var(--ink);
  caret-color: var(--paper);
}

.recado__enviar{
  position: relative;
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 1em;
  margin-top: clamp(.6rem, 2vh, 1.4rem);
  padding: 0 .2em .9em;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: clamp(.62rem, .78vw, .82rem);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--paper);
  cursor: pointer;
}

.recado__enviar::before{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--paper-26);
}

.recado__enviar::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .8s var(--ease);
}

.recado__enviar:hover::after,
.recado__enviar:focus-visible::after{ transform: scaleX(1); }

.recado__seta{
  display: block;
  transition: transform .5s var(--ease);
}

.recado__enviar:hover .recado__seta,
.recado__enviar:focus-visible .recado__seta{ transform: translateX(.5em); }

.recado__pe{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem clamp(1.4rem, 4vw, 3rem);
  margin: clamp(2.6rem, 8vh, 4.5rem) 0 0;
  padding-top: clamp(1.4rem, 4vh, 2.2rem);
  border-top: 1px solid var(--paper-12);
  font-family: var(--font-sans);
  font-size: clamp(.56rem, .66vw, .7rem);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.recado__pe a{
  color: var(--paper-70);
  transition: color .45s var(--ease);
}

.recado__pe a:hover,
.recado__pe a:focus-visible{ color: var(--paper); }

.recado__registro{ color: var(--paper-26); }

.js .recado [data-reveal]{
  opacity: 0;
  transform: translate3d(0, 2rem, 0);
}

.js .recado [data-reveal].is-in{
  opacity: 1;
  transform: none;
  transition:
    opacity   1.3s var(--ease-soft) calc(var(--i, 0) * .16s),
    transform 1.3s var(--ease)      calc(var(--i, 0) * .16s);
}

@media (prefers-reduced-motion: reduce){
  .js .recado [data-reveal]{ opacity: 1; transform: none; }
}

@media (max-width: 700px){

  .recado__form{
    grid-template-columns: 1fr;
    gap: clamp(1.4rem, 4vh, 2rem);
  }

  .recado__pe{
    justify-content: flex-start;
    letter-spacing: .16em;
  }

  .recado__enviar{ padding-bottom: 1.1em; }
}

/* a resposta do envio */

.recado__form--enviado{
  display: block;
  min-height: 8rem;
}

.recado__obrigado{
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-optical-sizing: none;
  font-variation-settings: var(--display-axes);
  font-size: clamp(1.4rem, 2.8vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -.012em;
  text-transform: uppercase;
  color: var(--paper);
}

.recado__aviso{
  grid-column: 1 / -1;
  margin: .4rem 0 0;
  max-width: 44ch;
  font-family: var(--font-sans);
  font-size: clamp(.74rem, .9vw, .88rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--paper-70);
}

.recado__aviso--erro{ color: var(--coral); }

.recado__enviar[disabled]{
  opacity: .45;
  cursor: default;
}

.recado{ text-align: center; }

@media (max-width: 860px){
  .contato{ text-align: center; }
  .contato__retrato{ margin-inline: auto; }
}

.recado{
  background: var(--paper);
  border-top-color: rgba(11, 11, 12, .14);

  color: var(--ink);
}

.recado__form{
  margin-inline: auto;
  justify-items: center;
}

.campo{ width: 100%; text-align: center; }

.campo__rotulo{
  font-size: clamp(.72rem, .82vw, .84rem);
  color: rgba(11, 11, 12, .5);
}

.campo__valor{
  padding: .25em 0 .75em;
  border-bottom-color: rgba(11, 11, 12, .26);
  font-size: clamp(1.15rem, 1.4vw, 1.3rem);
  text-align: center;
  color: var(--ink);
}

.campo__valor--area{ min-height: 7.5em; }

.campo__valor::placeholder{ color: rgba(11, 11, 12, .32); }

.campo__valor:focus{ border-bottom-color: var(--coral); }

.campo__valor:-webkit-autofill,
.campo__valor:-webkit-autofill:hover,
.campo__valor:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: inset 0 0 0 1000px var(--paper);
  caret-color: var(--ink);
}

.recado__enviar{
  justify-self: center;
  color: var(--ink);
}

.recado__enviar::before{ background: rgba(11, 11, 12, .26); }
.recado__enviar::after{ background: var(--ink); }

.recado__pe{ color: rgba(11, 11, 12, .62); }

.recado__pe{ border-top-color: rgba(11, 11, 12, .14); }
.recado__pe a{ color: var(--ink); }
.recado__pe a:hover,
.recado__pe a:focus-visible{ color: var(--coral); }
.recado__registro{ color: rgba(11, 11, 12, .45); }

.recado__obrigado{ color: var(--ink); }
.recado__aviso{ color: rgba(11, 11, 12, .62); }

.recado__pe{
  justify-content: center;
  text-align: center;
}

/* caixa em vez de linha */

.campo__valor{
  padding: .72em .9em;
  border: 1px solid rgba(11, 11, 12, .2);
  background: rgba(255, 255, 255, .58);
  transition: border-color .35s var(--ease), background-color .35s var(--ease);
}

.campo__valor:focus{
  border-color: var(--coral);
  background: #fff;
}

.campo__valor--area{
  min-height: 8em;
  padding-top: .85em;
}

.campo__valor:-webkit-autofill,
.campo__valor:-webkit-autofill:hover,
.campo__valor:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: inset 0 0 0 1000px #fff;
  caret-color: var(--ink);
}