/*
 * Casca nova: página de categoria (/{categoria}/), design editorial 06/10/2026.
 * Só seletores cp-cat-*. Tokens: design/README.md.
 * Texto #16142B; corpo #33314A; mudo #6B6A80; linhas #E6E4EF; regra forte #16142B;
 * roxo #614BC3 (hover #4A36A3); placeholder de foto #EFEDF5.
 * Os cards de guia usam as classes cp-home-card* (shell-home.css); as variáveis --cp-home-*
 * que elas consomem são declaradas aqui no escopo .cp-cat.
 */

.cp-cat {
  --cp-home-text: #16142B;
  --cp-home-text-2: #4B4A63;
  --cp-home-muted: #6B6A80;
  --cp-home-line: #E6E4EF;
  --cp-home-rule: #16142B;
  --cp-home-accent: #614BC3;
  --cp-home-accent-hover: #4A36A3;
  --cp-home-placeholder: #EFEDF5;
  --cp-home-radius: 8px;

  display: block;
  background: #FFFFFF;
  color: #16142B;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  min-width: 0;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

.cp-cat *,
.cp-cat *::before,
.cp-cat *::after {
  box-sizing: border-box;
}

.cp-cat-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}

/* Trilha ----------------------------------------------------------- */

.cp-cat-trail {
  font-size: 13px;
  line-height: 1.4;
  color: #6B6A80;
}

.cp-cat-trail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
}

.cp-cat-trail-item { margin: 0; }
.cp-cat-trail-sep { margin-right: 6px; }

.cp-cat-trail .cp-cat-trail-link,
.cp-cat-trail .cp-cat-trail-link:hover {
  color: #6B6A80;
  text-decoration: none;
}
.cp-cat-trail .cp-cat-trail-link:hover { color: #16142B; }

/* Cabeçalho -------------------------------------------------------- */

.cp-cat-head {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 32px;
}

.cp-cat-kicker {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #614BC3;
}

.cp-cat-name {
  margin: 0;
  font-family: inherit;
  font-size: 48px;
  line-height: 1.0;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #16142B;
  text-transform: none;
  overflow-wrap: anywhere;
}

.cp-cat-desc {
  margin: 6px 0 0;
  max-width: 680px;
  font-size: 17px;
  line-height: 1.7;
  color: #33314A;
}

.cp-cat-meta {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #6B6A80;
}

/* Navegação entre categorias -------------------------------------- */

.cp-cat-nav {
  border-bottom: 1px solid #E6E4EF;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cp-cat-nav::-webkit-scrollbar { display: none; }

.cp-cat-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 28px;
  white-space: nowrap;
}

.cp-cat-nav-item { margin: 0; flex: 0 0 auto; }

.cp-cat-nav .cp-cat-nav-link {
  display: inline-block;
  padding: 14px 0 12px;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  color: #6B6A80;
  text-decoration: none;
}
.cp-cat-nav .cp-cat-nav-link:hover { color: #16142B; text-decoration: none; }

.cp-cat-nav .cp-cat-nav-link.is-current {
  color: #16142B;
  font-weight: 600;
  border-bottom-color: #614BC3;
}

/* Subcategorias ---------------------------------------------------- */

.cp-cat-subs {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  font-size: 14px;
  line-height: 1.5;
}

.cp-cat-subs-label { color: #6B6A80; }

.cp-cat-subs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.cp-cat-subs-item { margin: 0; }

.cp-cat-subs .cp-cat-chip {
  font-weight: 600;
  color: #614BC3;
  text-decoration: none;
}
.cp-cat-subs .cp-cat-chip:hover { color: #4A36A3; text-decoration: underline; }

/* Grid de guias ---------------------------------------------------- */

.cp-cat-section { margin-top: 40px; }

.cp-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 36px 28px;
}

.cp-cat-grid .cp-home-card,
.cp-cat-grid .cp-home-card:hover,
.cp-cat-grid .cp-home-card:focus {
  color: #16142B;
  text-decoration: none;
}

.cp-cat-empty {
  margin: 0;
  font-size: 16px;
  color: #6B6A80;
}

/* Paginação (links de texto) --------------------------------------- */

.cp-cat-pagination { margin-top: 48px; font-size: 15px; }

.cp-cat-pagination .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.cp-cat-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: baseline;
}

.cp-cat-pagination .page-numbers {
  padding: 0;
  border: 0;
  background: none;
  font-weight: 600;
  color: #614BC3;
  text-decoration: none;
}

.cp-cat-pagination a.page-numbers:hover { color: #4A36A3; text-decoration: underline; }

.cp-cat-pagination .page-numbers.current {
  color: #16142B;
  font-weight: 800;
}

.cp-cat-pagination .page-numbers.dots {
  color: #6B6A80;
  font-weight: 400;
}

/* Responsivo ------------------------------------------------------- */

@media (max-width: 640px) {
  .cp-cat-wrap { padding: 32px 16px 64px; }
  .cp-cat-head { padding-bottom: 24px; }
  .cp-cat-name { font-size: 34px; line-height: 1.04; }
  .cp-cat-desc { font-size: 16px; line-height: 1.65; }
  .cp-cat-nav-list { gap: 22px; }
  .cp-cat-section { margin-top: 32px; }
  .cp-cat-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}