/**
 * Mercado de Trabalho — fiel ao Figma (desktop: nó 1747:2674, 4 variantes;
 * mobile: nó 4321:24944 — accordion de verdade, não dropdown seletor).
 *
 * Todo seletor escopado com `.pucpr-mercado` na frente (2 classes) — mesmo
 * motivo de sempre: o Global Kit do Elementor (`.elementor-kit-125 button`)
 * e o reset.css do tema vencem uma classe só.
 *
 * Estrutura (ver widgets/mercado-trabalho.php pro porquê): botão + painel
 * de cada aba ficam juntos num `.pucpr-mercado__item` (não duas listas
 * separadas). No desktop, `display:contents` no item promove os dois a
 * filhos diretos do CSS Grid — todo botão cai na coluna 1 (uma linha cada),
 * todo painel cai na coluna 2 ocupando a altura toda (`grid-row: 1 / -1`),
 * então o painel ativo sempre aparece na mesma área da direita. No mobile,
 * o grid vira flex/block simples e a ordem natural do DOM (botão, painel,
 * botão, painel...) já É o accordion — zero JS extra pra isso.
 */

.pucpr-mercado {
  display: grid;
  /* Conteúdo (coluna 2) com teto de 827px, medido no widget nativo (1240px
     de container - 403px de abas - 10px de gap) — mas `minmax(0, 827px)` em
     vez de um `827px` fixo, senão essa coluna nunca encolhe e estoura a
     largura em telas entre o breakpoint mobile (767px) e ~1117px (tablet/
     notebook menor), gerando scroll horizontal. Com o teto, a coluna 2
     absorve o espaço livre primeiro (até 827px) e só depois disso a coluna 1
     (abas, `1fr`) cresce além do piso de 280px — mesmo resultado visual em
     telas largas, mas flexível pra caber em qualquer largura menor. Piso de
     280px na coluna 1 pra não esmagar o texto da aba mais longa
     ("Possibilidades de carreira"). */
  grid-template-columns: minmax(280px, 1fr) minmax(0, 827px);
  /* 3 linhas fixas em 60px (altura real da aba) + a última flexível
     (minmax(60px, auto)): isso evita os dois bugs que já tivemos aqui —
     linhas 100% "auto" deixavam o painel ativo (grid-row: 1/-1) inflar
     TODAS as linhas, distorcendo o espaçamento entre as abas; linhas 100%
     fixas resolviam isso mas o container parava de crescer quando o
     painel era mais alto que a soma das 4 linhas, e o conteúdo da página
     seguinte sobrepunha o painel. Com só a ÚLTIMA linha flexível, o excesso
     de altura vai inteiro pra ela (não se distribui pelas outras 3) — as
     3 primeiras abas continuam com espaçamento fixo intacto, e o container
     cresce do jeito certo quando o painel ativo precisa de mais espaço.
     Só funciona porque são sempre no máximo 4 abas (não dá pra usar
     `repeat()` com uma contagem calculada aqui). */
  grid-template-rows: 60px 60px 60px minmax(60px, auto);
  column-gap: 10px;
  row-gap: 10px;
  align-items: start;
}

.pucpr-mercado .pucpr-mercado__item {
  display: contents;
}

/* ---------- Abas ---------- */
.pucpr-mercado .pucpr-mercado__tab {
  grid-column: 1;
  appearance: none;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  /* "Recuo" da aba não-ativa: medido no widget nativo antigo — a aba ativa
     ocupa a largura toda da coluna, as inativas recuam 20px da borda
     direita. Só existe no desktop (ver media query — no mobile todas ficam
     com a mesma largura). */
  width: calc(100% - 20px);
  padding: 10px 10px 10px 25px;
  border-radius: 20px;
  background-color: #f5f0f2;
  color: #000;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
  text-align: left;
}

.pucpr-mercado .pucpr-mercado__tab.is-active {
  width: 100%;
  background-color: #8a0538;
  color: #fff;
  font-weight: 700;
}

.pucpr-mercado .pucpr-mercado__tab-label {
  flex: 1 1 0;
}

.pucpr-mercado .pucpr-mercado__tab-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background-color: #fff;
  color: #000;
}

