/* ============================================================================
   PAGINA DE CASE · Gabriel Amaral
   Compartilhada por fluidraw, simples e expo-cacau.
   Depende de tokens, base e components.
   ========================================================================= */

/* --- ABERTURA -------------------------------------------------------------- */
.caseHero{ padding-block:clamp(56px,9vw,112px) clamp(48px,7vw,88px); }
.caseHero__eyebrow{ color:var(--marca); }
.caseHero__h1{
  font-size:var(--t-h1);
  margin-block:var(--s-5) var(--s-6);
  max-width:20ch;
}
.caseHero__tldr{ max-width:58ch; }

/* Ficha tecnica: papel, prazo, equipe, ano. */
.ficha{
  display:grid; gap:var(--s-6);
  grid-template-columns:repeat(auto-fit, minmax(min(190px,100%), 1fr));
  margin-top:var(--s-12);
  padding-top:var(--s-8);
  border-top:1px solid var(--on-anchor-rule);
}
.ficha dt{ font-size:var(--t-label); font-weight:700; letter-spacing:var(--tr-label);
           text-transform:uppercase; color:var(--marca); margin-bottom:var(--s-2); }
.ficha dd{ margin:0; font-size:var(--t-small); color:var(--on-anchor-muted); }

/* --- FASE DO CASE ---------------------------------------------------------
   Cada fase abre com o icone, o rotulo e o numero. A regua vertical na cor
   da fase amarra o bloco inteiro e substitui um card, que a esta altura da
   pagina pesaria demais.
   ------------------------------------------------------------------------ */
.faseSec{ padding-block:var(--section-y); border-top:1px solid var(--rule); }
.faseSec:first-of-type{ border-top:0; }

.faseSec__head{
  display:grid; gap:var(--s-5);
  max-width:var(--measure);
  margin-bottom:var(--s-10);
}
.faseSec__id{ display:flex; align-items:center; gap:var(--s-4); }
.faseSec__id .label{ color:var(--cor-ink); }
.faseSec__h2{ font-size:var(--t-h2); }

.faseSec__corpo{ display:grid; gap:var(--s-5); max-width:var(--measure); }
.faseSec__corpo p{ color:var(--ink-muted); }
.faseSec__corpo strong{ color:var(--ink); }

/* --- FIGURA ---------------------------------------------------------------
   As pranchas do material sao quadradas e cheias de texto pequeno. Limitar a
   largura mantem a escala legivel; passar disso vira poster ilegivel.
   ------------------------------------------------------------------------ */
.fig{ margin:var(--s-12) 0 0; }
.fig img{
  width:100%; border-radius:var(--r-lg);
  border:1px solid var(--rule-strong);
  background:var(--card);
}
.fig figcaption{
  margin-top:var(--s-4);
  font-size:var(--t-small); color:var(--ink-faint);
  max-width:var(--measure);
}
.fig--limite{ max-width:900px; }
.fig--par{
  display:grid; gap:var(--s-5);
  grid-template-columns:repeat(auto-fit, minmax(min(320px,100%), 1fr));
}
.fig--par figcaption{ grid-column:1 / -1; }

/* --- DESTAQUE DE CITACAO --------------------------------------------------- */
/* Sem regua colorida na lateral: a citacao se separa por corpo e recuo,
   que e o recurso tipografico proprio, nao um enfeite aplicado por cima. */
.cit{
  margin:var(--s-16) 0 0;
  max-width:58ch;
  padding-left:var(--s-10);
  position:relative;
}
.cit::before{
  content:"\201C";
  position:absolute; left:0; top:-.18em;
  font-size:4rem; line-height:1;
  color:var(--cor, var(--ink-faint));
}
.cit p{
  font-size:clamp(1.25rem,1.05rem+.85vw,1.625rem);
  line-height:1.35; letter-spacing:-.015em;
  color:var(--ink); text-wrap:pretty;
}
.cit footer{ margin-top:var(--s-3); font-size:var(--t-small); color:var(--ink-faint); }

