/* =================================================================
   Lekto V3 · Card de conteúdo (.ccard)
   -----------------------------------------------------------------
   Componente único usado em TODOS os lugares onde um conteúdo
   (Trilha / Aula / Formação) aparece como card:
     • index.html  → Biblioteca (recomendados + mosaico)
     • home-legado.html → Conteúdos atribuídos + recomendados

   Formato fixo: 280 × 450.
   Hover  → elevação sutil (sombra).
   Clique no corpo → abre o conteúdo.
   Clique no contador de atribuições → gira e revela o verso.
   5 s com o mouse parado sobre o card → gira sozinho (js/content-card.js).

   O verso é só sobre ATRIBUIÇÃO desde 26/08/2026: a lista de aulas
   saiu e no lugar dela entraram os atribuidores e o prazo de cada uma.

   Cores só via var(--lkt-*) / aliases do protótipo.
   ================================================================= */

.ccard {
  --ccard-w: 280px;
  --ccard-h: 450px;
  position: relative;
  list-style: none;
  width: var(--ccard-w);
  height: var(--ccard-h);
  flex: 0 0 var(--ccard-w);
  perspective: 1400px;
}

.ccard__flip {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.62s var(--motion-ease);
}
.ccard.is-flipped .ccard__flip { transform: rotateY(180deg); }

.ccard__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius-md);
  background: #fff;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: var(--lkt-shadow-level1), var(--lkt-shadow-level3);
  transition: box-shadow 0.26s var(--motion-ease), transform 0.26s var(--motion-ease);
}
.ccard__face--front { padding: 12px 14px 14px; }
.ccard__face--back { transform: rotateY(180deg); padding: 14px 15px 15px; }

/* hover: elevação sutil — a sombra ganha a camada média e o card sobe 6px */
@media (hover: hover) and (pointer: fine) {
  .ccard:not(.is-flipped):hover .ccard__face--front {
    transform: translateY(-6px);
    box-shadow: var(--lkt-shadow-level2), var(--lkt-shadow-level4);
  }
}
.ccard.is-flipped .ccard__face--front { pointer-events: none; }
.ccard:not(.is-flipped) .ccard__face--back { pointer-events: none; }

/* ---------------- FRENTE ---------------- */

/* camada de clique do corpo: abre o conteúdo. Fica sob o contador de
   atribuições, que é o único controle que a intercepta. */
.ccard__open {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  font: inherit;
  cursor: pointer;
}
.ccard__open:focus-visible { outline: 3px solid var(--color-accent-pale); outline-offset: -3px; }

/* mídia: ilustração quando existe; senão, fundo aquarela do tipo */
.ccard__media {
  position: relative;
  display: block;
  height: 210px;
  flex: none;
  border-radius: var(--border-radius-sm-plus);
  background: var(--ccard-tile, var(--theme-surface-muted));
  overflow: hidden;
}
.ccard__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ccard__media--trilha { --ccard-tile: var(--color-pastel-aqua); }
.ccard__media--aula { --ccard-tile: var(--color-pastel-lavender); }
.ccard__media--formacao { --ccard-tile: var(--color-pastel-peach); }
.ccard__media--avaliacao { --ccard-tile: var(--color-pastel-butter); }

/* ── Thumbnail genérico: aquarela pastel + grão + ícone do tipo ──
   Manchas radiais de pastéis do DS se sobrepondo (nunca chapado), com a
   camada de grão granular em soft-light por cima — a receita de fundo
   granular aplicada a uma superfície clara. O ícone pousa sobre o grão. */
.ccard__media--generic {
  background:
    radial-gradient(118% 96% at 16% 10%, var(--ccard-wash-a), transparent 58%),
    radial-gradient(104% 118% at 88% 84%, var(--ccard-wash-b), transparent 60%),
    radial-gradient(92% 84% at 58% 52%, var(--ccard-wash-c), transparent 68%),
    var(--ccard-tile);
}
/* O grão do DS é ruído BRANCO; sobre pastel claro ele some em soft-light e
   lava a cor em overlay. Invertido, vira pigmento escuro e assenta como
   aquarela no papel — multiply em opacidade baixa para não acinzentar. */
