/* PT Academy — página "Contactos". Carrega depois do styles.css.

   Página curta de propósito: uma secção só, sem fotografias e sem
   movimento próprio (nem sequer carrega o reveal.js). Quem abre esta
   página quer o número de telefone, não uma viagem pelo scroll — toda a
   informação cabe num ecrã de desktop, com o rodapé logo a seguir.

   Espaçamentos, tipografia e cores são os do resto do site; o que muda é
   só a densidade. As peças genéricas (.eyebrow, .form, .campo, .button,
   .sucesso) vêm todas do styles.css. */

/* ---------- Secção única ---------- */

/* O padding de cima dá folga ao nav, que é fixo e no topo da página está
   transparente — mas sem o exagero de um hero. */
.contactos {
  padding: clamp(118px, 15vh, 168px) clamp(24px, 4vw, 48px) clamp(64px, 10vw, 120px);
  background: var(--color-black);
}

.contactos__cabeca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--color-line);
}

/* Escala de título de secção, não de hero: o título anuncia a página sem
   empurrar a informação para fora do ecrã. */
.contactos__titulo {
  margin: 0;
  font: 400 clamp(38px, 6vw, 88px)/0.95 var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.contactos__titulo em {
  color: var(--color-red);
  font-style: normal;
}

.contactos__lead {
  margin: 0;
  max-width: 480px;
  font: 400 17px/1.6 var(--font-body);
  color: #ccc;
}

.contactos__grelha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.contactos__info {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 48px);
}

/* ---------- Dados (telefone, email, morada) ---------- */

/* Rótulo à esquerda em label, valor à direita em Anton. Linhas separadas
   por fio, sem caixas — é o que mantém a página compacta. */
.dados,
.horario {
  margin: 0;
  display: grid;
  gap: 0;
}

.dados__linha,
.horario__linha {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: baseline;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-line);
}
.dados__linha:first-child,
.horario__linha:first-child {
  border-top: 1px solid var(--color-line);
}

.dados__rotulo,
.horario dt {
  font: 600 11px var(--font-body);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #666;
}

/* anywhere: o endereço de email é mais largo do que a coluna em ecrãs
   estreitos e sem isto empurrava a grelha. */
.dados__valor {
  margin: 0;
  font: 400 clamp(20px, 1.9vw, 26px)/1.15 var(--font-display);
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}

/* A morada é endereço, não um dado curto: fica em corpo, que se lê
   melhor em duas linhas. */
.dados__valor--morada {
  font: 400 16px/1.5 var(--font-body);
  letter-spacing: 0;
}
.dados__valor--morada a {
  color: rgba(255, 255, 255, .8);
}
.dados__valor--morada a:hover {
  color: var(--color-red);
}

/* ---------- Horário ---------- */

/* tabular-nums: as horas alinham-se coluna a coluna. */
.horario dd {
  margin: 0;
  font: 400 15px/1.5 var(--font-body);
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .8);
}

.horario__linha--fechado dd {
  color: var(--color-red-light);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ---------- Caixa do formulário ---------- */

/* A mesma caixa do modal: cartão com risca vermelha de 3px no topo. */
.contactos__caixa {
  position: relative;
  padding: clamp(28px, 2.8vw, 44px) clamp(22px, 2.4vw, 36px);
  background: var(--color-card);
  border: 1px solid var(--color-maroon-border);
}
.contactos__caixa::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 3px;
  background: var(--color-red);
}

.contactos__caixa-titulo {
  margin: 0;
  font: 600 12px var(--font-body);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

/* O .form traz margin-top de 32px para se descolar do título do modal;
   aqui o título é uma etiqueta e 22px chegam. */
.contactos__caixa .form {
  margin-top: 22px;
  gap: 18px;
}

.contactos__caixa .sucesso {
  margin-top: 22px;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .contactos__grelha {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  /* Rótulo por cima do valor: 120px de coluna não sobram num telemóvel. */
  .dados__linha,
  .horario__linha {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}