/* --- QUEBRA DE RESULTADO --------------------------------------------------
   A conta dos R$ 80 mil, item a item. Numero alinhado a direita com
   tabular-nums para as colunas baterem.
   ------------------------------------------------------------------------ */
.conta{ max-width:640px; margin-top:var(--s-8); }
.conta__linha{
  display:flex; align-items:baseline; gap:var(--s-4);
  padding-block:var(--s-4);
  border-bottom:1px solid var(--on-anchor-rule);
}
.conta__linha dt{ flex:1; font-size:var(--t-small); color:var(--on-anchor-muted); }
.conta__linha dd{
  margin:0; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap;
}
.conta__linha--total{ border-bottom:0; border-top:2px solid var(--marca); padding-top:var(--s-5); }
.conta__linha--total dt{ color:var(--on-anchor); font-weight:700; font-size:var(--t-body); }
.conta__linha--total dd{ color:var(--marca); font-size:var(--t-h3); }

/* --- APRENDIZADOS ---------------------------------------------------------- */
.licoes{
  display:grid; gap:var(--s-8);
  grid-template-columns:repeat(auto-fit, minmax(min(280px,100%), 1fr));
}
.licao__t{ font-size:var(--t-h3); margin-bottom:var(--s-3); text-wrap:balance; }
.licao p{ color:var(--ink-muted); }

/* --- NAVEGACAO ENTRE CASES ------------------------------------------------- */
.proximo{ padding-block:var(--s-16); }
.proximo__link{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--s-5);
  text-decoration:none; padding:var(--s-8) 0;
  border-top:1px solid var(--on-anchor-rule);
  border-bottom:1px solid var(--on-anchor-rule);
}
.proximo__link{ transition:transform var(--d-fast) var(--ease-toque); }
.proximo__link:hover .proximo__nome,
.proximo__link:focus-visible .proximo__nome{ color:var(--marca); }
.proximo__link:active{ transform:translateY(1px); transition-duration:var(--d-press); }
.proximo__nome{ font-size:var(--t-h2); font-weight:700; letter-spacing:var(--tr-tight);
                transition:color var(--d-fast) var(--ease-toque); }

/* A seta avança junto com o nome: é o mesmo gesto do card de projeto na home,
   e repetir o mesmo sinal para a mesma ação é o que faz um sistema parecer um
   sistema. */
.proximo__nome::after{
  content:"→"; display:inline-block; margin-left:var(--s-3);
  transition:transform var(--d-normal) var(--ease-entra);
}
.proximo__link:hover .proximo__nome::after,
.proximo__link:focus-visible .proximo__nome::after{ transform:translateX(6px); }

@media (prefers-reduced-motion: reduce){
  .proximo__nome::after{ transition:none; }
}

/* --- RAZOES ---------------------------------------------------------------
   Lista numerada de causas, usada no case da Simples para explicar por que
   o negocio nao escalou. Numero grande na cor da fase, texto ao lado.
   ------------------------------------------------------------------------ */
.razoes{ counter-reset:r; display:grid; gap:var(--s-10); margin-top:var(--s-12); list-style:none; padding:0; }
.razoes li{
  counter-increment:r;
  display:grid; grid-template-columns:auto 1fr; gap:var(--s-5);
  align-items:start;
  max-width:var(--measure);
}
.razoes li::before{
  content:counter(r,decimal-leading-zero);
  font-size:var(--t-h3); font-weight:700; line-height:1;
  font-variant-numeric:tabular-nums;
  color:var(--cor-ink, var(--ink-faint));
  padding-top:2px;
}
.razoes h3{ font-size:var(--t-h3); margin-bottom:var(--s-3); text-wrap:balance; }
.razoes p{ color:var(--ink-muted); }
@media (max-width:520px){
  .razoes li{ grid-template-columns:1fr; gap:var(--s-3); }
}

/* --- GALERIA DE APLICACAO -------------------------------------------------
   Case da Expo Cacau: nao tem metrica atribuivel, entao a prova e a
   aplicacao da marca. Grade densa, legenda por peca.
   ------------------------------------------------------------------------ */