.ccard__media--generic::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--grain-strong);
  filter: invert(1);
  mix-blend-mode: multiply;
  opacity: 0.2;
  pointer-events: none;
}
.ccard__media--trilha.ccard__media--generic {
  --ccard-wash-a: var(--color-pastel-mint);
  --ccard-wash-b: var(--color-accent-pale);
  --ccard-wash-c: var(--color-surface-tinted);
}
.ccard__media--aula.ccard__media--generic {
  --ccard-wash-a: var(--color-pastel-blush);
  --ccard-wash-b: var(--color-accent-pale);
  --ccard-wash-c: var(--color-surface-tinted);
}
.ccard__media--formacao.ccard__media--generic {
  --ccard-wash-a: var(--color-pastel-butter);
  --ccard-wash-b: var(--color-pastel-blush);
  --ccard-wash-c: var(--color-surface-tinted);
}
.ccard__media--avaliacao.ccard__media--generic {
  --ccard-wash-a: var(--color-pastel-butter);
  --ccard-wash-b: var(--color-pastel-mint);
  --ccard-wash-c: var(--color-surface-tinted);
}
.ccard__ghost {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 84px;
  height: 84px;
  transform: translate(-50%, -50%);
  fill: none;
  stroke: var(--theme-text-heading);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.17;
}

.ccard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding-top: 12px;
}

.ccard__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--theme-font-family-heading);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.02em;
  color: var(--theme-text-heading);
}

/* tipo + segmento, em cinza — a linha "de categoria" do card */
.ccard__sub {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-surface-pure);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ccard__sub svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ccard__sub b { font-weight: 800; color: var(--theme-text-muted); }

/* ano indicado */
.ccard__year {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: var(--border-radius-pill);
  background: var(--color-accent-tinted);
  color: var(--color-accent-dark);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ccard__year svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* tags do conteúdo — quantas couberem numa linha; o resto vira "+N".
   O construtor já decide quais entram, então aqui nada é truncado. */
.ccard__tags {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  min-width: 0;
}
.ccard__tag {
  display: inline-block;
  max-width: 100%;
  padding: 4px 9px;
  border-radius: var(--border-radius-pill);
  border: 1px solid var(--theme-panel-border);
  background: var(--base-50);
  color: var(--theme-text-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ccard__tag--more { flex: none; background: #fff; color: var(--color-surface-pure); }

/* rodapé: atribuições (gatilho do verso) + contagem de aulas */
.ccard__foot {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  pointer-events: none; /* só o botão de atribuições intercepta o clique */
}

/* contador de atribuições: botão fantasma — sem preenchimento, leve */
.ccard__attr {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 6px 8px 6px 6px;
  border: 0;
  border-radius: var(--border-radius-pill);
  background: none;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-surface-pure);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--motion-dur-fast) var(--motion-ease), background var(--motion-dur-fast) var(--motion-ease);
}
.ccard__attr svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ccard__attr-go { width: 12px !important; height: 12px !important; opacity: 0; transform: translateX(-3px); transition: opacity var(--motion-dur-fast) var(--motion-ease), transform var(--motion-dur-fast) var(--motion-ease); }
.ccard__attr:hover { color: var(--color-accent-dark); background: var(--color-accent-tinted); }
.ccard__attr:hover .ccard__attr-go { opacity: 1; transform: none; }
.ccard__attr:focus-visible { outline: 2px solid var(--color-accent-soft); outline-offset: 1px; color: var(--color-accent-dark); }
.ccard__attr--static { pointer-events: none; cursor: default; padding-left: 0; }

.ccard__count {
  flex: none;
  display: grid;
  place-content: center;
  justify-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--border-radius-circle);
  border: 1.5px solid var(--theme-panel-border);
  background: #fff;
  color: var(--theme-text-heading);
}
.ccard__count b { font-family: var(--theme-font-family-heading); font-size: 19px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.ccard__count i { font-family: var(--theme-font-family-heading); margin-top: 1px; font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--color-surface-pure); }

/* ---------------- VERSO ---------------- */
/* tipografia deliberadamente menor que a escala normal do DS */

.ccback { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; height: 100%; min-height: 0; }

.ccback__head {
  position: relative;
  flex: none;
  padding: 10px 11px;
  border-radius: var(--border-radius-sm);
  background: var(--theme-surface-muted);
}
.ccback__close {
  position: absolute;
  top: 7px;
  right: 7px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--border-radius-circle);
  background: none;
  color: var(--color-surface-pure);
  cursor: pointer;
  transition: background var(--motion-dur-fast) var(--motion-ease), color var(--motion-dur-fast) var(--motion-ease);
}
.ccback__close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ccback__close:hover { background: #fff; color: var(--theme-text-heading); }
.ccback__close:focus-visible { outline: 2px solid var(--color-accent-soft); outline-offset: 1px; }

.ccback__kicker {
  font-family: var(--theme-font-family-heading);
  display: flex;
  align-items: center;
  gap: 5px;
  padding-right: 26px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-surface-pure);
}
.ccback__kicker svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ccback__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
  font-family: var(--theme-font-family-heading);
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--theme-text-heading);
}

