/* ==========================================================================
   Component: Trilha Card (scroll horizontal na home)
   ========================================================================== */

.trilha-card {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 19.5rem; /* 312px */
  height: 29rem; /* 464px — cabe a linha de preço sem espremer a ilustração */
  background-color: #ffffff;
  border: 1px solid #E5E5E5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  /* Sombra sutil: como o card e a faixa da section são brancos, é ela que dá
     o recorte e a profundidade. */
  box-shadow:
    0 2px 4px -2px rgba(10, 10, 10, 0.06),
    0 14px 30px -18px rgba(10, 10, 10, 0.16);
  transition:
    background-color var(--duration-normal) var(--ease-default),
    border-color var(--duration-normal) var(--ease-default),
    box-shadow var(--duration-normal) var(--ease-default),
    transform var(--duration-normal) var(--ease-default);
}

@media (min-width: 1024px) {
  .track .trilha-card {
    width: 100%;
  }
}

@media (max-width: 1023px) {
  .track .trilha-card {
    width: 100%;
    height: auto;
    min-height: 0;
  }

  .track .trilha-card__cover {
    flex: none;
    height: min(18rem, 58vw);
  }
}

/* O preenchimento acende, o card sobe e a sombra aprofunda — contorno mantido. */
.trilha-card:hover {
  background-color: var(--color-panel);
  transform: translateY(-0.25rem);
  box-shadow:
    0 6px 12px -4px rgba(10, 10, 10, 0.08),
    0 22px 44px -20px rgba(10, 10, 10, 0.22);
}

/* --- Head (número + título + descrição) --- */

.trilha-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-6) var(--space-5);
}

/* Número à esquerda, formato encostado na margem oposta. */
.trilha-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.trilha-card__number {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  font-family: var(--font-ui);
  font-size: var(--text-p);
  color: var(--color-fg-subtle);
}

/* Em que formato a trilha existe. Preenchido, e não contornado como o
   número: é informação da trilha, não enumeração dela. */
.trilha-card__format {
  padding: 0.3125rem var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-small);
  font-weight: var(--font-medium);
  line-height: 1.4;
  white-space: nowrap;
  color: var(--color-fg-subtle);
  background-color: var(--color-panel);
  border-radius: var(--radius-full);
}

.trilha-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-h5);
  font-weight: var(--font-medium);
  line-height: var(--leading-snug);
  color: var(--color-fg);
}

/* Sempre duas linhas: a altura fixa segura o divisor na mesma altura em
   todos os cards, e o clamp impede que um texto maior empurre a ilustração.
   Os excerpts são escritos para caber — o reticente é a rede de segurança,
   não o normal. */
.trilha-card__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: calc(2 * var(--leading-relaxed) * var(--text-p));
  font-family: var(--font-ui);
  font-size: var(--text-p);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-subtle);
}

/* --- Preco (mesma linguagem do card de "Mais vendidos") --- */

.trilha-card__price-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.trilha-card__books,
.trilha-card__sep {
  font-family: var(--font-ui);
  font-size: var(--text-p); /* 14px */
  color: var(--color-fg-subtle);
}

/* o desconto abre um respiro maior que o par "livros - preco" */
.trilha-card__price-row .trilha-card__discount {
  margin-left: var(--space-1);
}

.trilha-card__price {
  font-family: var(--font-ui);
  font-size: var(--text-p); /* 14px */
  font-weight: var(--font-medium);
  color: var(--color-fg);
}

.trilha-card__discount {
  padding: var(--space-1) var(--space-2); /* 4px 8px */
  font-family: var(--font-ui);
  font-size: var(--text-small); /* 11.67px */
  font-weight: var(--font-medium);
  color: #0a0a0a;
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* --- Cover image --- */

/* A capa toma o que sobrar da altura fixa do card, em vez de ditá-la por
   proporção. min-height: 0 é obrigatório: sem ele o item de flex não encolhe
   abaixo do tamanho natural da imagem e o card estoura os 312px. */
.trilha-card__cover {
  display: block;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  /* mesmo filete do contorno do card: separa a leitura da ilustração */
  border-top: 1px solid #E5E5E5;
}

.trilha-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--duration-slow) var(--ease-out);
}

.trilha-card:hover .trilha-card__cover img {
  transform: scale(1.04);
}

.trilha-card__cover--placeholder {
  background: linear-gradient(135deg, var(--color-neutral-100), var(--color-neutral-200));
}