/* ============================================================
   VagasTrans — catálogo de cursos: fileiras e cartões em pôster.
   Carregada só em `/cursos`, junto de `vitrine.css` (que dá a abertura,
   o cartão de filtros, a paginação e o estado vazio).

   Por que uma linguagem própria e não os mesmos cartões da vitrine de
   vagas: uma vaga se lê como anúncio — título, empresa, condições, prazo —
   e se compara linha a linha. Um curso se **escolhe**, e escolher entre
   ofertas de formação é mais parecido com escolher o que assistir: a
   pessoa passeia, reconhece pela capa, e decide pelo assunto. Daí as
   fileiras por área e a capa desenhada.

   A capa é CSS puro. Não há imagem de curso no modelo, e usar fotografia
   de banco de imagens diria coisas sobre quem estuda que a plataforma não
   pode afirmar (ver `static/img/PROCEDENCIA.md`). O gradiente vem do id do
   curso, então é estável: o mesmo curso tem sempre a mesma capa, e quem
   volta reconhece.
   ============================================================ */

/* --- abertura ---------------------------------------------------------- */

/* O cartão de filtros não sobe sobre a faixa escura aqui: nas fileiras, o
   que vem logo abaixo é conteúdo rolável, e a sobreposição empurrava a
   primeira fileira para dentro da dobra sem necessidade. */
.catalogo-topo + .vitrine-corpo .filtros-x { margin-top: var(--space-8); }

/* --- fileiras ---------------------------------------------------------- */

.fileira {
  position: relative;
  margin-top: var(--space-12);
}
.fileira:first-of-type { margin-top: var(--space-8); }

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

.fileira-titulo {
  font-size: 1.25rem;
  margin: 0;
  text-wrap: balance;
}

/* Nada de corte silencioso: quando a fileira mostra menos do que existe, o
   link diz quantos há e leva ao recorte completo. */
.fileira-todos {
  flex: none;
  font-size: .875rem;
  font-weight: 700;
  color: var(--brand-violet);
  text-decoration: none;
  white-space: nowrap;
}
.fileira-todos:hover { text-decoration: underline; }

/* O trilho: rolagem horizontal com encaixe. `scroll-padding-inline` para
   que o cartão encaixado não fique colado na borda, e `overflow-y: visible`
   é impossível junto de `overflow-x: auto` — daí o respiro vertical por
   padding, para o cartão poder subir no hover sem ser cortado. */
.fileira-trilho {
  list-style: none;
  margin: 0;
  padding: var(--space-2) var(--space-1) var(--space-4);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15.5rem, 15.5rem);
  gap: var(--space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--space-1);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.fileira-trilho > li { scroll-snap-align: start; }

/* O trilho recebe foco (`tabindex="0"` no HTML) para que quem navega por
   teclado possa rolá-lo com as setas sem passar por todos os cartões. */
.fileira-trilho:focus-visible {
  outline: 3px solid var(--brand-violet);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

.fileira-trilho::-webkit-scrollbar { height: 8px; }
.fileira-trilho::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 999px;
}

@media (min-width: 700px) {
  .fileira-trilho { grid-auto-columns: minmax(17rem, 17rem); }
}

/* --- setas (só com JavaScript) -----------------------------------------
   Criadas por `js/fileiras.js`. Sem ele não existem, e o trilho rola por
   toque, trackpad, barra e teclado. Aparecem apenas onde há mouse: no
   toque elas roubariam espaço da própria fileira. */
.fileira-seta {
  position: absolute;
  inset-block-start: 55%;
  transform: translateY(-50%);
  z-index: 2;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-2);
  color: var(--brand-violet);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease;
}
.fileira-seta-anterior { inset-inline-start: calc(var(--space-6) * -1); }
.fileira-seta-proxima  { inset-inline-end: calc(var(--space-6) * -1); }
.fileira-seta:hover { transform: translateY(-50%) scale(1.08); }
.fileira-seta[disabled] { opacity: 0; pointer-events: none; }

@media (hover: hover) and (min-width: 1180px) {
  .fileira-com-setas .fileira-seta { display: flex; }
}

/* --- grade (resultados filtrados) -------------------------------------- */

.grade-posteres {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
}

/* --- o cartão em pôster ------------------------------------------------ */

