/* ROD-01 · Rodapé de colunas — no modelo do original do 21st.dev, sem React nem shadcn.
   Uma coluna no celular (com a marca sozinha em cima, centrada, e as duas colunas de conteúdo lado
   a lado), duas a partir de 768 px e quatro a partir de 1024 px. Títulos de coluna em 1,125rem,
   links em 0,875rem, redes em ícones redondos de contorno, faixa inferior com borda.

   Sem o formulário de newsletter e sem a chave claro/escuro do original: o primeiro não tinha ação
   nenhuma e a segunda não ligava em nada. Se precisar deles, o original está em original/. */
.c-rodape {
  --c-rod-fundo: #000;
  --c-rod-tinta: #ebebeb;
  --c-rod-tinta-2: #a8a8a8;
  --c-rod-tinta-3: #6a6a6a;
  --c-rod-linha: rgba(235, 235, 235, .12);
  --c-rod-destaque: #e8ad32;
  --c-rod-gutter: 24px;

  padding: 48px var(--c-rod-gutter) 0;
  background: var(--c-rod-fundo);
  color: var(--c-rod-tinta);
}
.c-rodape__grade { display: grid; gap: 40px; }
@media (min-width: 768px) { .c-rodape__grade { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .c-rodape__grade { grid-template-columns: repeat(4, 1fr); } }

.c-rodape__marca { display: grid; justify-items: center; text-align: center; }
.c-rodape__logo { width: 150px; height: auto; margin: 0 auto 16px; }
.c-rodape__lema {
  margin-bottom: 8px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-rod-destaque);
}
.c-rodape__texto { font-size: .9rem; color: var(--c-rod-tinta-2); }
.c-rodape__titulo { margin: 0 0 8px; font: 600 1.125rem/1.2 inherit; }
.c-rodape__coluna { display: grid; align-content: start; gap: 8px; font-size: .875rem; }
.c-rodape__coluna > a, .c-rodape__contato a { color: var(--c-rod-tinta); text-decoration: none; transition: color .2s ease; }
.c-rodape__coluna > a:hover, .c-rodape__contato a:hover { color: var(--c-rod-destaque); }
.c-rodape__contato { display: grid; gap: 8px; margin-top: 12px; font-style: normal; color: var(--c-rod-tinta-2); }
.c-rodape__icones { display: flex; flex-wrap: wrap; gap: 12px; }
.c-rodape__icone {
  width: 44px;
  height: 44px;
  flex-shrink: 0;            /* na coluna estreita do celular o alvo de 44 px não cede: quebra de linha antes */
  display: grid;
  place-items: center;
  border: 1px solid var(--c-rod-linha);
  border-radius: 50%;
  color: var(--c-rod-tinta);
  transition: border-color .2s ease, color .2s ease;
}
.c-rodape__icone:hover { border-color: var(--c-rod-destaque); color: var(--c-rod-destaque); }
.c-rodape__icone svg { width: 18px; height: 18px; }
.c-rodape__base {
  margin-top: 48px;
  padding-top: 32px;
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--c-rod-linha);
  text-align: center;
  font-size: .875rem;
  color: var(--c-rod-tinta-3);
}

/* ---------- celular: as duas colunas de conteúdo lado a lado, a marca sozinha em cima ----------
   As duas medidas saem de UMA conta: a coluna da direita tem de caber a fileira dos três alvos de
   44 px sem que eles encolham nem quebrem de linha.
       coluna(L) = (L − 2 × gutter − column-gap) / 2     fileira = 3 × 44 + 2 × gap-dos-ícones
   Com column-gap 16 e gap 12 a fileira dá 156 px e só cabe de 376 px para cima — medido nos dois
   motores. Com 12 e 8 a fileira é 148 px e a coluna a 360 px é 150: cabe do iPhone SE para cima.
   De ~356 px para baixo ela ainda quebra, de propósito: o alvo de 44 px nunca cede.

   Mora no FIM do arquivo porque sobrescreve o column-gap da grade e o gap dos ícones, declarados
   acima: media query não soma especificidade, então quem ganha é quem vem depois. */
@media (max-width: 767.98px) {
  .c-rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  .c-rodape__marca { grid-column: 1 / -1; }
  .c-rodape__icones { gap: 8px; }
}