.pucpr-mercado .pucpr-mercado__tab-icon svg {
  width: 16px;
  height: 16px;
  transform: scaleX(-1);
}

/* ---------- Painel ---------- */
.pucpr-mercado .pucpr-mercado__panel {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
  min-width: 0;
  background-color: #f5f0f2;
  border-radius: 20px;
  padding: 30px;
}

.pucpr-mercado .pucpr-mercado__panel-titulo {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: normal;
  color: #000;
  margin: 0 0 10px;
}

.pucpr-mercado .pucpr-mercado__panel-texto {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
  line-height: normal;
  color: #000;
  margin: 0;
}

/* ---------- Faixa salarial ---------- */
/* O gráfico decide o layout pela largura do próprio painel (container
   query abaixo), não pela tela: entre o breakpoint mobile e ~1100px o
   painel já fica estreito demais pra rótulo, barra e valor na mesma linha. */
.pucpr-mercado .pucpr-mercado__faixa {
  container-type: inline-size;
}

.pucpr-mercado .pucpr-mercado__faixa .pucpr-mercado__panel-texto {
  margin-top: 10px;
}

/* Gráfico (nó Figma 1747:2704): rótulo | trilha | valor em cada linha. O
   Figma tem valores curtos ("R$ 5.000"), mas o conteúdo real tem valores
   longos e de tamanhos diferentes ("R$ 13.604 a acima de R$ 30.000/mês"). Por
   isso as linhas são `display:contents` e as 3 colunas são do grid do
   gráfico, compartilhadas por todas: rótulos e valores alinham entre si e
   todas as trilhas começam e terminam no mesmo x, por mais que o valor de
   uma linha seja maior que o das outras. `fit-content` dá à coluna a largura
   do maior rótulo (ou valor) do curso, até o teto — acima disso o texto
   quebra linha.

   A trilha (branca, pill) fica com overflow escondido; a barra verde nasce
   em width:0 e só cresce até o percentual real (--pucpr-grafico-percent,
   setado inline na linha e herdado pela barra mesmo com display:contents)
   quando o JS soma `.is-visible` na linha ao entrar na tela
   (IntersectionObserver, ver assets/js/mercado-trabalho.js) — dá o efeito
   "enche da esquerda pra direita" pedido no design. */
.pucpr-mercado .pucpr-mercado__grafico {
  display: grid;
  grid-template-columns: fit-content(40%) minmax(80px, 1fr) fit-content(35%);
  column-gap: 12px;
  row-gap: 24px;
  align-items: center;
  margin-top: 30px;
}

.pucpr-mercado .pucpr-mercado__grafico-linha {
  display: contents;
}

.pucpr-mercado .pucpr-mercado__grafico-label {
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: normal;
  color: #000;
}

.pucpr-mercado .pucpr-mercado__grafico-trilha {
  display: block;
  height: 20px;
  background-color: #fff;
  border-radius: 200px;
  overflow: hidden;
}

