/* =========================================================================
   Etéra Work — Section 2: /o projeto
   Figma: node 6321:448 (artboards 1366 e 360)
   ========================================================================= */

.projeto {
  position: relative;
  padding-block: 64px;
  background-color: var(--gray-100);
  overflow: hidden;
}

.projeto__inner {
  display: flex;
  flex-direction: column;
  gap: 64px;
  justify-content: center;
}

/* -------------------------------------------------------------------------
   Vídeo
   ------------------------------------------------------------------------- */

.projeto__video {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.projeto__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96px;
  height: 96px;
  transform: translate(-50%, -50%);
  transition: transform 200ms ease;
}

.projeto__video:hover .projeto__play {
  transform: translate(-50%, -50%) scale(1.06);
}

/* -------------------------------------------------------------------------
   Conteúdo
   ------------------------------------------------------------------------- */

.projeto__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  width: 100%;
}

.projeto__eyebrow {
  color: var(--gray-500);
  text-transform: uppercase;
}

.projeto__heading {
  color: var(--gray-700);
  text-transform: uppercase;
}

.projeto__text {
  width: 100%;
  color: var(--gray-500);
}

.projeto__text p + p {
  margin-top: 16px;
}

/* -------------------------------------------------------------------------
   Grafismo — só no artboard de 1366
   Dois elementos de hachura recortados pela borda direita da seção.
   ------------------------------------------------------------------------- */

.projeto__grafismo {
  display: none;
}

/* =========================================================================
   LG — Notebook (min-width: 1366px)
   ========================================================================= */

@media (min-width: 1366px) {
  .projeto__inner {
    flex-direction: row;
    gap: 5.714%; /* 64px sobre o container de 1120px */
    align-items: center;
    justify-content: flex-start;
  }

  .projeto__video {
    flex-shrink: 0;
    width: 48.571%; /* 544px sobre o container de 1120px */
  }

  .projeto__content {
    flex-shrink: 0;
    width: 40%; /* 448px sobre o container de 1120px */
  }

  .projeto__grafismo {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 123px;
    height: 491px;
    overflow: hidden;
    pointer-events: none;
  }

  .projeto__grafismo::before,
  .projeto__grafismo::after {
    content: "";
    position: absolute;
    width: 278px;
    height: 67px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  /* Superior, em Brand/Secondary */
  .projeto__grafismo::before {
    top: 339px;
    left: 82px;
    background-image: url("../../svg/svg-element-2.svg");
  }

  /* Inferior, em Brand/Primary + Tint 1 */
  .projeto__grafismo::after {
    top: 424px;
    left: 0;
    background-image: url("../../svg/svg-element-1.svg");
  }
}