.galeria{
  display:grid; gap:var(--s-5);
  grid-template-columns:repeat(auto-fit, minmax(min(260px,100%), 1fr));
  margin-top:var(--s-12);
}
.galeria figure{ margin:0; }
.galeria img{
  width:100%; border-radius:var(--r-lg);
  border:1px solid var(--rule-strong);
  background:var(--card);
}
.galeria figcaption{ margin-top:var(--s-3); font-size:var(--t-small); color:var(--ink-faint); }
.galeria--larga{ grid-column:1 / -1; }

/* Aviso honesto: usado quando o case nao tem numero para mostrar. */
/* Superficie tingida em vez de regua colorida grossa. */
.semNumero{
  max-width:var(--measure);
  margin-top:var(--s-10);
  padding:var(--s-5) var(--s-6);
  background:var(--design-pastel);
  border:1px solid var(--design);
  border-radius:var(--r-md);
}
.semNumero p{ color:var(--ink); font-size:var(--t-small); }

/* --- ETAPA DO CICLO -------------------------------------------------------
   Estrutura exclusiva do case da ExpoCacau. Aqui a narrativa nao e a anatomia
   de 4 fases dos outros cases: e o ciclo do cacau, porque o argumento do case
   e que projeto de evento nao termina, recomeca. As cores de fase entram como
   marcadores de etapa, nao como classificacao de metodo.
   ------------------------------------------------------------------------ */
.etapa__marca{ display:flex; align-items:baseline; gap:var(--s-3); }
.etapa__n{
  font-size:var(--t-h3); font-weight:700; line-height:1;
  color:var(--cor-ink);
}
.etapa__marca .label{ color:var(--cor-ink); }

/* A epigrafe e a voz do produtor rural dentro do case. Fica em corpo maior e
   sem aspas: e uma frase de lavoura, nao uma citacao de terceiro. */
.etapa__epi{
  font-size:var(--t-lead);
  line-height:1.4;
  color:var(--ink);
  max-width:52ch;
  padding-top:var(--s-2);
}
.etapa__rot{ color:var(--ink-faint); margin-top:var(--s-4); }
.etapa__pq{
  margin-top:var(--s-5);
  padding-top:var(--s-5);
  border-top:1px solid var(--rule);
}
.etapa__pq .label{ display:block; color:var(--cor-ink); margin-bottom:var(--s-2); }

.escala{ max-width:56ch; margin-top:var(--s-10); color:var(--on-anchor-muted); }

/* --- ETAPAS CURTAS --------------------------------------------------------
   Poda, polinizacao e fermentacao nao geraram entregavel: geraram decisao.
   Por isso vem em bloco menor, sem lista de entrega.
   ------------------------------------------------------------------------ */
.curtas{
  display:grid; gap:var(--s-6);
  grid-template-columns:repeat(auto-fit, minmax(min(280px,100%), 1fr));
  margin-top:var(--s-10);
}
.curta{
  background:var(--card);
  border:1px solid var(--rule-strong);
  border-radius:var(--r-lg);
  padding:var(--s-6);
  display:grid; gap:var(--s-3); align-content:start;
}
.curta__topo{ display:flex; align-items:center; gap:var(--s-3); }
.curta__et{ font-weight:700; line-height:1.2; }
.curta__sub{ display:block; font-size:var(--t-label); letter-spacing:var(--tr-label);
             text-transform:uppercase; color:var(--ink-faint); font-weight:700; margin-top:2px; }
.curta__epi{ font-size:var(--t-small); color:var(--cor-ink); line-height:1.4; }
.curta__txt{ font-size:var(--t-small); color:var(--ink-muted); line-height:1.5; }

/* Ancora seguida de ancora: a emenda e invisivel, entao os dois respiros
   verticais se somam e viram um vazio de 200px no meio do escuro. */
.caseHero + .anchor.section{ padding-top:var(--s-10); }