/* =========================================================================
   ALENTHEX — Trabalhos (/blog) e a faixa "Últimos trabalhos" da página
   inicial. Usa as fichas de cor do style.css.
   ========================================================================= */

/* O cabeçalho é fixo: nas páginas do blog o conteúdo começa abaixo dele. */
.pagina-blog main { padding-top: 72px; }
.blog { padding-top: clamp(48px, 7vw, 88px); }
.area--estreita { max-width: 880px; }

.aviso-admin {
  background: var(--verde-ténue);
  border-bottom: 1px solid var(--verde-linha);
  padding: .6rem 0;
  font-size: .9rem;
  color: var(--cinza);
}
.aviso-admin a { color: var(--verde); font-weight: 600; }

/* ---------- Cartões ---------- */
.trabalhos-grelha {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 24px;
}

.cartao-trabalho {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: linear-gradient(160deg, var(--preto-alto), var(--preto-carta));
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  transition: transform var(--transicao), border-color var(--transicao), box-shadow var(--transicao);
}
.cartao-trabalho:hover,
.cartao-trabalho:focus-visible {
  transform: translateY(-4px);
  border-color: var(--verde-linha);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .5), 0 0 0 1px var(--verde-ténue);
}

.cartao-trabalho__foto {
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(circle at 30% 30%, var(--verde-ténue), transparent 60%),
    var(--preto-fundo);
  overflow: hidden;
}
.cartao-trabalho__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.cartao-trabalho:hover .cartao-trabalho__foto img { transform: scale(1.04); }

.cartao-trabalho__corpo { padding: 18px 20px 22px; display: grid; gap: .4rem; }
.cartao-trabalho__categoria {
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--verde);
  font-weight: 600;
}
.cartao-trabalho__titulo { font-size: 1.15rem; line-height: 1.25; overflow-wrap: anywhere; }
.cartao-trabalho__meta { color: var(--cinza); font-size: .88rem; }

/* ---------- Lista ---------- */
.filtros {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin: -1rem 0 clamp(32px, 5vw, 48px);
}
.filtro {
  padding: .45rem 1rem;
  border: 1px solid var(--linha);
  border-radius: 999px;
  font-size: .86rem;
  color: var(--cinza);
  transition: color var(--transicao), border-color var(--transicao);
}
.filtro:hover { color: var(--branco); border-color: var(--verde-linha); }
.filtro--ativo { color: #04140C; background: var(--verde); border-color: var(--verde); font-weight: 600; }
.filtro--ativo:hover { color: #04140C; }

.blog__vazio { text-align: center; color: var(--cinza); }

.paginacao {
  margin-top: clamp(36px, 5vw, 56px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.paginacao__estado { color: var(--cinza); font-size: .9rem; }

/* ---------- Página de um trabalho ---------- */
.trabalho__rascunho {
  margin-bottom: 1.5rem;
  padding: .8rem 1rem;
  border: 1px dashed var(--verde-linha);
  border-radius: var(--raio-pequeno);
  color: var(--verde);
  font-size: .92rem;
}
.trabalho__voltar { color: var(--cinza); font-size: .92rem; transition: color var(--transicao); }
.trabalho__voltar:hover { color: var(--verde); }

.trabalho__cabecalho { margin: 1.6rem 0 2rem; }
.trabalho__titulo { font-size: clamp(1.8rem, 4.4vw, 2.8rem); overflow-wrap: anywhere; }
.trabalho__meta {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  color: var(--cinza);
}
.trabalho__meta span { color: var(--branco); font-weight: 600; }

.galeria {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.galeria__foto {
  border-radius: var(--raio-pequeno);
  overflow: hidden;
  background: var(--preto-fundo);
  border: 1px solid var(--linha);
  aspect-ratio: 4 / 3;
}
.galeria__foto img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--transicao); }
.galeria__foto:hover img { opacity: .85; }
/* A capa ocupa a largura toda e mostra-se inteira, sem cortes. */
.galeria__foto--capa { grid-column: 1 / -1; aspect-ratio: auto; }
.galeria__foto--capa img { height: auto; max-height: 72vh; object-fit: contain; margin-inline: auto; }

.trabalho__texto {
  margin-top: 2.4rem;
  display: grid;
  gap: 1.1rem;
  font-size: 1.06rem;
  line-height: 1.75;
  color: #D7DDDA;
  max-width: 68ch;
}

.trabalho__cta {
  margin-top: clamp(40px, 6vw, 64px);
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--verde-ténue);
  border-radius: var(--raio);
  background: linear-gradient(160deg, var(--preto-alto), var(--preto-carta));
  display: grid;
  gap: .6rem;
  justify-items: start;
}
.trabalho__cta-titulo { font-size: 1.3rem; font-weight: 700; text-transform: uppercase; }
.trabalho__cta-texto { color: var(--cinza); margin-bottom: .6rem; }

/* ---------- Faixa da página inicial ---------- */
.seccao--trabalhos { background: var(--preto-fundo); }
.trabalhos__mais { margin-top: clamp(32px, 5vw, 48px); text-align: center; }

/* Com o item "Trabalhos" o menu ficou mais comprido: entre 861 e 1100 px o
   botão de email do cabeçalho mostra só o ícone, para caber tudo. */
@media (max-width: 1100px) {
  .cabecalho__acoes .botao span { display: none; }
  .cabecalho__acoes .botao--pequeno { padding: .7rem .85rem; }
}

@media (max-width: 720px) {
  .galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trabalho__cta .botao { width: 100%; }
}