/**
 * Smart Fit - Cards de listagem de posts (rebranding)
 * -----------------------------------------------------------------------------
 * Depende de assets/css/brand.css (tokens).
 *
 * Componente usado por template-parts/loop_posts-horizontal.php, ou seja: home,
 * arquivo de categoria, busca e a lista do colunista.
 *
 * O QUE MUDOU E POR QUE
 * A listagem antiga nao tinha superficie: o card era branco sobre fundo branco,
 * de canto reto, encostado no card seguinte. O que se via era uma foto retangular
 * solta ao lado de um texto centralizado, e como a altura da foto vinha do texto,
 * cada card ficava de um tamanho. Somando a isso o texto centralizado e as duas
 * reguas amarelas ao redor da categoria, nada alinhava com nada.
 *
 * Agora:
 *   - o card e uma superficie de verdade (branco, borda suave, canto arredondado,
 *     sombra discreta) - da para ver onde um card termina e o outro comeca;
 *   - o texto e alinhado a esquerda, com uma unica coluna de alinhamento para
 *     categoria, titulo, resumo e link;
 *   - a categoria virou um rotulo pequeno com um traco amarelo curto na frente,
 *     no lugar das duas reguas que sobravam para fora do card;
 *   - o resumo e limitado a 3 linhas, entao cards de textos diferentes terminam
 *     na mesma altura;
 *   - a foto tem altura minima propria, entao nao encolhe quando o texto e curto.
 *
 * COMO O ARREDONDAMENTO FUNCIONA AQUI
 * A imagem do card nao e uma <img>: e background-image num <a class="thumbnail">
 * que ocupa metade do card. Arredondar so a imagem exigiria raio assimetrico
 * diferente para cada lado, e o lado alterna (a classe flex-md-row-reverse
 * inverte imagem e texto em cards alternados). Por isso o raio vai no card e o
 * overflow: hidden recorta a imagem junto - assim funciona igual nos dois
 * sentidos, sem CSS condicional.
 *
 * O ESPACO ENTRE OS CARDS
 * Home: margin-bottom no proprio card (empilhamento simples) e gap no conteiner
 * dos pares lado a lado (.sf-cards-par). Nao da para usar padding nas colunas
 * porque elas carregam o utilitario px-0 do Bootstrap, que e !important.
 * Arquivo/busca: os cards sao filhos de um .row, e ali quem manda e o gutter do
 * Bootstrap (--bs-gutter-y). Nesse caso a margem do card e zerada, senao ela
 * vazaria para fora da coluna (o card usa h-md-100) e os cards se encostariam.
 */

/* ------------------------------------------------------------------ Superficie */

