/**
 * Smart Fit - Listagem das Trilhas de Conteúdo (rebranding)
 * -----------------------------------------------------------------------------
 * Depende de assets/css/brand.css (tokens) e reaproveita .sf-visually-hidden de
 * assets/css/header.css.
 *
 * Primeira passada, anterior ao Figma. A referencia e o mockup do slide 6 do
 * deck "Trilha de Conteúdo": marcador "TRILHAS" com traços amarelos, texto de
 * contextualização centralizado, e um card por trilha com capa à esquerda, selo
 * de contagem e a fila de conteúdos à direita.
 *
 * Escrito mobile-first. Quando o Figma chegar, este arquivo é o que muda.
 *
 * DECISOES QUE VALE REGISTRAR
 *   - A fila de conteúdos é um scroll horizontal com scroll-snap, sem
 *     JavaScript. Funciona com teclado e com gesto de toque, e não depende de
 *     biblioteca de carrossel. Os pontinhos de paginação do mockup dependem de
 *     definição de design.
 *   - O card inteiro não é um link: o alvo clicável é o botão "Começar a trilha"
 *     e cada conteúdo da fila. Card-como-link inteiro atrapalharia o acesso aos
 *     itens internos, que são links também.
 */

.sf-trilhas {
  background-color: var(--sf-white, #fff);
  color: var(--sf-black, #000);
  font-family: var(--sf-font-text, sans-serif);
  padding: 32px 0 56px;
}

.sf-trilhas__inner {
  width: 100%;
  max-width: var(--sf-container-max, 1280px);
  margin: 0 auto;
  padding: 0 24px;
}

/* ------------------------------------------------------------- Breadcrumb */

.sf-trilhas__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-size: var(--sf-fs-caption, 0.75rem);
  font-weight: var(--sf-fw-medium, 500);
  /* #707070 sobre branco = 4,95:1, passa a WCAG AA em texto de 12px. */
  color: var(--sf-gray-700, #707070);
}

.sf-trilhas__breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.sf-trilhas__breadcrumb a:hover,
.sf-trilhas__breadcrumb a:focus-visible {
  color: var(--sf-black, #000);
  text-decoration: underline;
}

/* -------------------------------------------------------------- Cabeçalho */

.sf-trilhas__cabecalho {
  margin-bottom: 40px;
  text-align: center;
}

/**
 * Título da página de trilhas.
 *
 * Tinha um traço amarelo de cada lado, feito com pseudo-elementos, e caixa alta.
 * Os dois saíram por decisão de produto: os travessões amarelos foram removidos
 * de todo o blog, e a orientação é não usar caixa alta nesses títulos. O texto
 * sai como está escrito na marcação ("Trilhas").
 *
 * O display: flex ficou para manter o alinhamento central do bloco.
 */
/**
 * Fonte, tamanho e peso acompanham o titulo das paginas de categoria
 * (.card-category e .card-category span, em assets/css/home.css): DM Sans,
 * 1.25rem em peso normal, e 0.8rem no mobile. Era Muscle Display, 1.5rem em 700.
 *
 * A fonte entra na conta: o titulo de categoria herda a DM Sans do corpo do site,
 * e a Muscle Display, sendo fonte de display, ocupa bem mais altura no mesmo
 * corpo. Igualar so o font-size deixava o titulo de trilhas visivelmente maior -
 * medi 22px de altura de letra contra 14px do titulo de categoria.
 *
 * Os valores estao repetidos aqui, e nao herdados, porque .card-category e uma
 * classe do tema antigo usada em outra marcacao. Se o titulo de categoria mudar,
 * este precisa mudar junto.
 */
.sf-trilhas__titulo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 16px;
  font-family: var(--sf-font-text, sans-serif);
  font-size: 1.25rem;
  font-weight: var(--sf-fw-regular, 400);
  line-height: 1.2;
}

@media (max-width: 480px) {
  .sf-trilhas__titulo {
    font-size: 0.8rem;
  }
}

.sf-trilhas__descricao {
  max-width: 56ch;
  margin: 0 auto;
  font-size: var(--sf-fs-body, 1rem);
  font-weight: var(--sf-fw-regular, 400);
  line-height: 1.5;
  color: var(--sf-gray-800, #1a1a1a);
}

/* ------------------------------------------------------- Estado vazio */

.sf-trilhas__vazio,
.sf-trilha-card__vazio {
  margin: 0;
  padding: 24px;
  border: 1px dashed var(--sf-divider-on-light, rgba(0, 0, 0, 0.12));
  border-radius: var(--sf-radius-md, 16px);
  font-size: var(--sf-fs-body, 1rem);
  text-align: center;
  color: var(--sf-gray-700, #707070);
}

/* ------------------------------------------------------- Lista de trilhas */

.sf-trilhas__lista {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sf-trilha-card {
  padding: 24px;
  border: 1px solid var(--sf-divider-on-light, rgba(0, 0, 0, 0.12));
  border-radius: var(--sf-radius-md, 16px);
  background-color: var(--sf-gray-050, #f6f6f6);
}

.sf-trilha-card__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.sf-trilha-card__titulo {
  margin: 0 0 6px;
  font-family: var(--sf-font-display, sans-serif);
  font-size: 1.125rem;
  font-weight: var(--sf-fw-bold, 700);
  line-height: 1.25;
}

.sf-trilha-card__descricao {
  max-width: 70ch;
  margin: 0;
  font-size: var(--sf-fs-body-sm, 0.875rem);
  line-height: 1.45;
  color: var(--sf-gray-800, #1a1a1a);
}

.sf-trilha-card__selo {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: var(--sf-radius-pill, 999px);
  background-color: var(--sf-yellow, #ffc409);
  font-size: var(--sf-fs-overline, 0.75rem);
  font-weight: var(--sf-fw-bold, 700);
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--sf-black, #000);
}

/* ------------------------------------------------------------------ Corpo */

.sf-trilha-card__corpo {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/**
 * A capa tem fundo cinza de proposito: se a imagem faltar (attachment removido,
 * ou ambiente local sem uploads) a area continua legivel como espaco reservado.
 *
 * Sem line-height: 0 aqui. Quando a imagem nao carrega, o navegador desenha o
 * texto alternativo dentro da caixa, e entrelinha zero faz as linhas se
 * sobreporem, virando um borrao ilegivel.
 */
.sf-trilha-card__capa {
  display: block;
  overflow: hidden;
  border-radius: var(--sf-radius-sm, 8px);
  background-color: var(--sf-gray-200, #e6e6e6);
}

.sf-trilha-card__capa img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  /* Estilo do texto alternativo, visivel apenas quando a imagem falha. */
  font-size: var(--sf-fs-caption, 0.75rem);
  line-height: 1.4;
  color: var(--sf-gray-700, #707070);
}

/**
 * Fila de conteúdos: rola na horizontal e para em cada card. Sem JavaScript.
 */
.sf-trilha-card__itens {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0 0 8px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.sf-trilha-item {
  flex: 0 0 auto;
  width: 160px;
  scroll-snap-align: start;
}

.sf-trilha-item__link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 16px;
  border: 1px solid var(--sf-divider-on-light, rgba(0, 0, 0, 0.12));
  border-radius: var(--sf-radius-sm, 8px);
  background-color: var(--sf-white, #fff);
  text-decoration: none;
  color: var(--sf-black, #000);
  transition: border-color var(--sf-transition, 0.2s ease),
    transform var(--sf-transition, 0.2s ease);
}

.sf-trilha-item__link:hover,
.sf-trilha-item__link:focus-visible {
  border-color: var(--sf-yellow, #ffc409);
  transform: translateY(-2px);
  color: var(--sf-black, #000);
}

/* Número do passo, o mesmo índice que a barra de progresso usa no artigo. */
.sf-trilha-item__passo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--sf-radius-sm, 8px);
  background-color: var(--sf-yellow, #ffc409);
  font-size: var(--sf-fs-caption, 0.75rem);
  font-weight: var(--sf-fw-bold, 700);
  color: var(--sf-black, #000);
}

/* Etiqueta de item externo: avisa que não é artigo do blog. */
.sf-trilha-item__rotulo {
  font-size: 0.625rem;
  font-weight: var(--sf-fw-bold, 700);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sf-gray-700, #707070);
}

.sf-trilha-item__titulo {
  font-size: var(--sf-fs-body-sm, 0.875rem);
  font-weight: var(--sf-fw-medium, 500);
  line-height: 1.35;
}

.sf-trilha-item--cta .sf-trilha-item__link {
  border-color: var(--sf-yellow, #ffc409);
  background-color: var(--sf-yellow, #ffc409);
}

/* ------------------------------------------------------------------ Ação */

.sf-trilha-card__acao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 20px;
  padding: 0 24px;
  border-radius: var(--sf-radius-pill, 999px);
  background-color: var(--sf-black, #000);
  font-family: var(--sf-font-display, sans-serif);
  font-size: var(--sf-fs-body-sm, 0.875rem);
  font-weight: var(--sf-fw-bold, 700);
  text-decoration: none;
  text-transform: uppercase;
  color: var(--sf-white, #fff);
  transition: background-color var(--sf-transition, 0.2s ease);
}

.sf-trilha-card__acao:hover,
.sf-trilha-card__acao:focus-visible {
  background-color: var(--sf-yellow, #ffc409);
  color: var(--sf-black, #000);
}

.sf-trilhas a:focus-visible,
.sf-trilhas button:focus-visible {
  outline: 2px solid var(--sf-black, #000);
  outline-offset: 2px;
}

/* ================================================================ Desktop */

@media (min-width: 768px) {
  .sf-trilhas {
    padding: 40px 0 80px;
  }

  .sf-trilhas__inner {
    padding: 0 var(--sf-container-gutter, 80px);
  }

  /**
   * O titulo nao cresce mais neste breakpoint. Havia um font-size: 2rem aqui, o
   * que deixava o titulo de trilhas em 32px no desktop enquanto o das categorias
   * fica em 20px em qualquer largura. Agora vale o tamanho da regra base.
   */

  .sf-trilha-card {
    padding: 32px;
  }

  .sf-trilha-card__titulo {
    font-size: 1.375rem;
  }

  /* Capa à esquerda ocupando um terço, fila de conteúdos à direita. */
  .sf-trilha-card__corpo {
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
  }

  .sf-trilha-card__capa {
    flex: 0 0 34%;
    max-width: 34%;
  }

  .sf-trilha-card__capa img {
    height: 100%;
    min-height: 200px;
  }

  .sf-trilha-card__itens {
    flex: 1 1 auto;
    min-width: 0;
  }

  .sf-trilha-item {
    width: 180px;
  }
}