/* =============================================================================
   SemearIA: /projeto/ (a oficina) e /diario/<dia>/. Só classes com o prefixo
   da página (projeto-…). Porte dos padrões de Myths' Valley: números 2 × 2 no
   herói, cartões de dia, a lista de commits (.commits) e .dividido--rotulo.
   ============================================================================= */

/* algarismos alinhados (lining): na Cormorant o padrão é o antigo, e "0 finais" ou "CC0" viram "o" */
.projeto-heroi, .projeto-em-numeros, .projeto-diario, .projeto-como, .projeto-dados, .projeto-quem,
.projeto-dia, .projeto-dia-texto, .projeto-commits, .projeto-outros { font-variant-numeric: lining-nums; }

/* ---------- entrada da oficina: números 2 × 2 sobre o relevo ---------- */
.projeto-heroi__numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- carrosséis de cartões: sem controles quando só há uma página ---------- */
:is(.projeto-posts, .projeto-commits__lista):not(:has([data-carrossel-pagina] ~ [data-carrossel-pagina])) > .carrossel__controles { display: none; }
.projeto-posts .carrossel__pagina { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.projeto-posts--um .carrossel__pagina { grid-template-columns: minmax(0, 1fr); }

/* ---------- cartão de um dia do diário ---------- */
.projeto-post { display: flex; flex-direction: column; gap: clamp(8px, 1.3vh, 12px); }
.projeto-post__data { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 var(--fs-mini)/1.3 Cinzel, serif; letter-spacing: .16em; text-transform: uppercase; color: var(--ouro); }
.projeto-post__data::before { content: ''; width: 7px; height: 7px; flex: none; background: currentColor; clip-path: var(--losango); }
.projeto-post__titulo { margin: 0; font-size: calc(var(--fs-h3) * 1.22); }
.projeto-post__resumo { margin: 0; color: var(--texto-suave); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.projeto-post__marcos { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.projeto-post__marcos li { padding: 4px 9px; border: 1px solid var(--ouro-linha); font: 600 calc(var(--fs-mini) * .9)/1.25 Cinzel, serif; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.projeto-post__pe { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: clamp(10px, 1.6vh, 14px); border-top: 1px solid var(--ouro-linha); }
.projeto-post__commits { margin: 0; font: 600 var(--fs-mini)/1 Cinzel, serif; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave); font-variant-numeric: lining-nums tabular-nums; }
.projeto-post__commits b { margin-right: 4px; font-size: 1.6em; font-weight: 500; color: var(--ouro); }

/* ---------- em números: oito placas ---------- */
.projeto-numeros .numero__rotulo { text-wrap: balance; }

/* ---------- como trabalhamos ---------- */
.projeto-metodo { grid-auto-rows: 1fr; }
.projeto-metodo__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(14px, 1.6vw, 22px); align-items: start; }
.projeto-metodo__icone { width: clamp(30px, 2.6vw, 40px); height: auto; margin-top: 2px; stroke-width: 1.15; }
.projeto-metodo__item h3 { margin-bottom: 8px; }
.projeto-metodo__item p { margin: 0; color: var(--texto-suave); }
.projeto-metodo__nota { margin: clamp(16px, 3vh, 30px) 0 0; padding-top: 12px; border-top: 1px solid var(--ouro-linha); font-size: calc(var(--fs-corpo) * .92); }

/* ---------- dados abertos ---------- */
.projeto-dados__texto { max-width: 60ch; }
.projeto-dados__fontes { margin-top: clamp(12px, 2vh, 20px); }
.projeto-dados__lado { align-content: center; }
.projeto-creditos { padding-top: 12px; border-top: 1px solid var(--ouro-linha); font-size: calc(var(--fs-corpo) * .84); line-height: 1.45; color: var(--texto-suave); overflow-wrap: anywhere; }
.projeto-creditos p { margin: 0 0 .7em; }
.projeto-creditos p:last-child { margin-bottom: 0; }
.projeto-creditos a { color: inherit; text-decoration-color: var(--ouro-linha); }
.projeto-creditos a:hover { color: var(--ouro); }

/* ---------- quem faz ---------- */
.projeto-quem .cabeca { margin-bottom: clamp(12px, 2.2vh, 24px); }
.projeto-autores { margin: 0 0 clamp(16px, 3vh, 30px); }
.projeto-contato { margin: clamp(12px, 2.2vh, 20px) 0 0; color: var(--texto-suave); }
.projeto-contato a { color: var(--ouro); text-decoration-color: var(--ouro-linha); }
.projeto-contato a:hover { color: var(--ouro-claro); }
.projeto-equipe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); margin-bottom: clamp(16px, 3vh, 30px); }
.projeto-equipe > li { display: grid; align-content: start; gap: 2px; padding-block: clamp(7px, 1.2vh, 11px); }
.projeto-equipe > li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--ouro-linha); }
.projeto-equipe__nome { font: 600 var(--fs-placa)/1.3 Cinzel, serif; letter-spacing: .1em; text-transform: uppercase; color: var(--ouro); }
.projeto-equipe__papel { font-size: calc(var(--fs-corpo) * .92); line-height: 1.35; color: var(--texto-suave); }
.projeto-familia { grid-auto-rows: 1fr; }
.projeto-familia__item { display: flex; flex-direction: column; gap: 8px; }
.projeto-familia__item h3 { margin: 0; }
.projeto-familia__item p { margin: 0; }
.projeto-familia__item .link-ouro { margin-top: auto; padding-top: 6px; }

