/* ---------------------------------------------------- */
/* VARIÁVEIS E BASE */
/* ---------------------------------------------------- */
:root {
  /* Fundo principal em cinza suave para destacar os módulos brancos */
  --background-color: #f4f4f5;
  --text-primary: #18181b;
  --text-secondary: #52525b;
  --primary-color: #205c6d;
  /* Dark Teal (Destaque) */
  --light-bg: #ffffff;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Inter", sans-serif;
  background-color: var(--background-color);
  color: var(--text-primary);
  overflow-x: hidden;
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------------------------------------------------- */
/* 1. TIMELINE/ÍNDICE */
/* ---------------------------------------------------- */

/* ===== TIMELINE ===== */
.timeline {
  width: 100%;
  max-width: 1000px;

  margin: 0 auto;
  padding: 50px;
  text-align: center;
}

.titulo-secao-timeline {
  width: 100%;
  max-width: 1000px;
  margin: 50px auto 0;
  padding-top: 50px;

  text-align: center;
  text-transform: uppercase;

  font-family: "Zilla Slab", serif;
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--primary-color);
}

@media (max-width: 768px) {
  .titulo-secao-timeline {
    font-size: clamp(1.8rem, 5vw, 2.2rem);
  }
}

.timeline-label {
  margin-top: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
}

.timeline h2 {
  font-family: "Zilla Slab", serif;
  font-size: 2.2rem;
  /* margin-bottom: 40px; */
  color: var(--primary-color);
  font-weight: 600;
  text-transform: uppercase;
}

.timeline-container {
  display: flex;
  justify-content: center;
  gap: 12px;

  justify-content: space-around;

  max-width: 1200px;
  margin: auto;
  position: relative;
  /* IMPORTANTE */
}

/* linha da timeline */

.timeline-container::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  height: 2px;
  /* background: #d1d5db; */
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 95, 115, 0.4),
    rgba(0, 95, 115, 0.4),
    transparent
  );
  z-index: 0;
}

.timeline-item {
  text-align: center;
}

.timeline-item a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color 0.3s;
}

.timeline-item .dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #004f5f;
  margin: 0 auto 10px;
  display: inline-block;
  transition: all 0.2s ease;

  position: relative;
  z-index: 1;

  box-shadow: 0 0 0 6px rgba(0, 95, 115, 0.08);
}

.timeline-item .dot:hover {
  background-color: #008c95;
  transform: scale(1.15);
  box-shadow:
    0 0 0 3px #f1f4f6,
    /* anel interno igual ao fundo da timeline */ 0 0 0 6px #00aeb4;
  /* anel externo */
}

@media (max-width: 768px) {
  .timeline {
    padding: 15px 0;
  }

  .timeline-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 8px;
  }

  .timeline-item {
    flex: 0 0 auto;
  }

  .timeline-item a {
    font-size: 0.6rem;
  }

  .timeline-item .dot {
    width: 8px;
    height: 8px;
    margin-bottom: 2px;
    box-shadow: none;
  }

  .timeline-label {
    font-size: 0.6rem;
    margin-top: 2px;
  }
}

/* ---------------------------------------------------- */
/* 2. PROJETOS (LAYOUT DE REVISTA COMPLEXO - CORRIGIDO PARA 6) */
/* ---------------------------------------------------- */

.projects-grid {
  max-width: 1200px;
  margin: 10px auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: 20px;
  /* grid-auto-rows: 250px; */
  grid-template-areas:
    "p1-img  p1-info  p2-img  p2-info"
    /* "p1-img  p1-img  p2-info  p2-img" */
    "p3-info p3-img  p5-info  p5-img"
    "p4-img  p4-info p6-img   p6-info";
}

.project-module {
  background: var(--light-bg);
  border-radius: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  padding: 25px;
  overflow: hidden;
  position: relative;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  display: flex;
  /* Garante que o conteúdo interno se alinhe */
  flex-direction: column;
  justify-content: space-between;
}

/* Estilos de Conteúdo */
.project-module h3 {
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 10px 0;
  font-weight: 700;
  line-height: 1.3;
}

.project-module p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Estilos para Módulos de Imagem */
.image-module {
  padding: 0;
}

.image-module img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* ---------------------------------------------------- */
/* POSICIONAMENTO E TAMANHOS ESPECÍFICOS NO GRID
/* ---------------------------------------------------- */

.p1-img {
  grid-area: p1-img;
}

.p1-info {
  grid-area: p1-info;
}

.p2-img {
  grid-area: p2-img;
}

.p2-info {
  grid-area: p2-info;
}

.p3-info {
  grid-area: p3-info;
}

.p3-img {
  grid-area: p3-img;
}

.p4-img {
  grid-area: p4-img;
}

.p4-info {
  grid-area: p4-info;
}

.p5-info {
  grid-area: p5-info;
}

.p5-img {
  grid-area: p5-img;
}

.p6-img {
  grid-area: p6-img;
}

.p6-info {
  grid-area: p6-info;
}

/* Overlay de Número (Gigante) */
.project-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 15rem;
  font-weight: 900;
  color: var(--primary-color);
  opacity: 0.05;
  pointer-events: none;
  line-height: 1;
  z-index: 10;
}

/* Estilo para Título e Botão (para que não fiquem atrás do número grande) */
.info-content {
  position: relative;
  z-index: 11;
}

/* ---------------------------------------------------- */
/* RESPONSIVIDADE (Ajustes para Mobile/Tablet) */
/* ---------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);

    grid-template-areas:
      "p1-img  p1-info"
      "p2-img  p2-info"
      "p3-img  p3-info"
      "p4-img  p4-info"
      "p5-img  p5-info"
      "p6-img  p6-info";
  }

  /* No tablet, todos os módulos voltam a ter a mesma largura (1 coluna) */
  .project-module {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    padding: 25px;
  }

  /* Todos os módulos de imagem voltam a ter padding 0 e altura fixa */
  .image-module {
    height: 250px;
    padding: 0;
  }
}

@media (min-width: 0px) and (max-width: 767px) {
  .projects-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    grid-template-areas:
      "p1-img"
      "p1-info"
      "p2-img"
      "p2-info"
      "p3-img"
      "p3-info"
      "p4-img"
      "p4-info"
      "p5-img"
      "p5-info"
      "p6-img"
      "p6-info";
  }

  @media (max-width: 768px) {
    .timeline-container {
      flex-wrap: nowrap;
      justify-content: space-between;
      gap: 0;
    }

    .timeline-item {
      flex: 1;
    }

    .timeline-item .dot {
      width: 8px;
      height: 8px;
      margin-bottom: 2px;
      box-shadow: none;
    }

    .timeline-label {
      font-size: 0.6rem;
      margin-top: 2px;
    }
  }
}