/* ═══════════════════════════════════════════════════
   EMPREENDIMENTOS EM DESTAQUE
   Figma 47:1559 · bg-light · flex-col gap-96px
   px: 150px (var(--gutter)) · py: 175px
   ═══════════════════════════════════════════════════ */


/* ── Seção outer ── */
#empreendimentos {
  background-color: var(--c-light);
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 5vw, 96px);
  padding: clamp(80px, 9.11vw, 175px) var(--gutter);
}


/* ── Header: badge + título (esquerda) · descrição (direita) ──
   Figma: flex items-end justify-between                         */
.emp__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(32px, 4vw, 80px);
  width: 100%;
}

.emp__title-group {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.08vw, 40px);
  align-items: flex-start;
  flex-shrink: 0;
}

/* Badge — variante light (bg rgba(85,85,85,0.1), texto escuro) */
.emp__badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 6px;
  background: rgba(85, 85, 85, 0.10);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}

.emp__badge-dot {
  width:  8.6px;
  height: 8.6px;
  border-radius: 50%;
  background: var(--c-red);
  flex-shrink: 0;
}

.emp__badge-text {
  font-family: var(--f-mono);
  font-size: clamp(11px, 0.94vw, 18px);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--c-dark);
  white-space: nowrap;
}

/* Título: 88px · leading 1.15 · tracking -0.05em */
.emp__title {
  font-family: var(--f-sans);
  font-size: clamp(40px, 4.58vw, 88px);
  font-weight: var(--fw-regular);
  line-height: 1.15;
  letter-spacing: -0.05em;
  color: var(--c-dark);
}

.emp__title-line {
  display: block;
}

/* Descrição à direita — max-width 642px @ 1920px */
.emp__header-desc {
  font-family: var(--f-sans);
  font-size: clamp(16px, 1.25vw, 24px);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: rgba(27, 27, 27, 0.80);
  max-width: clamp(300px, 33.46vw, 642px);
  align-self: flex-end;
}


/* ── Filtros ──
   3 tabs · flex-[1_0_0] (largura igual) · py-24 px-20
   Ativo: bg vermelho · Inativo: borda vermelha         */
.emp__filters {
  display: flex;
  gap: 16px;
  width: 100%;
}

.emp__filter {
  flex: 1 0 0;
  min-width: 1px;
  padding: 24px 20px;
  border-radius: 12px;
  font-family: var(--f-mono);
  font-size: clamp(12px, 1.04vw, 20px);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background    var(--dur-base) var(--ease),
    color         var(--dur-base) var(--ease),
    border-color  var(--dur-base) var(--ease);
}

.emp__filter--active {
  background:   var(--c-red);
  color:        rgba(244, 245, 247, 0.80);
  border:       1px solid var(--c-red);
}

.emp__filter:not(.emp__filter--active) {
  background:   transparent;
  color:        rgba(27, 27, 27, 0.80);
  border:       1px solid var(--c-red);
}

.emp__filter:not(.emp__filter--active):hover {
  background: rgba(221, 49, 52, 0.06);
}


/* ── Bloco principal: lista + painel ── */
.emp__main {
  display: flex;
  gap: clamp(40px, 5.42vw, 104px);
  align-items: stretch;
  width: 100%;
}


/* ── Lista de projetos ── */
.emp__list {
  flex: 1 0 0;
  min-width: 0;
}


/* ── Card de projeto ──
   border-top · py-56px · flex items-center justify-between
   Último card ganha border-bottom também (Figma)           */
.emp__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(24px, 2.92vw, 56px) 0;
  border-top: 1px solid rgba(85, 85, 85, 0.30);
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease);
}

.emp__card:last-of-type {
  border-bottom: 1px solid rgba(85, 85, 85, 0.30);
}

.emp__card--hidden {
  display: none;
}

/* Info: número + detalhes */
.emp__card-info {
  display: flex;
  align-items: center;
  gap: 32px;
}

.emp__card-number {
  font-family: var(--f-mono);
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: var(--c-gray);
  min-width: 66px;
  flex-shrink: 0;
}

/* gap Figma = 24px entre text-boxes trimmed (cap→baseline).
   Em CSS, line-height adiciona ~14px extra entre os glifos
   visíveis → gap CSS ≈ 4px para equivaler o visual do Figma. */
.emp__card-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Nome do projeto: 40px · leading 1.15 · tracking -0.05em */
.emp__card-name {
  font-family: var(--f-sans);
  font-size: clamp(22px, 2.08vw, 40px);
  font-weight: var(--fw-regular);
  line-height: 1.15;
  letter-spacing: -0.05em;
  color: var(--c-dark);
  transition: color var(--dur-base) var(--ease);
}

.emp__card:hover .emp__card-name {
  color: var(--c-red);
}

.emp__card-location {
  font-family: var(--f-sans);
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: -0.03em;
  color: rgba(27, 27, 27, 0.80);
}


/* ── Badge de status ── */
.emp__status {
  font-family: var(--f-mono);
  font-size: clamp(11px, 0.94vw, 18px);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  padding: clamp(12px, 1.04vw, 20px);
  border-radius: 12px;
  flex-shrink: 0;
  opacity: 0.80;
}

/* Em andamento: borda cinza, texto escuro */
.emp__status--andamento {
  border: 1px solid var(--c-gray);
  color: var(--c-dark);
}

/* Entregue: fundo vermelho, texto claro */
.emp__status--entregue {
  background: var(--c-red);
  color:      var(--c-light);
  border:     1px solid var(--c-red);
}


/* ── Painel de imagem (direita) ──
   align-self:stretch + height:100% → acompanha a altura
   da coluna de lista (determinada pelos cards visíveis).
   Sem background — a imagem preenche diretamente.          */
.emp__image-panel {
  display:     flex;
  flex-shrink: 0;
  align-self:  stretch;
  height:      auto;
  width:    clamp(280px, 40.625vw, 780px);
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

/* Stack de fotos para crossfade via opacity */
.emp__photo {
  position: absolute;
  inset:  0;
  width:  100%;
  height: 100%;
  object-fit:      cover;
  object-position: center;
  opacity:    0;
  transition: opacity 0.45s var(--ease);
  display: block;
}

.emp__photo--active {
  opacity: 1;
}


/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */

@media (max-width: 1280px) {
  .emp__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  .emp__header-desc {
    max-width: 100%;
    align-self: flex-start;
  }
}

@media (max-width: 1024px) {
  .emp__main {
    flex-direction: column;
    gap: 40px;
  }

  .emp__image-panel {
    width: 100%;
    height: clamp(300px, 50vw, 600px);
    order: -1; /* imagem acima da lista em tablet */
  }
}

@media (max-width: 768px) {
  .emp__filters {
    flex-direction: column;
    gap: 8px;
  }

  .emp__card-number {
    display: none;
  }

  .emp__card-location {
    font-size: 15px;
  }
}