/* ==========================================================================
   PÁGINA DE LINKS
   Destino do link na bio do Instagram. Chega quase sempre por celular, em pé,
   procurando uma coisa específica: horário, endereço, agenda ou vídeo. Por
   isso a ordem é essa, e cada bloco cabe em um polegar.
   Depende de pagina.css, carregado antes.
   ========================================================================== */

.pagina-links .folha { padding-top: var(--e-2); }

.lema {
  font-family: var(--fonte-display);
  font-size: var(--texto-p-grande);
  font-style: italic;
  font-weight: 300;
  color: var(--cor-laranja);
  text-align: center;
  margin-bottom: var(--e-8);
}

/* --- Cultos e endereço ---------------------------------------------------- */

.encontros .folha__titulo { margin-bottom: var(--e-6); }

.horarios {
  display: grid;
  gap: var(--e-2);
  border-top: var(--traco-claro);
}

.horarios li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-4);
  padding-block: var(--e-3);
  border-bottom: var(--traco-claro);
}

.horarios__dia {
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: var(--espacamento-rotulo);
  text-transform: uppercase;
  color: var(--cor-texto-apoio-claro);
}

.horarios__hora {
  font-family: var(--fonte-display);
  font-size: var(--texto-t3);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--cor-laranja);
}

/* --- Atalhos --------------------------------------------------------------
   A pilha de botões que dá nome à página. Alvo alto, texto centralizado e um
   único destaque, para a lista não virar cinco chamadas disputando atenção.
--------------------------------------------------------------------------- */

.atalhos {
  display: grid;
  gap: var(--e-3);
  margin-top: var(--e-8);
}

.atalho {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  min-height: 3.25rem;
  padding-inline: var(--e-6);
  border: 1px solid var(--cor-borda-clara);
  border-radius: var(--raio-pilula);
  color: var(--cor-papel);
  font-size: var(--texto-p);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition:
    background-color var(--t-micro) var(--curva-saida),
    color var(--t-micro) var(--curva-saida),
    border-color var(--t-micro) var(--curva-saida);
}

.atalho:hover {
  background: var(--cor-papel);
  color: var(--cor-tinta);
  border-color: var(--cor-papel);
}

.atalho--forte {
  background: var(--cor-laranja);
  border-color: var(--cor-laranja);
  color: var(--cor-tinta);
}

.atalho--forte:hover {
  background: var(--cor-laranja-quente);
  border-color: var(--cor-laranja-quente);
  color: var(--cor-tinta);
}

.atalho__ponto {
  width: 8px;
  height: 8px;
  border-radius: var(--raio-pilula);
  background: var(--cor-tinta);
  animation: pulsar 2.4s var(--curva-suave) infinite;
}

/* --- Blocos --------------------------------------------------------------- */

.bloco { margin-top: var(--e-16); }

.bloco__cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-4);
  margin-bottom: var(--e-6);
}

.bloco__titulo {
  font-size: var(--texto-t3);
  font-weight: 600;
}

/* Bloco sem elo ao lado não tem .bloco__cabeca, então o respiro do título
   precisa vir daqui. */
.bloco > .bloco__titulo { margin-bottom: var(--e-6); }

/* --- Agenda reduzida ------------------------------------------------------ */

.mini-agenda {
  display: grid;
  gap: var(--e-6);
}

.mini-evento img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--raio-medio);
}

.mini-evento__dados { margin-top: var(--e-3); }

.mini-evento__nome {
  font-size: var(--texto-p-grande);
  font-weight: 600;
}

.mini-evento__quando {
  margin-top: var(--e-1);
  font-size: var(--texto-xs);
  color: var(--cor-texto-apoio-claro);
}

/* --- Vídeos ---------------------------------------------------------------
   Aqui a capa é pequena e fica ao lado do título: a lista precisa caber na
   tela sem exigir rolagem longa.
--------------------------------------------------------------------------- */

.mini-videos {
  display: grid;
  gap: var(--e-3);
}

.mini-video {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-3);
  background: var(--cor-tinta-alta);
  border-radius: var(--raio-medio);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--t-micro) var(--curva-saida);
}

.mini-video:hover { background: var(--cor-laranja); color: var(--cor-tinta); }

.mini-video__capa {
  position: relative;
  flex: 0 0 6.5rem;
  overflow: hidden;
  border-radius: var(--raio-pequeno);
}

.mini-video__capa img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.mini-video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.75rem;
  height: 1.75rem;
  margin: -0.875rem 0 0 -0.875rem;
  border-radius: var(--raio-pilula);
  background: var(--cor-laranja);
}

.mini-video__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  width: 0.45rem;
  height: 0.55rem;
  transform: translate(-50%, -50%);
  background: var(--cor-tinta);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.mini-video:hover .mini-video__play { background: var(--cor-tinta); }

.mini-video:hover .mini-video__play::after { background: var(--cor-laranja); }

.mini-video__dados { min-width: 0; }

.mini-video__titulo {
  display: block;
  font-family: var(--fonte-display);
  font-size: var(--texto-p);
  font-weight: 600;
  line-height: 1.25;
}

.mini-video__meta {
  display: block;
  margin-top: var(--e-1);
  font-size: var(--texto-xs);
  color: var(--cor-texto-apoio-claro);
}

.mini-video:hover .mini-video__meta { color: var(--cor-tinta); }

/* --- Redes ---------------------------------------------------------------- */

.redes-cartoes {
  display: grid;
  gap: var(--e-3);
}

.rede-cartao {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--e-4);
  min-height: 3.25rem;
  padding: var(--e-3) var(--e-6);
  background: var(--cor-tinta-alta);
  border-radius: var(--raio-medio);
  color: var(--cor-papel);
  text-decoration: none;
  transition: background-color var(--t-micro) var(--curva-saida);
}

.rede-cartao:hover { background: var(--cor-laranja); color: var(--cor-tinta); }

.rede-cartao__marca {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--cor-laranja);
}

.rede-cartao:hover .rede-cartao__marca { color: var(--cor-tinta); }

.rede-cartao__nome { font-weight: 600; }

.rede-cartao__conta {
  font-size: var(--texto-xs);
  color: var(--cor-texto-apoio-claro);
  text-align: right;
  overflow-wrap: anywhere;
}

.rede-cartao:hover .rede-cartao__conta { color: var(--cor-tinta); }

/* --- Fecho ---------------------------------------------------------------- */

@media (max-width: 24rem) {

  /* Em tela muito estreita o nome da rede e a conta empilham, senão a conta
     encosta no nome. */
  .rede-cartao {
    grid-template-columns: auto 1fr;
    row-gap: var(--e-1);
  }

  .rede-cartao__conta {
    grid-column: 2;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {

  .atalho__ponto { animation: none; }

  .atalho,
  .mini-video,
  .rede-cartao {
    transition-duration: 1ms;
  }
}