/* ==========================================================================
   IEL Sergipe: CSS da pagina Contato (contato.php e os tres componentes que so ela usa: contact_card(), journey_banner() e
   sergipe_lockup(), em includes/components.php; carregado pela propria pagina, pela chave `'css' => 'contato.css'` do page_head()).

   Onda 5 da migracao do Tailwind (docs/tailwind/migracao-tailwind.md). Copiado de contato.php e dos tres componentes,
   sem apagar nada do `style.css` antigo. Os tokens (cor, fonte, espaco, raio, sombra) e o miolo `.secao__interno` vem do
   `styles.css`, que carrega antes. O hero (variante `hero-pagina--contato`) e global e ja foi convertido na onda 0.
   A pagina nao tem formulario nem JS proprio: so links `tel:` e `mailto:`.

   Figma: Screen/Desktop/Contato (11809:2141, arte de 1600px), Tablet (12015:10143, 768px), Mobile (11981:6276, 390px).
   Breakpoints (min-width, mobile-first, em `em`): md = 48em, xl = 80em. A margem lateral (1rem, 2.5rem em 48em, 11.875rem em 80em)
   e o token `--margem-x`.
   ========================================================================== */

/* ==========================================================================
   CANAIS - secao com o titulo e os tres cartoes
   Coluna unica ate o tablet; tres colunas de altura igual no desktop.
   ========================================================================== */

.canais {
  width: 100%;
  padding: var(--espaco-lg) var(--margem-x);
}

.canais__interno {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
}

.canais__titulo {
  text-align: center;
  font-size: var(--fonte-24);
  font-weight: 700;
  line-height: var(--entrelinha-24-32);
  color: var(--corporativo-pure);
}

.canais__grade {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--espaco-md);
}

/* ==========================================================================
   CARTAO DE CONTATO (contact_card) - icone e titulo, lista de itens e, as vezes, um rodape
   Cada item e do tipo `link` (telefone, e-mail), `text` (icone + texto) ou `stack` (linhas recuadas, alinhadas ao texto do item de cima).
   ========================================================================== */

.cartao-contato {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--espaco-lg);
  border: 1px solid var(--tinta-lightest);
  border-radius: var(--raio-lg);
  background-color: var(--tinta-white);
  padding: var(--espaco-md);
  box-shadow: var(--sombra-card);
}

.cartao-contato__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-sm);
}

.cartao-contato__cabecalho {
  display: flex;
  align-items: center;
  gap: var(--espaco-xs);
}

.cartao-contato__icone {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.cartao-contato__titulo {
  font-size: var(--fonte-14);
  font-weight: 700;
  line-height: var(--entrelinha-14-20);
  color: var(--corporativo-pure);
}

.cartao-contato__lista {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-sm);
}

.cartao-contato__item {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
}
.cartao-contato__item--pilha { padding-left: var(--espaco-lg); }

.cartao-contato__periodo {
  font-size: var(--fonte-16);
  font-weight: 700;
  line-height: var(--entrelinha-16-24);
  color: var(--iel-darkest);
}

/* Observacao curta acima de um link (os e-mails): icone pequeno alinhado ao topo da primeira linha. */
.cartao-contato__nota {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-xs);
}

