/* ---------- Espaço do Saber: a prateleira ----------
   Livro em CSS 3D puro (capa, lombada, borda das folhas, sombra no chão). Sem WebGL, sem biblioteca.
   Carregado só em cursos.html. A cor de cada lombada vem da borda esquerda da própria capa
   (variável --lombada no HTML), nunca de um chute. */

/* auto-fit: a prateleira se ajusta se um título entrar ou sair, sem virar linha torta */
.prat{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--e4);
  margin-top:var(--e5);perspective:1600px;
}
.liv{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  text-decoration:none;color:inherit;
}
/* o palco reserva a altura do livro + a sombra: nada de layout pulando quando a capa chega */
.liv-palco{position:relative;width:100%;display:flex;justify-content:center;padding-bottom:30px}
.liv-palco::after{
  content:"";position:absolute;bottom:8px;left:50%;width:180px;height:18px;
  transform:translateX(-50%) scaleX(1);
  background:radial-gradient(ellipse at center,rgba(0,0,0,.5),transparent 70%);
  filter:blur(6px);transition:transform .28s ease-out,opacity .28s ease-out;
}
.liv-corpo{
  position:relative;width:200px;height:300px;
  transform-style:preserve-3d;transform:rotateY(-26deg);
  transition:transform .28s ease-out;
}
.liv-capa{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:translateZ(13px);border-radius:2px 5px 5px 2px;
  box-shadow:0 18px 34px rgba(0,0,0,.42);
}
.liv-lombada{
  position:absolute;top:0;left:0;width:26px;height:100%;
  transform-origin:left center;transform:rotateY(-90deg);
  background:linear-gradient(90deg,rgba(0,0,0,.34),transparent 38%,rgba(0,0,0,.22)),var(--lombada,#555);
  border-radius:3px 0 0 3px;
}
.liv-folhas{
  position:absolute;top:0;right:0;width:26px;height:100%;
  transform-origin:right center;transform:rotateY(90deg);
  background:repeating-linear-gradient(90deg,#f4f1ea 0 2px,#d9d4c8 2px 3px);
  border-radius:0 3px 3px 0;
}
.liv-verso{
  position:absolute;inset:0;transform:translateZ(-13px);
  background:var(--lombada,#555);border-radius:2px 5px 5px 2px;
}

/* curso não é livro: vira um cartão com a cara da marca, e não finge ter capa */
.liv-cartao{
  position:absolute;inset:0;transform:translateZ(13px);border-radius:8px;
  background:linear-gradient(150deg,var(--verde-marca),var(--verde-fundo));
  border:1px solid rgba(132,192,72,.45);box-shadow:0 18px 34px rgba(0,0,0,.42);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:22px;
}
.liv-cartao b{font-family:var(--fonte-titulo);font-size:30px;font-weight:600;color:var(--verde-folha);line-height:1}
.liv-cartao span{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:#cfe0d3;line-height:1.5}

/* o movimento só acontece em quem tem mouse; no toque o livro já nasce legível */
@media (hover:hover){
  .liv:hover .liv-corpo,
  .liv:focus-visible .liv-corpo{transform:rotateY(-8deg) translateY(-10px)}
  .liv:hover .liv-palco::after,
  .liv:focus-visible .liv-palco::after{transform:translateX(-50%) scaleX(.82);opacity:.7}
}
.liv:focus-visible{outline:3px solid var(--verde-folha);outline-offset:6px;border-radius:8px}

.liv-selo{
  align-self:center;font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  color:#0A3D2A;background:var(--verde-folha);border-radius:99px;padding:6px 12px;margin-bottom:12px;
}
.liv-selo-curso{background:transparent;border:1px solid rgba(255,255,255,.4);color:#cfe0d3}
.liv-nome{font-family:var(--fonte-titulo);font-size:19px;font-weight:600;line-height:1.3;
  color:#fff;margin:4px 0 6px;max-width:24ch}
.liv-linha{font-size:14px;line-height:1.55;color:#cfe0d3;max-width:30ch}
.liv-preco{font-family:var(--fonte-titulo);font-size:22px;font-weight:600;color:#fff;margin-top:10px}

@media (max-width:900px){
  .prat{grid-template-columns:1fr;gap:var(--e5);perspective:900px}
  .liv-corpo{width:168px;height:252px;transform:rotateY(-18deg)}
  .liv-palco::after{width:150px}
}

/* quem pediu menos movimento vê o livro reto e parado */
@media (prefers-reduced-motion:reduce){
  .liv-corpo{transform:none;transition:none}
  .liv:hover .liv-corpo,.liv:focus-visible .liv-corpo{transform:none}
  .liv-palco::after{transition:none}
}