/**
 *
 * Bloco "Leia mais" (carrossel de materias dentro do texto do post).
 * handler: pp-read-more
 * deps: pp-layout, pp-news-card
 * version: 1.0.0
 *
 * O bloco vive dentro de .article-content, cujas regras estilizam todo a, img, p e h2/h3
 * descendente (link azul sublinhado, imagem com altura automatica e borda, margens de
 * paragrafo, titulos grandes). Elas tem especificidade maior que as do card
 * (.article-content img > .news-card__image), entao este arquivo devolve aos cards os
 * valores de news-card.css. Tambem desfaz a proporcao 760/333 que article-page.css aplica
 * a toda .news-card__media dentro de .article-page.
 *
 * @package theme-leia-mais
 *
 */

.article-content .read-more {
  margin: var(--space-7) 0;
  padding: var(--space-5) 0 var(--space-2);
  border-top: 1px solid var(--color-surface-muted);
  border-bottom: 1px solid var(--color-surface-muted);
  line-height: var(--line-base);
}

.article-content .read-more__title {
  margin: 0 0 var(--space-5);
  color: var(--color-heading-muted);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: var(--line-tight);
}

.article-content .read-more .news-card {
  gap: var(--space-3);
}

.article-content .read-more .news-card__media {
  aspect-ratio: 760 / 500;
}

.article-content .read-more .news-card__image {
  height: 100%;
  border-radius: 0;
}

.article-content .read-more a {
  color: var(--color-text);
  font-weight: inherit;
  text-decoration: none;
}

.article-content .read-more a.news-card__body:hover,
.article-content .read-more a.news-card__body:focus-visible {
  color: var(--color-accent);
}

.article-content .read-more .news-card__category {
  margin: 0 0 var(--space-1);
}

.article-content .read-more .news-card__title {
  margin: 0 0 var(--space-3);
  color: inherit;
  font-size: var(--text-md);
  font-weight: 500;
  line-height: var(--line-base);
}

.article-content .read-more .news-card__excerpt {
  margin: 0;
}

@media (max-width: 767px) {
  .article-content .read-more {
    margin: var(--space-6) 0;
  }

  .article-content .read-more__title {
    font-size: var(--text-lg);
  }
}