/* ============================
   Bloco 3 — CSS compacto pronto para colar
   ============================ */

/* Variáveis (fácil de ajustar) */
:root{
  --bloco3-bg-card: #080808;
  --bloco3-border: #ffffff;
  --bloco3-text: #ffffff;
  --bloco3-text-muted: #ffffffbf;
  --bloco3-accent-1: #fe2b2b;
  --bloco3-accent-2: #2b8cff;
  --bloco3-accent-3: #00c37a;
  --bloco3-accent-4: #ffb84d;

  /* Valores reduzidos para visual mais compacto */
  --bloco3-max-width: 900px;   /* lista mais fina */
  --bloco3-gap: 16px;         /* gap entre ícone e conteúdo */
  --bloco3-radius: 12px;
  --bloco3-transition: 180ms ease;
  --bloco3-shadow: 0 6px 18px rgba(5,8,15,0.45);
  --bloco3-font-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* tipografia compacta */
  --bloco3-titulo-principal-size: 24px;
  --bloco3-titulo-projeto-size: 20px;
  --bloco3-descricao-size: 14px;
  --bloco3-periodo-size: 16px;
}

/* box-sizing global para consistência no escopo do bloco */
.bloco3-container,
.bloco3-container * ,
.bloco3-container *::before,
.bloco3-container *::after {
  box-sizing: border-box;
}

/* Container principal */
.bloco3-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 300px 16px; /* menor padding para ficar mais compacto */
  gap: 8px;
  position: relative;
  background: transparent;
}

/* largura centralizada mais fina */
.bloco3-secao{
  width: 100%;
  max-width: var(--bloco3-max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: stretch;
}

/* cabeçalho */
.bloco3-cabecalho{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.bloco3-icone-principal{
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.bloco3-titulo-principal{
  font-family: "Montserrat-Bold", var(--bloco3-font-sans);
  font-weight: 700;
  font-size: var(--bloco3-titulo-principal-size);
  line-height: 1;
  color: var(--bloco3-text);
  margin: 0;
  white-space: nowrap;
}

/* lista de projetos (ul) e cada item (li) */
.bloco3-lista-projetos{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px; /* reduzido para compactar verticalmente */
  align-items: center; /* centraliza a lista em largura menor */
}

/* cada item ocupa largura controlada (lista mais fina) */
.bloco3-item-projeto{
  width: 100%;
  max-width: calc(var(--bloco3-max-width) - 60px); /* mantém margem lateral */
}

/* card do projeto (article) */
.bloco3-projeto{
  display: flex;
  align-items: center;
  gap: var(--bloco3-gap);
  width: 100%;
  padding: 18px; /* reduzido de 28px para 18px */
  border-radius: var(--bloco3-radius);
  background-color: var(--bloco3-bg-card);
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform var(--bloco3-transition), box-shadow var(--bloco3-transition), border-color var(--bloco3-transition);
  position: relative;
  overflow: hidden;
}

/* hover / foco — leve elevação */
.bloco3-projeto:hover,
.bloco3-projeto:focus-within{
  transform: translateY(-4px);
  box-shadow: var(--bloco3-shadow);
  border-color: rgba(255,255,255,0.12);
  outline: none;
}

/* ícone do card (figure) — reduzido para visual compacto */
.bloco3-icone-card{
  width: 72px;
  height: 72px;
  min-width: 72px;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  flex-shrink: 0;
  background: transparent;
}

/* assegura que SVGs dentro fiquem responsivos e centrados */
.bloco3-icone-card .bloco3-icone-svg,
.bloco3-icone-card img,
.bloco3-icone-card svg{
  width: 48px;
  height: 48px;
  display: block;
}

/* conteúdo textual do projeto */
/* ALTERAÇÃO IMPORTANTE: agora é um flex-row para separar META (esq) e PERÍODO (dir) */
.bloco3-conteudo-projeto{
  display: flex;
  flex-direction: row;            /* linha: meta | periodo */
  justify-content: space-between;/* empurra o período para a direita */
  align-items: center;           /* alinha verticalmente */
  gap: 1rem;
  flex: 1 1 auto;
  min-width: 0; /* permitir truncamento */
}

/* Empilha título e descrição à esquerda */
.bloco3-meta-esquerda{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;          /* permite truncamento do texto */
  margin-right: 12px;
}

/* título do projeto (menor) */
.bloco3-titulo-projeto{
  font-family: "Montserrat-Bold", var(--bloco3-font-sans);
  font-weight: 700;
  font-size: var(--bloco3-titulo-projeto-size);
  line-height: 1.05;
  margin: 0;
  color: var(--bloco3-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;   /* evita quebra em linha única; remova se quiser wrap */
}

/* descrição do projeto (compacta) */
.bloco3-descricao-projeto{
  margin: 0;
  font-family: "Montserrat-Medium", var(--bloco3-font-sans);
  font-weight: 500;
  font-size: var(--bloco3-descricao-size);
  line-height: 1.2;
  color: var(--bloco3-text-muted);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;   /* remova se preferir quebra natural */
}

/* período/time do projeto — fixo à direita */
.bloco3-periodo-projeto{
  font-family: "Montserrat-MediumItalic", var(--bloco3-font-sans);
  font-weight: 500;
  font-style: italic;
  font-size: var(--bloco3-periodo-size);
  line-height: 1;
  color: var(--bloco3-text);
  margin: 0;
  white-space: nowrap;
  text-align: right;
  flex-shrink: 0; /* evita que encolha */
  min-width: 90px; /* largura mínima para consistência visual */
}

/* utilitários de acessibilidade (foco visível para teclado) */
.bloco3-projeto:focus-within,
.bloco3-item-projeto:focus-within{
  outline: 3px solid rgba(255,255,255,0.04);
  outline-offset: 6px;
}

/* Responsivo */
/* tablet / small desktop */
@media (max-width: 1024px){
  :root{
    --bloco3-max-width: 820px;
  }
  .bloco3-titulo-principal{
    font-size: 22px;
  }
  .bloco3-titulo-projeto{
    font-size: 18px;
  }
  .bloco3-periodo-projeto{
    font-size: 15px;
    min-width: 80px;
  }
  .bloco3-icone-card{
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
  }
  .bloco3-icone-card .bloco3-icone-svg,
  .bloco3-icone-card svg{
    width: 40px;
    height: 40px;
  }
}

/* mobile — empilha ícone sobre conteúdo e reduz espaçamentos */
@media (max-width: 720px){
  :root{
    --bloco3-gap: 12px;
    --bloco3-max-width: 640px;
  }

  .bloco3-secao{ padding: 0 8px; }

  .bloco3-lista-projetos{
    gap: 12px;
  }

  .bloco3-projeto{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
  }

  .bloco3-icone-card{
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
  }

  .bloco3-icone-card .bloco3-icone-svg,
  .bloco3-icone-card svg{
    width: 36px;
    height: 36px;
  }

  /* no mobile o período fica abaixo e alinhado à esquerda */
  .bloco3-conteudo-projeto{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .bloco3-meta-esquerda{
    margin-right: 0;
  }

  .bloco3-titulo-projeto{
    font-size: 18px;
    white-space: normal; /* permitir quebra em mobile */
  }

  .bloco3-descricao-projeto{
    font-size: 13px;
    line-height: 1.25;
    white-space: normal;
  }

  .bloco3-periodo-projeto{
    font-size: 14px;
    text-align: left;
    min-width: 0;
  }
}

/* pequenas melhorias visuais opcionais */
.bloco3-titulo-projeto + .bloco3-descricao-projeto{
  margin-top: 6px;
}