/* ==========================================================================
   STHEFANY — a agência
   agencia.css · v0.1.0
   --------------------------------------------------------------------------
   Estrutura da seção "sobre" do kit de referência: título grande à esquerda,
   texto e contato à direita, e abaixo uma faixa com imagem larga mais retrato,
   com os itens de serviço sob a imagem larga.

   Diferença de conteúdo: no kit essa seção fala de um artista. Aqui fala da
   agência, e quem lê é quem contrata — então o que aparece é o que a agência
   resolve, não a biografia de ninguém.
   ========================================================================== */

.sp-agencia {
  padding-block: var(--sp-secao-meia);
}

/* --- cabeçalho da seção --------------------------------------------------- */

.sp-agencia__topo {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-e-8);
  align-items: start;
}

.sp-agencia__titulo {
  max-width: 16ch;
}

.sp-agencia__texto {
  color: var(--sp-tinta-2);
  max-width: 46ch;
}

.sp-agencia__contato {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-e-2);
  /* Sem isto o endereço inteiro é uma linha rígida e estoura a janela em
     360px, levando a página junto. O <wbr> depois do @ dá o ponto de quebra;
     o `wrap` deixa a seta descer com a segunda metade em vez de ser empurrada
     para fora. */
  max-width: 100%;
  margin-block-start: var(--sp-e-5);
  font-family: var(--sp-fonte-titulo);
  font-size: 1.25rem;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
  border-block-end: 1px solid var(--sp-linha-clara);
  padding-block-end: var(--sp-e-1);
  transition: border-color var(--sp-transicao), color var(--sp-transicao);
}
.sp-agencia__contato:hover {
  color: var(--sp-acento-texto);
  border-block-end-color: var(--sp-acento);
}
.sp-agencia__contato i { font-size: 1.125rem; color: var(--sp-acento-texto); }

@media (max-width: 30rem) {
  .sp-agencia__contato { font-size: var(--sp-t-corpo); }
}

.sp-agencia__redes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-e-4);
  margin-block-start: var(--sp-e-5);
}

.sp-agencia__rede {
  color: var(--sp-acento-texto);
  font-size: 1.5rem;
  line-height: 0;
  transition: color var(--sp-transicao);
}
.sp-agencia__rede:hover { color: var(--sp-acento-esc); }

/* --- faixa de imagens ------------------------------------------------------ */

.sp-agencia__faixa {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-e-6);
  margin-block-start: var(--sp-e-8);
  align-items: stretch;
}

.sp-agencia__larga { border-radius: var(--sp-raio-bloco); }

/* O retrato acompanha a altura da coluna da esquerda: imagem larga mais os
   itens. Por isso a coluna estica e a imagem preenche, em vez de ter
   proporção fixa. */
.sp-agencia__retrato {
  border-radius: var(--sp-raio-bloco);
  height: 100%;
  min-height: 22rem;
}

.sp-agencia__itens {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-e-6);
  margin-block-start: var(--sp-e-6);
}

.sp-item__icone {
  display: block;
  font-size: 2rem;
  line-height: 1;
  color: var(--sp-acento-texto);
}

.sp-item__titulo {
  margin-block-start: var(--sp-e-4);
  font-family: var(--sp-fonte-titulo);
  font-size: var(--sp-t-h3);
  font-weight: 600;
  line-height: 1.1;
}

.sp-item__texto {
  margin-block-start: var(--sp-e-2);
  color: var(--sp-tinta-2);
  font-size: var(--sp-t-peq);
}

@media (max-width: 64rem) {
  .sp-agencia__topo,
  .sp-agencia__faixa { grid-template-columns: minmax(0, 1fr); gap: var(--sp-e-6); }
  .sp-agencia__titulo { max-width: 20ch; }
  .sp-agencia__retrato { min-height: 0; aspect-ratio: 4 / 3; height: auto; }
}

@media (max-width: 40rem) {
  .sp-agencia__itens { grid-template-columns: minmax(0, 1fr); gap: var(--sp-e-5); }
}

/* Sem retrato, a faixa vira coluna única.
   A grade de 7fr + 5fr pressupõe as duas imagens; com uma só, a coluna da
   direita fica vazia e abre um buraco do tamanho de meia tela — foi o defeito
   da 0.12.0, quando o template renderizava apenas a fotografia larga. O
   modificador existe para que a seção continue CORRETA com menos conteúdo, em
   vez de continuar pedindo o conteúdo que falta. */
.sp-agencia__faixa--simples { grid-template-columns: minmax(0, 1fr); }