/**
 * Estilos da lista M&A
 * Featured (home) e listing cards (listings)
 */

/* --- Featured (home) --- */
.h-featured-row {
  aspect-ratio: 4 / 2;
}

.featured-row {
  display: flex;
  flex-direction: column; /* Layout vertical em mobile */
  gap: var(--space-4);
  padding: var(--space-6) 0;
  border-bottom: 0.0625rem solid var(--color-secundary-700);
  transform: translateZ(0); /* Acelera a renderização com GPU */
  will-change: transform; /* Otimiza animações de scroll */
}

/* Tablet and up - Layout em grid horizontal */
@media (min-width: 40rem) {
  .featured-row {
    display: grid;
    /* 1: imagem, 2: texto, 3: Gross, 4: Target, 5: Details */
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: var(--space-xl);
    align-items: center;
    padding: var(--space-2xl) 0;
  }
}

/* Desktop and up */
@media (min-width: 64rem) {
  .featured-row {
    gap: var(--space-3xl);
    padding: var(--space-3xl) 0;
  }
}

.featured-row:last-child {
  border-bottom: none;
}

.featured-header {
  display: none; /* Oculto em mobile */
}

/* Tablet and up */
@media (min-width: 40rem) {
  .featured-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: var(--space-xl);
    align-items: center;
    text-align: left;
  }
}

/* --- Listings page: mesma estrutura que Featured, cores invertidas (fundo claro) --- */
.listings-container {
  display: flex;
  flex-direction: column;
  content-visibility: auto; /* Melhora o desempenho de renderização */
}

/* Bordas das linhas em fundo claro */
.listings-container .featured-row {
  border-bottom-color: var(--color-neutral-200);
}

/* Texto e métricas legíveis em fundo claro */
.listings-container .featured-row .text-neutral-0 {
  color: var(--color-secundary-800);
}

.listings-container .featured-row .text-neutral-300 {
  color: var(--color-neutral-500);
}

.listings-container .featured-row .listing-metric-value {
  color: var(--color-secundary-800);
}

/* Header da tabela na listings page (fundo claro) */
.listings-header {
  border-bottom-color: var(--color-neutral-200);
}

.listings-header .listing-table-header {
  color: var(--color-secundary-700);
}

/* Toolbar de listings (categorias e filtros) */
.listings-toolbar {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: var(--space-6); /* Gap entre categorias e filtros no mobile */
}

@media (min-width: 40rem) {
  .listings-toolbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
  }
  
  .listings-toolbar > div:last-child {
    margin-left: auto;
    flex-shrink: 0;
  }
}

/* Mobile: filtros (All Types, All Countries, All Prices) um abaixo do outro */
@media (max-width: 39.9375rem) {
  .listings-toolbar > div:last-child {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    gap: var(--space-3);
  }
  .listings-toolbar > div:last-child .filter-dropdown {
    width: 100%;
  }
  .listings-toolbar > div:last-child .filter-dropdown button {
    width: 100%;
    justify-content: space-between;
  }
}

/* Dropdowns de filtro na listings */
.filter-dropdown {
  position: relative;
}

.filter-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--space-1);
  background-color: var(--color-neutral-0);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-neutral-200);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
  min-width: 100%;
  z-index: 20;
  padding: var(--space-1);
  display: none;
}

.filter-menu.is-open {
  display: block;
}

.filter-option {
  display: block;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  background: none;
  text-align: left;
  font-size: var(--font-size-sm);
  font-family: var(--font-family-body);
  color: var(--color-neutral-700);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.filter-option:hover {
  background-color: var(--color-neutral-50);
}

/* Tipografia para métricas (Gross Revenue / Target Price) */
.listing-metric-label {
  font-family: var(--text-caption-primary-font);
  font-size: var(--text-caption-primary-size);
  font-weight: var(--text-caption-primary-weight);
  line-height: var(--text-caption-primary-height);
  letter-spacing: var(--text-caption-primary-tracking);
  color: var(--color-secundary-700);
}

.listing-metric-value {
  font-family: var(--text-heading-small-font);
  font-size: var(--text-heading-small-size);
  font-weight: var(--text-heading-small-weight);
  line-height: var(--text-heading-small-height);
  letter-spacing: var(--text-heading-small-tracking);
  color: var(--color-neutral-0);
}

/* Cabeçalhos da tabela (desktop) */
.listing-table-header {
  font-family: var(--text-caption-primary-font);
  font-size: var(--text-caption-primary-size);
  font-weight: var(--text-caption-primary-weight);
  line-height: var(--text-caption-primary-height);
  letter-spacing: var(--text-caption-primary-tracking);
  color: var(--color-secundary-700);
}

/* Título e subtítulo dos itens da lista */
.listing-title {
  font-family: var(--text-heading-medium-font);
  font-size: var(--text-heading-medium-size);
  font-weight: var(--text-heading-medium-weight);
  line-height: var(--text-heading-medium-height);
  letter-spacing: var(--text-heading-medium-tracking);
  color: var(--color-neutral-0);
  margin: 0;
}

.listing-title a {
  color: inherit;
  text-decoration: none;
}

.listing-subtitle {
  font-family: var(--text-body-small-font);
  font-size: var(--text-body-small-size);
  font-weight: var(--text-body-small-weight);
  line-height: var(--text-body-small-height);
  letter-spacing: var(--text-body-small-tracking);
  color: var(--color-neutral-300);
  margin: 0;
}

/* Ajustes para fundo claro (listings page) */
.listings-container .featured-row .listing-title {
  color: var(--color-secundary-800);
}

.listings-container .featured-row .listing-subtitle {
  color: var(--color-neutral-500);
}

/* Featured row - Layout mobile */
@media (max-width: 39.9375rem) {
  .featured-row {
    gap: var(--space-4);
  }
  
  .featured-row > div:first-child {
    width: 100%;
    height: 12rem;
    margin-bottom: var(--space-4);
  }
  
  .featured-row .listing-title {
    margin-bottom: var(--space-2);
  }
  
  .featured-row .listing-subtitle {
    margin-bottom: var(--space-4);
  }
  
  .featured-row > div:not(:first-child) {
    margin-bottom: var(--space-2);
  }

  /* Gross Revenue e Target Price: label à esquerda, valor à direita (em linhas) */
  .featured-row > div:nth-child(3),
  .featured-row > div:nth-child(4) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
  }
  .featured-row > div:nth-child(3)::before {
    content: "Gross Revenue";
    font-family: var(--text-caption-primary-font);
    font-size: var(--text-caption-primary-size);
    font-weight: var(--text-caption-primary-weight);
    color: var(--color-secundary-700);
  }
  .listings-container .featured-row > div:nth-child(3)::before {
    color: var(--color-secundary-700);
  }
  .featured-row > div:nth-child(4)::before {
    content: "Target Price";
    font-family: var(--text-caption-primary-font);
    font-size: var(--text-caption-primary-size);
    font-weight: var(--text-caption-primary-weight);
    color: var(--color-secundary-700);
  }
  .listings-container .featured-row > div:nth-child(4)::before {
    color: var(--color-secundary-700);
  }

  /* Botão See more: 100% de largura e centralizado */
  .featured-row > div:last-child {
    margin-top: var(--space-4);
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .featured-row > div:last-child a {
    width: 100%;
    max-width: 100%;
    text-align: center;
    justify-content: center;
  }
}