/**
 * Matriz Curricular — fiel ao Figma (nó 1468:4488).
 *
 * Tokens de cor reaproveitados de cursos-em-alta.css (mesmo roxo/lilás,
 * mesmo cinza de fundo) — ver --pucpr-cursos-* lá. Aqui só os que não têm
 * equivalente direto ganham nome próprio.
 *
 * Todo seletor é escopado com `.pucpr-matriz` na frente (2 classes), mesmo
 * quando uma classe já bastaria — o Global Kit do Elementor tem regras tipo
 * `.elementor-kit-125 h3` e `.elementor-kit-125 button` (classe + tipo,
 * especificidade 0,1,1) que vencem qualquer seletor de 1 classe só (0,1,0),
 * independente da ordem de carregamento do CSS. Sem esse escopo, título
 * (h3), abas e toggle de módulo (button) saem com a tipografia/cor default
 * do kit em vez da nossa.
 */

.pucpr-matriz {
  --pucpr-matriz-lilas: #863bff;
  --pucpr-matriz-bg: #f5f0f2;
}

/* ---------- Abas de semestre ---------- */
.pucpr-matriz .pucpr-matriz__tabs {
  display: flex;
  list-style: none;
  gap: 4px;
  margin: 0 0 0 20px;
  padding: 0;
}

.pucpr-matriz .pucpr-matriz__tab {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 20px 20px 0 0;
  background: var(--pucpr-matriz-bg);
  color: #000;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 16px;
}

.pucpr-matriz .pucpr-matriz__tab.is-active {
  background: var(--pucpr-matriz-lilas);
  color: #fff;
}

/* ---------- Painel do semestre ---------- */
.pucpr-matriz .pucpr-matriz__panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--pucpr-matriz-bg);
  border-radius: 20px;
  padding: 20px;
}

.pucpr-matriz .pucpr-matriz__panel[hidden] {
  display: none;
}

.pucpr-matriz .pucpr-matriz__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  padding-left: 8px;
}

.pucpr-matriz .pucpr-matriz__panel-title {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: #000;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 18px;
}

.pucpr-matriz .pucpr-matriz__panel-title strong {
  font-weight: 700;
}

.pucpr-matriz .pucpr-matriz__carga {
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 400;
  font-size: 16px;
}

/* ---------- Toggle de módulo ---------- */
.pucpr-matriz .pucpr-matriz__modulos {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pucpr-matriz .pucpr-matriz__modulo {
  appearance: none;
  border: 0;
  cursor: pointer;
  height: 30px;
  padding: 8px 16px;
  border-radius: 1000px;
  background: #fff;
  color: #000;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
}

.pucpr-matriz .pucpr-matriz__modulo.is-active {
  background: var(--pucpr-matriz-lilas);
  color: #fff;
}

/* ---------- Grade de disciplinas ---------- */
.pucpr-matriz .pucpr-matriz__disciplinas[hidden] {
  display: none;
}

.pucpr-matriz .pucpr-matriz__row {
  display: flex;
  gap: 20px;
  align-items: stretch;
}

.pucpr-matriz .pucpr-matriz__row + .pucpr-matriz__row {
  margin-top: 20px;
}

.pucpr-matriz .pucpr-matriz__card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  border-radius: 10px;
  padding: 30px;
}

.pucpr-matriz .pucpr-matriz__card-horas {
  margin: 0;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--pucpr-matriz-lilas);
}

.pucpr-matriz .pucpr-matriz__card-nome {
  margin: 0;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: normal;
  color: #000;
}

.pucpr-matriz .pucpr-matriz__card-desc {
  margin: 0;
  font-family: "Source Sans Pro", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #000;
}

/* Mobile — fiel ao Figma (nó 5357:4143): rótulo do dropdown de semestre vem
   do enhancement genérico assets/js/tabs-mobile-dropdown.js (opt-in via
   .pucpr-tabs-mobile-dropdown no root, já no HTML) — mesmo componente que
   os nós 1573-1293/1573-1295 documentam em tabs-mobile-dropdown.css. Aqui
   só o restante do layout: título/carga em duas linhas, cards empilhados
   com padding e espaçamento menores. */
@media (max-width: 767px) {
  .pucpr-matriz .pucpr-matriz__panel {
    padding: 25px 20px;
  }

  .pucpr-matriz .pucpr-matriz__panel-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .pucpr-matriz .pucpr-matriz__panel-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .pucpr-matriz .pucpr-matriz__row {
    flex-direction: column;
    gap: 10px;
  }

  .pucpr-matriz .pucpr-matriz__row + .pucpr-matriz__row {
    margin-top: 10px;
  }

  .pucpr-matriz .pucpr-matriz__card {
    padding: 20px;
  }
}