.poster {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.poster:hover {
  transform: translateY(-4px);
  border-color: #CFC3E4;
  box-shadow: 0 14px 34px rgba(69,24,95,.16);
}

/* O anel de foco é desenhado no cartão, não no texto do título, para
   acompanhar a área que de fato responde ao clique. */
.poster:has(.poster-titulo a:focus-visible) {
  outline: 3px solid var(--brand-violet);
  outline-offset: 3px;
}
@supports not selector(:has(a)) {
  .poster-titulo a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
}

/* --- a capa ------------------------------------------------------------ */

.poster-capa {
  position: relative;
  /* 4/3 e não 16/10: com a ilustração por baixo, o cartão baixo não deixava
     espaço para os dois — a faixa do título comia o objeto, que é o que a
     capa tem para mostrar. A proporção vale para **todos** os cartões, com
     ou sem ilustração: alturas diferentes na mesma grade fariam a fileira
     ficar irregular no dia em que um curso entrasse sem capa. */
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-4);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

/* Os arcos do motivo da marca, desenhados com gradientes cônicos parciais.
   `radial-gradient` com paradas justas dá o anel; três anéis concêntricos
   repetem o arco-íris que a logo usa. Decorativo, atrás do título. */
.poster-capa::before {
  content: "";
  position: absolute;
  inset-block-start: 22%;
  inset-inline-start: 50%;
  inline-size: 150%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 50%,
      transparent 0 27%, rgba(255,255,255,.16) 27% 31%, transparent 31%),
    radial-gradient(circle at 50% 50%,
      transparent 0 34%, rgba(255,255,255,.13) 34% 38%, transparent 38%),
    radial-gradient(circle at 50% 50%,
      transparent 0 41%, rgba(255,255,255,.10) 41% 45%, transparent 45%);
  z-index: -1;
}

/* Véu na base para o título ter contraste sobre qualquer gradiente. Sem
   ele, o texto branco encostava no rosa claro e perdia legibilidade. */
.poster-capa::after {
  content: "";
  position: absolute;
  inset: 28% 0 0;
  background: linear-gradient(to bottom, transparent, rgba(20,8,30,.74));
  z-index: -1;
}

/* Seis capas, escolhidas pelo id do curso. Todas partem do violeta da marca
   e passeiam pelo espectro; nenhuma usa cor fora da paleta do Bloco 5. */