.cartao-contato__nota-icone {
  margin-top: var(--espaco-3xs);
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.cartao-contato__nota-texto {
  font-size: var(--fonte-14);
  font-weight: 400;
  line-height: var(--entrelinha-14-20);
  color: var(--tinta-dark);
}

/* Link (telefone ou e-mail): sublinha so com o ponteiro em cima. `--destaque` e o link que vem abaixo de uma nota
   (o icone ja esta na nota e o texto sai em azul corporativo). */
.cartao-contato__link {
  display: flex;
  align-items: center;
  gap: var(--espaco-xs);
  font-size: var(--fonte-16);
  font-weight: 700;
  line-height: var(--entrelinha-16-24);
  color: var(--iel-darkest);
  transition-property: var(--transicao-cores);
  transition-duration: .15s;
  transition-timing-function: var(--suavizacao-padrao);
}
.cartao-contato__link--destaque { color: var(--corporativo-pure); }
.cartao-contato__link:hover { text-decoration-line: underline; }

.cartao-contato__link-icone {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.cartao-contato__texto {
  display: flex;
  align-items: center;
  gap: var(--espaco-xs);
  font-size: var(--fonte-16);
  font-weight: 400;
  line-height: var(--entrelinha-16-24);
  color: var(--iel-darkest);
}

.cartao-contato__texto-icone {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.cartao-contato__rodape {
  padding-top: var(--espaco-sm);
  font-size: var(--fonte-14);
  font-weight: 400;
  line-height: var(--entrelinha-14-20);
  color: var(--tinta-dark);
}

/* ==========================================================================
   FAIXA DA JORNADA (journey_banner) - faixa clara de fechamento: titulo, convite e o selo de Sergipe
   Mobile: tudo empilha. Tablet: o titulo ocupa a linha de cima; convite e selo dividem a de baixo. Desktop: tres colunas.
   ========================================================================== */

.faixa-jornada {
  width: 100%;
  background-color: var(--iel-lightest);
  padding: var(--espaco-48) var(--margem-x);
}

.faixa-jornada__interno {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xl);
}

.faixa-jornada__titulo {
  font-size: var(--fonte-24);
  font-weight: 700;
  line-height: var(--entrelinha-24-36);
  color: var(--corporativo-pure);
}

.faixa-jornada__destaque { color: var(--iel-dark); }

.faixa-jornada__lado {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xl);
}

.faixa-jornada__convite {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
}

.faixa-jornada__texto {
  font-size: var(--fonte-16);
  font-weight: 400;
  line-height: var(--entrelinha-16-24);
  color: var(--tinta-dark);
}

.faixa-jornada__chamada {
  font-size: var(--fonte-20);
  font-weight: 700;
  line-height: var(--entrelinha-20-28);
  color: var(--iel-darkest);
}

/* ==========================================================================
   SELO DE SERGIPE (sergipe_lockup) - "Terra de Oportunidades": contorno do estado e cinco linhas de texto
   ========================================================================== */

.selo-sergipe {
  display: flex;
  width: 100%;
  height: 8rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-md);
  border-radius: var(--raio-lg);
  background-color: var(--iel-lighter);
  padding: 1.125rem var(--espaco-10);
  box-shadow: var(--sombra-card);
}

.selo-sergipe__contorno {
  width: 5.375rem;
  height: 6rem;
  flex-shrink: 0;
}

.selo-sergipe__texto {
  width: 6.8125rem;
  flex-shrink: 0;
  font-size: var(--fonte-12);
  font-weight: 700;
  line-height: var(--entrelinha-12-16);
}

.selo-sergipe__linha { display: block; }
.selo-sergipe__linha--rotulo { color: var(--tinta-dark); }
.selo-sergipe__linha--marca { color: var(--iel-dark); }
.selo-sergipe__linha--destaque { color: var(--corporativo-pure); }

/* ==========================================================================
   RESPONSIVO
   Sempre no fim do arquivo, em ordem crescente (48em, 80em); dentro de cada @media, na ordem dos blocos acima.
   ========================================================================== */

@media (min-width: 48em) {
  .canais { padding-block: var(--espaco-64); }
  .canais__interno { gap: var(--espaco-48); }
  .canais__titulo {
    font-size: var(--fonte-32);
    line-height: var(--entrelinha-32-44);
  }
  .canais__grade { gap: var(--espaco-xl); }

  .cartao-contato { padding: var(--espaco-xl); }
  .cartao-contato__corpo { gap: var(--espaco-lg); }
  .cartao-contato__lista { gap: var(--espaco-md); }
  .cartao-contato__item--pilha { padding-left: var(--espaco-28); }
  .cartao-contato__rodape { padding-top: var(--espaco-lg); }

  .faixa-jornada__titulo {
    font-size: var(--fonte-32);
    line-height: var(--entrelinha-32-44);
  }
  .faixa-jornada__lado {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .faixa-jornada__convite { width: 23.5625rem; }

  .selo-sergipe { width: 17.4375rem; }
}

@media (min-width: 80em) {
  .canais__titulo {
    font-size: var(--fonte-40);
    line-height: var(--entrelinha-40-52);
  }
  .canais__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .faixa-jornada { padding-block: var(--espaco-3xl); }
  .faixa-jornada__interno {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--espaco-xl);
  }
  .faixa-jornada__titulo {
    width: 24rem;
    flex-shrink: 0;
  }
  .faixa-jornada__lado { display: contents; }
  .faixa-jornada__convite {
    width: 24.125rem;
    flex-shrink: 0;
  }
}