.pucpr-mercado .pucpr-mercado__grafico-barra {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 200px;
  background-color: #7ed957;
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.pucpr-mercado .pucpr-mercado__grafico-linha.is-visible .pucpr-mercado__grafico-barra {
  width: var(--pucpr-grafico-percent, 0%);
}

.pucpr-mercado .pucpr-mercado__grafico-valor {
  text-align: right;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: normal;
  color: #000;
}

/* Painel estreito (mobile, tablet, notebook pequeno): rótulo e valor na
   mesma linha, trilha embaixo ocupando a largura toda. Se rótulo + valor não
   couberem juntos, o valor desce pra linha seguinte, alinhado à direita
   (margin-left:auto). A trilha vem antes do valor no DOM (ordem do
   desktop), daí o `order`. */
@container (max-width: 560px) {
  .pucpr-mercado .pucpr-mercado__grafico {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }

  .pucpr-mercado .pucpr-mercado__grafico-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
    row-gap: 8px;
  }

  .pucpr-mercado .pucpr-mercado__grafico-label {
    min-width: 0;
  }

  .pucpr-mercado .pucpr-mercado__grafico-valor {
    margin-left: auto;
  }

  .pucpr-mercado .pucpr-mercado__grafico-trilha {
    flex-basis: 100%;
    order: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pucpr-mercado .pucpr-mercado__grafico-barra {
    transition: none;
  }
}

/* ---------- Possibilidades de carreira ---------- */
.pucpr-mercado .pucpr-mercado__possibilidades {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.pucpr-mercado .pucpr-mercado__possibilidades-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pucpr-mercado .pucpr-mercado__possibilidades-imagem {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  border-radius: 10px;
  overflow: hidden;
}

.pucpr-mercado .pucpr-mercado__possibilidades-imagem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pucpr-mercado .pucpr-cargos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pucpr-mercado .pucpr-cargos__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background-color: #fff;
  border-radius: 30px;
}

.pucpr-mercado .pucpr-cargos__icone {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.pucpr-mercado .pucpr-cargos__nome {
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: normal;
  color: #000;
}

/* ---------- Funções ---------- */
.pucpr-mercado .pucpr-mercado__funcoes-linha {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-top: 20px;
}

.pucpr-mercado .pucpr-mercado__funcoes-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.pucpr-mercado .pucpr-mercado__funcoes-imagem {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 10px;
  object-fit: cover;
}

.pucpr-mercado .pucpr-mercado__funcoes-texto {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.pucpr-mercado .pucpr-mercado__funcoes-titulo {
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: normal;
  color: #000;
  margin: 0;
}

.pucpr-mercado .pucpr-mercado__funcoes-desc {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 14px;
  line-height: normal;
  color: #000;
  margin: 0;
}

/* ---------- Empresas ---------- */
/* Alguns cursos não têm logo pra mostrar, só um texto do cliente com "•"
   separando categorias/exemplos de empregador — vira <ul> em vez de um
   <p> só (ver render_empresas()). Bullet padrão do navegador mesmo: não é
   um padrão visual do Figma (esse conteúdo não tem variante desenhada),
   só formatação de lista de verdade em vez de parede de texto. */
.pucpr-mercado .pucpr-mercado__lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 0;
  padding-left: 20px;
  list-style: disc;
}

.pucpr-mercado .pucpr-mercado__lista li {
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
  line-height: normal;
  color: #000;
}

/* Grade de logos — fiel ao Figma nó 3984:2658: fundo branco, raio 10px no
   container, `flex-wrap` com um "tile" de tamanho fixo (84×59px) por logo,
   gap 12px nos dois eixos. Não é `grid-template-columns: repeat(8, ...)`
   de propósito — 8 colunas fixas e iguais distorcem logos com proporção
   muito diferente entre si (um "itaú" quadrado vs. um "Carrefour" largo) e
   preso a exatamente 8 por linha; o tile de largura fixa deixa cada logo
   centralizado no mesmo espaço e a quantidade por linha resolve sozinha
   conforme a largura do painel. */
.pucpr-mercado .pucpr-mercado__logos {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
}

.pucpr-mercado .pucpr-mercado__logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 59px;
}

.pucpr-mercado .pucpr-mercado__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.pucpr-mercado--empty {
  padding: 20px;
  background: #f5f0f2;
  border-radius: 20px;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 14px;
  color: #5c5c5c;
}

/* ==================== Mobile — accordion (nó 4321:24944) ==================== */
@media (max-width: 767px) {
  .pucpr-mercado {
    display: flex;
    flex-direction: column;
    /* A regra base (`align-items: start`, pro grid do desktop) senão
       continua herdada aqui — em flex isso faz cada `.item` encolher pro
       tamanho do próprio conteúdo em vez de esticar 100% da largura. */
    align-items: stretch;
    gap: 20px;
  }

  .pucpr-mercado .pucpr-mercado__item {
    display: block;
    position: relative;
  }

  /* Sem "recuo": todas as abas com a mesma largura no mobile, e sempre com
     os 4 cantos arredondados (aberta ou não) — diferente do desktop, o
     cabeçalho nunca "abre mão" do arredondamento de baixo. */
  .pucpr-mercado .pucpr-mercado__tab {
    position: relative;
    z-index: 2;
    width: 100% !important;
    max-width: none;
    flex: 0 0 auto;
    border-radius: 20px;
  }

  /* Chevron aponta pra baixo fechado, pra cima aberto (convenção de
     accordion) — no desktop a mesma seta aponta pra direita (scaleX only),
     aqui soma uma rotação por cima. */
  .pucpr-mercado .pucpr-mercado__tab-icon svg {
    transform: scaleX(-1) rotate(90deg);
  }

  .pucpr-mercado .pucpr-mercado__tab.is-active .pucpr-mercado__tab-icon svg {
    transform: scaleX(-1) rotate(-90deg);
  }

  /* O painel fica "por baixo" do cabeçalho: sobe 20px (margin-top negativo)
     pra emendar atrás do cabeçalho (que tem z-index maior e cantos 100%
     redondos) — sem isso, o canto de baixo do cabeçalho arredondado deixa
     ver um triângulo branco do fundo da página entre ele e o topo (quadrado)
     do painel. padding-top compensa o tanto que subiu, pro texto não ficar
     colado/escondido embaixo do cabeçalho. */
  .pucpr-mercado .pucpr-mercado__panel {
    position: relative;
    z-index: 1;
    margin-top: -20px;
    border-radius: 0 0 20px 20px;
    padding: 40px 20px 20px;
  }

  /* Título repetido no mobile (nó 4321:24944): o cabeçalho da própria aba já
     mostra o nome ("Faixa salarial" etc.) — o painel aberto começa direto
     no texto/conteúdo, sem repetir o <h3>. */
  .pucpr-mercado .pucpr-mercado__panel-titulo {
    display: none;
  }

  /* Mobile (nó Figma 4321:24944): fonte menor. O layout empilhado do
     gráfico vem da container query da faixa salarial, não daqui. */
  .pucpr-mercado .pucpr-mercado__grafico {
    margin-top: 20px;
  }

  .pucpr-mercado .pucpr-mercado__grafico-label,
  .pucpr-mercado .pucpr-mercado__grafico-valor {
    font-size: 14px;
  }

  /* Mobile (nó Figma 1581:4386): imagem ANTES do texto/cargos, não depois —
     `order` em vez de reordenar o PHP, que compartilha o mesmo markup com o
     desktop (lá a imagem fica à direita, depois da coluna de texto na
     ordem do DOM; aqui ela precisa aparecer primeiro). 150px de altura
     (não 220px — medido no nó).

     `flex: none` nos dois filhos é essencial, não cosmético: a base (regra
     de desktop) dá `flex: 1 1 0` pros dois, que faz sentido lado a lado
     (linha) — mas herdado aqui embaixo, com `flex-direction: column`, o
     eixo principal vira a ALTURA. `flex-basis: 0` nesse eixo, sem espaço
     livre sobrando pro `flex-grow` distribuir (o container não tem altura
     própria, ele é do tamanho do conteúdo), colapsa a imagem pra 0px de
     altura mesmo com `height: 150px` declarado — a imagem "sumia" no
     mobile mesmo com o campo ACF preenchido. */
  .pucpr-mercado .pucpr-mercado__possibilidades {
    flex-direction: column;
  }

  .pucpr-mercado .pucpr-mercado__possibilidades-col {
    flex: none;
    width: 100%;
  }

  .pucpr-mercado .pucpr-mercado__possibilidades-imagem {
    order: -1;
    flex: none;
    width: 100%;
    height: 150px;
  }

  .pucpr-mercado .pucpr-mercado__funcoes-linha {
    flex-direction: column;
    gap: 20px;
  }

  .pucpr-mercado .pucpr-mercado__funcoes-imagem {
    width: 60px;
    height: 60px;
  }

  .pucpr-mercado .pucpr-mercado__funcoes-titulo {
    font-size: 14px;
  }

  .pucpr-mercado .pucpr-mercado__funcoes-desc {
    font-size: 12px;
  }

  /* Empresas no mobile mantém o mesmo tratamento do desktop (container
     único com fundo branco, tile fixo por logo) — o `flex-wrap` já
     resolve sozinho quantos tiles cabem por linha nessa largura menor,
     sem precisar forçar uma contagem de colunas. Só padding menor. */
  .pucpr-mercado .pucpr-mercado__logos {
    padding: 15px;
  }
}