/* ============================================================================
   DESIGN SYSTEM GABRIEL AMARAL · COMPONENTES
   Button · Card · PhaseIcon · DotList · Bento · Stat
   Depende de tokens.css e base.css.
   ========================================================================= */

/* --- BUTTON --------------------------------------------------------------
   Alvo de toque minimo de 44px de altura em todas as variantes (WCAG 2.5.8).
   ------------------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  min-height:44px; padding:12px var(--s-5);
  font-size:var(--t-label); font-weight:700;
  letter-spacing:var(--tr-label); text-transform:uppercase;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  border:1px solid var(--ink); border-radius:var(--r-md);
  background:transparent; color:var(--ink);
  transition:transform var(--d-fast) var(--ease),
             background var(--d-fast) var(--ease),
             color var(--d-fast) var(--ease),
             border-color var(--d-fast) var(--ease);
}
/* Hover levanta, PRESSÃO afunda. Antes o :active só desfazia o hover, então
   clicar não devolvia nada: o botão ficava parado no lugar onde já estava.
   Descer é mais rápido que voltar, como num botão físico. */
.btn{ will-change:auto; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{
  transform:translateY(0) scale(.975);
  transition-duration:var(--d-press);
}

.btn--primary{ background:var(--ink); color:var(--paper); }
.btn--primary:hover{ background:#000; border-color:#000; }

.btn--ghost{ border-color:var(--rule-strong); color:var(--ink-muted); }
.btn--ghost:hover{ border-color:var(--ink); color:var(--ink); }

/* REGRA 5: o amarelo da marca so vive dentro da ancora escura.
   #232323 sobre #FFCC00 = 10,39:1. O mesmo botao no papel daria 1,28:1. */
.btn--marca{ background:var(--marca); color:#232323; border-color:var(--marca); }
.btn--marca:hover{ background:#FFD633; border-color:#FFD633; }

.btn--lg{ min-height:52px; padding:16px var(--s-8); font-size:.8125rem; }

/* --- CARD ----------------------------------------------------------------
   O card so tem 1,18:1 contra o papel: e a BORDA que o delimita, nunca o
   fundo sozinho. Por isso --rule-strong e nao uma hairline clara.
   ------------------------------------------------------------------------ */
.card{
  background:var(--card);
  border:1px solid var(--rule-strong);
  border-radius:var(--r-lg);
  padding:var(--s-6);
}

/* Card de fase: mesma anatomia dos cards dos diagramas do FLUXO, com a
   borda na cor solida da fase. REGRA 1, o solido delimita e nao escreve. */
.card--fase{ border-color:var(--cor, var(--rule-strong)); border-width:1.5px; }

/* Card com fundo pastel. REGRA 2: o texto por cima e sempre --ink. */
.card--pastel{
  background:var(--cor-pastel, var(--paper));
  border-color:var(--cor, var(--rule-strong));
  color:var(--ink);
}

.card--flat{ background:transparent; border:0; padding:0; }

/* --- PHASE ICON ----------------------------------------------------------
   Duas camadas, como nos diagramas: um blob pastel atras e o glifo solido
   a frente. Os SVGs foram normalizados para currentColor, entao a mesma
   copia serve claro e escuro; a cor vem do escopo [data-fase].
   ------------------------------------------------------------------------ */
.phase-icon{
  position:relative;
  display:grid; place-items:center;
  width:var(--icon-size, 72px); aspect-ratio:1;
  flex:none;
}
.phase-icon__blob,
.phase-icon__glyph{ grid-area:1 / 1; }

.phase-icon__blob{
  width:100%; height:auto;
  color:var(--cor-pastel);
}
.phase-icon__glyph{
  width:46%; height:auto;
  color:var(--cor);
}

/* Na ancora escura o blob pastel viraria uma mancha clara forte demais.
   Ali o glifo assume o pastel e o blob recua para um veu translucido. */
.anchor .phase-icon__blob{ color:var(--cor); opacity:.28; }
.anchor .phase-icon__glyph{ color:var(--cor-pastel); }

.phase-icon--sm{ --icon-size:48px; }
.phase-icon--lg{ --icon-size:96px; }

/* --- DOT LIST ------------------------------------------------------------
   A lista com bolinha colorida do ROTEIRO. A bolinha e o solido cumprindo
   a REGRA 1: marca sem escrever.
   ------------------------------------------------------------------------ */
.dot-list{ display:grid; gap:var(--s-3); }

/* Bullet posicionado, nao coluna de grid: num grid cada ELEMENTO filho vira
   item proprio, entao um <code> ou <strong> dentro do item seria jogado para
   a linha seguinte. Com o li como bloco normal, todo conteudo inline flui. */
.dot-list li{
  position:relative;
  padding-left:20px;
  line-height:1.45;
}
.dot-list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:7px; height:7px; border-radius:var(--r-full);
  background:var(--cor, var(--ink));
}

/* --- STAT ----------------------------------------------------------------
   Numero de resultado com rotulo. O rotulo e obrigatorio: numero sozinho
   nao informa, e cor nunca informa sozinha.
   ------------------------------------------------------------------------ */
.stat-block{ display:grid; gap:var(--s-2); }
.stat-block__value{
  font-size:var(--t-stat); font-weight:700; line-height:1;
  letter-spacing:var(--tr-tight); font-variant-numeric:tabular-nums;
}
.stat-block__label{
  font-size:var(--t-small); color:var(--ink-muted); line-height:1.35; text-wrap:pretty;
}

.stat-row{
  display:grid; gap:var(--s-8);
  grid-template-columns:repeat(auto-fit, minmax(min(240px,100%), 1fr));
}
/* "R$ 80 mil" a 64px nao cabe numa coluna de 250px e quebrava no meio.
   O valor e curto por natureza: melhor reduzir o corpo do que parti-lo. */
.stat-block__value{ text-wrap:nowrap; }
@media (max-width:420px){ .stat-block__value{ text-wrap:balance; } }

/* --- BENTO GRID ----------------------------------------------------------
   Mobile: uma coluna. >=760px: 6 colunas, o destaque ocupa 4 e os menores 2.
   ------------------------------------------------------------------------ */
.bento{ display:grid; gap:var(--s-4); grid-template-columns:1fr; }

@media (min-width:760px){
  .bento{ grid-template-columns:repeat(6,1fr); gap:var(--s-5); }
  .bento__item{ grid-column:span 3; }
  .bento__item--lg{ grid-column:span 6; }
}
@media (min-width:1040px){
  /* A base vem ANTES da variante: mesma especificidade, quem vier por ultimo
     vence. Com --lg em cima, .bento__item sobrescrevia o destaque. */
  .bento__item{ grid-column:span 3; }
  .bento__item--lg{ grid-column:span 6; }
}

/* --- PROJECT CARD --------------------------------------------------------
   O card inteiro e clicavel, mas o link real envolve so o titulo: o
   ::after estendido cobre o card. Assim o leitor de tela anuncia um link
   com nome util e nao "link, imagem".
   ------------------------------------------------------------------------ */
.project{
  position:relative; display:flex; flex-direction:column;
  overflow:hidden; padding:0;
  transition:transform var(--d-normal) var(--ease),
             box-shadow var(--d-normal) var(--ease);
}
.project:has(a:hover),
.project:has(a:focus-visible){ transform:translateY(-4px); box-shadow:var(--shadow-lg); }

/* O card inteiro é o alvo do clique, então ele inteiro responde ao toque. */
.project:has(a:active){
  transform:translateY(-1px) scale(.995);
  transition-duration:var(--d-press);
}

/* A imagem acompanha o card com um avanço próprio: o conjunto ganha
   profundidade sem que nada além de transform se mexa. */
.project__media img{
  transition:transform var(--d-slow) var(--ease-entra);
}
.project:has(a:hover) .project__media img{ transform:scale(1.035); }

.project__media{ aspect-ratio:16/10; overflow:hidden; background:var(--paper); }
/* <picture> e display:inline por padrao. Sem isto o height:100% do <img> nao
   tem contra o que resolver e a imagem nao preenche o card alto do bento. */
.project__media picture{ display:contents; }
.project__media img{ width:100%; height:100%; object-fit:cover; }

.project__body{ display:grid; gap:var(--s-3); padding:var(--s-6); }
.project__role{ color:var(--ink-faint); }
.project__title{ font-size:var(--t-h3); }
.project__title a{ text-decoration:none; }
.project__title a::after{ content:""; position:absolute; inset:0; }

/* O link cobre o card inteiro pelo ::after, entao o anel de foco tem que
   contornar o CARD e nao so as letras do titulo. Sem isto o usuario de
   teclado ve um retangulo de 90px no meio de um card de 500px. */
.project:has(a:focus-visible){ outline:3px solid var(--ink); outline-offset:3px; }
.project a:focus-visible{ outline:none; }
.project{ cursor:pointer; }

/* --- CARD DE DESTAQUE ----------------------------------------------------
   Precisa vir DEPOIS das regras de .project: as duas tem a mesma
   especificidade, entao quem estiver por ultimo no arquivo vence. Enquanto
   isto morava na secao do bento, o flex-direction:column de .project
   sobrescrevia o row e o card nunca deitava.

   Deitado e nao alto de proposito: todas as capas sao landscape, e num slot
   retrato o object-fit:cover ampliava a ponto de o mockup perder o
   enquadramento.
   ------------------------------------------------------------------------ */
@media (min-width:1040px){
  .project--lg{ flex-direction:row; align-items:stretch; }
  .project--lg .project__media{ flex:1 1 58%; aspect-ratio:auto; min-height:400px; }
  .project--lg .project__body{ flex:1 1 42%; justify-content:center; padding:var(--s-10); }
  .project--lg .project__title{ font-size:var(--t-h2); }
}

/* A linha de impacto: o unico lugar do card onde entra numero. */
.project__impact{
  display:inline-flex; align-items:center; gap:var(--s-2);
  margin-top:auto; padding-top:var(--s-4);   /* ancora no rodape do card */
  font-weight:700; color:var(--cor-ink, var(--ink));
}
.project__impact::before{
  content:""; width:18px; height:2px; flex:none;
  background:var(--cor, var(--ink));
}

/* --- SECTION HEAD --------------------------------------------------------- */
.section-head{ display:grid; gap:var(--s-4); margin-bottom:var(--s-12); max-width:var(--measure); }
.section-head .label{ color:var(--ink-faint); }

/* --- RULE ----------------------------------------------------------------- */
.rule{ height:1px; background:var(--rule); border:0; margin:0; }

/* --- RODAPE --------------------------------------------------------------- */
.rodape{ padding-bottom:var(--s-12); }
.rodape .rule{ background:var(--on-anchor-rule); }
.rodape__row{
  display:flex; flex-wrap:wrap; gap:var(--s-8);
  align-items:center; justify-content:space-between;
  padding-block:var(--s-12);
}
.rodape__chamada{ font-size:var(--t-h3); font-weight:700; letter-spacing:var(--tr-tight); }
.rodape__links{ display:flex; flex-wrap:wrap; gap:var(--s-6); }
.rodape__links a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:var(--t-small); color:var(--on-anchor-muted);
  text-decoration:none; border-bottom:1px solid var(--on-anchor-rule);
}
.rodape__links a{ transition:color var(--d-fast) var(--ease-toque),
                             border-color var(--d-fast) var(--ease-toque),
                             transform var(--d-fast) var(--ease-toque); }
.rodape__links a:hover{ color:var(--on-anchor); border-bottom-color:var(--marca); }
.rodape__links a:active{ transform:translateY(1px); transition-duration:var(--d-press); }
.rodape__fim{ padding-top:var(--s-6); border-top:1px solid var(--on-anchor-rule); }

/* --- TOPO ----------------------------------------------------------------
   Compartilhado por index e paginas de case. Estava duplicado nos dois CSS,
   e a copia do case nao tinha as regras responsivas: em 320px o botao
   "Todos os cases" somado a marca estourava a largura da tela.
   ------------------------------------------------------------------------ */
.topo{ position:sticky; top:0; z-index:50; }
.topo__row{ display:flex; align-items:center; gap:var(--s-4); min-height:64px; }

.topo__marca{
  display:inline-flex; align-items:center; gap:var(--s-3);
  min-height:44px; min-width:44px;    /* alvo de toque, WCAG 2.5.8 */
  font-weight:700; text-decoration:none; white-space:nowrap;
}
.topo__marca img{ border-radius:var(--r-full); }

.topo__cta{ margin-left:auto; flex:none; }

@media (max-width:420px){
  /* Só a espiral aparece, para o CTA não ser espremido. Mas o nome NÃO pode
     sair do DOM: com display:none o link ficava sem nome nenhum, já que a
     imagem é decorativa (alt vazio e aria-hidden). Um leitor de tela
     anunciava apenas "link". */
  .topo__marca span{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  .topo__cta{ padding-inline:var(--s-4); }
}


/* --- CHAMADA DO CARD ------------------------------------------------------
   O card inteiro e clicavel pelo ::after do titulo, mas nada dizia isso antes
   do hover, e hover nao existe no celular. A seta desliza no hover e no foco;
   aria-hidden porque o link ja tem nome acessivel no titulo, e repetir criaria
   um segundo rotulo para o mesmo destino.
   ------------------------------------------------------------------------ */
.project__ir{
  margin-top:var(--s-4);
  font-size:var(--t-label); font-weight:700;
  letter-spacing:var(--tr-label); text-transform:uppercase;
  color:var(--ink-faint);
  display:inline-flex; align-items:center; gap:var(--s-2);
  transition:color var(--d-fast) var(--ease);
}
.project__ir::after{
  content:"→";
  transition:transform var(--d-normal) var(--ease);
}
.project:has(a:hover) .project__ir,
.project:has(a:focus-visible) .project__ir{ color:var(--cor-ink, var(--ink)); }
.project:has(a:hover) .project__ir::after,
.project:has(a:focus-visible) .project__ir::after{ transform:translateX(5px); }

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