/* RODAPE DE /eventos/ E DE /faq/ - carregado so em events/event_list.html e
   em website/faq.html (o /faq/ desde 25/09, a pedido de Lucas).

   O template (`_footer_eventos.html`) usa as classes do rodape compartilhado
   (`.rodape-marca`, em app.css) mais o modificador `.rodape-marca--eventos`.
   Desde 25/09 e uma fileira so, pela referencia de Lucas: marca | navegacao,
   e do outro lado canais | (c), separados por fios de terracota, sobre carvao
   liso com uma linha de terracota no topo. A fileira vale a partir de 64rem; no
   tablet vira duas linhas e no celular uma coluna, sem os fios. A altura
   acompanha o conteudo. O rodape compartilhado das outras paginas nao muda. */

.rodape-marca--eventos {
  border-top: 0;
  background: var(--cor-fundo);
  /* O respiro entre os itens da fileira: ver "A FILEIRA", abaixo. Fica neste
     bloco, e nao num segundo `.rodape-marca--eventos`, porque seletor repetido
     e apontamento do Sonar. */
  --rodape-respiro: clamp(var(--espaco-4), 3.6vw - 1.25rem, var(--espaco-10));
}

/* A LINHA DO TOPO, EM TERRACOTA: fraca nas pontas e acesa no meio, onde
   clareia. Lucas pediu terracota em 25/09 - a referencia puxava para o cobre.
   A cor vem de `--marca`, e segue o painel. O halo e um segundo
   pseudo-elemento, uma elipse que vaza acima e abaixo da linha so no centro:
   na referencia o brilho nao acompanha a linha inteira. */
.rodape-marca--eventos::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--marca) 38%, transparent),
    color-mix(in srgb, var(--marca) 60%, transparent) 25%,
    color-mix(in srgb, var(--marca) 80%, transparent) 40%,
    var(--marca) 46%,
    color-mix(in srgb, var(--marca) 55%, var(--areia-50)) 50%,
    var(--marca) 54%,
    color-mix(in srgb, var(--marca) 80%, transparent) 60%,
    color-mix(in srgb, var(--marca) 60%, transparent) 75%,
    color-mix(in srgb, var(--marca) 45%, transparent));
  box-shadow: 0 0 .1875rem color-mix(in srgb, var(--marca) 40%, transparent);
  pointer-events: none;
}
.rodape-marca--eventos::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  width: min(20rem, 45%);
  height: var(--espaco-8);
  translate: -50% -50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--marca) 55%, transparent), transparent);
  pointer-events: none;
}

/* A FILEIRA. `display: flex` troca a grade do rodape compartilhado; a borda
   da tela, e nao o container de 76rem, e o limite, como na referencia.

   Os respiros crescem com a tela: 19px a 1095 (a tela de Lucas), 32px a 1440,
   o teto a partir de 1800. Com o respiro fixo da referencia a fileira so
   caberia a partir de uns 1200px. O valor e o `--rodape-respiro`, no primeiro
   bloco desta folha. */
.rodape-marca--eventos .rodape-marca__interno {
  display: flex;
  align-items: center;
  gap: var(--espaco-3) var(--rodape-respiro);
  padding: var(--espaco-5) clamp(var(--espaco-4), 2.4vw, var(--espaco-12));
}

.rodape-marca--eventos .rodape-marca__marca { gap: var(--espaco-3); }
.rodape-marca--eventos .rodape-marca__simbolo { width: 2.75rem; }
.rodape-marca--eventos .rodape-marca__texto { gap: var(--espaco-1); }
.rodape-marca--eventos .rodape-marca__nome { font-size: var(--fs-18); }
.rodape-marca--eventos .rodape-marca__descritor {
  color: var(--areia-300);
  font-size: var(--fs-12);
  letter-spacing: .16em;
}

.rodape-marca__fio {
  flex: none;
  width: 1px;
  height: var(--espaco-8);
  background: color-mix(in srgb, var(--marca) 45%, transparent);
}

/* A navegacao empurra o resto para a direita: a sobra da fileira fica entre
   ela e o fio dos canais. */
.rodape-marca--eventos .rodape-marca__navegacao {
  margin-inline-end: auto;
  border-block: 0;
}
.rodape-marca--eventos .rodape-marca__navegacao ul {
  justify-content: flex-start;
  gap: var(--espaco-2) clamp(var(--espaco-4), 3.6vw - 1.25rem, var(--espaco-12));
  padding: 0;
  font-size: clamp(var(--fs-12), .5rem + .5vw, var(--fs-14));
  font-weight: var(--peso-medio);
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* A 14px, "Início" mede menos de 44px de largura no celular: o alvo de 44px
   do toque (app.css) so cuida da altura. */
@media (max-width: 40rem), (pointer: coarse) {
  .rodape-marca--eventos .rodape-marca__navegacao a {
    min-width: var(--alvo-toque);
    justify-content: center;
  }
}

.rodape-marca--eventos .rodape-marca__contatos { gap: clamp(var(--espaco-2), 1.2vw - .5rem, var(--espaco-5)); }
.rodape-marca--eventos .rodape-marca__contatos svg { width: 1.625rem; height: 1.625rem; }

.rodape-marca--eventos .rodape-marca__direitos {
  color: var(--areia-200);
  font-size: var(--fs-14);
  white-space: nowrap;
}

.rodape-marca--eventos .rodape-marca__nota {
  padding: 0 clamp(var(--espaco-4), 2.4vw, var(--espaco-12)) var(--espaco-5);
}

/* TABLET: duas linhas - marca e canais em cima, navegacao e (c) embaixo. Os
   fios so fazem sentido entre vizinhos da mesma linha, e saem. */
@media (max-width: 63.999rem) {
  .rodape-marca--eventos .rodape-marca__interno {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "marca contatos"
      "navegacao direitos";
    gap: var(--espaco-3) var(--espaco-6);
  }
  .rodape-marca--eventos .rodape-marca__marca { grid-area: marca; justify-self: start; }
  .rodape-marca--eventos .rodape-marca__contatos { grid-area: contatos; }
  .rodape-marca--eventos .rodape-marca__navegacao { grid-area: navegacao; margin: 0; }
  .rodape-marca--eventos .rodape-marca__direitos { grid-area: direitos; }
  .rodape-marca__fio { display: none; }
}

/* CELULAR: uma coluna, centrada no eixo da linha do topo. */
@media (max-width: 40rem) {
  .rodape-marca--eventos .rodape-marca__interno {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "marca" "navegacao" "contatos" "direitos";
    justify-items: center;
    gap: var(--espaco-3);
    padding-block: var(--espaco-6);
  }
  .rodape-marca--eventos .rodape-marca__marca { justify-self: center; }
  .rodape-marca--eventos .rodape-marca__navegacao ul {
    justify-content: center;
    gap: 0 var(--espaco-3);
    letter-spacing: .14em;
  }
  .rodape-marca--eventos .rodape-marca__contatos { justify-content: center; }
  .rodape-marca--eventos .rodape-marca__direitos { white-space: normal; text-align: center; }
  .rodape-marca--eventos .rodape-marca__nota { text-align: center; }
}

@media (forced-colors: active) {
  .rodape-marca--eventos::before,
  .rodape-marca__fio { background: CanvasText; box-shadow: none; }
  .rodape-marca--eventos::after { display: none; }
}