/* =============================================================================
   Acompanhe o Caso (.caso) · O Segredo
   Bloco de fim de artigo, montado automaticamente pelas matérias da taxonomia
   `caso` (ordenadas por data). Timeline vertical com "Mais recente" e "Você
   está aqui", colapso além de 4 itens. Sem box-shadow. Tokens escopados no
   .caso (não vazam para :root). Fonte: deliverable-caso (Jader jul/2026).
   ============================================================================= */

.caso{
  /* tokens do bloco (escopados) */
  --hff:'Outfit',system-ui,sans-serif;
  --bff:'Figtree',system-ui,sans-serif;
  --surface:#fff;
  --surface-2:oklch(0.965 0.004 80);
  --line:oklch(0.90 0.005 80);
  --line-strong:oklch(0.82 0.008 80);
  --ink:oklch(0.20 0.010 60);
  --ink-2:oklch(0.34 0.010 60);
  --muted:oklch(0.52 0.010 60);
  --soft:oklch(0.68 0.010 60);
  --accent:#ff532c;
  --accent-ink:#b53310;
  --accent-wash:oklch(0.965 0.03 45);
  --radius:4px;
  --radius-lg:6px;

  margin:30px 0;border:1px solid var(--line-strong);border-radius:var(--radius-lg);
  background:var(--surface);position:relative;overflow:hidden;
  font-family:var(--bff);color:var(--ink);
}
.caso *{box-sizing:border-box;}
.caso::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);}

/* head */
.caso__head{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:20px 26px 16px;border-bottom:1px solid var(--line);
}
.caso__k{
  font-family:var(--bff);font-size:10.5px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--accent-ink);display:inline-flex;align-items:center;gap:8px;
}
.caso__k .live{position:relative;width:8px;height:8px;border-radius:50%;background:var(--accent);}
.caso__k .live::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--accent);opacity:.5;animation:casoPulse 2.2s ease-out infinite;}
@keyframes casoPulse{0%{inset:-2px;opacity:.7;}100%{inset:-8px;opacity:0;}}
@media(prefers-reduced-motion:reduce){.caso__k .live::after{animation:none;}}
.caso__title{
  flex-basis:100%;font-family:var(--hff);font-size:clamp(20px,2.6vw,25px);font-weight:800;
  letter-spacing:-0.02em;line-height:1.15;color:var(--ink);margin:2px 0 0;
}
.caso__count{
  margin-left:auto;font-family:var(--bff);font-size:12px;font-weight:600;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px 12px;white-space:nowrap;
}

/* timeline */
.caso__list{list-style:none;margin:0;padding:10px 26px 14px;}
.caso__it{position:relative;display:grid;grid-template-columns:96px 1fr;gap:16px;padding:13px 0;}
.caso__it:not(:last-child)::after{content:"";position:absolute;left:110px;right:0;bottom:0;height:1px;background:var(--line);}
/* coluna da data com nó + linha (spine) */
.caso__when{position:relative;padding-left:20px;}
.caso__when::before{content:"";position:absolute;left:5px;top:-13px;bottom:-13px;width:2px;background:var(--line);}
.caso__it:first-child .caso__when::before{top:8px;}
.caso__it:last-child .caso__when::before{bottom:auto;height:21px;}
/* colapsado: o 4º item visível encurta a spine (o "último" real fica oculto) */
.caso__list:not(.is-expanded) .caso__it:nth-child(4) .caso__when::before{bottom:auto;height:21px;}
.caso__when::after{content:"";position:absolute;left:1px;top:8px;width:10px;height:10px;border-radius:50%;
  background:var(--surface);border:2.5px solid var(--soft);}
.caso__it--new .caso__when::after{border-color:var(--accent);background:var(--accent-wash);}
.caso__date{font-family:var(--bff);font-size:12px;font-weight:700;color:var(--muted);line-height:1.3;display:block;padding-top:3px;}
.caso__date b{display:block;font-size:15px;color:var(--ink);font-family:var(--hff);font-weight:800;letter-spacing:-0.01em;}
.caso__it--new .caso__date b{color:var(--accent-ink);}
/* entrada */
.caso__entry{min-width:0;}
.caso__badge{
  display:inline-flex;align-items:center;gap:6px;margin:0 0 4px;
  font-family:var(--bff);font-size:9.5px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--accent-wash);border:1px solid oklch(0.90 0.04 45);
  border-radius:3px;padding:2px 8px;
}
.caso__h{
  font-family:var(--hff);font-size:16.5px;font-weight:700;letter-spacing:-0.01em;line-height:1.3;
  color:var(--ink);margin:0;display:block;transition:color .14s ease;
}
a.caso__h:hover{color:var(--accent-ink);}
.caso__h .arrow{display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-left:5px;color:var(--soft);transition:transform .14s ease,color .14s ease;}
a.caso__h:hover .arrow{transform:translateX(3px);color:var(--accent);}
.caso__h .you{
  font-family:var(--bff);font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:3px;
  padding:2px 7px;margin-left:8px;vertical-align:2px;white-space:nowrap;
}
.caso__it--current .caso__h{color:var(--muted);cursor:default;}

/* colapso além de 4 itens (HTML válido: itens extras ficam no próprio <ol>) */
.caso__it--extra{display:none;}
.caso__list.is-expanded .caso__it--extra{display:grid;}
.caso__more{
  width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:none;border:0;border-top:1px dashed var(--line);cursor:pointer;
  font-family:var(--bff);font-size:12.5px;font-weight:700;color:var(--accent-ink);
  padding:12px 0;
}
.caso__more svg{width:14px;height:14px;transition:transform .18s ease;}
.caso__more.open svg{transform:rotate(180deg);}

@media(max-width:560px){
  .caso__head{padding:18px 18px 14px;}
  .caso__list{padding:8px 18px 6px;}
  .caso__it{grid-template-columns:1fr;gap:4px;padding:12px 0;}
  .caso__it:not(:last-child)::after{left:20px;}
  .caso__when{padding-left:20px;}
  .caso__when::before{display:none;}
  .caso__when::after{top:4px;}
  .caso__date{display:inline-flex;gap:6px;align-items:baseline;padding-top:0;}
  .caso__date b{display:inline;font-size:13px;}
  .caso__entry{padding-left:20px;}
}