.ccback__sec { display: flex; flex-direction: column; min-height: 0; }
.ccback__sec + .ccback__sec { margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--theme-panel-border); }
.ccback__sec--fill { flex: 1; }

.ccback__label {
  font-family: var(--theme-font-family-heading);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-surface-pure);
}
.ccback__label b {
  padding: 1px 6px;
  border-radius: var(--border-radius-pill);
  background: var(--base-50);
  color: var(--theme-text-muted);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0;
}

/* lista de atribuições — cada turma é clicável */
.ccback__attrs { display: flex; flex-direction: column; gap: 7px; }
.ccback__sec--fill .ccback__attrs { gap: 10px; }
.ccback__attr {
  display: block;
  width: 100%;
  margin: 0;
  padding: 3px 6px;
  border: 0;
  border-radius: var(--border-radius-nano);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--motion-dur-fast) var(--motion-ease);
}
.ccback__attr:hover { background: var(--theme-surface-muted); }
.ccback__attr:focus-visible { outline: 2px solid var(--color-accent-soft); outline-offset: 0; }
/* nome (encolhe) · código (fixo) · progresso (fixo) */
.ccback__attr-top { display: flex; align-items: baseline; gap: 6px; }
/* A linha é o NOME da atribuição: começo que encolhe, código que não. O corte
   é do navegador, na largura real — ninguém conta caractere aqui. */
.ccback__attr-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--theme-text-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* O ID nunca encolhe: com o nome sendo conteúdo + ID, ele é a única parte que
   distingue duas atribuições da mesma trilha. Tabular porque duas linhas
   vizinhas se comparam melhor quando os caracteres alinham. */
.ccback__attr-cod {
  flex: none;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
  color: var(--theme-text-muted);
}
.ccback__attr-pct { flex: none; font-size: 10.5px; font-weight: 800; color: var(--color-surface-pure); font-variant-numeric: tabular-nums; }

/* QUEM ATRIBUIU e ATÉ QUANDO, o par que decide se vale cobrar alguém hoje.
   Duas colunas quando há prazo; a de prazo simplesmente não existe quando não
   há, e aí "Atribuído por" ocupa a linha (ver o JS: rótulo com travessão pesa
   igual a rótulo com data e não diz nada). */
.ccback__attr-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 9px;
  margin-top: 7px;
}
/* A turma é curta e não pode encolher: é ela que diz de qual atribuição a linha
   é. Quem cede espaço é "atribuído por", que tem o contador para se resumir. */
.ccback__attr-meta > .ccback__meta:first-child { flex: none; }
.ccback__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ccback__meta--prazo { flex: none; align-items: flex-end; text-align: right; }
.ccback__meta-lbl {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-surface-soft);
}
.ccback__meta-val {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--theme-text-muted);
  min-width: 0;
}
.ccback__meta-val svg { width: 11px; height: 11px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Avatares dos atribuidores: sobrepostos, como no card da tela de Atribuições.
   Iniciais, e não foto — o verso do card não é lugar de retrato de pessoa. */
.ccback__avs { display: flex; flex: none; }
.ccback__av {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--tile, var(--color-pastel-lavender));
  border: 1.5px solid var(--theme-surface);
  font-size: 7.5px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--theme-text-heading);
}
.ccback__av + .ccback__av { margin-left: -6px; }
.ccback__bar {
  display: block;
  height: 4px;
  margin-top: 4px;
  border-radius: var(--border-radius-pill);
  background: var(--color-surface-mist);
  overflow: hidden;
}
.ccback__bar i { display: block; height: 100%; border-radius: inherit; background: var(--lkt-gradient-progress); }
.ccback__more { margin-top: 6px; padding-left: 6px; font-size: 10.5px; font-weight: 700; color: var(--color-surface-pure); }

.ccback__none {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-surface-pure);
}
.ccback__none svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------- Preferência de movimento reduzido ---------------- */
@media (prefers-reduced-motion: reduce) {
  .ccard__flip { transition: none; }
  .ccard__face { transition: box-shadow 0.16s linear; }
  .ccard.is-flipped .ccard__flip { transform: none; }
  .ccard__face { -webkit-backface-visibility: visible; backface-visibility: visible; }
  .ccard__face--back { transform: none; opacity: 0; transition: opacity 0.16s linear; }
  .ccard.is-flipped .ccard__face--back { opacity: 1; z-index: 4; }
  @media (hover: hover) and (pointer: fine) {
    .ccard:not(.is-flipped):hover .ccard__face--front { transform: none; }
  }
}