.capa-0 { background: linear-gradient(135deg, #45185F, #6A2C91 55%, #C86BB0); }
.capa-1 { background: linear-gradient(135deg, #0E6E93, #5BCEFA 60%, #8B7BE8); }
.capa-2 { background: linear-gradient(135deg, #6A2C91, #C86BB0 58%, #F5A9B8); }
.capa-3 { background: linear-gradient(135deg, #1E7A55, #0E6E93 55%, #5BCEFA); }
.capa-4 { background: linear-gradient(135deg, #45185F, #B23A57 60%, #F5A9B8); }
.capa-5 { background: linear-gradient(135deg, #0E6E93, #6A2C91 52%, #C86BB0); }

.poster-etiquetas {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  display: flex;
  gap: var(--space-1);
}
.poster-formato,
.poster-carga {
  background: rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 999px;
  padding: 2px var(--space-2);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}

.poster-marca-inscrita {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
  background: rgba(255,255,255,.94);
  color: var(--brand-violet-deep);
  border-radius: 999px;
  padding: 2px var(--space-2);
  font-size: .6875rem;
  font-weight: 700;
}

.poster-titulo {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.25;
  text-wrap: balance;
  /* Três linhas no máximo: passando disso, a capa vira parágrafo e os
     cartões da fileira deixam de ter a mesma altura. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.poster-titulo a {
  color: inherit;
  text-decoration: none;
}
.poster-titulo a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.poster:hover .poster-titulo a { text-decoration: underline; }

/* A barra do progresso autodeclarado, rente à base da capa. Branca e sólida,
   não com o gradiente da marca: são seis capas de cores diferentes, e o
   gradiente comprimido a 10% de largura vira um borrão sem cor definida —
   justamente no caso em que a barra mais precisa ser lida (quem mal começou). */
.poster-progresso {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 5px;
  background: rgba(0,0,0,.38);
}
.poster-progresso span {
  display: block;
  block-size: 100%;
  background: #fff;
}

/* --- corpo do cartão --------------------------------------------------- */

.poster-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  flex: 1;
}

.poster-instituicao {
  margin: 0;
  font-size: .8125rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.poster-resumo {
  margin: 0;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* `auto` no topo cola o rodapé embaixo: cartões de conteúdos diferentes
   lado a lado terminam alinhados. */
.poster-rodape {
  margin: auto 0 0;
  padding-top: var(--space-2);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: .75rem;
  color: var(--muted);
}
.poster-local,
.poster-prazo,
.poster-idade {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.poster-prazo-urgente { color: var(--warning); font-weight: 700; }

.poster-seta {
  flex: none;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--brand-violet);
  transition: transform .2s ease;
}
.poster:hover .poster-seta { transform: translateX(3px); }

/* --- movimento --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .poster,
  .poster-seta,
  .fileira-seta { transition: none; }
  .poster:hover { transform: none; }
  .poster:hover .poster-seta { transform: none; }
  .fileira-trilho { scroll-behavior: auto; }
}

/* A ilustração da área, por cima do gradiente.
   O gradiente **continua embaixo**: se a imagem falhar em carregar, o cartão
   não vira um retângulo branco com o título ilegível. */
.poster-ilustracao {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: -2;
}
/* ⚠️ **Quem garante a leitura é a caixa atrás do texto, não o véu.**
   A mesma conclusão a que a seção do voo em `/sobre` chegou, e pela mesma
   razão: sobre um mundo de papel que muda de cor — creme no topo, violeta e
   laranja embaixo — um véu em gradiente ou acerta o contraste e apaga a arte,
   ou preserva a arte e perde o texto. Foram duas tentativas até entender isso:
   a primeira lavou a ilustração inteira (0,38 já no meio da imagem), a segunda
   preservou a arte e deixou a **primeira linha** do título sobre o papel creme
   quase ilegível — que foi o que o cliente viu.

   O véu volta ao papel que sabe fazer: assentar a base, sem carregar o
   contraste sozinho. Quem carrega é a faixa do título, logo abaixo. */
.poster-capa-ilustrada::after {
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(20, 8, 30, 0) 0%,
    rgba(20, 8, 30, 0) 46%,
    rgba(20, 8, 30, .18) 70%,
    rgba(20, 8, 30, .34) 100%);
}

/* A faixa do título: **cresce com o texto**, seja de uma ou de três linhas.
   Margem negativa para ir de borda a borda, com o padding devolvendo o
   respiro. Em 0,88 sobre o papel creme, o título branco dá 14,7:1 — e o
   desvanecimento acontece no `padding-block-start`, acima da primeira linha,
   para a faixa não ter um corte reto no meio da ilustração.

   Não se põe `position: relative` aqui: o `::after` do link dentro do título
   se ancora na capa para estender o clique ao cartão inteiro, e ancorá-lo no
   título encolheria a área clicável ao tamanho do texto. */
.poster-capa-ilustrada .poster-titulo {
  margin-inline: calc(var(--space-4) * -1);
  margin-block-end: calc(var(--space-4) * -1);
  /* O `padding-block-start` generoso não é respiro: é **o espaço em que o
     gradiente desvanece**. Com 20px a transição acontecia rápido demais e
     deixava um corte reto atravessando a ilustração, cortando a balança e o
     laptop ao meio — trocava um problema de leitura por um de desenho. */
  padding: var(--space-12) var(--space-4) var(--space-4);
  background: linear-gradient(to top,
    rgba(20, 8, 30, .92) 0%,
    rgba(20, 8, 30, .90) 52%,
    rgba(20, 8, 30, .74) 70%,
    rgba(20, 8, 30, .34) 86%,
    rgba(20, 8, 30, 0) 100%);
}

/* As etiquetas do topo ficam sobre o papel **creme**, que é a parte mais
   clara de toda ilustração. Em `rgba(0,0,0,.34)` — o valor que servia sobre
   os gradientes escuros — o texto branco dava **2,63:1**, abaixo do mínimo
   de 4,5:1 para texto pequeno. Em 0,68 dá 8,4:1. */
.poster-capa-ilustrada .poster-formato,
.poster-capa-ilustrada .poster-carga {
  background: rgba(0, 0, 0, .68);
  border-color: rgba(255, 255, 255, .34);
}
/* Os arcos da marca saem quando há ilustração: dois motivos gráficos
   disputando o mesmo espaço deixam o cartão sujo. */
.poster-capa-ilustrada::before { display: none; }