.card-horizontal {
  /**
   * Altura minima da foto. Fica como variavel porque muda por contexto: no
   * mobile o card empilha e a foto pode ser mais baixa.
   */
  --sf-card-media-min: 210px;

  /**
   * Cinza do card em foco. Nao ha token equivalente no brand.css - o mais
   * proximo e --sf-gray-050 (#F6F6F6), que e outro valor - por isso o literal
   * fica aqui, em uma variavel local, e nao espalhado pelos estados.
   *
   * Era #BFBFBF, um cinza medio. Clareou para #F3F3F3 por pedido: o realce do
   * card em foco ficou mais discreto e o texto interno mantem o contraste que
   * tinha sobre o branco.
   */
  --sf-card-hover-bg: #F3F3F3;

  /**
   * Em repouso o card e so contorno - a referencia e a tabela de precos do site
   * institucional, onde os blocos sao delimitados por linha. O card nao tem
   * sombra nem crescimento em nenhum estado: o destaque em foco e so o cinza de
   * fundo.
   */
  border: 1px solid var(--sf-divider-on-light, rgba(0, 0, 0, 0.12));
  border-radius: var(--sf-radius-lg, 24px);
  /* Necessario para o raio recortar o background-image da metade da imagem. */
  overflow: hidden;
  background-color: var(--sf-white, #fff);
  margin-bottom: 16px;
  /**
   * So a cor faz transicao. O `transform` saiu junto com o zoom de hover - o card
   * nao muda de tamanho em nenhum estado.
   */
  transition: background-color var(--sf-transition, 0.2s ease);
}

/**
 * DESTAQUE DO CARD EM FOCO
 *
 * Cinza de fundo (--sf-card-hover-bg) e titulo preto sublinhado aparecem so na
 * interacao. Sao duas declaracoes iguais em contextos diferentes de ponteiro:
 *
 *   ponteiro fino (desktop) ... :hover
 *   toque (mobile) ............ :active enquanto o dedo esta no card e
 *                               :focus-within, que e o que sobra depois do toque,
 *                               porque o navegador foca o link tocado. Nao uso
 *                               :hover aqui: em touch ele fica "preso" no ultimo
 *                               card tocado.
 *
 * O CARD NAO CRESCE MAIS. Havia um transform: scale(1.015) aqui, removido por
 * pedido. O z-index: 2 saiu junto: ele existia so porque o card passava do
 * proprio espaco e precisava cobrir o vizinho, senao a borda do outro cortava o
 * crescimento. Sem o zoom, nao ha o que empilhar.
 */
@media (hover: hover) {
  .card-horizontal:hover {
    background-color: var(--sf-card-hover-bg, #F3F3F3);
  }

  /**
   * O titulo fica preto e ganha sublinhado no hover.
   *
   * Antes ele virava amarelo (#FFC409), que sobre o branco do card dava cerca de
   * 1,6:1 - muito abaixo do minimo de 4,5:1 da WCAG AA. A troca resolve isso: o
   * preto sobre o #F3F3F3 do card em hover da cerca de 19:1, e o sublinhado
   * passa a sinalizar o link sem depender de cor.
   */
  .card-horizontal:hover .sf-card__title a {
    color: var(--sf-black, #000);
    text-decoration: underline;
  }

  .card-horizontal:hover .sf-card__more::after {
    transform: translateX(4px);
  }
}

/**
 * Mesmo estado para toque, para o card responder igual nos dois contextos.
 */
@media (hover: none) {
  .card-horizontal:active,
  .card-horizontal:focus-within {
    background-color: var(--sf-card-hover-bg, #F3F3F3);
  }

  .card-horizontal:active .sf-card__title a,
  .card-horizontal:focus-within .sf-card__title a {
    color: var(--sf-black, #000);
    text-decoration: underline;
  }
}

/**
 * Quem pede menos movimento no sistema recebe o cinza de fundo, que e o sinal de
 * foco, sem deslocamento nenhum.
 *
 * Este bloco cuidava do zoom do card. Com o zoom removido, o unico movimento que
 * sobrou no componente e o deslize da seta do "Ver mais", e e ele que fica
 * neutralizado aqui. A troca de cor continua: um fade nao e movimento, e e o que
 * sinaliza o estado.
 */
@media (prefers-reduced-motion: reduce) {
  .card-horizontal:hover .sf-card__more::after {
    transform: none;
  }
}

/* Teclado: o card inteiro tem varios links, cada um precisa se anunciar. */
.card-horizontal a:focus-visible {
  outline: 3px solid var(--sf-yellow, #FFC409);
  outline-offset: -3px;
}

/* ----------------------------------------------------------------------- Foto */

.card-horizontal .sf-card__media {
  /**
   * .thumbnail (style.css) fixa height: 360px. Aqui a altura passa a vir do
   * proprio card - o item de flex estica junto com a coluna de texto - com um
   * piso para o caso de texto curto. E o que mantem os cards do mesmo tamanho.
   */
  height: auto;
  min-height: var(--sf-card-media-min);
  align-self: stretch;
  /* Post sem imagem cai num cinza da marca em vez de um vazio branco. */
  background-color: var(--sf-gray-200, #E6E6E6);
}

/* ------------------------------------------------------------ Coluna de texto */

.card-horizontal .sf-card__inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 20px;
}

.card-horizontal .sf-card__body {
  width: 100%;
  padding: 0;
  text-align: left;
}

/**
 * Rotulo da categoria.
 *
 * Antes eram duas reguas amarelas de 45px posicionadas a 60px de cada lado de um
 * texto centralizado (.card-category, em home.css). Elas eram maiores que o
 * proprio espaco disponivel na coluna e vazavam do card.
 *
 * O traco amarelo unico que ficou no lugar delas tambem saiu, por decisao de
 * produto: os travessoes amarelos - duplos e unicos - foram removidos de todo o
 * blog. Ficou so o rotulo, com o nome da categoria como esta cadastrado.
 *
 * A CAIXA ALTA VOLTOU, por pedido, e so aqui - no rotulo dentro do card. Ela
 * havia saido junto com os travessoes. Isso recoloca o rotulo no papel que o
 * proprio design reserva para ele: o token --sf-fs-overline esta anotado em
 * brand.css como "titulos de coluna, weight 700, uppercase", com
 * --sf-ls-overline: 0, ou seja sem espacamento extra entre letras.
 *
 * O rotulo do banner de categoria (.sf-cat-banner__eyebrow, em archive.css) NAO
 * mudou: o pedido fala dos blocos de post, e o banner nao e um deles.
 */
.sf-card__eyebrow {
  display: flex;
  align-items: center;
  margin: 0 0 10px;
  font-family: var(--sf-font-brand, sans-serif);
  font-size: var(--sf-fs-overline, 0.75rem);
  font-weight: var(--sf-fw-bold, 700);
  text-transform: uppercase;
  letter-spacing: var(--sf-ls-overline, 0);
  color: var(--sf-black, #000);
}

/**
 * Variante de contorno: o "Destaque" dos cards da categoria.
 *
 * E o par da tag da hero (.sf-hero__tag, em home.css), que usa contorno branco
 * por viver sobre foto. Aqui o card e branco, entao o contorno e preto.
 *
 * A pilula vai no <span> interno, e nao no <p>: o <p> e um flex de largura
 * inteira, e a borda nele esticaria a moldura por toda a coluna de texto em vez
 * de abracar a palavra.
 *
 * Aplicada por 'eyebrow_outline' => true em template-parts/loop_posts-horizontal.php.
 * Sem o modificador o rotulo segue texto solto - e o que mantem os nomes de
 * categoria (home) e o "Mais lidas" sem moldura.
 */
.sf-card__eyebrow--outline span {
  padding: 6px 14px;
  border: 1px solid var(--sf-black, #000);
  border-radius: var(--sf-radius-pill, 999px);
}

/**
 * Titulo e resumo em no maximo 2 linhas cada, com reticencias quando vaza.
 *
 * Era 3 linhas. Passou a 2 para acompanhar o componente de blog do site
 * institucional, que e a referencia de produto. As reticencias sao do proprio
 * line-clamp, o navegador as coloca no fim da ultima linha visivel.
 */
/**
 * A FONTE DO TITULO DO CARD E A DE DISPLAY, E ISSO E UMA EXCECAO
 *
 * brand.css registra a regra lida do Figma: "texto corrido, titulo de post e
 * conteudo editorial ficam na DM Sans", sendo a Smart Fit Muscle Display para
 * elementos de interface. O titulo do card passou para a display por pedido, com
 * a excecao consciente.
 *
 * Vale saber: a Muscle Display ocupa mais altura que a DM Sans no mesmo corpo (na
 * pagina de trilhas medimos 22px de altura de letra contra 14px). O titulo do card
 * portanto parece maior sem o font-size ter mudado. A fonte tem so 400 e 700, e
 * aqui usamos 700, entao nao ha peso sintetizado.
 *
 * O titulo do post aberto (single.php) NAO mudou - o pedido fala dos cards.
 */
.card-horizontal .sf-card__title {
  margin: 0 0 10px;
  font-family: var(--sf-font-display, sans-serif);
  font-size: 1.125rem;
  font-weight: var(--sf-fw-bold, 700);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-horizontal .sf-card__title a {
  color: var(--sf-black, #000);
  text-decoration: none;
}

/**
 * Linha de tempo de leitura e data de atualizacao.
 *
 * Fica entre o titulo e o resumo, na posicao classica de assinatura de post.
 *
 * O cinza --sf-gray-700 (#707070) sobre branco da 4,95:1, acima do minimo de
 * 4,5:1 da WCAG AA - importa porque o corpo aqui e de 12px.
 *
 * flex-wrap com gap nos dois eixos: em card estreito (o par lado a lado da home,
 * que tem metade da largura) os dois itens quebram em duas linhas em vez de
 * transbordar.
 */
.sf-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  margin: 0 0 10px;
  font-family: var(--sf-font-brand, sans-serif);
  font-size: var(--sf-fs-caption, 0.75rem);
  font-weight: var(--sf-fw-regular, 400);
  line-height: 1.4;
  color: var(--sf-gray-700, #707070);
}

.sf-card__meta-item {
  display: inline-flex;
  align-items: center;
}

/**
 * Ponto separador entre os itens, desenhado no segundo em diante.
 *
 * Vai no ::before e nao como caractere na marcacao para nao ser lido por leitor de
 * tela nem sobrar solto quando o tempo de leitura nao existir (plugin desativado).
 */
.sf-card__meta-item + .sf-card__meta-item::before {
  content: "";
  width: 3px;
  height: 3px;
  margin-right: 10px;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0.6;
}

/**
 * O plugin de tempo de leitura envolve o numero em spans proprios e imprime um
 * span de rotulo vazio quando nao se passa label. Sem isto sobra um espaco antes
 * do numero.
 */
.sf-card__meta .rt-reading-time {
  display: inline;
}

.sf-card__meta .rt-label:empty {
  display: none;
}

.card-horizontal .sf-card__excerpt {
  margin: 0 0 14px;
  font-family: var(--sf-font-brand, sans-serif);
  font-size: 0.875rem;
  line-height: 1.5;
}

.card-horizontal .sf-card__excerpt a {
  /* archive.css forca color: #000 !important em .card-excerpt a. */
  color: rgba(0, 0, 0, 0.7) !important;
  text-decoration: none;
}

/**
 * Limite de 2 linhas no resumo, mesmo padrao do titulo.
 *
 * the_excerpt() imprime um <p>, e o clamp precisa ir no elemento que tem o texto.
 * E o que faz cards de resumos longos e curtos terminarem na mesma altura.
 */
.card-horizontal .sf-card__excerpt p {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/**
 * Chamada final. O "[VER MAIS]" entre colchetes saiu; a seta e um SVG inline no
 * background, para nao depender do Font Awesome nem de markup extra.
 */
.sf-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sf-font-brand, sans-serif);
  font-size: 0.875rem;
  font-weight: var(--sf-fw-bold, 700);
  color: var(--sf-black, #000);
  text-decoration: none;
}

.sf-card__more::after {
  content: "";
  width: 15px;
  height: 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform var(--sf-transition, 0.2s ease);
}

/* -------------------------------------------------- Pares lado a lado da home */

/**
 * Conteiner dos pares (.vertical_thumb e o par de "Recentes").
 *
 * O gap cria o vao; e as colunas passam a dividir o espaco restante em vez de
 * valerem 50% fixos, senao 50% + 50% + gap estouraria a linha.
 */
.sf-cards-par {
  gap: 16px;
}

/**
 * Nos pares a coluna de texto tem metade da largura do card, entao o respiro
 * lateral precisa ser menor para o titulo nao quebrar em cascata.
 */
.card-horizontal.vertical_thumb {
  --sf-card-media-min: 240px;
}

.card-horizontal.vertical_thumb .sf-card__inner {
  padding: 16px;
}

.card-horizontal.vertical_thumb .sf-card__title {
  font-size: 1rem;
}

/* ------------------------------------------------------- Arquivo e busca (row) */

/**
 * Aqui os cards vivem dentro de .row > .col-md-6 e usam h-md-100 para ficarem
 * todos da altura da linha. Com h-md-100 a margem do card vaza para fora da
 * coluna e invade a linha seguinte, entao o espaco vertical passa a ser gutter
 * do proprio .row.
 */
.grid-posts-archive {
  --bs-gutter-y: 16px;
}

.grid-posts-archive .card-horizontal {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------- Desktop */

@media (min-width: 768px) {
  .card-horizontal {
    --sf-card-media-min: 280px;
    margin-bottom: 24px;
  }

  .card-horizontal .sf-card__inner {
    padding: 28px 32px;
  }

  .card-horizontal .sf-card__title {
    font-size: 1.375rem;
  }

  .card-horizontal .sf-card__excerpt {
    font-size: 0.9375rem;
  }

  .card-horizontal.vertical_thumb {
    --sf-card-media-min: 260px;
  }

  .card-horizontal.vertical_thumb .sf-card__inner {
    padding: 20px 24px;
  }

  .card-horizontal.vertical_thumb .sf-card__title {
    font-size: 1.125rem;
  }

  .sf-cards-par {
    gap: 24px;
  }

  .sf-cards-par > .col-md-6 {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }

  .grid-posts-archive {
    --bs-gutter-y: 24px;
  }
}

/* -------------------------------------------------------------------- Mobile */

@media (max-width: 767.98px) {
  /**
   * Empilhado, a foto vira uma faixa no topo. Sem o piso de altura ela seguiria
   * a altura do texto e ficaria uma tira fina.
   */
  .card-horizontal:not(.vertical_thumb) .sf-card__media {
    min-height: 200px;
  }

  /**
   * Os pares continuam lado a lado no mobile (col-6 + col-6), ou seja: metade de
   * uma tela de 390px para o texto. Titulo e resumo precisam encolher, senao
   * quebram em uma palavra por linha.
   */
  .card-horizontal.vertical_thumb {
    --sf-card-media-min: 180px;
  }

  .card-horizontal.vertical_thumb .sf-card__inner {
    padding: 14px 12px;
  }

  .card-horizontal.vertical_thumb .sf-card__title {
    font-size: 0.9375rem;
  }

  .card-horizontal.vertical_thumb .sf-card__excerpt {
    font-size: 0.8125rem;
  }
}