/* ---------- diário: o dia ---------- */
/* um número só: uma coluna também no celular (vence o .quadro .numeros de 2 colunas do layout.css) */
.quadro .projeto-dia__numeros { grid-template-columns: minmax(0, 1fr); max-width: 340px; margin-top: clamp(16px, 3vh, 30px); }
.projeto-dia__marcos { align-self: center; padding: clamp(18px, 3vh, 28px) clamp(20px, 2.2vw, 32px); border: 1px solid var(--ouro-linha); background: rgba(8, 20, 15, .55); }
.projeto-dia__marcos h4 { margin-bottom: clamp(10px, 1.8vh, 16px); }
.projeto-dia__marcos .lista-losangos { gap: clamp(8px, 1.4vh, 12px); font-size: calc(var(--fs-corpo) * 1.04); }
.projeto-dia-texto__corpo { font-size: calc(var(--fs-corpo) * 1.05); }
.projeto-dia-texto__corpo p:first-child { font-size: calc(var(--fs-corpo) * 1.2); line-height: 1.45; }
.projeto-dia-texto__corpo p:last-child { margin-bottom: 0; }

/* ---------- diário: commits, como uma linha do tempo do dia ---------- */
.projeto-commits__lista .carrossel__pagina { position: relative; grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 0; }
.projeto-commits__lista .carrossel__pagina::before { content: ''; position: absolute; left: 3px; top: 0; bottom: 0; width: 1px; background: linear-gradient(var(--ouro), var(--ouro-linha)); }
.projeto-commit { position: relative; display: grid; grid-template-columns: clamp(124px, 11vw, 160px) minmax(0, 1fr); align-items: baseline; gap: 2px clamp(14px, 2vw, 28px); padding: clamp(7px, 1.15vh, 11px) 0 clamp(7px, 1.15vh, 11px) 24px; border-bottom: 1px solid var(--ouro-linha); }
.projeto-commit::before { content: ''; position: absolute; left: 0; top: calc(clamp(7px, 1.15vh, 11px) + .52em); width: 7px; height: 7px; background: var(--ouro); clip-path: var(--losango); }
.projeto-commit__quando { display: flex; align-items: baseline; gap: 10px; margin: 0; font: 600 var(--fs-mini)/1.3 Cinzel, serif; letter-spacing: .14em; color: var(--ouro); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.projeto-commit__hash { font-weight: 500; letter-spacing: .1em; }
.projeto-commit__assunto { margin: 0; line-height: 1.35; }
.projeto-commits__nota { margin: clamp(10px, 1.8vh, 16px) 0 0; font-size: calc(var(--fs-corpo) * .9); }

/* ---------- diário: outros dias ---------- */
.projeto-outros__grade { align-items: center; }

/* =============================================================================
   Responsivo (os pontos de Myths' Valley). As regras de grade da página só
   valem no desktop largo; abaixo disso, layout.css empilha as colunas.
   ============================================================================= */
@media (min-width: 1121px) {
    .projeto-dia__heroi { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); }
}
/* entre 761 e 800 px o layout.css empilha as grades; os três cartões da família seguem lado a lado */
@media (min-width: 761px) and (max-width: 800px) {
    .quadro .projeto-familia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .quadro .projeto-posts .carrossel__pagina { grid-template-columns: minmax(0, 1fr); }
    .projeto-commit { grid-template-columns: minmax(0, 1fr); }
    .projeto-post__pe { flex-wrap: wrap; }
}