/* ==========================================================================
   O Projeto — Section 2 (Figma node 6317:705)
   Mobile-first — breakpoint em 1024px (Notebook)
   ========================================================================== */

.project {
  background-color: rgba(214, 211, 203, 0.8);
}

@media (min-width: 1024px) {
  .project {
    background-color: var(--gray-200);
  }
}

.project__inner {
  padding-block: 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 64px;
}

@media (min-width: 1024px) {
  .project__inner {
    flex-direction: row;
  }
}

/* esta seção usa 1120px como largura máxima também no XL — não cresce
   para 1440px como o .container padrão */
@media (min-width: 1440px) {
  .project__inner {
    max-width: var(--container-lg);
  }
}

/* --------------------------------------------------------------------------
   Vídeo (thumbnail + botão de play)
   -------------------------------------------------------------------------- */
.project__video {
  position: relative;
  width: 100%;
  aspect-ratio: 400 / 267;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .project__video {
    width: 544px;
    flex-shrink: 0;
  }
}

.project__video picture,
.project__video img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Conteúdo (eyebrow + título + texto)
   -------------------------------------------------------------------------- */
.project__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

@media (min-width: 1024px) {
  .project__content {
    flex: 1 1 0;
    min-width: 0;
  }
}

.project__eyebrow {
  margin: 0;
  font-family: var(--font-family-02);
  font-weight: var(--font-weight-regular);
  font-size: 14px;
  line-height: var(--line-height-default);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gray-500);
}

.project__title {
  margin: 0;
  font-family: var(--font-family-01);
  font-weight: var(--font-weight-light);
  font-size: var(--h2-font-size);
  line-height: var(--line-height-md);
  letter-spacing: var(--letter-spacing-lg);
  text-transform: uppercase;
  color: var(--gray-700);
}

@media (min-width: 1024px) {
  .project__title {
    max-width: 448px;
  }
}

.project__text {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.project__text p {
  margin: 0 0 16px;
  font-family: var(--font-family-01);
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-sm);
  line-height: 1.8;
  color: var(--gray-500);
}

.project__text p:last-child {
  margin-bottom: 0;
}