/**
* Customizações ByteForgeIT — carregado DEPOIS de main.css.
* Mantenha as alterações próprias aqui para que o template original
* (assets/css/main.css) continue substituível sem perder este trabalho.
*/

/*--------------------------------------------------------------
# Header — separação do conteúdo
--------------------------------------------------------------*/

/* O header é branco e a primeira seção também: sem linha, os dois se fundem e
   a barra some — principalmente na index, onde não há a faixa cinza do título
   de página logo abaixo. Como ele é sticky, a borda ainda marca o limite entre
   a barra e o conteúdo que passa por baixo dela na rolagem.

   Um pouco mais forte que as linhas internas do site (as capas do portfólio
   usam 90% transparente): aqui a borda precisa ser lida como estrutura da
   página, não como acabamento de um card. */
.header {
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 82%);
}

/*--------------------------------------------------------------
# Header — marca em imagem
--------------------------------------------------------------*/

/* O nome do site passou a ser o wordmark (cubo + ByteForgeIT). O <h1> continua
   ali envolvendo a imagem: mantém a hierarquia do documento e dá à marca um
   nome acessível pelo alt, sem texto duplicado para o leitor de tela.

   O template dimensiona o logo em max-height: 32px, medida pensada para um
   ícone quadrado ao lado do nome escrito. Aqui a imagem é o nome inteiro, num
   formato bem mais largo (4,3:1), e nessa altura a palavra ficava menor que o
   menu. O line-height zerado remove o espaço que o <h1> reservava para texto
   que não existe mais e realinha a marca ao centro do header. */
.header .logo h1.sitename {
  display: flex;
  line-height: 0;
}

.header .logo img {
  max-height: none;
  height: 38px;
  width: auto;
  margin-right: 0;
}

@media (max-width: 575px) {
  .header .logo img {
    height: 30px;
  }
}

/*--------------------------------------------------------------
# Portfólio — abertura da seção
--------------------------------------------------------------*/

/* A introdução usava a classe .portfolio-info, que no template é a legenda
   sobre a capa: herdava 24px e o peso 500 do reboot do Bootstrap, ficando menor
   e mais fraca que o nome de cada projeto (32px/700) — mesma família, mas com
   cara de fonte diferente.

   Aqui ela adota o padrão de título de seção que o resto do site já usa
   (.section-title h2 do main.css: 32px, peso 400), só sem a centralização, que
   não cabe numa saudação. E virou <h2>, dando hierarquia real ao documento:
   h1 (marca) > h2 (abertura) > h3 (projeto) > h4 (legenda da capa). */
.portfolio .portfolio-intro {
  margin-bottom: 10px;
}

.portfolio .portfolio-intro h2 {
  color: var(--heading-color);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 12px;
}

.portfolio .portfolio-intro p {
  color: color-mix(in srgb, var(--default-color), transparent 22%);
  font-size: 16px;
  line-height: 1.7;
  max-width: 68ch;
  margin-bottom: 0;
}

@media (max-width: 575px) {
  .portfolio .portfolio-intro h2 {
    font-size: 26px;
  }
}

/*--------------------------------------------------------------
# Portfólio — capas com moldura uniforme
--------------------------------------------------------------*/

/* O template deixava o tamanho do card à mercê das dimensões nativas de cada
   arquivo. Fixando a proporção aqui, qualquer imagem — screenshot largo, foto
   vertical, seja qual for — ocupa exatamente o mesmo espaço na grade. */
.portfolio .portfolio-content img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

/*--------------------------------------------------------------
# Portfólio — projetos agrupados (nome + 3 imagens por linha)
--------------------------------------------------------------*/

.portfolio .portfolio-project {
  margin-top: 40px;
}

.portfolio .portfolio-project+.portfolio-project {
  margin-top: 55px;
  padding-top: 45px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
}

.portfolio .portfolio-project-header {
  margin-bottom: 22px;
}

/* Título de bloco, não de seção: segue o idioma do template para itens dentro
   de uma seção — bold 700 e menor que a abertura (32px/400), como os títulos
   dos serviços (22px/700). Ficar do mesmo tamanho da abertura, e mais pesado
   que ela, era o que apagava a hierarquia entre as duas. */
.portfolio .portfolio-project-header h3 {
  color: var(--heading-color);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 10px;
}

.portfolio .portfolio-project-header p {
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  font-size: 15px;
  max-width: 820px;
  margin-bottom: 0;
}

/* Projeto ainda sem material real. O selo precisa ser lido junto com o
   título — sem ele, o visitante interpreta o placeholder como entrega. */
.portfolio .portfolio-project-header h3 .em-breve {
  display: inline-block;
  vertical-align: middle;
  margin-left: 12px;
  padding: 4px 12px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 75%);
  border-radius: 999px;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Sem lightbox nem hover informativo enquanto for placeholder: aproximar
   uma imagem vazia não entrega nada e frustra o clique. */
.portfolio .portfolio-project--em-breve .portfolio-content:hover img {
  transform: none;
}

@media (max-width: 575px) {
  .portfolio .portfolio-project-header h3 {
    font-size: 22px;
  }
}

/* As capas do template ficavam como retângulos secos sobre fundo branco, sem
   definição de borda. O raio e a linha dão acabamento sem competir com a arte. */
.portfolio .portfolio-content {
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

/*--------------------------------------------------------------
# Portfólio — legenda sobre a capa (estado hover)
--------------------------------------------------------------*/

/* O overlay do template (preto a 60%) foi pensado para fotos. Sobre
   screenshots de interface — escuras e cheias de texto miúdo — a legenda
   competia com o conteúdo da própria imagem. Escurecer sozinho não bastava:
   o blur é o que apaga o texto de fundo e devolve a leitura. */
.portfolio .portfolio-content .portfolio-info {
  background: rgba(0, 0, 0, 0.82);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  padding: 22px;
}

.portfolio .portfolio-content .portfolio-info h4 {
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 8px;
}

.portfolio .portfolio-content .portfolio-info p {
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.5;
  max-width: 30ch;
  margin-bottom: 14px;
}

/*--------------------------------------------------------------
# Serviços — convite para demandas fora da lista
--------------------------------------------------------------*/

/* Fundo levemente tingido em vez de branco sobre branco: sem isso a caixa
   não se destaca da seção e o convite passa despercebido. */
.services .cta-demanda {
  margin-top: 50px;
  padding: 40px 32px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 86%);
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  text-align: center;
}

.services .cta-demanda h3 {
  color: var(--heading-color);
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 14px;
}

.services .cta-demanda p {
  color: color-mix(in srgb, var(--default-color), transparent 22%);
  font-size: 15px;
  line-height: 1.7;
  max-width: 68ch;
  margin: 0 auto 26px;
}

.services .cta-demanda .cta-demanda-botao {
  display: inline-block;
  padding: 12px 34px;
  border-radius: 50px;
  background: var(--accent-color);
  color: var(--contrast-color);
  text-decoration: none;
  transition: 0.4s;
}

.services .cta-demanda .cta-demanda-botao:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

@media (max-width: 575px) {
  .services .cta-demanda {
    padding: 30px 22px;
  }

  .services .cta-demanda h3 {
    font-size: 20px;
  }
}