.oasis-projects {
  position: relative;
  background: var(--oasis-white);
}

.oasis-projects__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 42px);
  align-items: start;
}

.oasis-project {
  position: relative;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /*
   * Espaçamento superior reservado para a altura do semi-círculo.
   * 108px (em vez de 85px) dá espaço a 3 linhas de texto no rótulo
   * mais longo ("ENGENHARIA PARA TODOS (EPT)") sem transbordar para
   * cima da caixa -- era isso que fazia esse círculo parecer mais
   * alto/desalinhado dos outros 3.
   */
  padding-top: 108px;
}

/*
  O card inteiro (donut + foto) é um link -- este wrapper existe só
  para não quebrar o layout/posicionamento absoluto do donut, que
  continua a resolver-se contra .oasis-project (o <a> não tem
  position definido, por isso é "invisível" para esse cálculo).
*/
.oasis-project__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Header que contém o Donut, posicionado de forma absoluta no topo do artigo */
.oasis-project__header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 160px; /* ver nota acima em .oasis-project */
  display: flex;
  justify-content: center;
  z-index: 3;
}

.oasis-project__donut {
  position: relative;
  width: 100%;
  max-width: 320px;
  height: 100%;
  pointer-events: none;
}

/*
  ANTES: "bottom: 0" -- como a imagem do anel é mais baixa que a
  caixa de 108px reservada (essa altura existe para caber o texto
  de 3 linhas, não a imagem em si), ancorar ao FUNDO deixava um
  espaço vazio por CIMA do anel -- e como esta caixa fica no topo
  da secção, esse vazio aparecia como "espaço no início da secção".

  AGORA: "top: 0" -- o anel toca sempre o topo da secção,
  independentemente da altura da caixa à volta.

  IMPORTANTE: o tamanho é controlado pela ALTURA (95px fixos), não
  pela largura -- isto garante que o anel NUNCA ultrapassa a altura
  da caixa de 108px e "invade" o espaço da foto por baixo (o que
  causava a foto aparecer por cima do anel). A largura ajusta-se
  sozinha à proporção da imagem.
*/
.oasis-project__donut-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: 160px;
  max-width: 100%;
  object-fit: contain;
  z-index: 1;
}

/*
  O texto deixa de depender do "align-items:flex-end" do pai (que
  já não faz sentido, agora que o anel está ancorado ao topo) --
  fica com a sua própria posição absoluta, sempre perto do fundo
  da caixa (perto da foto), independentemente de onde o anel
  termina.
*/
.oasis-project__donut-text {
  position: absolute;
  left: 50%;
  /*
   * O anel agora tem 95px de altura fixa (não preenche os 108px
   * da caixa toda) -- "bottom: 15px" põe o texto a terminar perto
   * do fundo do anel (95px), não do fundo da caixa (108px), onde
   * ficaria fora da parte azul e invisível (branco sobre branco).
   */
  top:52%;
  transform: translateX(-50%);
  z-index: 2;
  width: 7vw;
  color: var(--oasis-white);
  font-size: clamp(0.52rem, 0.68vw, 0.68rem);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.oasis-project__photo {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--oasis-bg);
  border-radius: var(--oasis-radius-lg);
  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
  margin-top:20vh;
}

.oasis-project__photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}

.oasis-project:hover .oasis-project__photo-img {
  transform: scale(1.05); /* Efeito dinâmico subtil na hover state */
}

@media (max-width: 960px) {
  .oasis-projects__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 70px 28px;
  }
}

@media (max-width: 600px) {
  .oasis-project { padding-top: 90px; }
  .oasis-project__header { height: 90px; }
  .oasis-project__donut { max-width: 170px; }
  .oasis-project__donut-text { width: 92%; font-size: 0.5rem; }
  .oasis-projects__grid { gap: 58px 18px; }
}

/* =========================================================
   Bolinhas decorativas por baixo da grelha -- SVG real
   ========================================================= */
.oasis-projects__dots {
  display: block;
  width: 100%;
  max-width: var(--oasis-container, 1200px);
  height: auto;
}

@media (max-width: 600px) {
  .oasis-projects__dots {
    margin-top: 20px;
  }
}