/* Hallmark · genre: modern-minimal · macrostructure: Contato (abertura só com texto, dados à esquerda e formulário à direita) · design-system: design.md · designed-as-app
 * Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4
 *
 * Página "Fale com a R&B" (/reb/contato/). O HTML, os textos e o formulário (campos e o que ele envia) são os do
 * protótipo original, sem alteração. Este arquivo soma ao rb-site.css só a disposição desta página.
 */

.contact-brief {
  max-width: calc(46rem + 2 * var(--pad));
  padding: 0 var(--pad) var(--space-xl);
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.65;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  column-gap: var(--space-md);
  padding: var(--space-2xl) var(--pad) var(--space-section);
  background: var(--color-paper-2);
}

.contact-grid > div {
  grid-column: 1 / 6;
  position: sticky;
  top: calc(var(--header-h) + var(--space-lg));
}

.contact-grid h2 {
  margin-bottom: var(--space-md);
  font-size: var(--text-3xl);
  line-height: 1.02;
}

.contact-grid > div > p {
  margin-bottom: var(--space-lg);
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.65;
}

/* Link para os canais oficiais: mesma voz do link de texto do site */
.contact-grid > div > a {
  display: inline-block;
  padding-bottom: var(--space-2xs);
  background:
    linear-gradient(var(--color-accent), var(--color-accent)) left bottom / 0 var(--beam) no-repeat,
    linear-gradient(var(--color-ink), var(--color-ink)) left bottom / 100% var(--rule) no-repeat;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: background-size var(--dur-med) var(--ease-out);
}

.contact-grid > div > a:hover,
.contact-grid > div > a:focus-visible {
  background-size:
    100% var(--beam),
    100% var(--rule);
}

.contact-form {
  grid-column: 7 / 13;
  padding: var(--space-lg);
  background: var(--color-paper);
  border-radius: var(--radius-md);
}

@media (max-width: 1000px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-xl);
    padding-top: var(--space-xl);
  }

  .contact-grid > div,
  .contact-form {
    grid-column: 1 / -1;
  }

  .contact-grid > div {
    position: static;
  }
}

@media (max-width: 640px) {
  .contact-form {
    padding: var(--space-md);
  }
}

@media (max-width: 380px) {
  .contact-grid > div > a {
    font-size: var(--text-sm);
  }
}