/* ==========================================================================
   Lab 7 — Artigo de blog (single-blog): imagem destacada e texto.
   Desktop (a partir de 1024px): imagem nas colunas 1 a 5, texto nas colunas
   7 a 12, na largura de leitura, como no desenho atual. Telemóvel: imagem e
   texto empilhados. A imagem fica presa enquanto se lê o lead e o primeiro texto.
   Depois, os blocos do artigo, à largura da página: os de texto começam na coluna 1,
   por baixo da imagem.
   ========================================================================== */

/* Data do artigo por baixo do H1: 14px, como a data dos cartões */
.page-header__meta { margin: var(--space-3) 0 0; font-size: var(--text-body-md); line-height: var(--lh-body); color: var(--color-text-muted); }

.article { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-block); align-items: start; }
.page > .container > .page-header--entry + .article { margin-top: var(--space-block); }
.article__media { margin: 0; }
.article__media img { width: 100%; height: auto; }
.article__body { max-width: var(--measure); }
/* Lead: texto maior, como o texto de entrada das páginas */
.article .article__lead { margin: 0 0 var(--space-paragraph); font-size: var(--text-lead); line-height: var(--lh-body); }

@media (min-width: 64em) {
  .article { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  /* A imagem fica presa enquanto se lê o primeiro texto, como no site atual */
  .article__media { grid-column: 1 / span 5; align-self: start; position: sticky; top: calc(var(--header-offset, 0px) + var(--space-6)); transition: top var(--duration-motion) var(--ease); }
  .article__body { grid-column: 7 / span 6; }
}