/* Pilha de cards (seção Edições): um embaixo do outro, com respiro entre eles. */
.pilha { display: grid; gap: var(--esp-4); }

/* ── Wrapper de seção (Secao.astro) ── */
/* scroll-margin-top é o topo fixo (barra de avisos + Header): sem ele, uma
   âncora (#noticias) rola o título para debaixo das barras e o usuário
   chega numa seção sem cabeçalho. */
/* --altura-header-real (publicada por sugestao-idioma.ts) porque o header
   CRESCE quando o banner de idioma está aberto — o token é só o piso. */
.fas-secao { scroll-margin-top: calc(var(--altura-topbar) + var(--altura-header-real, var(--altura-header)) + var(--esp-4)); }

/* Os tons valem para qualquer bloco que siga o sistema, não só para as seções da home: a página do
   festival usa os mesmos em festival__bloco--<tom>. Estas regras só definem a variável; quem a consome
   é a linha de horizonte e o rótulo do cabeçalho. */
.fas-secao--ciano, .festival__bloco--ciano { --tom-secao: var(--tom-ciano); }
.fas-secao--lilas, .festival__bloco--lilas { --tom-secao: var(--tom-lilas); }
.fas-secao--magenta, .festival__bloco--magenta { --tom-secao: var(--tom-magenta); }
.fas-secao--rosa, .festival__bloco--rosa { --tom-secao: var(--tom-rosa); }

/* A linha de horizonte (opção A da revisão de 10/08): eco do horizonte da
   nebulosa, no tom da seção que ela abre. Vive dentro da seção — e não como
   um divisor solto entre irmãos — justamente para herdar o --tom-secao.
   margin-top e margin-bottom com o mesmo token garantem simetria exata acima e abaixo da linha. */
.fas-secao::before {
  content: '';
  display: block;
  height: 1px;
  margin-top: var(--esp-transicao-secao);
  margin-bottom: var(--esp-transicao-secao);
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--tom-secao) 50%, transparent),
    transparent
  );
}

/* Cabeçalho centralizado em TODAS as seções e larguras:
   O link de saída (ver-todos) vive embaixo do conteúdo. */
.fas-secao .cabecalho {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-2);
  margin-bottom: var(--esp-bloco-interno);
  text-align: center;
}
.fas-secao .etiqueta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  color: var(--tom-secao);
  /* Um degrau acima do .rotulo global (--texto-rotulo): a dupla rótulo +
     título reequilibrada — o rótulo cresceu, o título encolheu (token
     --texto-titulo-2 em tokens.css). */
  font-size: var(--texto-mini);
}
.fas-secao .texto { display: grid; justify-items: center; gap: var(--esp-3); }
.fas-secao .logo-emoji { display: inline-flex; flex-shrink: 0; }
.fas-secao .descricao { max-width: 46rem; margin-top: var(--esp-2); color: var(--cor-texto-suave); font-size: var(--texto-mini); }

/* O link de saída fecha a seção — DEPOIS do conteúdo. Vale também para os blocos da página do
   festival (festival__bloco), que seguem o mesmo sistema: mesmo componente, mesma posição.
   No mobile (< 48rem): centralizado para fechar o bloco com equilíbrio visual
   e facilidade de toque.
   No tablet/desk (>= 48rem): encostado à direita após o conteúdo. */
.fas-secao .ver-todos, .festival__bloco .ver-todos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  width: fit-content;
  margin: var(--esp-bloco-interno) auto 0;
  /* 44px de alvo de toque, sem aumentar o texto. */
  min-height: 2.75rem;
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--raio-pill);
  color: var(--tom-secao);
  font-size: var(--texto-pequeno);
  font-weight: var(--peso-forte);
  text-decoration: none;
  transition: color var(--dur-rapida) var(--ease-padrao),
              filter var(--dur-rapida) var(--ease-padrao),
              transform var(--dur-rapida) var(--ease-padrao);
}
.fas-secao .ver-todos, .festival__bloco .ver-todos:hover {
  filter: brightness(1.2);
  color: var(--cor-texto);
}
.fas-secao .ver-todos, .festival__bloco .ver-todos:active {
  transform: scale(0.97);
}
.fas-secao .ver-todos, .festival__bloco .ver-todos svg {
  flex-shrink: 0;
  transition: transform var(--dur-rapida) var(--ease-padrao);
}
.fas-secao .ver-todos, .festival__bloco .ver-todos:hover svg {
  transform: translateX(4px);
}

@media (min-width: 48rem) {
  .fas-secao .ver-todos, .festival__bloco .ver-todos {
    margin-left: auto;
    margin-right: 0;
    justify-content: flex-end;
    padding-inline: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fas-secao .ver-todos, .festival__bloco .ver-todos,
  .fas-secao .ver-todos, .festival__bloco .ver-todos svg {
    transition: none;
    transform: none;
  }
  .fas-secao .ver-todos, .festival__bloco .ver-todos:hover svg {
    transform: none;
  }
}